@onepercentio/one-ui 1.3.3 → 1.3.5

package/dist/components/EmailInput/EmailInput.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export declare function validateEmail(email: string): boolean;
+/**
+ * A Input based wrapper to handle inputs of email
+ **/
+/**
+ * An email input field that validates the email format and shows error messages when the email is invalid.
+ **/
+declare const EmailInput: React.ForwardRefExoticComponent<Omit<Omit<{
+    decoration?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null | undefined;
+    error?: string | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    hideError?: "onfocus" | undefined;
+    placeholder?: string | undefined;
+    disclaimer?: string | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    multiline?: number | undefined;
+    icon?: ({
+        onClick?: (() => void) | undefined;
+    } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
+    Icon?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    containerProps?: Omit<React.HTMLProps<HTMLDivElement>, "ref"> | undefined;
+    value?: string | undefined;
+    "data-testid"?: string | undefined;
+} & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "value" | "onChange"> & React.RefAttributes<any>, "value" | "onChange"> & {
+    onChange: (email: string, isValid: boolean) => void;
+    value: string;
+    messages: {
+        invalidEmail: string;
+    };
+}, "ref"> & React.RefAttributes<{
+    validateEmail: (email: string) => boolean;
+}>>;
+export default EmailInput;

package/dist/components/EmailInput/EmailInput.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateEmail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Input_1 = __importDefault(require("../Input"));
+function validateEmail(email) {
+    return /@.*\./.test(email);
+}
+exports.validateEmail = validateEmail;
+function _EmailInput(props, ref) {
+    const [localWarning, setLocalWarning] = (0, react_1.useState)(props.value ? !validateEmail(props.value) : false);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        validateEmail: validateEmail,
+    }));
+    function _handleInputChange(e) {
+        props.onChange(e.target.value, validateEmail(e.target.value));
+    }
+    return ((0, jsx_runtime_1.jsx)(Input_1.default, Object.assign({}, props, { error: localWarning ? props.messages.invalidEmail : props.error, onBlur: ({ target: { value } }) => {
+            setLocalWarning(!!value && !validateEmail(value));
+        }, onFocus: () => setLocalWarning(false), onChange: _handleInputChange })));
+}
+/**
+ * A Input based wrapper to handle inputs of email
+ **/
+/**
+ * An email input field that validates the email format and shows error messages when the email is invalid.
+ **/
+const EmailInput = (0, react_1.forwardRef)(_EmailInput);
+exports.default = EmailInput;
+//# sourceMappingURL=EmailInput.js.map

package/dist/components/EmailInput/EmailInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.js","sourceRoot":"","sources":["../../../src/components/EmailInput/EmailInput.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAMe;AACf,qDAA6B;AAE7B,SAAgB,aAAa,CAAC,KAAa;IACzC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC7B,CAAC;AAFD,sCAEC;AACD,SAAS,WAAW,CAClB,KAMC,EACD,GAEE;IAEF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAC9C,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAClD,CAAC;IACF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,aAAa,EAAE,aAAa;KAC7B,CAAC,CAAC,CAAC;IACJ,SAAS,kBAAkB,CAAC,CAAgC;QAC1D,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAChE,CAAC;IACD,OAAO,CACL,uBAAC,eAAK,oBACA,KAAK,IACT,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAC/D,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;YAChC,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;QACpD,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,kBAAkB,IAC5B,CACH,CAAC;AACJ,CAAC;AAED;;IAEI;AACJ;;IAEI;AACJ,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,WAAW,CAAC,CAAC;AAC3C,kBAAe,UAAU,CAAC"}

package/dist/components/EmailInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./EmailInput";
+export * from "./EmailInput";

package/dist/components/EmailInput/index.js

@@ -0,0 +1,24 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var EmailInput_1 = require("./EmailInput");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(EmailInput_1).default; } });
+__exportStar(require("./EmailInput"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/EmailInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmailInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,2CAAuC;AAA9B,sHAAA,OAAO,OAAA;AAChB,+CAA6B"}

package/dist/components/FadeIn/FadeIn.d.ts

@@ -0,0 +1,16 @@
+import React, { SyntheticEvent } from "react";
+/**
+ * This component wraps content to make it fade in when it appears and fade out when it disappears.
+ * It helps animations feel smoother and more natural.
+ **/
+declare const FadeIn: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    active?: boolean | undefined;
+    onClick?: ((e: SyntheticEvent<HTMLDivElement>) => void) | undefined;
+    onHidden?: (() => void) | undefined;
+    "data-testid"?: string | undefined;
+    style?: any;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default FadeIn;

package/dist/components/FadeIn/FadeIn.js

@@ -0,0 +1,58 @@
+"use strict";
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FadeIn_module_scss_1 = __importDefault(require("./FadeIn.module.scss"));
+function _FadeIn(_a, divRef) {
+    var { onHidden, children, className = "", active, onClick } = _a, props = __rest(_a, ["onHidden", "children", "className", "active", "onClick"]);
+    if (!divRef) {
+        divRef = (0, react_1.createRef)();
+    }
+    const [, trigger] = (0, react_1.useState)(0);
+    const prevChildren = (0, react_1.useRef)(undefined);
+    prevChildren.current = children || prevChildren.current;
+    (0, react_1.useEffect)(() => {
+        const el = divRef.current;
+        const isElHidden = active !== undefined ? !active : !children;
+        if (isElHidden) {
+            el.classList.remove(FadeIn_module_scss_1.default.active);
+            const handler = () => {
+                prevChildren.current = null;
+                trigger((a) => a + 1);
+                if (onHidden && !el.classList.contains(FadeIn_module_scss_1.default.active))
+                    onHidden();
+            };
+            el.addEventListener("transitionend", handler);
+            return () => {
+                el.removeEventListener("transitionend", handler);
+            };
+        }
+        else {
+            setTimeout(() => {
+                el.classList.add(FadeIn_module_scss_1.default.active);
+            }, 0);
+        }
+    }, [children, active]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: divRef, className: `${FadeIn_module_scss_1.default.container} ${className}`, onClick: onClick }, props, { children: prevChildren.current })));
+}
+/**
+ * This component wraps content to make it fade in when it appears and fade out when it disappears.
+ * It helps animations feel smoother and more natural.
+ **/
+const FadeIn = (0, react_1.forwardRef)(_FadeIn);
+exports.default = FadeIn;
+//# sourceMappingURL=FadeIn.js.map

package/dist/components/FadeIn/FadeIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FadeIn.js","sourceRoot":"","sources":["../../../src/components/FadeIn/FadeIn.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,iCAUe;AACf,8EAA0C;AAU1C,SAAS,OAAO,CACd,EAOc,EACd,MAAoC;QARpC,EACE,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,MAAM,EACN,OAAO,OAEK,EADT,KAAK,cANV,0DAOC,CADS;IAIV,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,GAAG,IAAA,iBAAS,GAAE,CAAC;IACvB,CAAC;IACD,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAkB,SAAS,CAAC,CAAC;IACxD,YAAY,CAAC,OAAO,GAAG,QAAQ,IAAI,YAAY,CAAC,OAAO,CAAC;IAExD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAI,MAAoC,CAAC,OAAQ,CAAC;QAC1D,MAAM,UAAU,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAE9D,IAAI,UAAU,EAAE,CAAC;YACf,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,4BAAM,CAAC,MAAM,CAAC,CAAC;YACnC,MAAM,OAAO,GAAG,GAAG,EAAE;gBACnB,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC5B,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBACtB,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,4BAAM,CAAC,MAAM,CAAC;oBAAE,QAAQ,EAAE,CAAC;YACpE,CAAC,CAAC;YACF,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC9C,OAAO,GAAG,EAAE;gBACV,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YACnD,CAAC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,GAAG,EAAE;gBACd,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,4BAAM,CAAC,MAAM,CAAC,CAAC;YAClC,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACvB,OAAO,CACL,8CACE,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,GAAG,4BAAM,CAAC,SAAS,IAAI,SAAS,EAAE,EAC7C,OAAO,EAAE,OAAO,IACZ,KAAK,cAER,YAAY,CAAC,OAAO,IACjB,CACP,CAAC;AACJ,CAAC;AAED;;;IAGI;AACJ,MAAM,MAAM,GAAG,IAAA,kBAAU,EAA8B,OAAO,CAAC,CAAC;AAChE,kBAAe,MAAM,CAAC"}

package/dist/components/FadeIn/FadeIn.module.scss

@@ -0,0 +1,9 @@
+@use "../../assets/styles/index.scss" as *;
+
+.container {
+  opacity: 0;
+  transition: opacity $normal;
+  &.active {
+    opacity: 1;
+  }
+}

package/dist/components/FadeIn/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./FadeIn";
+export * from "./FadeIn";

package/dist/components/FadeIn/index.js

@@ -0,0 +1,24 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var FadeIn_1 = require("./FadeIn");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FadeIn_1).default; } });
+__exportStar(require("./FadeIn"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/FadeIn/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FadeIn/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,mCAAmC;AAA1B,kHAAA,OAAO,OAAA;AAChB,2CAAyB"}

package/dist/components/FileInput/FileInput.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactElement } from "react";
+export type FileInputProps = {
+    states: {
+        waitingFile: {
+            /** The reason why this file is being requested */
+            title: string | ReactElement;
+            /** Shown below the title */
+            description?: string;
+            /** The label to show on the button */
+            button?: string;
+        };
+        fileProvided: {
+            /** Text show when the file has been provided */
+            title: string | ReactElement;
+            /** Shown below the title */
+            description?: string;
+            /** Shown on the button to remove the file */
+            button?: string;
+        };
+    };
+    footer: string;
+    file?: File;
+    onFile: (file: File | undefined) => void;
+    progress?: number;
+    disabled?: boolean;
+} & React.HTMLProps<HTMLInputElement>;
+/**
+ * A component to provide the upload of a file
+ **/
+declare function FileInput({ onFile, ...props }: FileInputProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A simple file uploader that lets users select and upload files from their device.
+ */
+export default FileInput;

package/dist/components/FileInput/FileInput.js

@@ -0,0 +1,46 @@
+"use strict";
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
+/**
+ * A component to provide the upload of a file
+ **/
+function FileInput(_a) {
+    var { onFile } = _a, props = __rest(_a, ["onFile"]);
+    const View = (0, OneUIProvider_1.useOneUIView)("component.fileInput.View", "FileInput");
+    const inputRef = (0, react_1.useRef)(null);
+    const onFileSelected = (0, react_1.useCallback)(((e) => {
+        const file = e.target.files.item(0);
+        onFile(file || undefined);
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(View, Object.assign({}, props, { onAction: () => {
+            if (props.file) {
+                inputRef.current.value = "";
+                onFile(undefined);
+            }
+            else {
+                inputRef.current.click();
+            }
+        }, inputEl: (0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { ref: inputRef, onChange: onFileSelected, type: "file", className: FileInput_module_scss_1.default.hidden })) })));
+}
+/**
+ * A simple file uploader that lets users select and upload files from their device.
+ */
+exports.default = FileInput;
+//# sourceMappingURL=FileInput.js.map

package/dist/components/FileInput/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/FileInput/FileInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,iCAKe;AACf,+DAA2D;AAC3D,oFAA6C;AA4B7C;;IAEI;AACJ,SAAS,SAAS,CAAC,EAAoC;QAApC,EAAE,MAAM,OAA4B,EAAvB,KAAK,cAAlB,UAAoB,CAAF;IACnC,MAAM,IAAI,GAAG,IAAA,4BAAY,EAAC,0BAA0B,EAAE,WAAW,CAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,CAAC,CAAC,CAAC,EAAE,EAAE;QACL,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC;IAC5B,CAAC,CAAyC,EAC1C,EAAE,CACH,CAAC;IAEF,OAAO,CACL,uBAAC,IAAI,oBACC,KAAK,IACT,QAAQ,EAAE,GAAG,EAAE;YACb,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;gBACf,QAAQ,CAAC,OAAQ,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC7B,MAAM,CAAC,SAAS,CAAC,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,QAAQ,CAAC,OAAQ,CAAC,KAAK,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC,EACD,OAAO,EACL,kDACM,KAAK,IACT,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,+BAAM,CAAC,MAAM,IACxB,IAEJ,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,kBAAe,SAAS,CAAC"}

package/dist/components/FileInput/FileInput.module.scss

@@ -0,0 +1,6 @@
+.hidden {
+  width: 0px;
+  height: 0px;
+  position: fixed;
+  opacity: 0.01;
+}

package/dist/components/FileInput/View/BigFactory/BigFactory.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { FileInputViewProps } from "../View.types";
+/**
+ * The file input layout with a big appearance
+ **/
+export default function BigFactory(IconComponent: () => ReactElement): ({ states: { fileProvided: { title: fileProvided, button: removeFile }, waitingFile: { button, title: reason }, }, file, footer, className, inputEl, onAction, }: FileInputViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FileInput/View/BigFactory/BigFactory.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BigFactory_module_scss_1 = __importDefault(require("./BigFactory.module.scss"));
+const Spacing_1 = __importDefault(require("../../../Spacing/Spacing"));
+const Text_1 = __importDefault(require("../../../Text/Text"));
+const Button_1 = __importDefault(require("../../../Button/Button"));
+const OneUIProvider_1 = require("../../../../context/OneUIProvider");
+/**
+ * The file input layout with a big appearance
+ **/
+function BigFactory(IconComponent) {
+    return function Big({ states: { fileProvided: { title: fileProvided, button: removeFile }, waitingFile: { button, title: reason }, }, file, footer, className, inputEl, onAction, }) {
+        const variant = (0, OneUIProvider_1.useOneUIConfig)("component.fileInput.button.variant");
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `${BigFactory_module_scss_1.default.container} ${className !== null && className !== void 0 ? className : ""}`, children: [(0, jsx_runtime_1.jsx)(IconComponent, {}), (0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "small" }), (0, jsx_runtime_1.jsx)(Text_1.default, { type: "description", children: file ? fileProvided : reason }), (0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "small" }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: variant, onClick: onAction, children: file ? removeFile : button }), inputEl, (0, jsx_runtime_1.jsx)(Text_1.default, { className: BigFactory_module_scss_1.default.footer, type: "caption", children: footer })] }));
+    };
+}
+exports.default = BigFactory;
+//# sourceMappingURL=BigFactory.js.map

package/dist/components/FileInput/View/BigFactory/BigFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BigFactory.js","sourceRoot":"","sources":["../../../../../src/components/FileInput/View/BigFactory/BigFactory.tsx"],"names":[],"mappings":";;;;;;AAMA,sFAA8C;AAE9C,uEAA+C;AAC/C,8DAAsC;AACtC,oEAA4C;AAC5C,qEAAmE;AAEnE;;IAEI;AACJ,SAAwB,UAAU,CAAC,aAAiC;IAClE,OAAO,SAAS,GAAG,CAAC,EAClB,MAAM,EAAE,EACN,YAAY,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,EACzD,WAAW,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GACvC,EACD,IAAI,EACJ,MAAM,EACN,SAAS,EACT,OAAO,EACP,QAAQ,GACW;QACnB,MAAM,OAAO,GAAG,IAAA,8BAAc,EAAC,oCAAoC,CAAC,CAAC;QACrE,OAAO,CACL,iCAAK,SAAS,EAAE,GAAG,gCAAM,CAAC,SAAS,IAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EAAE,aACtD,uBAAC,aAAa,KAAG,EACjB,uBAAC,iBAAO,IAAC,IAAI,EAAC,OAAO,GAAG,EACxB,uBAAC,cAAI,IAAC,IAAI,EAAC,aAAa,YAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,GAAQ,EAC9D,uBAAC,iBAAO,IAAC,IAAI,EAAC,OAAO,GAAG,EACxB,uBAAC,gBAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,YACxC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,GACpB,EACR,OAAO,EAER,uBAAC,cAAI,IAAC,SAAS,EAAE,gCAAM,CAAC,MAAM,EAAE,IAAI,EAAC,SAAS,YAC3C,MAAM,GACF,IACH,CACP,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AA9BD,6BA8BC"}

package/dist/components/FileInput/View/BigFactory/BigFactory.module.scss

@@ -0,0 +1,20 @@
+@use "../../../../assets/styles/index.scss" as *;
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: $fileInputBackgroundColor;
+  padding: 72px;
+  border: 1px solid;
+  border-color: $fileInputBorderColor;
+  position: relative;
+  margin-bottom: 28px;
+}
+
+.footer {
+  position: absolute;
+  bottom: -24px;
+  left: 0px;
+}

package/dist/components/FileInput/View/BigFactory/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./BigFactory";
+export * from "./BigFactory";

package/dist/components/FileInput/View/BigFactory/index.js

@@ -0,0 +1,24 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var BigFactory_1 = require("./BigFactory");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BigFactory_1).default; } });
+__exportStar(require("./BigFactory"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/FileInput/View/BigFactory/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FileInput/View/BigFactory/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,2CAAuC;AAA9B,sHAAA,OAAO,OAAA;AAChB,+CAA6B"}

package/dist/components/FileInput/View/Compact/Compact.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren, ReactElement, ReactNode } from "react";
+import { FileInputViewProps } from "../View.types";
+/**
+ * Shows the file submission input in a more compact form
+ **/
+declare function Compact({ states, file, footer, inputEl, onAction, progress, className, disabled, }: FileInputViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressIndicator({ progress, file, defaultIcon, Wrapper, }: Pick<FileInputViewProps, "progress" | "file"> & {
+    defaultIcon?: ReactElement;
+    Wrapper?: (p: PropsWithChildren<any>) => ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export default Compact;

package/dist/components/FileInput/View/Compact/Compact.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Compact_module_scss_1 = __importDefault(require("./Compact.module.scss"));
+const UncontrolledTransition_1 = __importDefault(require("../../../UncontrolledTransition/UncontrolledTransition"));
+const Transition_1 = require("../../../Transition");
+const Button_1 = __importDefault(require("../../../Button/Button"));
+/**
+ * Shows the file submission input in a more compact form
+ **/
+function Compact({ states, file, footer, inputEl, onAction, progress, className, disabled, }) {
+    const state = states[file ? "fileProvided" : "waitingFile"];
+    const progressDashArray = (0, react_1.useMemo)(() => {
+        if (progress !== undefined) {
+            const strokePercent = (progress * 300) / 100;
+            return `${strokePercent}% ${300 - strokePercent}%`;
+        }
+    }, [progress]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${Compact_module_scss_1.default.root} ${className} ${disabled ? Compact_module_scss_1.default.disabled : ""}`, onClick: onAction, style: {
+            "--progress-stroke-dasharray": progressDashArray,
+        }, children: [(0, jsx_runtime_1.jsx)(ProgressIndicator, { file: file, progress: progress }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { children: state.title }), state.description && (0, jsx_runtime_1.jsx)("p", { children: state.description }), (0, jsx_runtime_1.jsx)("p", { children: footer })] }), inputEl] }));
+}
+function ProgressIndicator({ progress, file, defaultIcon, Wrapper = Button_1.default, }) {
+    const statusClass = progress !== undefined && progress < 100
+        ? "loading"
+        : file
+            ? "completed"
+            : "waiting";
+    const polylines = (0, react_1.useMemo)(() => {
+        switch (statusClass) {
+            case "completed":
+                return [
+                    "rotate(45, 23, 23.5)",
+                    "14 23.9, 23 23.9, 32 23.9",
+                    "23 14.8 23 33",
+                ];
+            case "loading":
+                return ["", "18 23.9, 23 18.8, 28 23.9", "23 18.8 23 29"];
+            default:
+                return ["", "18 23.9, 23 23.9, 28 23.9", "23 18.8 23 29"];
+        }
+    }, [statusClass]);
+    return ((0, jsx_runtime_1.jsx)(UncontrolledTransition_1.default, { transitionType: Transition_1.TransitionAnimationTypes.COIN_FLIP, className: Compact_module_scss_1.default.icon, children: (0, jsx_runtime_1.jsx)(Wrapper, { variant: "transparent", children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 46 47", className: Compact_module_scss_1.default[statusClass], fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "23", cy: "23.859", r: "22", style: { stroke: "var(--svg-color, #000)" }, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), statusClass === "completed" ? ((0, jsx_runtime_1.jsxs)("g", { transform: "translate(11, 11)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 4L12 14.01L9 11.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })) : (defaultIcon || ((0, jsx_runtime_1.jsxs)("g", { transform: polylines[0], children: [(0, jsx_runtime_1.jsx)("polyline", { points: polylines[1], strokeWidth: "2.8", style: { stroke: "var(--svg-color, #000)" }, "stroke-linecap": "round" }), (0, jsx_runtime_1.jsx)("polyline", { points: polylines[2], strokeWidth: "2.8", style: { stroke: "var(--svg-color, #000)" }, "stroke-linecap": "round" })] })))] }) }, `${Compact_module_scss_1.default.button} ${statusClass}`) }));
+}
+exports.ProgressIndicator = ProgressIndicator;
+exports.default = Compact;
+//# sourceMappingURL=Compact.js.map

package/dist/components/FileInput/View/Compact/Compact.js.map

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

package/dist/components/FileInput/View/Compact/Compact.module.scss

@@ -0,0 +1,68 @@
+@use "../../../../assets/styles/index.scss" as *;
+
+.root {
+  padding: 14px 22px;
+  background-color: $fileInputBackgroundColor;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .button {
+    margin-right: 24px;
+  }
+}
+
+.root,
+.icon {
+  &.disabled {
+    pointer-events: none;
+    cursor: initial;
+  }
+  .button {
+    padding: 0px;
+    min-width: initial;
+  }
+  > :first-child svg {
+    height: 46px;
+  }
+  > div {
+    p {
+      margin: 0px;
+    }
+    p:nth-child(1) {
+      font-weight: bold;
+      font-size: 14px;
+      font-family: $mainFontFamily;
+    }
+    p:nth-child(2) {
+      font-size: 12px;
+      font-family: $mainFontFamily;
+    }
+    p:nth-child(3) {
+      margin-top: 8px;
+      font-size: 16px;
+      font-family: $mainFontFamily;
+    }
+  }
+  svg {
+    --svg-color: #{$digitalBlue};
+    &.loading {
+      circle {
+        transition: stroke-dasharray 250ms ease-out;
+        stroke-dasharray: var(--progress-stroke-dasharray);
+      }
+    }
+    &.completed {
+      circle {
+        fill: var(--svg-color);
+      }
+      polyline {
+        stroke-width: 3;
+      }
+    }
+    &.waiting {
+      circle {
+        stroke-dasharray: 10%;
+      }
+    }
+  }
+}

package/dist/components/FileInput/View/Compact/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Compact";
+export * from "./Compact";

package/dist/components/FileInput/View/Compact/index.js

@@ -0,0 +1,24 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Compact_1 = require("./Compact");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Compact_1).default; } });
+__exportStar(require("./Compact"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/FileInput/View/Compact/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FileInput/View/Compact/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,qCAAoC;AAA3B,mHAAA,OAAO,OAAA;AAChB,4CAA0B"}

package/dist/components/FileInput/View/View.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { FileInputProps } from "../FileInput";
+export type FileInputViewProps = {
+    inputEl: ReactNode;
+    onAction: () => void;
+    /** A range from 0-100 to indicate some file upload progress */
+    progress?: number;
+} & Pick<FileInputProps, "states" | "file" | "footer" | "className" | "disabled">;

package/dist/components/FileInput/View/View.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=View.types.js.map

package/dist/components/FileInput/View/View.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.types.js","sourceRoot":"","sources":["../../../../src/components/FileInput/View/View.types.ts"],"names":[],"mappings":""}

package/dist/components/FileInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./FileInput";
+export * from "./FileInput";