@faststore/components 2.0.4-alpha.0 → 2.0.6-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.6-alpha.0](https://github.com/vtex/faststore/compare/v2.0.5-alpha.0...v2.0.6-alpha.0) (2022-12-08)
+
+
+### Features
+
+* Adds `Input` & `InputField` components  ([#1545](https://github.com/vtex/faststore/issues/1545)) ([f89ec49](https://github.com/vtex/faststore/commit/f89ec4930dbcc7179f0fac484e16b0981540b6df))
+
+
+
+## [2.0.5-alpha.0](https://github.com/vtex/faststore/compare/v2.0.4-alpha.0...v2.0.5-alpha.0) (2022-12-07)
+
+
+### Features
+
+* `Overlay` Component. ([#1544](https://github.com/vtex/faststore/issues/1544)) ([dad6872](https://github.com/vtex/faststore/commit/dad6872654faaa4411d1f5949e5beab609e2ca36))
+
+
+
 ## [2.0.4-alpha.0](https://github.com/vtex/faststore/compare/v2.0.3-alpha.0...v2.0.4-alpha.0) (2022-12-07)
 
 

package/dist/assets/XCircle.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const XCircle: FC;
+export default XCircle;

package/dist/assets/XCircle.js

@@ -0,0 +1,9 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const XCircle = () => (React.createElement("svg", { id: "XCircle", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 20, height: 20 },
+    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    React.createElement("circle", { cx: "128", cy: "128", r: "96", fill: "none", stroke: "currentColor", strokeMiterlimit: "10" }),
+    React.createElement("line", { x1: "160", y1: "96", x2: "96", y2: "160", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("line", { x1: "160", y1: "160", x2: "96", y2: "96", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default XCircle;
+//# sourceMappingURL=XCircle.js.map

package/dist/assets/XCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XCircle.js","sourceRoot":"","sources":["../../src/assets/XCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,OAAO,GAAO,GAAG,EAAE,CAAC,CACxB,6BACE,EAAE,EAAC,SAAS,EACZ,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,gBAAgB,EAAC,IAAI,GACb;IACV,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/assets/index.d.ts

@@ -1,2 +1,3 @@
 export { default as X } from './X';
 export { default as ShoppingCart } from './ShoppingCart';
+export { default as XCircle } from './XCircle';

package/dist/assets/index.js

@@ -1,3 +1,4 @@
 export { default as X } from './X';
 export { default as ShoppingCart } from './ShoppingCart';
+export { default as XCircle } from './XCircle';
 //# sourceMappingURL=index.js.map

package/dist/assets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/atoms/Input/Input.d.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes } from 'react';
+import React from 'react';
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/atoms/Input/Input.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const Input = forwardRef(function Input({ testId = 'fs-input', ...otherProps }, ref) {
+    return React.createElement("input", { ref: ref, "data-fs-input": true, "data-testid": testId, ...otherProps });
+});
+export default Input;
+//# sourceMappingURL=Input.js.map

package/dist/atoms/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/atoms/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,UAAU,EAAE,GAAG,UAAU,EAAE,EACtC,GAAG;IAEH,OAAO,+BAAO,GAAG,EAAE,GAAG,wCAA6B,MAAM,KAAM,UAAU,GAAI,CAAA;AAC/E,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/atoms/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Input';
+export type { InputProps } from './Input';

package/dist/atoms/Input/index.js

@@ -0,0 +1,2 @@
+export { default } from './Input';
+//# sourceMappingURL=index.js.map

package/dist/atoms/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA"}

package/dist/atoms/Overlay/Overlay.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const Overlay: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Overlay;

package/dist/atoms/Overlay/Overlay.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const Overlay = forwardRef(function Overlay({ testId = 'fs-overlay', ...otherProps }, ref) {
+    return (React.createElement("div", { role: "presentation", "data-fs-overlay": true, "data-testid": testId, ref: ref, ...otherProps }));
+});
+export default Overlay;
+//# sourceMappingURL=Overlay.js.map

package/dist/atoms/Overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../src/atoms/Overlay/Overlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,OAAO,GAAG,UAAU,CAAwB,SAAS,OAAO,CAChE,EAAE,MAAM,GAAG,YAAY,EAAE,GAAG,UAAU,EAAE,EACxC,GAAG;IAEH,OAAO,CACL,6BACE,IAAI,EAAC,cAAc,0CAEN,MAAM,EACnB,GAAG,EAAE,GAAG,KACJ,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/atoms/Overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Overlay';
+export type { Props as OverlayProps } from './Overlay';

package/dist/atoms/Overlay/index.js

@@ -0,0 +1,2 @@
+export { default } from './Overlay';
+//# sourceMappingURL=index.js.map

package/dist/atoms/Overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/index.d.ts

@@ -6,14 +6,20 @@ export { default as Checkbox } from './atoms/Checkbox';
 export type { CheckboxProps } from './atoms/Checkbox';
 export { default as Icon } from './atoms/Icon';
 export type { IconProps } from './atoms/Icon';
+export { default as Input } from './atoms/Input';
+export type { InputProps } from './atoms/Input';
 export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
+export { default as Overlay } from './atoms/Overlay';
+export type { OverlayProps } from './atoms/Overlay';
 export { default as Radio } from './atoms/Radio';
 export type { RadioProps } from './atoms/Radio';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
 export type { IconButtonProps } from './molecules/IconButton';
+export { default as InputField } from './molecules/InputField';
+export type { InputFieldProps } from './molecules/InputField';
 export { default as RadioField } from './molecules/RadioField';
 export type { RadioFieldProps } from './molecules/RadioField';
 export { default as Tag } from './molecules/Tag';

package/dist/index.js

@@ -3,11 +3,14 @@ export { default as Badge } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
 export { default as Checkbox } from './atoms/Checkbox';
 export { default as Icon } from './atoms/Icon';
+export { default as Input } from './atoms/Input';
 export { default as Label } from './atoms/Label';
+export { default as Overlay } from './atoms/Overlay';
 export { default as Radio } from './atoms/Radio';
 // Molecules
 export { default as CheckboxField } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
+export { default as InputField } from './molecules/InputField';
 export { default as RadioField } from './molecules/RadioField';
 export { default as Tag } from './molecules/Tag';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/molecules/InputField/InputField.d.ts

@@ -0,0 +1,55 @@
+import type { MutableRefObject } from 'react';
+import type { InputProps } from '../../index';
+declare type DefaultProps = {
+    /**
+     * ID to identify input and corresponding label.
+     */
+    id: string;
+    /**
+     * The text displayed to identify input text.
+     */
+    label: string;
+    /**
+     * The error message is displayed when an error occurs.
+     */
+    error?: string;
+    /**
+     * Component's ref.
+     */
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+    /**
+     * Specifies that the whole input component should be disabled.
+     */
+    disabled?: boolean;
+};
+declare type ActionableInputField = {
+    actionable?: never;
+    onSubmit?: never;
+    onClear?: never;
+    buttonActionText?: string;
+    displayClearButton?: never;
+} | {
+    /**
+     * Adds a Button to the component.
+     */
+    actionable: true;
+    /**
+     * Callback function when button is clicked. Required for actionable input.
+     */
+    onSubmit: () => void;
+    /**
+     * Callback function when clear button is clicked. Required for actionable input.
+     */
+    onClear: () => void;
+    /**
+     * The text displayed on the Button. Suggestion: maximum 9 characters.
+     */
+    buttonActionText?: string;
+    /**
+     * Boolean that controls the clear button.
+     */
+    displayClearButton?: boolean;
+};
+export declare type InputFieldProps = DefaultProps & Omit<InputProps, 'disabled' | 'onSubmit'> & ActionableInputField;
+declare const InputField: ({ id, label, type, error, displayClearButton, actionable, buttonActionText, onSubmit, onClear, placeholder, inputRef, disabled, value, ...otherProps }: InputFieldProps) => JSX.Element;
+export default InputField;

package/dist/molecules/InputField/InputField.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Input, Label, IconButton, Button } from '../../index';
+import { XCircle } from '../../assets';
+const InputField = ({ id, label, type = 'text', error, displayClearButton, actionable, buttonActionText = 'Apply', onSubmit, onClear, placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
+inputRef, disabled, value, ...otherProps }) => {
+    const shouldDisplayError = !disabled && error && error !== '';
+    const shouldDisplayButton = actionable && !disabled && value !== '';
+    return (React.createElement("div", { "data-fs-input-field": true, "data-fs-input-field-actionable": actionable, "data-fs-input-field-error": error && error !== '' },
+        React.createElement(Input, { id: id, type: type, value: value, ref: inputRef, disabled: disabled, placeholder: placeholder, ...otherProps }),
+        React.createElement(Label, { htmlFor: id }, label),
+        shouldDisplayButton &&
+            (displayClearButton || error ? (React.createElement(IconButton, { "data-fs-button-size": "small", "aria-label": "Clear Field", icon: React.createElement(XCircle, null), onClick: () => {
+                    onClear?.();
+                    inputRef?.current?.focus();
+                } })) : (React.createElement(Button, { variant: "tertiary", size: "small", onClick: onSubmit }, buttonActionText))),
+        shouldDisplayError && (React.createElement("span", { "data-fs-input-field-error-message": true }, error))));
+};
+export default InputField;
+//# sourceMappingURL=InputField.js.map

package/dist/molecules/InputField/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/molecules/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AA4DtC,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,MAAM,EACb,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,gBAAgB,GAAG,OAAO,EAC1B,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,GAAG,EAAE,iFAAiF;AACpG,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,UAAU,EACG,EAAE,EAAE;IACpB,MAAM,kBAAkB,GAAG,CAAC,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,EAAE,CAAA;IAC7D,MAAM,mBAAmB,GAAG,UAAU,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,EAAE,CAAA;IAEnE,OAAO,CACL,4FAEkC,UAAU,+BACf,KAAK,IAAI,KAAK,KAAK,EAAE;QAEhD,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,KACpB,UAAU,GACd;QACF,oBAAC,KAAK,IAAC,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS;QAElC,mBAAmB;YAClB,CAAC,kBAAkB,IAAI,KAAK,CAAC,CAAC,CAAC,CAC7B,oBAAC,UAAU,2BACW,OAAO,gBAChB,aAAa,EACxB,IAAI,EAAE,oBAAC,OAAO,OAAG,EACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,EAAE,CAAA;oBACX,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;gBAC5B,CAAC,GACD,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,IACtD,gBAAgB,CACV,CACV,CAAC;QACH,kBAAkB,IAAI,CACrB,2EAAyC,KAAK,CAAQ,CACvD,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/InputField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './InputField';
+export type { InputFieldProps } from './InputField';

package/dist/molecules/InputField/index.js

@@ -0,0 +1,2 @@
+export { default } from './InputField';
+//# sourceMappingURL=index.js.map

package/dist/molecules/InputField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/InputField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.4-alpha.0",
+  "version": "2.0.6-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -28,5 +28,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "e15f55dc806232292a13e286bf91fe527fcc3a32"
+  "gitHead": "ee9301dc7f42f9f5f6e8ccb5521078e8601fa728"
 }

package/src/assets/XCircle.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const XCircle: FC = () => (
+  <svg
+    id="XCircle"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={20}
+    height={20}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <circle
+      cx="128"
+      cy="128"
+      r="96"
+      fill="none"
+      stroke="currentColor"
+      strokeMiterlimit="10"
+    ></circle>
+    <line
+      x1="160"
+      y1="96"
+      x2="96"
+      y2="160"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+    <line
+      x1="160"
+      y1="160"
+      x2="96"
+      y2="96"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+  </svg>
+)
+
+export default XCircle

package/src/assets/index.ts

@@ -1,2 +1,3 @@
 export { default as X } from './X'
 export { default as ShoppingCart } from './ShoppingCart'
+export { default as XCircle } from './XCircle'

package/src/atoms/Input/Input.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+import type { InputHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { testId = 'fs-input', ...otherProps },
+  ref
+) {
+  return <input ref={ref} data-fs-input data-testid={testId} {...otherProps} />
+})
+
+export default Input

package/src/atoms/Input/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Input'
+export type { InputProps } from './Input'

package/src/atoms/Overlay/Overlay.tsx

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Overlay = forwardRef<HTMLDivElement, Props>(function Overlay(
+  { testId = 'fs-overlay', ...otherProps },
+  ref
+) {
+  return (
+    <div
+      role="presentation"
+      data-fs-overlay
+      data-testid={testId}
+      ref={ref}
+      {...otherProps}
+    />
+  )
+})
+
+export default Overlay

package/src/atoms/Overlay/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Overlay'
+export type { Props as OverlayProps } from './Overlay'

package/src/index.ts

@@ -7,8 +7,12 @@ export { default as Checkbox } from './atoms/Checkbox'
 export type { CheckboxProps } from './atoms/Checkbox'
 export { default as Icon } from './atoms/Icon'
 export type { IconProps } from './atoms/Icon'
+export { default as Input } from './atoms/Input'
+export type { InputProps } from './atoms/Input'
 export { default as Label } from './atoms/Label'
 export type { LabelProps } from './atoms/Label'
+export { default as Overlay } from './atoms/Overlay'
+export type { OverlayProps } from './atoms/Overlay'
 export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
 
@@ -17,6 +21,8 @@ export { default as CheckboxField } from './molecules/CheckboxField'
 export type { CheckboxFieldProps } from './molecules/CheckboxField'
 export { default as IconButton } from './molecules/IconButton'
 export type { IconButtonProps } from './molecules/IconButton'
+export { default as InputField } from './molecules/InputField'
+export type { InputFieldProps } from './molecules/InputField'
 export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
 export { default as Tag } from './molecules/Tag'

package/src/molecules/InputField/InputField.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import type { MutableRefObject } from 'react'
+
+import { Input, Label, IconButton, Button } from '../../index'
+import type { InputProps } from '../../index'
+import { XCircle } from '../../assets'
+
+type DefaultProps = {
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * The text displayed to identify input text.
+   */
+  label: string
+  /**
+   * The error message is displayed when an error occurs.
+   */
+  error?: string
+  /**
+   * Component's ref.
+   */
+  inputRef?: MutableRefObject<HTMLInputElement | null>
+  /**
+   * Specifies that the whole input component should be disabled.
+   */
+  disabled?: boolean
+}
+
+type ActionableInputField =
+  | {
+      actionable?: never
+      onSubmit?: never
+      onClear?: never
+      buttonActionText?: string
+      displayClearButton?: never
+    }
+  | {
+      /**
+       * Adds a Button to the component.
+       */
+      actionable: true
+      /**
+       * Callback function when button is clicked. Required for actionable input.
+       */
+      onSubmit: () => void
+      /**
+       * Callback function when clear button is clicked. Required for actionable input.
+       */
+      onClear: () => void
+      /**
+       * The text displayed on the Button. Suggestion: maximum 9 characters.
+       */
+      buttonActionText?: string
+      /**
+       * Boolean that controls the clear button.
+       */
+      displayClearButton?: boolean
+    }
+
+export type InputFieldProps = DefaultProps &
+  Omit<InputProps, 'disabled' | 'onSubmit'> &
+  ActionableInputField
+
+const InputField = ({
+  id,
+  label,
+  type = 'text',
+  error,
+  displayClearButton,
+  actionable,
+  buttonActionText = 'Apply',
+  onSubmit,
+  onClear,
+  placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
+  inputRef,
+  disabled,
+  value,
+  ...otherProps
+}: InputFieldProps) => {
+  const shouldDisplayError = !disabled && error && error !== ''
+  const shouldDisplayButton = actionable && !disabled && value !== ''
+
+  return (
+    <div
+      data-fs-input-field
+      data-fs-input-field-actionable={actionable}
+      data-fs-input-field-error={error && error !== ''}
+    >
+      <Input
+        id={id}
+        type={type}
+        value={value}
+        ref={inputRef}
+        disabled={disabled}
+        placeholder={placeholder}
+        {...otherProps}
+      />
+      <Label htmlFor={id}>{label}</Label>
+
+      {shouldDisplayButton &&
+        (displayClearButton || error ? (
+          <IconButton
+            data-fs-button-size="small"
+            aria-label="Clear Field"
+            icon={<XCircle />}
+            onClick={() => {
+              onClear?.()
+              inputRef?.current?.focus()
+            }}
+          />
+        ) : (
+          <Button variant="tertiary" size="small" onClick={onSubmit}>
+            {buttonActionText}
+          </Button>
+        ))}
+      {shouldDisplayError && (
+        <span data-fs-input-field-error-message>{error}</span>
+      )}
+    </div>
+  )
+}
+
+export default InputField

package/src/molecules/InputField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InputField'
+export type { InputFieldProps } from './InputField'