@transferwise/components 41.1.4 → 41.1.5-beta-796edaf234.20

package/build/es/no-polyfill/checkboxButton/CheckboxButton.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","className","disabled","onChange"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var CheckboxButton=/*#__PURE__*/forwardRef(function(a,b){var c=a.checked,d=a.className,e=a.disabled,f=a.onChange,g=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs("span",{className:classNames("np-checkbox-button",d,e&&"disabled"),children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread({ref:b},g),{},{type:"checkbox",disabled:e,checked:c,onChange:f})),/*#__PURE__*/_jsx("span",{className:"tw-checkbox-button",children:/*#__PURE__*/_jsx("span",{className:"tw-checkbox-check"})})]})});CheckboxButton.propTypes={/* Provide this if the CheckboxButton is being used without a label */"aria-label":PropTypes.string,checked:PropTypes.bool,className:PropTypes.string,disabled:PropTypes.bool,onChange:PropTypes.func.isRequired},CheckboxButton.defaultProps={"aria-label":void 0,checked:!1,className:void 0,disabled:!1};export default CheckboxButton;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","className","disabled","onChange"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{forwardRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var CheckboxButton=/*#__PURE__*/forwardRef(function(a,b){var c=a.checked,d=a.className,e=a.disabled,f=a.onChange,g=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs("span",{className:classNames("np-checkbox-button",d,e&&"disabled"),children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread({},g),{},{ref:b,type:"checkbox",disabled:e,checked:c,onChange:f})),/*#__PURE__*/_jsx("span",{className:"tw-checkbox-button",children:/*#__PURE__*/_jsx("span",{className:"tw-checkbox-check"})})]})});export default CheckboxButton;

package/build/es/no-polyfill/checkboxButton/CheckboxButton.spec.js

@@ -0,0 +1 @@
+/* eslint-disable jest/expect-expect */ /* eslint-disable testing-library/no-render-in-setup */import"@testing-library/jest-dom";import{render,fireEvent,screen}from"../test-utils";import CheckboxButton from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Checkbox button",function(){describe("by default",function(){render(/*#__PURE__*/_jsx(CheckboxButton,{onChange:jest.fn()}));var a=screen.getByRole("checkbox");it("is not checked",function(){return expect(a).not.toBeChecked()}),it("is not disabled",function(){return expect(a).toBeEnabled()})}),it("applies aria-label if provided",function(){render(/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"An aria label",onChange:jest.fn()})),expect(screen.getByRole("checkbox",{name:"An aria label"})).toBeInTheDocument()}),it("is checked when checked prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxButton,{checked:!0,onChange:jest.fn()})),expect(screen.getByRole("checkbox")).toBeChecked()}),it("is disabled when disabled prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxButton,{disabled:!0,onChange:jest.fn()}));var a=screen.getByRole("checkbox");expect(a).toBeDisabled()}),it("calls onChange handler on change",function(){var a=jest.fn();render(/*#__PURE__*/_jsx(CheckboxButton,{onChange:a}));var b=screen.getByRole("checkbox");expect(a).not.toHaveBeenCalled(),fireEvent.click(b),expect(a).toHaveBeenCalledTimes(1)})});

package/build/es/no-polyfill/checkboxButton/CheckboxButton.story.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean}from"@storybook/addon-knobs";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";export default{component:CheckboxButton,title:"CheckboxButton"};var onBlur=function(){return console.log("blur")},onClick=function(){return console.log("click")},onFocus=function(){return console.log("focus")};export var Basic=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=boolean("disabled",!1);return/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"Toggle email updates",checked:c,disabled:e,onBlur:onBlur,onClick:onClick,onFocus:onFocus,onChange:function onChange(){return d(!c)}})};

package/build/es/no-polyfill/checkboxOption/CheckboxOption.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import PropTypes from"prop-types";import CheckboxButton from"../checkboxButton";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var CheckboxOption=function(a){var b=a["aria-label"],c=a.media,d=a.title,e=a.content,f=a.name,g=a.checked,h=a.onChange,i=a.complex,j=a.disabled,k=a.showMediaCircle,l=a.showMediaAtAllSizes;return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{"aria-label":b,media:c,title:d,content:e,name:f,complex:i,disabled:j,showMediaCircle:k,showMediaAtAllSizes:l}),{},{button:/*#__PURE__*/_jsx(CheckboxButton,{checked:g,disabled:j,onChange:function onChange(){return h(!g)}})}))};CheckboxOption.propTypes={"aria-label":PropTypes.string,checked:PropTypes.bool,complex:PropTypes.bool,content:PropTypes.node,disabled:PropTypes.bool,id:PropTypes.string,media:PropTypes.node,name:PropTypes.string.isRequired,onChange:PropTypes.func.isRequired,title:PropTypes.node.isRequired,showMediaCircle:PropTypes.bool,showMediaAtAllSizes:PropTypes.bool},CheckboxOption.defaultProps={"aria-label":void 0,checked:!1,complex:!1,content:null,disabled:!1,id:void 0,media:null,showMediaCircle:!0,showMediaAtAllSizes:!1};export default CheckboxOption;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","disabled","onChange"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{forwardRef}from"react";import CheckboxButton from"../checkboxButton";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var CheckboxOption=/*#__PURE__*/forwardRef(function(a,b){var c=a.checked,d=a.disabled,e=a.onChange,f=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},f),{},{ref:b,disabled:d,button:/*#__PURE__*/_jsx(CheckboxButton,{checked:c,disabled:d,onChange:function onChange(){return e(!c)}})}))});export default CheckboxOption;

package/build/es/no-polyfill/checkboxOption/CheckboxOption.spec.js

@@ -0,0 +1 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}/* eslint-disable jest/expect-expect */import"@testing-library/jest-dom";import{render,fireEvent,screen}from"../test-utils";import CheckboxOption from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Checkbox option",function(){var a={id:"id",name:"name",title:"Title",onChange:jest.fn(),"aria-label":"test-label"};describe("by default",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByRole("checkbox");it("is not checked",function(){expect(b).not.toBeChecked()}),it("is not disabled",function(){expect(b).toBeEnabled()})}),it("has `aria-label` attr",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByLabelText("test-label");expect(b).toBeInTheDocument()}),it("is checked when checked prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0}))),expect(screen.getByRole("checkbox")).toBeChecked()}),it("is disabled when disabled prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0}))),expect(screen.getByRole("checkbox")).toBeDisabled()}),describe("onChange",function(){it("is called with new checked value when the option is clicked",function(){var b=jest.fn(),c=render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{onChange:b}))),d=c.rerender,e=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!0),d(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0,onChange:b}))),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!1)}),it("is not called if the option is disabled",function(){var b=jest.fn();render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0,onChange:b})));var c=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(c),expect(b).not.toHaveBeenCalled()})})});

package/build/es/no-polyfill/checkboxOption/CheckboxOption.story.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import CheckboxOption from"./CheckboxOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:CheckboxOption,title:"CheckboxOption"};var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};

package/build/es/polyfill/checkboxButton/CheckboxButton.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","className","disabled","onChange"];import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var CheckboxButton=/*#__PURE__*/forwardRef(function(a,b){var c=a.checked,d=a.className,e=a.disabled,f=a.onChange,g=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs("span",{className:classNames("np-checkbox-button",d,e&&"disabled"),children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread({ref:b},g),{},{type:"checkbox",disabled:e,checked:c,onChange:f})),/*#__PURE__*/_jsx("span",{className:"tw-checkbox-button",children:/*#__PURE__*/_jsx("span",{className:"tw-checkbox-check"})})]})});CheckboxButton.propTypes={/* Provide this if the CheckboxButton is being used without a label */"aria-label":PropTypes.string,checked:PropTypes.bool,className:PropTypes.string,disabled:PropTypes.bool,onChange:PropTypes.func.isRequired},CheckboxButton.defaultProps={"aria-label":void 0,checked:!1,className:void 0,disabled:!1};export default CheckboxButton;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","className","disabled","onChange"];import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{forwardRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var CheckboxButton=/*#__PURE__*/forwardRef(function(a,b){var c=a.checked,d=a.className,e=a.disabled,f=a.onChange,g=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs("span",{className:classNames("np-checkbox-button",d,e&&"disabled"),children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread({},g),{},{ref:b,type:"checkbox",disabled:e,checked:c,onChange:f})),/*#__PURE__*/_jsx("span",{className:"tw-checkbox-button",children:/*#__PURE__*/_jsx("span",{className:"tw-checkbox-check"})})]})});export default CheckboxButton;

package/build/es/polyfill/checkboxButton/CheckboxButton.spec.js

@@ -0,0 +1 @@
+/* eslint-disable jest/expect-expect */ /* eslint-disable testing-library/no-render-in-setup */import"@testing-library/jest-dom";import{render,fireEvent,screen}from"../test-utils";import CheckboxButton from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Checkbox button",function(){describe("by default",function(){render(/*#__PURE__*/_jsx(CheckboxButton,{onChange:jest.fn()}));var a=screen.getByRole("checkbox");it("is not checked",function(){return expect(a).not.toBeChecked()}),it("is not disabled",function(){return expect(a).toBeEnabled()})}),it("applies aria-label if provided",function(){render(/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"An aria label",onChange:jest.fn()})),expect(screen.getByRole("checkbox",{name:"An aria label"})).toBeInTheDocument()}),it("is checked when checked prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxButton,{checked:!0,onChange:jest.fn()})),expect(screen.getByRole("checkbox")).toBeChecked()}),it("is disabled when disabled prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxButton,{disabled:!0,onChange:jest.fn()}));var a=screen.getByRole("checkbox");expect(a).toBeDisabled()}),it("calls onChange handler on change",function(){var a=jest.fn();render(/*#__PURE__*/_jsx(CheckboxButton,{onChange:a}));var b=screen.getByRole("checkbox");expect(a).not.toHaveBeenCalled(),fireEvent.click(b),expect(a).toHaveBeenCalledTimes(1)})});

package/build/es/polyfill/checkboxButton/CheckboxButton.story.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean}from"@storybook/addon-knobs";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";export default{component:CheckboxButton,title:"CheckboxButton"};var onBlur=function(){return console.log("blur")},onClick=function(){return console.log("click")},onFocus=function(){return console.log("focus")};export var Basic=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=boolean("disabled",!1);return/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"Toggle email updates",checked:c,disabled:e,onBlur:onBlur,onClick:onClick,onFocus:onFocus,onChange:function onChange(){return d(!c)}})};

package/build/es/polyfill/checkboxOption/CheckboxOption.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.function.name.js";import PropTypes from"prop-types";import CheckboxButton from"../checkboxButton";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var CheckboxOption=function(a){var b=a["aria-label"],c=a.media,d=a.title,e=a.content,f=a.name,g=a.checked,h=a.onChange,i=a.complex,j=a.disabled,k=a.showMediaCircle,l=a.showMediaAtAllSizes;return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{"aria-label":b,media:c,title:d,content:e,name:f,complex:i,disabled:j,showMediaCircle:k,showMediaAtAllSizes:l}),{},{button:/*#__PURE__*/_jsx(CheckboxButton,{checked:g,disabled:j,onChange:function onChange(){return h(!g)}})}))};CheckboxOption.propTypes={"aria-label":PropTypes.string,checked:PropTypes.bool,complex:PropTypes.bool,content:PropTypes.node,disabled:PropTypes.bool,id:PropTypes.string,media:PropTypes.node,name:PropTypes.string.isRequired,onChange:PropTypes.func.isRequired,title:PropTypes.node.isRequired,showMediaCircle:PropTypes.bool,showMediaAtAllSizes:PropTypes.bool},CheckboxOption.defaultProps={"aria-label":void 0,checked:!1,complex:!1,content:null,disabled:!1,id:void 0,media:null,showMediaCircle:!0,showMediaAtAllSizes:!1};export default CheckboxOption;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","disabled","onChange"];import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{forwardRef}from"react";import CheckboxButton from"../checkboxButton";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var CheckboxOption=/*#__PURE__*/forwardRef(function(a,b){var c=a.checked,d=a.disabled,e=a.onChange,f=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},f),{},{ref:b,disabled:d,button:/*#__PURE__*/_jsx(CheckboxButton,{checked:c,disabled:d,onChange:function onChange(){return e(!c)}})}))});export default CheckboxOption;

package/build/es/polyfill/checkboxOption/CheckboxOption.spec.js

@@ -0,0 +1 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}/* eslint-disable jest/expect-expect */import"@testing-library/jest-dom";import{render,fireEvent,screen}from"../test-utils";import CheckboxOption from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Checkbox option",function(){var a={id:"id",name:"name",title:"Title",onChange:jest.fn(),"aria-label":"test-label"};describe("by default",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByRole("checkbox");it("is not checked",function(){expect(b).not.toBeChecked()}),it("is not disabled",function(){expect(b).toBeEnabled()})}),it("has `aria-label` attr",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByLabelText("test-label");expect(b).toBeInTheDocument()}),it("is checked when checked prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0}))),expect(screen.getByRole("checkbox")).toBeChecked()}),it("is disabled when disabled prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0}))),expect(screen.getByRole("checkbox")).toBeDisabled()}),describe("onChange",function(){it("is called with new checked value when the option is clicked",function(){var b=jest.fn(),c=render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{onChange:b}))),d=c.rerender,e=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!0),d(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0,onChange:b}))),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!1)}),it("is not called if the option is disabled",function(){var b=jest.fn();render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0,onChange:b})));var c=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(c),expect(b).not.toHaveBeenCalled()})})});

package/build/es/polyfill/checkboxOption/CheckboxOption.story.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import CheckboxOption from"./CheckboxOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:CheckboxOption,title:"CheckboxOption"};var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};

package/build/types/checkboxButton/CheckboxButton.d.ts

@@ -1,17 +1,4 @@
-import * as React from 'react';
-
-export interface CheckboxButtonProps {
-    /**
-     * Provide this if the CheckboxButton is being used without a label
-     */
-    "aria-label"?: string;
-    checked?: boolean;
-    className?: string;
-    disabled?: boolean;
-    onChange: (...args: any[])=>any;
-}
-
-declare const CheckboxButton: React.FC<CheckboxButtonProps>;
-
-export default CheckboxButton;
-
+import { HTMLProps } from 'react';
+export declare type CheckboxButtonProps = HTMLProps<HTMLInputElement>;
+declare const CheckboxButton: import("react").ForwardRefExoticComponent<Pick<CheckboxButtonProps, "id" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "value" | "className" | "open" | "list" | "role" | "onMouseDown" | "content" | "size" | "onClick" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "media" | "as" | "disabled" | "name" | "htmlFor" | "href" | "target" | "classID" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "multiple" | "download" | "coords" | "autoPlay" | "controls" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "encType" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "challenge" | "keyType" | "keyParams" | "charSet" | "httpEquiv" | "high" | "low" | "reversed" | "start" | "selected" | "async" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "maxLength" | "minLength" | "default" | "kind" | "src" | "srcLang" | "preload" | "type" | "step" | "key" | "crossOrigin" | "defer" | "height" | "hrefLang" | "integrity" | "loop" | "marginHeight" | "marginWidth" | "max" | "mediaGroup" | "method" | "min" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "readOnly" | "rel" | "required" | "rows" | "sandbox" | "scoped" | "scrolling" | "seamless" | "shape" | "sizes" | "srcDoc" | "srcSet" | "useMap" | "width" | "wmode" | "wrap"> & import("react").RefAttributes<HTMLInputElement>>;
+export default CheckboxButton;

package/build/types/checkboxButton/CheckboxButton.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/types/checkboxButton/CheckboxButton.story.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    component: import("react").ForwardRefExoticComponent<Pick<import("./CheckboxButton").CheckboxButtonProps, "id" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "value" | "className" | "open" | "list" | "role" | "onMouseDown" | "content" | "size" | "onClick" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "media" | "as" | "disabled" | "name" | "htmlFor" | "href" | "target" | "classID" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "multiple" | "download" | "coords" | "autoPlay" | "controls" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "encType" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "challenge" | "keyType" | "keyParams" | "charSet" | "httpEquiv" | "high" | "low" | "reversed" | "start" | "selected" | "async" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "maxLength" | "minLength" | "default" | "kind" | "src" | "srcLang" | "preload" | "type" | "step" | "key" | "crossOrigin" | "defer" | "height" | "hrefLang" | "integrity" | "loop" | "marginHeight" | "marginWidth" | "max" | "mediaGroup" | "method" | "min" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "readOnly" | "rel" | "required" | "rows" | "sandbox" | "scoped" | "scrolling" | "seamless" | "shape" | "sizes" | "srcDoc" | "srcSet" | "useMap" | "width" | "wmode" | "wrap"> & import("react").RefAttributes<HTMLInputElement>>;
+    title: string;
+};
+export default _default;
+export declare const Basic: () => JSX.Element;

package/build/types/checkboxOption/CheckboxOption.d.ts

@@ -1,21 +1,24 @@
-import * as React from 'react';
-
-export interface CheckboxOptionProps {
-    "aria-label"?: string;
-    checked?: boolean;
-    complex?: boolean;
-    content?: React.ReactNode;
-    disabled?: boolean;
-    id?: string;
-    media?: React.ReactNode;
-    name: string;
-    onChange: (...args: any[])=>any;
-    title: React.ReactNode;
-    showMediaCircle?: boolean;
-    showMediaAtAllSizes?: boolean;
-}
-
-declare const CheckboxOption: React.FC<CheckboxOptionProps>;
-
-export default CheckboxOption;
-
+/// <reference types="react" />
+import { ReferenceType } from '../common/Option/Option';
+import { BaseOptionProps } from '../common/Option/Option';
+export declare type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
+    /**
+     * The checked state of the checkbox.
+     */
+    checked?: boolean;
+    /**
+     * Function to call when the checkbox option is clicked
+     */
+    onChange: (value: boolean) => void;
+};
+declare const CheckboxOption: import("react").ForwardRefExoticComponent<Omit<BaseOptionProps, "onChange"> & {
+    /**
+     * The checked state of the checkbox.
+     */
+    checked?: boolean | undefined;
+    /**
+     * Function to call when the checkbox option is clicked
+     */
+    onChange: (value: boolean) => void;
+} & import("react").RefAttributes<ReferenceType>>;
+export default CheckboxOption;

package/build/types/checkboxOption/CheckboxOption.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/types/checkboxOption/CheckboxOption.story.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    component: import("react").ForwardRefExoticComponent<Omit<import("../common/Option/Option").BaseOptionProps, "onChange"> & {
+        checked?: boolean | undefined;
+        onChange: (value: boolean) => void;
+    } & import("react").RefAttributes<import("../common/Option/Option").ReferenceType>>;
+    title: string;
+};
+export default _default;
+export declare const Basic: () => JSX.Element;
+export declare const Multiple: () => JSX.Element;

package/build/types/checkboxOption/index.d.ts

@@ -1 +1 @@
-export { default } from "./CheckboxOption";
+export { default } from './CheckboxOption';

package/build/types/common/Option/Option.d.ts

@@ -1,8 +1,9 @@
 import { MouseEvent, HTMLAttributes, ReactNode, ElementType } from 'react';
 import { LinkProps } from '../commonProps';
-interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+export interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     'aria-label'?: string;
     media?: ReactNode;
+    name?: string;
     htmlFor?: string;
     title: ReactNode;
     content?: ReactNode;