@faststore/components 2.0.10-alpha.0 → 2.0.14-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.14-alpha.0](https://github.com/vtex/faststore/compare/v2.0.13-alpha.0...v2.0.14-alpha.0) (2022-12-14)
+
+
+### Features
+
+* Adds `Link` component ([#1543](https://github.com/vtex/faststore/issues/1543)) ([9c219eb](https://github.com/vtex/faststore/commit/9c219eba996fc6fec90edd1383a4abf8dbe0a7ef))
+
+
+
+## [2.0.13-alpha.0](https://github.com/vtex/faststore/compare/v2.0.12-alpha.0...v2.0.13-alpha.0) (2022-12-14)
+
+
+### Features
+
+* Adds `Select` and `SelectField` components ([#1547](https://github.com/vtex/faststore/issues/1547)) ([7c4beb0](https://github.com/vtex/faststore/commit/7c4beb085c893ad540e1a4440cc7b902fa36a75c))
+
+
+
 ## [2.0.10-alpha.0](https://github.com/vtex/faststore/compare/v2.0.9-alpha.0...v2.0.10-alpha.0) (2022-12-12)
 
 

package/dist/assets/CaretDown.d.ts

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

package/dist/assets/CaretDown.js

@@ -0,0 +1,7 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const CaretDown = () => (React.createElement("svg", { id: "CaretDown", 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("polyline", { points: "208 96 128 176 48 96", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" })));
+export default CaretDown;
+//# sourceMappingURL=CaretDown.js.map

package/dist/assets/CaretDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaretDown.js","sourceRoot":"","sources":["../../src/assets/CaretDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,SAAS,GAAO,GAAG,EAAE,CAAC,CAC1B,6BACE,EAAE,EAAC,WAAW,EACd,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,kCAAU,MAAM,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAY,CAC/I,CACP,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/assets/index.d.ts

@@ -1,3 +1,4 @@
+export { default as CaretDown } from './CaretDown';
 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 CaretDown } from './CaretDown';
 export { default as X } from './X';
 export { default as ShoppingCart } from './ShoppingCart';
 export { default as XCircle } from './XCircle';

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;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,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/Link/Link.d.ts

@@ -0,0 +1,25 @@
+import type { ElementType, ReactElement } from 'react';
+import { PolymorphicComponentPropsWithRef } from '../../typings';
+declare type LinkBaseProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+   * Specifies the component variant.
+   */
+    variant?: 'default' | 'display' | 'inline';
+    /**
+    * Defines use of inverted color.
+    */
+    inverse?: boolean;
+    /**
+     * Defines size os element
+     */
+    size?: 'small' | 'regular';
+};
+export declare type LinkElementType = ElementType;
+export declare type LinkProps<C extends LinkElementType = 'a'> = PolymorphicComponentPropsWithRef<C, LinkBaseProps>;
+declare type LinkComponent = <C extends LinkElementType = 'a'>(props: LinkProps<C>) => ReactElement | null;
+declare const Link: LinkComponent;
+export default Link;

package/dist/atoms/Link/Link.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+const Link = forwardRef(function Link({ as, children, variant = 'default', size = "regular", inverse, testId = 'fs-link', ...otherProps }, ref) {
+    const Component = as ?? 'a';
+    return (React.createElement(Component, { ref: ref, "data-fs-link": true, "data-fs-link-variant": variant, "data-fs-link-inverse": inverse, "data-fs-link-size": size, "data-testid": testId, ...otherProps }, children));
+});
+export default Link;
+//# sourceMappingURL=Link.js.map

package/dist/atoms/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/atoms/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkCzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAC,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAgB,EAC/G,GAAuB;IAGvB,MAAM,SAAS,GAAG,EAAE,IAAI,GAAG,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,gDAEc,OAAO,0BACP,OAAO,uBACV,IAAI,iBACV,MAAM,KACf,UAAU,IAEb,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

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

@@ -0,0 +1,2 @@
+export { default } from './Link';
+export type { LinkProps, LinkElementType } from './Link';

package/dist/atoms/Link/index.js

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

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

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

package/dist/atoms/Select/Select.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { SelectHTMLAttributes } from 'react';
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    /**
+     * Assigns an identifier to link the UISelect component and its label.
+     */
+    id: string;
+    /**
+     * Defines the options available in the select. The SelectOptions object
+     * keys are the property names, while the values correspond to the text that
+     * will be displayed in the UI.
+     */
+    options: Record<string, string>;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/atoms/Select/Select.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { Icon } from '../..';
+import { CaretDown } from '../../assets';
+const Select = forwardRef(function Select({ options, id, testId = 'fs-select', ...otherProps }, ref) {
+    return (React.createElement("div", { "data-fs-select": true },
+        React.createElement("select", { id: id, ref: ref, "data-testid": testId, ...otherProps }, Object.keys(options).map((key) => (React.createElement("option", { key: key, value: key }, options[key])))),
+        React.createElement(Icon, { "data-fs-select-icon": true, component: React.createElement(CaretDown, null) })));
+});
+export default Select;
+//# sourceMappingURL=Select.js.map

package/dist/atoms/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/atoms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAmBxC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,GAAG,WAAW,EAAE,GAAG,UAAU,EAAe,EACjE,GAAG;IAEH,OAAO,CACL;QACE,gCAAQ,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,iBAAe,MAAM,KAAM,UAAU,IAC1D,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjC,gCAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IACzB,OAAO,CAAC,GAAG,CAAC,CACN,CACV,CAAC,CACK;QACT,oBAAC,IAAI,iCAAqB,SAAS,EAAE,oBAAC,SAAS,OAAG,GAAG,CACjD,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

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

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

package/dist/atoms/Select/index.js

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

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

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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './assets';
 export { default as Badge } from './atoms/Badge';
 export type { BadgeProps } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
@@ -10,12 +11,16 @@ 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 Link } from './atoms/Link';
+export type { LinkProps, LinkElementType } from './atoms/Link';
 export { default as Overlay } from './atoms/Overlay';
 export type { OverlayProps } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';
 export type { PriceProps } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 export type { RadioProps } from './atoms/Radio';
+export { default as Select } from './atoms/Select';
+export type { SelectProps } from './atoms/Select';
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
@@ -27,5 +32,7 @@ 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 SelectField } from './molecules/SelectField';
+export type { SelectFieldProps } from './molecules/SelectField';
 export { default as Tag } from './molecules/Tag';
 export type { TagProps } from './molecules/Tag';

package/dist/index.js

@@ -1,3 +1,5 @@
+// Assets
+export * from './assets';
 // Atoms
 export { default as Badge } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
@@ -5,9 +7,11 @@ 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 Link } from './atoms/Link';
 export { default as Overlay } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
+export { default as Select } from './atoms/Select';
 // Molecules
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
@@ -15,5 +19,6 @@ export { default as IconButton } from './molecules/IconButton';
 export { default as DiscountBadge } from './molecules/DiscountBadge';
 export { default as InputField } from './molecules/InputField';
 export { default as RadioField } from './molecules/RadioField';
+export { default as SelectField } from './molecules/SelectField';
 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;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,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,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,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,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,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,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGlD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,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,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/molecules/SelectField/SelectField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SelectProps } from '../../atoms/Select';
+export interface SelectFieldProps extends SelectProps {
+    /**
+     * Defines the text displayed in the label right next to the Select.
+     */
+    label: string;
+}
+declare const SelectField: React.ForwardRefExoticComponent<SelectFieldProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SelectField;

package/dist/molecules/SelectField/SelectField.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import Select from '../../atoms/Select';
+import Label from '../../atoms/Label';
+const SelectField = forwardRef(function SelectField({ id, label, options, testId = 'fs-select-field', ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-select-field": true, "data-testid": testId },
+        React.createElement(Label, { "data-fs-select-field-label": true, htmlFor: id }, label),
+        React.createElement(Select, { id: id, options: options, ...otherProps })));
+});
+export default SelectField;
+//# sourceMappingURL=SelectField.js.map

package/dist/molecules/SelectField/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/molecules/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,OAAO,KAAK,MAAM,mBAAmB,CAAA;AASrC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACjE,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,+CAAoC,MAAM;QACrD,oBAAC,KAAK,wCAA4B,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS;QAC9D,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,KAAM,UAAU,GAAI,CAChD,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

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

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

package/dist/molecules/SelectField/index.js

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

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

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

package/dist/typings/PolymorphicGenerics.d.ts

@@ -0,0 +1,28 @@
+/**
+ * These were heavily inspired by "Forwarding refs for a polymorphic React
+ * component in TypeScript", written by Ben Ilegbodu.
+ *
+ * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ */
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+declare type AsProp<C extends ElementType> = {
+    as?: C;
+};
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+declare type ExtendableProps<ExtendedProps = Record<string, never>, OverrideProps = Record<string, never>> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+declare type InheritableElementProps<C extends ElementType, Props = Record<string, never>> = ExtendableProps<ComponentPropsWithoutRef<C>, Props>;
+export declare type PolymorphicComponentProps<C extends ElementType, Props = Record<string, never>> = InheritableElementProps<C, Props & AsProp<C>>;
+export declare type PolymorphicComponentPropsWithRef<C extends ElementType, P = Record<string, never>> = PolymorphicComponentProps<C, P> & {
+    ref?: ComponentPropsWithRef<C>['ref'];
+};
+export declare type PolymorphicRef<C extends ElementType> = PolymorphicComponentPropsWithRef<C>['ref'];
+export {};

package/dist/typings/PolymorphicGenerics.js

@@ -0,0 +1,8 @@
+/**
+ * These were heavily inspired by "Forwarding refs for a polymorphic React
+ * component in TypeScript", written by Ben Ilegbodu.
+ *
+ * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ */
+export {};
+//# sourceMappingURL=PolymorphicGenerics.js.map

package/dist/typings/PolymorphicGenerics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolymorphicGenerics.js","sourceRoot":"","sources":["../../src/typings/PolymorphicGenerics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/dist/typings/index.d.ts

@@ -0,0 +1 @@
+export type { PolymorphicComponentProps, PolymorphicComponentPropsWithRef, PolymorphicRef, } from './PolymorphicGenerics';

package/dist/typings/index.js

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

package/dist/typings/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.10-alpha.0",
+  "version": "2.0.14-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": "640305492dc03e55d3df05de18bcca8587d562fc"
+  "gitHead": "a8f4ca0ddc690e24df31abee9e4a4bbdb2d1a03b"
 }

package/src/assets/CaretDown.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const CaretDown: FC = () => (
+  <svg
+    id="CaretDown"
+    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>
+    <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></polyline>
+  </svg>
+)
+
+export default CaretDown

package/src/assets/index.ts

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

package/src/atoms/Link/Link.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react'
+import type { ElementType, ReactElement } from 'react'
+import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../typings'
+
+type LinkBaseProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+ * Specifies the component variant.
+ */
+  variant?: 'default' | 'display' | 'inline'
+  /**
+  * Defines use of inverted color.
+  */
+  inverse?: boolean
+  /**
+   * Defines size os element
+   */
+  size?: 'small' | 'regular'
+}
+
+export type LinkElementType = ElementType
+
+export type LinkProps<C extends LinkElementType = 'a'> = PolymorphicComponentPropsWithRef<
+  C,
+  LinkBaseProps
+>
+
+type LinkComponent = <C extends LinkElementType = 'a'>(
+  props: LinkProps<C>
+) => ReactElement | null
+
+const Link: LinkComponent = forwardRef(function Link<
+  C extends LinkElementType = 'a'
+>(
+  { as, children, variant = 'default', size="regular", inverse, testId = 'fs-link', ...otherProps }: LinkProps<C>,
+  ref?: PolymorphicRef<C>
+) {
+
+  const Component = as ?? 'a'
+
+  return (
+    <Component 
+      ref={ref} 
+      data-fs-link 
+      data-fs-link-variant={variant}
+      data-fs-link-inverse={inverse}
+      data-fs-link-size={size}
+      data-testid={testId} 
+      {...otherProps}
+    >
+      {children}
+    </Component>
+  )
+})
+
+export default Link

package/src/atoms/Link/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Link'
+export type { LinkProps, LinkElementType } from './Link'

package/src/atoms/Select/Select.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react'
+import type { SelectHTMLAttributes } from 'react'
+import { Icon } from '../..'
+import { CaretDown } from '../../assets'
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /**
+   * Assigns an identifier to link the UISelect component and its label.
+   */
+  id: string
+  /**
+   * Defines the options available in the select. The SelectOptions object
+   * keys are the property names, while the values correspond to the text that
+   * will be displayed in the UI.
+   */
+  options: Record<string, string>
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { options, id, testId = 'fs-select', ...otherProps }: SelectProps,
+  ref
+) {
+  return (
+    <div data-fs-select>
+      <select id={id} ref={ref} data-testid={testId} {...otherProps}>
+        {Object.keys(options).map((key) => (
+          <option key={key} value={key}>
+            {options[key]}
+          </option>
+        ))}
+      </select>
+      <Icon data-fs-select-icon component={<CaretDown />}/>
+    </div>
+  )
+})
+
+export default Select

package/src/atoms/Select/index.ts

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

package/src/index.ts

@@ -1,3 +1,6 @@
+// Assets
+export * from './assets'
+
 // Atoms
 export { default as Badge } from './atoms/Badge'
 export type { BadgeProps } from './atoms/Badge'
@@ -11,12 +14,16 @@ 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 Link } from './atoms/Link'
+export type { LinkProps, LinkElementType } from './atoms/Link'
 export { default as Overlay } from './atoms/Overlay'
 export type { OverlayProps } from './atoms/Overlay'
 export { default as Price } from './atoms/Price'
 export type { PriceProps } from './atoms/Price'
 export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
+export { default as Select } from './atoms/Select'
+export type { SelectProps } from './atoms/Select'
 
 // Molecules
 export { default as BuyButton } from './molecules/BuyButton'
@@ -30,5 +37,7 @@ 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 SelectField } from './molecules/SelectField'
+export type { SelectFieldProps } from './molecules/SelectField'
 export { default as Tag } from './molecules/Tag'
 export type { TagProps } from './molecules/Tag'

package/src/molecules/SelectField/SelectField.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react'
+import type { PropsWithChildren } from 'react'
+import Select from '../../atoms/Select'
+import type {SelectProps} from '../../atoms/Select'
+import Label from '../../atoms/Label'
+
+export interface SelectFieldProps extends SelectProps {
+  /**
+   * Defines the text displayed in the label right next to the Select.
+   */
+  label: string
+}
+
+const SelectField = forwardRef<HTMLDivElement, PropsWithChildren<SelectFieldProps>>(
+  function SelectField(
+    { id, label, options, testId = 'fs-select-field', ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-select-field data-testid={testId}>
+        <Label data-fs-select-field-label htmlFor={id}>{label}</Label>
+        <Select id={id} options={options} {...otherProps} />
+      </div>
+    )
+  }
+)
+
+export default SelectField

package/src/molecules/SelectField/index.ts

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

package/src/typings/PolymorphicGenerics.ts

@@ -0,0 +1,50 @@
+/**
+ * These were heavily inspired by "Forwarding refs for a polymorphic React
+ * component in TypeScript", written by Ben Ilegbodu.
+ *
+ * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ */
+
+import type {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ElementType,
+} from 'react'
+
+type AsProp<C extends ElementType> = {
+  as?: C
+}
+
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+type ExtendableProps<
+  ExtendedProps = Record<string, never>,
+  OverrideProps = Record<string, never>
+> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>
+
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+type InheritableElementProps<
+  C extends ElementType,
+  Props = Record<string, never>
+> = ExtendableProps<ComponentPropsWithoutRef<C>, Props>
+
+export type PolymorphicComponentProps<
+  C extends ElementType,
+  Props = Record<string, never>
+> = InheritableElementProps<C, Props & AsProp<C>>
+
+export type PolymorphicComponentPropsWithRef<
+  C extends ElementType,
+  P = Record<string, never>
+> = PolymorphicComponentProps<C, P> & { ref?: ComponentPropsWithRef<C>['ref'] }
+
+// Extract the `ref` prop from a polymorphic component
+export type PolymorphicRef<C extends ElementType> =
+  PolymorphicComponentPropsWithRef<C>['ref']

package/src/typings/index.ts

@@ -0,0 +1,5 @@
+export type {
+  PolymorphicComponentProps,
+  PolymorphicComponentPropsWithRef,
+  PolymorphicRef,
+} from './PolymorphicGenerics'