@faststore/ui 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/components/molecules/Modal/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
-import Overlay from '../../atoms/Overlay';
+import { Overlay } from '@faststore/components';
 import ModalContent from './ModalContent';
 /*
  * This component is based on @reach/dialog.
@@ -23,7 +23,7 @@ const Modal = ({ isOpen, children, onDismiss, testId = 'store-modal', ...otherPr
         onDismiss?.(event);
     };
     return isOpen
-        ? createPortal(React.createElement(Overlay, { "data-modal-overlay": true, onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown },
+        ? createPortal(React.createElement(Overlay, { onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown },
             React.createElement(ModalContent, Object.assign({}, otherProps, { testId: testId }), children)), document.body)
         : null;
 };

package/dist/components/molecules/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,OAAO,MAAM,qBAAqB,CAAA;AACzC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAyBzC;;;;GAIG;AAEH,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,aAAa,EACtB,GAAG,UAAU,EACiB,EAAE,EAAE;IAClC,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACpD,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,oBAAC,OAAO,gCAEN,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB;YAEhC,oBAAC,YAAY,oBAAK,UAAU,IAAE,MAAM,EAAE,MAAM,KACzC,QAAQ,CACI,CACP,EACV,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE/C,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAwBzC;;;;GAIG;AAEH,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,aAAa,EACtB,GAAG,UAAU,EACiB,EAAE,EAAE;IAClC,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACpD,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,oBAAC,OAAO,IACN,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB;YAEhC,oBAAC,YAAY,oBAAK,UAAU,IAAE,MAAM,EAAE,MAAM,KACzC,QAAQ,CACI,CACP,EACV,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/components/molecules/QuantitySelector/QuantitySelector.d.ts

@@ -1,7 +1,6 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
-import type { InputProps } from '../../atoms/Input';
-import type { IconButtonProps } from '../../../index';
+import type { IconButtonProps, InputProps } from '@faststore/components';
 export interface QuantitySelectorProps extends InputHTMLAttributes<HTMLDivElement> {
     /**
      * Sets the current value that should be displayed on the input at the center of the quantity selector.

package/dist/components/molecules/QuantitySelector/QuantitySelector.js

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
-import Input from '../../atoms/Input';
-import { IconButton } from '../../../index';
+import { IconButton, Input } from '@faststore/components';
 const QuantitySelector = forwardRef(function QuantitySelector({ quantity, testId = 'store-quantity-selector', leftButtonProps, inputProps, rightButtonProps, ...otherProps }, ref) {
     return (React.createElement("div", Object.assign({ "data-fs-quantity-selector": true, "data-testid": testId, ref: ref }, otherProps),
         React.createElement(IconButton, Object.assign({ "aria-controls": "quantity-selector-input", "aria-label": "Decrement Quantity", "data-quantity-selector-button": "left" }, leftButtonProps)),

package/dist/components/molecules/QuantitySelector/QuantitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/components/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,MAAM,mBAAmB,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAgC3C,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,MAAM,GAAG,yBAAyB,EAClC,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,GAAG,UAAU,EACS,EACxB,GAAG;IAEH,OAAO,CACL,6FAEe,MAAM,EACnB,GAAG,EAAE,GAAG,IACJ,UAAU;QAEd,oBAAC,UAAU,mCACK,yBAAyB,gBAC5B,oBAAoB,mCACD,MAAM,IAChC,eAAe,EACnB;QACF,oBAAC,KAAK,gCACO,UAAU,wCAErB,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,QAAQ,IACX,UAAU,EACd;QACF,oBAAC,UAAU,mCACK,yBAAyB,gBAC5B,oBAAoB,mCACD,OAAO,IACjC,gBAAgB,EACpB,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/components/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAgCzD,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,MAAM,GAAG,yBAAyB,EAClC,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,GAAG,UAAU,EACS,EACxB,GAAG;IAEH,OAAO,CACL,6FAEe,MAAM,EACnB,GAAG,EAAE,GAAG,IACJ,UAAU;QAEd,oBAAC,UAAU,mCACK,yBAAyB,gBAC5B,oBAAoB,mCACD,MAAM,IAChC,eAAe,EACnB;QACF,oBAAC,KAAK,gCACO,UAAU,wCAErB,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,QAAQ,IACX,UAAU,EACd;QACF,oBAAC,UAAU,mCACK,yBAAyB,gBAC5B,oBAAoB,mCACD,OAAO,IACjC,gBAAgB,EACpB,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/components/molecules/SearchInput/SearchInput.js

@@ -1,6 +1,5 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { Icon, Button } from '@faststore/components';
-import Input from '../../atoms/Input';
+import { Icon, Button, Input } from '@faststore/components';
 import Form from '../Form';
 const SearchIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
     React.createElement("circle", { cx: "11", cy: "11", r: "8" }),

package/dist/components/molecules/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,IAAI,MAAM,SAAS,CAAA;AAE1B,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO;IAEtB,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG;IAChC,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,GAAG,CAC1C,CACP,CAAA;AA6BD,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,IAAI,EACJ,YAAY,EAAE,SAAS,GAAG,QAAQ,EAClC,MAAM,GAAG,oBAAoB,EAC7B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAE7C,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,QAAQ,CAAC,OAAO,EAAE,KAAK,KAAK,EAAE,EAAE;YAClC,QAAQ,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,CAAA;SAClC;IACH,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,OAAO,oDAEC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,QAAQ;QAEb,oBAAC,KAAK,kBAAC,GAAG,EAAE,QAAQ,gBAAc,SAAS,IAAM,UAAU,EAAI;QAC/D,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,gBAAY,eAAe;YAC9C,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,IAAI,oBAAC,UAAU,OAAG,GAAI,CACpC,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAA;AAE1B,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO;IAEtB,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG;IAChC,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,GAAG,CAC1C,CACP,CAAA;AA6BD,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,IAAI,EACJ,YAAY,EAAE,SAAS,GAAG,QAAQ,EAClC,MAAM,GAAG,oBAAoB,EAC7B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAE7C,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,QAAQ,CAAC,OAAO,EAAE,KAAK,KAAK,EAAE,EAAE;YAClC,QAAQ,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,CAAA;SAClC;IACH,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,OAAO,oDAEC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,QAAQ;QAEb,oBAAC,KAAK,kBAAC,GAAG,EAAE,QAAQ,gBAAc,SAAS,IAAM,UAAU,EAAI;QAC/D,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,gBAAY,eAAe;YAC9C,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,IAAI,oBAAC,UAAU,OAAG,GAAI,CACpC,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/index.d.ts

@@ -1,16 +1,12 @@
 export * from '@faststore/components';
 export { default as Link } from './components/atoms/Link';
 export type { LinkProps } from './components/atoms/Link';
-export { default as Input } from './components/atoms/Input';
-export type { InputProps } from './components/atoms/Input';
 export { default as Popover } from './components/atoms/Popover';
 export type { PopoverProps } from './components/atoms/Popover';
 export { default as Price } from './components/atoms/Price';
 export type { PriceProps } from './components/atoms/Price';
 export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
-export { default as Overlay } from './components/atoms/Overlay';
-export type { OverlayProps } from './components/atoms/Overlay';
 export { default as Select } from './components/atoms/Select';
 export type { SelectProps } from './components/atoms/Select';
 export { default as Slider } from './components/atoms/Slider';

package/dist/index.js

@@ -1,11 +1,9 @@
 export * from '@faststore/components';
 // Atoms
 export { default as Link } from './components/atoms/Link';
-export { default as Input } from './components/atoms/Input';
 export { default as Popover } from './components/atoms/Popover';
 export { default as Price } from './components/atoms/Price';
 export { default as TextArea } from './components/atoms/TextArea';
-export { default as Overlay } from './components/atoms/Overlay';
 export { default as Select } from './components/atoms/Select';
 export { default as Slider } from './components/atoms/Slider';
 export { default as List } from './components/atoms/List';

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.4-alpha.0",
+  "version": "2.0.6-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@babel/core": "^7.19.6",
     "@faststore/shared": "^2.0.3-alpha.0",
-    "@faststore/styles": "^2.0.4-alpha.0",
+    "@faststore/styles": "^2.0.6-alpha.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.13",
     "@storybook/addon-actions": "^6.5.13",
@@ -78,5 +78,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "e15f55dc806232292a13e286bf91fe527fcc3a32"
+  "gitHead": "ee9301dc7f42f9f5f6e8ccb5521078e8601fa728"
 }

package/src/components/atoms/Input/Input.stories.mdx

@@ -0,0 +1,34 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { Input } from '@faststore/components'
+
+<Meta title="Atoms/Input" component={Input} argTypes={{}} />
+
+export const Template = ({ args }) => <Input {...args} />
+
+<header>
+
+# Input
+
+Inputs are text fields used to get user inputs. // Update this!!!!!
+
+</header>
+
+## Overview
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+---
+
+## Usage
+
+```jsx
+import { Input } from '@faststore/ui'
+
+// Styles
+import @faststore/ui/src/components/atoms/Input/styles.scss
+```
+
+<ArgsTable story="default" />

package/src/components/atoms/Input/styles.scss

@@ -0,0 +1,61 @@
+[data-fs-input] {
+  // --------------------------------------------------------
+  // Design Tokens for Input
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-input-padding                     : var(--fs-spacing-1) var(--fs-spacing-2);
+  --fs-input-height                      : var(--fs-control-tap-size);
+
+  --fs-input-box-shadow                  : none;
+  --fs-input-box-shadow-hover            : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
+
+  --fs-input-border-radius               : var(--fs-border-radius);
+  --fs-input-border-width                : var(--fs-border-width);
+  --fs-input-border-color                : var(--fs-border-color);
+  --fs-input-border-color-hover          : var(--fs-border-color-active);
+
+  --fs-input-text-color                  : var(--fs-color-text);
+  --fs-input-text-size                   : var(--fs-text-size-body);
+
+  --fs-input-line-height                 : 1.25;
+
+  --fs-input-transition-function         : var(--fs-transition-function);
+  --fs-input-transition-property         : var(--fs-transition-property);
+  --fs-input-transition-timing           : var(--fs-transition-timing);
+
+  // Disabled properties
+  --fs-input-disabled-bkg-color          : var(--fs-color-disabled-bkg);
+  --fs-input-disabled-text-color         : var(--fs-color-disabled-text);
+  --fs-input-disabled-border-width       : var(--fs-border-width);
+  --fs-input-disabled-border-color       : var(--fs-border-color);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: 100%;
+  height: var(--fs-input-height);
+  padding: var(--fs-input-padding);
+  font-size: var(--fs-input-text-size);
+  line-height: var(--fs-input-line-height);
+  color: var(--fs-input-text-color);
+  border: var(--fs-input-border-width) solid var(--fs-input-border-color);
+  border-radius: var(--fs-input-border-radius);
+  box-shadow: var(--fs-input-box-shadow);
+  transition: var(--fs-input-transition-property) var(--fs-input-transition-timing) var(--fs-input-transition-function);
+
+  @include input-focus-ring;
+
+  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+    border-color: var(--fs-input-border-color-hover);
+    box-shadow: var(--fs-input-box-shadow-hover);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--fs-input-disabled-text-color);
+    background-color: var(--fs-input-disabled-bkg-color);
+    border: var(--fs-input-disabled-border-width) solid var(--fs-input-disabled-border-color);
+  }
+}

package/src/components/atoms/Overlay/styles.scss

@@ -0,0 +1,14 @@
+[data-fs-overlay] {
+  // --------------------------------------------------------
+  // Design Tokens for Overlay
+  // --------------------------------------------------------
+  --fs-overlay-bkg-color: rgb(0 0 0 / 20%);
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--fs-z-index-highest);
+  background-color: var(--fs-overlay-bkg-color);
+}

package/src/components/atoms/Popover/stories/Popover.stories.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react'
 import type { Story } from '@storybook/react'
 
 import Component from '../Popover'
-import Input from '../../Input'
+import { Input } from '@faststore/components'
 import type { PopoverProps } from '../Popover'
 import mdx from './Popover.mdx'
 import type { ComponentArgTypes } from '../../../../typings/utils'

package/src/components/molecules/Alert/stories/Alert.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import type { AlertProps } from '../Alert'
 import Component from '../Alert'
-import { ShoppingCart } from '../../../../assets'
+import { ShoppingCart } from '@faststore/components/src/assets'
 import mdx from './Alert.mdx'
 import { Icon } from '../../../../'
 

package/src/components/molecules/IconButton/IconButton.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
 import { IconButton } from '@faststore/components'
-import { ShoppingCart } from '../../../assets'
+import { ShoppingCart } from '@faststore/components/src/assets'
 
 <Meta
   title="Molecules/IconButton"

package/src/components/molecules/InputField/InputField.stories.mdx

@@ -0,0 +1,116 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { InputField } from '@faststore/components'
+
+<Meta
+  title="Molecules/InputField"
+  component={InputField}
+  argTypes={{
+    actionable: {
+      type: { name: 'boolean' },
+    },
+    disabled: {
+      type: { name: 'boolean' },
+    },
+    id: {
+      type: { name: 'string', required: true },
+    },
+    inputRef: {
+      control: { disable: true },
+    },
+  }}
+/>
+
+export const Template = (args) => {
+  return <InputField {...args} />
+}
+
+<header>
+
+# Input Field
+
+Input Field are text fields used to get user inputs.
+
+</header>
+
+## Overview
+
+The `InputField` component uses [FastStore UI Input](https://www.faststore.dev/reference/ui/atoms/Input) as base.
+
+<Canvas>
+  <Story
+    name="overview-default"
+    args={{
+      id: 'overview-default',
+      label: 'Label',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-error"
+    args={{
+      id: 'overview-error',
+      label: 'Input w/ Error Message',
+      error: 'Error Message',
+      disabled: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-actionable"
+    args={{
+      id: 'overview-actionable',
+      label: 'Input w/ Action',
+      actionable: true,
+      disabled: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-actionable-error"
+    args={{
+      id: 'overview-actionable-error',
+      label: 'Input w/ Action and Error',
+      actionable: true,
+      error: 'Error Message',
+      disabled: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-disabled"
+    args={{
+      id: 'overview-disabled',
+      label: 'Input Disabled',
+      actionable: false,
+      disabled: true,
+      value: 'Input Text',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import InputField from '../components/ui/InputField'`
+
+<Canvas>
+  <Story
+    name="input-default"
+    args={{
+      id: 'input-default',
+      label: 'Label',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="input-default" />

package/src/components/molecules/InputField/styles.scss

@@ -0,0 +1,139 @@
+[data-fs-input-field] {
+  // --------------------------------------------------------
+  // Design Tokens for Input Field
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-input-field-padding                     : var(--fs-spacing-2) var(--fs-spacing-2) 0;
+  --fs-input-field-color                       : var(--fs-color-text);
+  --fs-input-field-size                        : var(--fs-text-size-body);
+  --fs-input-field-border-color                : var(--fs-border-color);
+
+  --fs-input-field-transition-function         : var(--fs-transition-function);
+  --fs-input-field-transition-property         : var(--fs-transition-property);
+  --fs-input-field-transition-timing           : var(--fs-transition-timing);
+
+  // Label
+  --fs-input-field-label-padding               : 0 var(--fs-spacing-2);
+  --fs-input-field-label-color                 : var(--fs-color-text-light);
+  --fs-input-field-label-size                  : var(--fs-text-size-tiny);
+
+  // Error
+  --fs-input-field-error-message-size          : var(--fs-text-size-legend);
+  --fs-input-field-error-message-line-height   : 1.1;
+  --fs-input-field-error-message-margin-top    : var(--fs-spacing-0);
+  --fs-input-field-error-message-color         : var(--fs-color-danger-text);
+  --fs-input-field-error-border-color          : var(--fs-color-danger-border);
+  --fs-input-field-error-box-shadow            : 0 0 0 var(--fs-border-width) var(--fs-input-field-error-border-color);
+  --fs-input-field-error-focus-ring            : var(--fs-color-focus-ring-danger);
+
+  // Disabled
+  --fs-input-field-disabled-bkg-color          : var(--fs-color-disabled-bkg);
+  --fs-input-field-disabled-text-color         : var(--fs-color-disabled-text);
+  --fs-input-field-disabled-border-width       : var(--fs-border-width);
+  --fs-input-field-disabled-border-color       : var(--fs-border-color);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  flex-flow: column;
+
+  input,
+  label {
+    transition: var(--fs-input-field-transition-property) var(--fs-input-field-transition-timing) var(--fs-input-field-transition-function);
+  }
+
+  input {
+    padding: var(--fs-input-field-padding);
+    color: var(--fs-input-field-color);
+
+    &:placeholder-shown + label {
+      top: calc(1.5 * (var(--fs-input-field-size) / 2));
+      overflow: hidden;
+    }
+
+    &::placeholder {
+      opacity: 0;
+      transition: inherit;
+    }
+
+    &:focus::placeholder {
+      opacity: 1;
+    }
+
+    &:not(:placeholder-shown) + label,
+    &:focus + label {
+      top: rem(6px);
+      font-size: var(--fs-input-field-label-size);
+    }
+
+    &:disabled + label {
+      cursor: not-allowed;
+    }
+  }
+
+  label {
+    position: absolute;
+    padding: var(--fs-input-field-label-padding);
+    font-size: var(--fs-input-field-size);
+    line-height: 1.5;
+    color: var(--fs-input-field-label-color);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-input-field-error="true"] {
+    input {
+      border-color: var(--fs-input-field-error-border-color);
+
+      @include input-focus-ring($outline: #{var(--fs-input-field-error-focus-ring)},
+      $border: #{var(--fs-input-field-error-border-color)});
+
+      &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+        border-color: var(--fs-input-field-error-border-color);
+        box-shadow: var(--fs-input-field-error-box-shadow);
+      }
+    }
+
+    [data-fs-input-field-error-message] {
+      margin-top: var(--fs-input-field-error-message-margin-top);
+      font-size: var(--fs-input-field-error-message-size);
+      line-height: var(--fs-input-field-error-message-line-height);
+      color: var(--fs-input-field-error-message-color);
+    }
+  }
+
+  &[data-fs-input-field-actionable="true"] {
+    min-width: rem(250px);
+
+    input {
+      padding-right: var(--fs-spacing-13);
+    }
+
+    [data-fs-button] {
+      position: absolute;
+      top: var(--fs-spacing-1);
+      right: var(--fs-spacing-1);
+
+      &::before {
+        position: absolute;
+        left: calc(-1 * var(--fs-spacing-1));
+        width: 1px;
+        height: 80%;
+        content: "";
+        background-color: var(--fs-input-field-border-color);
+      }
+    }
+
+    [data-fs-button][data-fs-icon-button] {
+      &::before {
+        left: calc(-1 * var(--fs-spacing-1));
+      }
+    }
+  }
+}

package/src/components/molecules/Modal/Modal.tsx

@@ -7,9 +7,9 @@ import type {
 import React from 'react'
 import { createPortal } from 'react-dom'
 
-import Overlay from '../../atoms/Overlay'
-import ModalContent from './ModalContent'
+import { Overlay } from '@faststore/components'
 import type { ModalContentProps } from './ModalContent'
+import ModalContent from './ModalContent'
 
 export interface ModalProps extends ModalContentProps {
   /**
@@ -67,7 +67,6 @@ const Modal = ({
   return isOpen
     ? createPortal(
         <Overlay
-          data-modal-overlay
           onClick={handleBackdropClick}
           onKeyDown={handleBackdropKeyDown}
         >

package/src/components/molecules/Modal/stories/Modal.mdx

@@ -15,6 +15,4 @@ import Modal from '../Modal'
 
 ```css
 [data-fs-modal-content] {}
-
-[data-modal-overlay] {}
 ```

package/src/components/molecules/QuantitySelector/QuantitySelector.tsx

@@ -1,10 +1,8 @@
 import type { InputHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-import type { InputProps } from '../../atoms/Input'
-import Input from '../../atoms/Input'
-import type { IconButtonProps } from '../../../index'
-import { IconButton } from '../../../index'
+import type { IconButtonProps, InputProps } from '@faststore/components'
+import { IconButton, Input } from '@faststore/components'
 
 export interface QuantitySelectorProps
   extends InputHTMLAttributes<HTMLDivElement> {

package/src/components/molecules/SearchInput/SearchInput.tsx

@@ -6,8 +6,7 @@ import type {
 } from 'react'
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 
-import { Icon, Button } from '@faststore/components'
-import Input from '../../atoms/Input'
+import { Icon, Button, Input } from '@faststore/components'
 import Form from '../Form'
 
 const SearchIcon = () => (

package/src/components/organisms/OutOfStock/stories/OutOfStock.stories.tsx

@@ -7,8 +7,7 @@ import type {
   OutOfStockProps,
 } from '..'
 import Component, { OutOfStockTitle, OutOfStockMessage } from '..'
-import { Button } from '@faststore/components'
-import Input from '../../../atoms/Input'
+import { Button, Input } from '@faststore/components'
 import mdx from './OutOfStock.mdx'
 
 type OutOfStockTemplateProps = {

package/src/index.ts

@@ -4,9 +4,6 @@ export * from '@faststore/components'
 export { default as Link } from './components/atoms/Link'
 export type { LinkProps } from './components/atoms/Link'
 
-export { default as Input } from './components/atoms/Input'
-export type { InputProps } from './components/atoms/Input'
-
 export { default as Popover } from './components/atoms/Popover'
 export type { PopoverProps } from './components/atoms/Popover'
 
@@ -16,9 +13,6 @@ export type { PriceProps } from './components/atoms/Price'
 export { default as TextArea } from './components/atoms/TextArea'
 export type { TextAreaProps } from './components/atoms/TextArea'
 
-export { default as Overlay } from './components/atoms/Overlay'
-export type { OverlayProps } from './components/atoms/Overlay'
-
 export { default as Select } from './components/atoms/Select'
 export type { SelectProps } from './components/atoms/Select'
 

package/src/styles/components.scss

@@ -2,9 +2,12 @@
 @import "../components/atoms/Badge/styles";
 @import "../components/atoms/Button/styles";
 @import "../components/atoms/Checkbox/styles";
+@import "../components/atoms/Input/styles";
+@import "../components/atoms/Overlay/styles";
 @import "../components/atoms/Radio/styles";
 
 // Molecules
 @import "../components/molecules/CheckboxField/styles";
+@import "../components/molecules/InputField/styles";
 @import "../components/molecules/RadioField/styles";
 @import "../components/molecules/Tag/styles";

package/dist/assets/ShoppingCart.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const ShoppingCart: () => JSX.Element;
-export default ShoppingCart;

package/dist/assets/ShoppingCart.js

@@ -1,10 +0,0 @@
-import React from 'react';
-// Icon from Phosphor Icons
-const ShoppingCart = () => (React.createElement("svg", { id: "ShoppingCart", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
-    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    React.createElement("path", { d: "M184,184H69.81818L41.92162,30.56892A8,8,0,0,0,34.05066,24H16", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
-    React.createElement("circle", { cx: "80", cy: "204", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
-    React.createElement("circle", { cx: "184", cy: "204", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
-    React.createElement("path", { d: "M62.54543,144H188.10132a16,16,0,0,0,15.74192-13.13783L216,64H48", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
-export default ShoppingCart;
-//# sourceMappingURL=ShoppingCart.js.map

package/dist/assets/ShoppingCart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ShoppingCart.js","sourceRoot":"","sources":["../../src/assets/ShoppingCart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,2BAA2B;AAC3B,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CACzB,6BACE,EAAE,EAAC,cAAc,EACjB,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,8BACE,CAAC,EAAC,8DAA8D,EAChE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,gCACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACd;IACV,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACd;IACV,8BACE,CAAC,EAAC,iEAAiE,EACnE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/assets/X.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const X: () => JSX.Element;
-export default X;

package/dist/assets/X.js

@@ -1,8 +0,0 @@
-import React from 'react';
-// Icon from Phosphor Icons
-const X = () => (React.createElement("svg", { id: "X", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
-    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    React.createElement("line", { x1: "200", y1: "56", x2: "56", y2: "200", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
-    React.createElement("line", { x1: "200", y1: "200", x2: "56", y2: "56", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
-export default X;
-//# sourceMappingURL=X.js.map

package/dist/assets/X.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"X.js","sourceRoot":"","sources":["../../src/assets/X.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,2BAA2B;AAC3B,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC,CACd,6BACE,EAAE,EAAC,GAAG,EACN,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,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,CAAC,CAAA"}

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

@@ -1,14 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import React from 'react';
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    /**
-     * Current variant of the input.
-     */
-    variant?: 'success' | 'error';
-    /**
-     * 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/components/atoms/Input/Input.js

@@ -1,10 +0,0 @@
-import React, { forwardRef } from 'react';
-const Input = forwardRef(function Input({ variant, testId = 'store-input', ...otherProps }, ref) {
-    const variants = {
-        'data-error': variant === 'error' || undefined,
-        'data-success': variant === 'success' || undefined,
-    };
-    return (React.createElement("input", Object.assign({ ref: ref, "data-fs-input": true, "data-testid": testId }, variants, otherProps)));
-});
-export default Input;
-//# sourceMappingURL=Input.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAazC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,EAAE,GAAG,UAAU,EAAE,EAClD,GAAG;IAEH,MAAM,QAAQ,GAAG;QACf,YAAY,EAAE,OAAO,KAAK,OAAO,IAAI,SAAS;QAC9C,cAAc,EAAE,OAAO,KAAK,SAAS,IAAI,SAAS;KACnD,CAAA;IAED,OAAO,CACL,6CACE,GAAG,EAAE,GAAG,wCAEK,MAAM,IACf,QAAQ,EACR,UAAU,EACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

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

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

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

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

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

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

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

@@ -1,10 +0,0 @@
-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/components/atoms/Overlay/Overlay.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../../src/components/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,eAAe,EAAE,GAAG,UAAU,EAAE,EAC3C,GAAG;IAEH,OAAO,CACL,2CACE,IAAI,EAAC,cAAc,0CAEN,MAAM,EACnB,GAAG,EAAE,GAAG,IACJ,UAAU,EACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}

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

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

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

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

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

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

package/src/assets/ShoppingCart.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-
-// Icon from Phosphor Icons
-const ShoppingCart = () => (
-  <svg
-    id="ShoppingCart"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 256 256"
-    strokeWidth="16"
-    width={24}
-    height={24}
-  >
-    <rect width="256" height="256" fill="none"></rect>
-    <path
-      d="M184,184H69.81818L41.92162,30.56892A8,8,0,0,0,34.05066,24H16"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></path>
-    <circle
-      cx="80"
-      cy="204"
-      r="20"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></circle>
-    <circle
-      cx="184"
-      cy="204"
-      r="20"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></circle>
-    <path
-      d="M62.54543,144H188.10132a16,16,0,0,0,15.74192-13.13783L216,64H48"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></path>
-  </svg>
-)
-
-export default ShoppingCart

package/src/assets/X.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-// Icon from Phosphor Icons
-const X = () => (
-  <svg
-    id="X"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 256 256"
-    strokeWidth="16"
-    width={24}
-    height={24}
-  >
-    <rect width="256" height="256" fill="none"></rect>
-    <line
-      x1="200"
-      y1="56"
-      x2="56"
-      y2="200"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></line>
-    <line
-      x1="200"
-      y1="200"
-      x2="56"
-      y2="56"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></line>
-  </svg>
-)
-
-export default X

package/src/components/atoms/Input/Input.tsx

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

package/src/components/atoms/Input/index.ts

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

package/src/components/atoms/Input/stories/Input.mdx

@@ -1,22 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import Input from '../Input'
-
-# Input
-
-<Canvas>
-  <Story id="atoms-input--input" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Input} />
-
-## CSS Selectors
-
-```css
-[data-fs-input] {}
-
-[data-success] {}
-
-[data-error] {}
-```

package/src/components/atoms/Input/stories/Input.stories.tsx

@@ -1,35 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { InputProps } from '../Input'
-import Component from '../Input'
-import mdx from './Input.mdx'
-
-const InputTemplate: Story<InputProps> = ({ placeholder, variant }) => (
-  <Component placeholder={placeholder} variant={variant} />
-)
-
-export const Input = InputTemplate.bind({})
-
-const argTypes: ComponentArgTypes<InputProps> = {
-  variant: {
-    options: ['default', 'success', 'error'],
-    defaultValue: 'default',
-    control: { type: 'select' },
-  },
-  placeholder: {
-    control: { type: 'text' },
-    defaultValue: 'Input',
-  },
-}
-
-export default {
-  title: 'Atoms/Input',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/components/atoms/Overlay/Overlay.tsx

@@ -1,26 +0,0 @@
-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 = 'store-overlay', ...otherProps },
-  ref
-) {
-  return (
-    <div
-      role="presentation"
-      data-fs-overlay
-      data-testid={testId}
-      ref={ref}
-      {...otherProps}
-    />
-  )
-})
-
-export default Overlay

package/src/components/atoms/Overlay/index.ts

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

package/src/components/atoms/Overlay/stories/Overlay.mdx

@@ -1,18 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import Overlay from '../Overlay'
-
-# Overlay
-
-<Canvas>
-  <Story id="atoms-overlay" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Overlay} />
-
-## CSS Selectors
-
-```css
-[data-fs-overlay] {}
-```

package/src/components/atoms/Overlay/stories/Overlay.stories.tsx

@@ -1,48 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { Props as OverlayProps } from '../Overlay'
-import Component from '../Overlay'
-import mdx from './Overlay.mdx'
-
-type ColorType = 'black' | 'green'
-type OverlayStoryProps = OverlayProps & { color: ColorType }
-
-const OverlayTemplate: Story<OverlayStoryProps> = ({
-  color = 'black',
-  ...otherProps
-}) => {
-  const dataColor =
-    color === 'black' ? { 'data-black': true } : { 'data-green': true }
-
-  return (
-    <div data-story-overlay-out-container>
-      A content outside me
-      <Component {...otherProps} {...dataColor} />
-    </div>
-  )
-}
-
-export const Overlay = OverlayTemplate.bind({})
-
-const controls: ComponentArgTypes<OverlayStoryProps> = {
-  color: {
-    options: ['green', 'black'],
-    control: {
-      type: 'select',
-    },
-  },
-}
-
-export default {
-  title: 'Atoms/Overlay',
-  argTypes: {
-    ...controls,
-  },
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta