@faststore/components 2.0.15-alpha.0 → 2.0.16-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.16-alpha.0](https://github.com/vtex/faststore/compare/v2.0.15-alpha.0...v2.0.16-alpha.0) (2022-12-15)
+
+
+### Features
+
+* Adds `Toggle` & `ToggleField` & `SROnly` components ([#1555](https://github.com/vtex/faststore/issues/1555)) ([b055c0a](https://github.com/vtex/faststore/commit/b055c0aa67291ad88e865b60e96b8a898a97db14))
+
+
+
 ## [2.0.15-alpha.0](https://github.com/vtex/faststore/compare/v2.0.14-alpha.0...v2.0.15-alpha.0) (2022-12-14)
 
 

package/dist/assets/Checked.d.ts

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

package/dist/assets/Checked.js

@@ -0,0 +1,6 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const Checked = () => (React.createElement("svg", { id: "Checked", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 19 18", strokeWidth: "16", width: 15, height: 15 },
+    React.createElement("path", { d: "M15.6875 5.0625L7.8125 12.9375L3.875 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default Checked;
+//# sourceMappingURL=Checked.js.map

package/dist/assets/Checked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checked.js","sourceRoot":"","sources":["../../src/assets/Checked.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,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BACE,CAAC,EAAC,wCAAwC,EAC1C,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE,CACP,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/assets/index.d.ts

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

package/dist/assets/index.js

@@ -1,4 +1,5 @@
 export { default as CaretDown } from './CaretDown';
+export { default as Checked } from './Checked';
 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,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"}
+{"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,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,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/SROnly/SROnly.d.ts

@@ -0,0 +1,7 @@
+import type { ElementType } from 'react';
+interface Props {
+    text: string;
+    as?: ElementType;
+}
+declare function SROnly({ text, as }: Props): JSX.Element;
+export default SROnly;

package/dist/atoms/SROnly/SROnly.js

@@ -0,0 +1,7 @@
+import React from 'react';
+function SROnly({ text, as }) {
+    const Component = as ?? 'span';
+    return React.createElement(Component, { "data-fs-sr-only": true }, text);
+}
+export default SROnly;
+//# sourceMappingURL=SROnly.js.map

package/dist/atoms/SROnly/SROnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SROnly.js","sourceRoot":"","sources":["../../../src/atoms/SROnly/SROnly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,SAAS,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAS;IACjC,MAAM,SAAS,GAAG,EAAE,IAAI,MAAM,CAAA;IAE9B,OAAO,oBAAC,SAAS,+BAAkB,IAAI,CAAa,CAAA;AACtD,CAAC;AAED,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1 @@
+export { default } from './SROnly';

package/dist/atoms/SROnly/index.js

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

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

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

package/dist/index.d.ts

@@ -23,6 +23,7 @@ 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 SROnly } from './atoms/SROnly';
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
@@ -38,3 +39,7 @@ 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';
+export { default as Toggle } from './molecules/Toggle';
+export type { ToggleProps } from './molecules/Toggle';
+export { default as ToggleField } from './molecules/ToggleField';
+export type { ToggleFieldProps } from './molecules/ToggleField';

package/dist/index.js

@@ -13,6 +13,7 @@ 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';
+export { default as SROnly } from './atoms/SROnly';
 // Molecules
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
@@ -22,4 +23,6 @@ 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';
+export { default as Toggle } from './molecules/Toggle';
+export { default as ToggleField } from './molecules/ToggleField';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"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,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"}
+{"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,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;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,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;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/molecules/Toggle/Toggle.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { InputHTMLAttributes } from 'react';
+export interface ToggleProps extends InputHTMLAttributes<Omit<HTMLInputElement, 'disabled' | 'type'>> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * ID to identify input and corresponding label.
+     */
+    id: string;
+    /**
+     * Specifies that this input should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Controls the component's direction.
+     */
+    variant?: 'horizontal' | 'vertical';
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/dist/molecules/Toggle/Toggle.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { Input, Icon } from './../../';
+import { Checked } from '../../assets';
+const Toggle = forwardRef(function Toggle({ testId = 'fs-toggle', id, disabled, variant = 'horizontal', ...otherProps }, ref) {
+    return (React.createElement("div", { "data-fs-toggle": true, "data-fs-toggle-variant": variant, "data-testid": testId },
+        React.createElement(Input, { id: id, ref: ref, role: "switch", type: "checkbox", disabled: disabled, ...otherProps }),
+        React.createElement("span", { "data-fs-toggle-knob": true },
+            React.createElement(Icon, { component: React.createElement(Checked, null) }))));
+});
+export default Toggle;
+//# sourceMappingURL=Toggle.js.map

package/dist/molecules/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/molecules/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAsBtC,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CACtE,EACE,MAAM,GAAG,WAAW,EACpB,EAAE,EACF,QAAQ,EACR,OAAO,GAAG,YAAY,EACtB,GAAG,UAAU,EACD,EACd,GAAG;IAEH,OAAO,CACL,+EAA4C,OAAO,iBAAe,MAAM;QACtE,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,KACd,UAAU,GACd;QACF;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,OAAO,OAAG,GAAI,CAC3B,CACH,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

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

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

package/dist/molecules/Toggle/index.js

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

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

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

package/dist/molecules/ToggleField/ToggleField.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export declare type ToggleFieldProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * ID to identify input and corresponding label.
+     */
+    id: string;
+    /**
+     * The text displayed to identify the input.
+     */
+    label: string;
+    /**
+     * Controls whether the label will be displayed or not.
+     */
+    displayLabel?: boolean;
+    /**
+     * Specifies that this input should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Controls the component's direction.
+     */
+    variant?: 'horizontal' | 'vertical';
+};
+declare const ToggleField: React.ForwardRefExoticComponent<ToggleFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default ToggleField;

package/dist/molecules/ToggleField/ToggleField.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+import { Label, SROnly, Toggle } from './../../';
+const ToggleField = forwardRef(function ToggleField({ testId = 'fs-toggle-field', id, label, disabled, displayLabel = true, variant = 'horizontal', ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-toggle-field": true, "data-testid": testId },
+        React.createElement(Toggle, { id: id, variant: variant, disabled: disabled, ...otherProps }),
+        displayLabel ? (React.createElement(Label, { "data-fs-toggle-field-label": true, htmlFor: id }, label)) : (React.createElement(SROnly, { text: label }))));
+});
+export default ToggleField;
+//# sourceMappingURL=ToggleField.js.map

package/dist/molecules/ToggleField/ToggleField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleField.js","sourceRoot":"","sources":["../../../src/molecules/ToggleField/ToggleField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AA6BhD,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,MAAM,GAAG,iBAAiB,EAC1B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,OAAO,GAAG,YAAY,EACtB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,+CAAoC,MAAM;QACrD,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,KAAM,UAAU,GAAI;QACvE,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,KAAK,wCAA4B,OAAO,EAAE,EAAE,IAC1C,KAAK,CACA,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,IAAI,EAAE,KAAK,GAAI,CACxB,CACG,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

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

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

package/dist/molecules/ToggleField/index.js

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.15-alpha.0",
+  "version": "2.0.16-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": "9b72e9d993f45bf072144751654854a11e099d17"
+  "gitHead": "2aa7d4ac5f4c0ad30a900e0239f1bcb5b9ddaab8"
 }

package/src/assets/Checked.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const Checked: FC = () => (
+  <svg
+    id="Checked"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 19 18"
+    strokeWidth="16"
+    width={15}
+    height={15}
+  >
+    <path
+      d="M15.6875 5.0625L7.8125 12.9375L3.875 9"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Checked

package/src/assets/index.ts

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

package/src/atoms/SROnly/SROnly.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import type { ElementType } from 'react'
+
+interface Props {
+  text: string
+  as?: ElementType
+}
+
+function SROnly({ text, as }: Props) {
+  const Component = as ?? 'span'
+
+  return <Component data-fs-sr-only>{text}</Component>
+}
+
+export default SROnly

package/src/atoms/SROnly/index.ts

@@ -0,0 +1 @@
+export { default } from './SROnly'

package/src/index.ts

@@ -26,6 +26,7 @@ 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 SROnly } from './atoms/SROnly'
 
 // Molecules
 export { default as BuyButton } from './molecules/BuyButton'
@@ -43,3 +44,7 @@ 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'
+export { default as Toggle } from './molecules/Toggle'
+export type { ToggleProps } from './molecules/Toggle'
+export { default as ToggleField } from './molecules/ToggleField'
+export type { ToggleFieldProps } from './molecules/ToggleField'

package/src/molecules/Toggle/Toggle.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react'
+import type { InputHTMLAttributes } from 'react'
+import { Input, Icon } from './../../'
+import { Checked } from '../../assets'
+
+export interface ToggleProps
+  extends InputHTMLAttributes<Omit<HTMLInputElement, 'disabled' | 'type'>> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * Specifies that this input should be disabled.
+   */
+  disabled?: boolean
+  /**
+   * Controls the component's direction.
+   */
+  variant?: 'horizontal' | 'vertical'
+}
+
+const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
+  {
+    testId = 'fs-toggle',
+    id,
+    disabled,
+    variant = 'horizontal',
+    ...otherProps
+  }: ToggleProps,
+  ref
+) {
+  return (
+    <div data-fs-toggle data-fs-toggle-variant={variant} data-testid={testId}>
+      <Input
+        id={id}
+        ref={ref}
+        role="switch"
+        type="checkbox"
+        disabled={disabled}
+        {...otherProps}
+      />
+      <span data-fs-toggle-knob>
+        <Icon component={<Checked />} />
+      </span>
+    </div>
+  )
+})
+
+export default Toggle

package/src/molecules/Toggle/index.ts

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

package/src/molecules/ToggleField/ToggleField.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react'
+import { Label, SROnly, Toggle } from './../../'
+
+export type ToggleFieldProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * The text displayed to identify the input.
+   */
+  label: string
+  /**
+   * Controls whether the label will be displayed or not.
+   */
+  displayLabel?: boolean
+  /**
+   * Specifies that this input should be disabled.
+   */
+  disabled?: boolean
+  /**
+   * Controls the component's direction.
+   */
+  variant?: 'horizontal' | 'vertical'
+}
+
+const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(
+  function ToggleField(
+    {
+      testId = 'fs-toggle-field',
+      id,
+      label,
+      disabled,
+      displayLabel = true,
+      variant = 'horizontal',
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-toggle-field data-testid={testId}>
+        <Toggle id={id} variant={variant} disabled={disabled} {...otherProps} />
+        {displayLabel ? (
+          <Label data-fs-toggle-field-label htmlFor={id}>
+            {label}
+          </Label>
+        ) : (
+          <SROnly text={label} />
+        )}
+      </div>
+    )
+  }
+)
+
+export default ToggleField

package/src/molecules/ToggleField/index.ts

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