npm - @popsure/dirty-swan - Versions diffs - 0.58.7 → 0.59.0-alpha - Mend

@popsure/dirty-swan 0.58.7 → 0.59.0-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (244) hide show

package/dist/esm/components/downloadButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/downloadButton/index.tsx"],"sourcesContent":["import { Button } from '../button';\nimport { DownloadStatus } from '../../models/download';\nimport { CheckIcon, DownloadIcon } from '../icon/icons';\nimport styles from './style.module.scss';\n\nexport interface DownloadButtonProps {\n downloadStatus: DownloadStatus;\n onDownload: () => void;\n className?: string;\n customFail?: React.ReactNode;\n}\n\nconst InitialButton = ({ onDownload }: { onDownload: () => void }) => (\n <Button\n className={`w100 ${styles.button}`}\n leftIcon={<DownloadIcon />}\n onClick={onDownload}\n data-cy=\"download-documents-button\"\n >\n Download\n </Button>\n);\n\n// TODO: Allow setting loading to true to display text\nconst GeneratingButton = () => (\n <Button\n className={`w100 ${styles.button}`}\n loading={true}\n >\n Generating\n </Button>\n);\n\nconst CompletedChip = () => (\n <div className={styles['chip-complete']}>\n <CheckIcon color={'~~grey~~-~~500~~'} size={16} />\n <div className=\"p-h4 tc-~~grey~~-~~500~~ ml8\">Download complete</div>\n </div>\n);\n\nconst DownloadButton = ({\n downloadStatus,\n onDownload,\n className = '',\n customFail,\n}: DownloadButtonProps) => {\n const mapDownloadButton: { [K in DownloadStatus]: React.ReactNode } = {\n INITIAL: <InitialButton onDownload={onDownload} />,\n GENERATING: <GeneratingButton />,\n COMPLETED: <CompletedChip />,\n FAILED: <InitialButton onDownload={onDownload} />,\n };\n\n return (\n <div className={`d-flex fd-column ai-center ${className}`}>\n <div className=\"ws4\">{mapDownloadButton[downloadStatus]}</div>\n {downloadStatus === 'FAILED' && (\n <div className=\"p-notice p-notice--danger p-p mt40 wmx5\">\n {customFail ??\n 'An error occured when generating documents. Please try again or contact us.'}\n </div>\n )}\n </div>\n );\n};\n\nexport { DownloadButton };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;AAYA,IAAM,aAAa,GAAG,UAAC,EAA0C;QAAxC,UAAU,gBAAA;IAAmC,QACpEA,IAAC,MAAM,IACL,SAAS,EAAE,eAAQ,MAAM,CAAC,MAAM,CAAE,EAClC,QAAQ,EAAEA,IAAC,YAAY,KAAG,EAC1B,OAAO,EAAE,UAAU,aACX,2BAA2B,yBAG5B;AAR2D,CASrE,CAAC;AAEF;AACA,IAAM,gBAAgB,GAAG,cAAM,QAC7BA,IAAC,MAAM,IACL,SAAS,EAAE,eAAQ,MAAM,CAAC,MAAM,CAAE,EAClC,OAAO,EAAE,IAAI,2BAGN,IACV,CAAC;AAEF,IAAM,aAAa,GAAG,cAAM,QAC1BC,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,aACrCD,IAAC,SAAS,IAAC,KAAK,EAAE,~~UAAU~~,EAAE,IAAI,EAAE,EAAE,GAAI,~~EAC1CA~~,aAAK,SAAS,EAAC,~~sBAAsB~~,kCAAwB,~~IACzD~~,IACP,CAAC;IAEI,cAAc,GAAG,UAAC,EAKF;QAJpB,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,UAAU,gBAAA;IAEV,IAAM,iBAAiB,GAA+C;QACpE,OAAO,EAAEA,IAAC,aAAa,IAAC,UAAU,EAAE,UAAU,GAAI;QAClD,UAAU,EAAEA,IAAC,gBAAgB,KAAG;QAChC,SAAS,EAAEA,IAAC,aAAa,KAAG;QAC5B,MAAM,EAAEA,IAAC,aAAa,IAAC,UAAU,EAAE,UAAU,GAAI;KAClD,CAAC;IAEF,QACEC,cAAK,SAAS,EAAE,qCAA8B,SAAS,CAAE,aACvDD,aAAK,SAAS,EAAC,KAAK,YAAE,iBAAiB,CAAC,cAAc,CAAC,GAAO,EAC7D,cAAc,KAAK,QAAQ,KAC1BA,aAAK,SAAS,EAAC,yCAAyC,YACrD,UAAU,aAAV,UAAU,cAAV,UAAU,GACT,6EAA6E,GAC3E,CACP,IACG,EACN;AACJ;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/downloadButton/index.tsx"],"sourcesContent":["import { Button } from '../button';\nimport { DownloadStatus } from '../../models/download';\nimport { CheckIcon, DownloadIcon } from '../icon/icons';\nimport styles from './style.module.scss';\n\nexport interface DownloadButtonProps {\n downloadStatus: DownloadStatus;\n onDownload: () => void;\n className?: string;\n customFail?: React.ReactNode;\n}\n\nconst InitialButton = ({ onDownload }: { onDownload: () => void }) => (\n <Button\n className={`w100 ${styles.button}`}\n leftIcon={<DownloadIcon />}\n onClick={onDownload}\n data-cy=\"download-documents-button\"\n >\n Download\n </Button>\n);\n\n// TODO: Allow setting loading to true to display text\nconst GeneratingButton = () => (\n <Button\n className={`w100 ${styles.button}`}\n loading={true}\n >\n Generating\n </Button>\n);\n\nconst CompletedChip = () => (\n <div className={styles['chip-complete']}>\n <CheckIcon color={'neutral-600'} size={16} />\n <div className=\"p-h4 tc-neutral-600 ml8\">Download complete</div>\n </div>\n);\n\nconst DownloadButton = ({\n downloadStatus,\n onDownload,\n className = '',\n customFail,\n}: DownloadButtonProps) => {\n const mapDownloadButton: { [K in DownloadStatus]: React.ReactNode } = {\n INITIAL: <InitialButton onDownload={onDownload} />,\n GENERATING: <GeneratingButton />,\n COMPLETED: <CompletedChip />,\n FAILED: <InitialButton onDownload={onDownload} />,\n };\n\n return (\n <div className={`d-flex fd-column ai-center ${className}`}>\n <div className=\"ws4\">{mapDownloadButton[downloadStatus]}</div>\n {downloadStatus === 'FAILED' && (\n <div className=\"p-notice p-notice--danger p-p mt40 wmx5\">\n {customFail ??\n 'An error occured when generating documents. Please try again or contact us.'}\n </div>\n )}\n </div>\n );\n};\n\nexport { DownloadButton };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;AAYA,IAAM,aAAa,GAAG,UAAC,EAA0C;QAAxC,UAAU,gBAAA;IAAmC,QACpEA,IAAC,MAAM,IACL,SAAS,EAAE,eAAQ,MAAM,CAAC,MAAM,CAAE,EAClC,QAAQ,EAAEA,IAAC,YAAY,KAAG,EAC1B,OAAO,EAAE,UAAU,aACX,2BAA2B,yBAG5B;AAR2D,CASrE,CAAC;AAEF;AACA,IAAM,gBAAgB,GAAG,cAAM,QAC7BA,IAAC,MAAM,IACL,SAAS,EAAE,eAAQ,MAAM,CAAC,MAAM,CAAE,EAClC,OAAO,EAAE,IAAI,2BAGN,IACV,CAAC;AAEF,IAAM,aAAa,GAAG,cAAM,QAC1BC,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,aACrCD,IAAC,SAAS,IAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,EAAE,GAAI,EAC7CA,aAAK,SAAS,EAAC,yBAAyB,kCAAwB,IAC5D,IACP,CAAC;IAEI,cAAc,GAAG,UAAC,EAKF;QAJpB,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,UAAU,gBAAA;IAEV,IAAM,iBAAiB,GAA+C;QACpE,OAAO,EAAEA,IAAC,aAAa,IAAC,UAAU,EAAE,UAAU,GAAI;QAClD,UAAU,EAAEA,IAAC,gBAAgB,KAAG;QAChC,SAAS,EAAEA,IAAC,aAAa,KAAG;QAC5B,MAAM,EAAEA,IAAC,aAAa,IAAC,UAAU,EAAE,UAAU,GAAI;KAClD,CAAC;IAEF,QACEC,cAAK,SAAS,EAAE,qCAA8B,SAAS,CAAE,aACvDD,aAAK,SAAS,EAAC,KAAK,YAAE,iBAAiB,CAAC,cAAc,CAAC,GAAO,EAC7D,cAAc,KAAK,QAAQ,KAC1BA,aAAK,SAAS,EAAC,yCAAyC,YACrD,UAAU,aAAV,UAAU,cAAV,UAAU,GACT,6EAA6E,GAC3E,CACP,IACG,EACN;AACJ;;;;"}

package/dist/esm/components/icon/icons.stories.js CHANGED Viewed

@@ -400,7 +400,7 @@ import './icons/Zap.js';
 import './icons/ZoomIn.js';
 import './icons/ZoomOut.js';
-var css_248z = ".style-module_searchBar__2IN5T {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: 1px solid #ededf2;\n  padding: 4px 20px;\n  z-index: 9;\n}";
+var css_248z = ".style-module_searchBar__2IN5T {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: 1px solid #e7e7ed;\n  padding: 4px 20px;\n  z-index: 9;\n}";
 var styles = {"searchBar":"style-module_searchBar__2IN5T"};
 styleInject(css_248z);
@@ -430,7 +430,7 @@ var IconsList = function () {
     };
     return (jsxs("div", { children: [jsx("div", { className: classNames(styles.searchBar, 'bg-white'), children: jsxs("div", { className: 'd-flex gap8 wmx12 m-auto', children: [jsx(Input, { className: 'w70', onChange: handleOnSearch, placeholder: 'Search icon', value: value }), jsx(Button, { className: 'w30', disabled: !value, onClick: clearSearch, children: "Clear search" })] }) }), jsx("div", { className: 'd-flex f-wrap mt80', children: options.map(function (_a) {
                     var iconKey = _a[0], Icon = _a[1];
-                    return (jsx("div", { className: "w20 p8", children: jsxs("div", { className: 'br4 p24 pt16 pb16 bg-grey-100 w100 d-flex fd-column ai-center', children: [jsx(Icon, { size: 32 }), jsx("span", { className: 'p-p--small', children: iconKey })] }) }, iconKey));
+                    return (jsx("div", { className: "w20 p8", children: jsxs("div", { className: 'br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center', children: [jsx(Icon, { size: 32 }), jsx("span", { className: 'p-p--small', children: iconKey })] }) }, iconKey));
                 }) })] }));
 };

package/dist/esm/components/icon/icons.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icons.stories.js","sources":["../../../../../src/lib/components/icon/icons.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { Input } from '../input';\nimport * as icons from './icons';\nimport { Button } from '../button';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\nconst story = {\n title: 'JSX/Icon/IconsList',\n};\n\nconst iconsList = Object.entries(icons);\n\nexport const IconsList = () => {\n const [value, setValue] = useState('');\n const [options, setOptions] = useState(iconsList);\n\n const clearSearch = () => {\n setValue('');\n setOptions(iconsList);\n };\n\n const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n const searchValue = event.target.value;\n setValue(event.target.value);\n\n if (searchValue === '') {\n setOptions(iconsList);\n return;\n }\n\n setOptions(iconsList.filter(([key]) => \n key.toLowerCase()\n .includes(searchValue.toLowerCase())\n ));\n };\n\n return (\n <div>\n <div className={classNames(styles.searchBar, 'bg-white')}>\n <div className='d-flex gap8 wmx12 m-auto'>\n <Input\n className='w70'\n onChange={handleOnSearch}\n placeholder='Search icon'\n value={value} \n />\n <Button className='w30' disabled={!value} onClick={clearSearch}>\n Clear search\n </Button>\n </div>\n </div>\n\n <div className='d-flex f-wrap mt80'>\n {options.map(([iconKey, Icon]) => (\n <div key={iconKey} className=\"w20 p8\">\n <div className='br4 p24 pt16 pb16 bg-~~grey~~-~~100~~ w100 d-flex fd-column ai-center'>\n <Icon size={32} />\n <span className='p-p--small'>{iconKey}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOM,KAAK,GAAG;IACZ,KAAK,EAAE,oBAAoB;EAC3B;AAEF,IAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE3B,SAAS,GAAG;IACjB,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACjC,IAAA,KAAwB,QAAQ,CAAC,SAAS,CAAC,EAA1C,OAAO,QAAA,EAAE,UAAU,QAAuB,CAAC;IAElD,IAAM,WAAW,GAAG;QAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,UAAU,CAAC,SAAS,CAAC,CAAC;KACvB,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,WAAW,KAAK,EAAE,EAAE;YACtB,UAAU,CAAC,SAAS,CAAC,CAAC;YACtB,OAAO;SACR;QAED,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,UAAC,EAAK;gBAAJ,GAAG,QAAA;YAC/B,OAAA,GAAG,CAAC,WAAW,EAAE;iBACd,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;SAAA,CACvC,CAAC,CAAC;KACJ,CAAC;IAEF,QACEA,yBACEC,aAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,YACtDD,cAAK,SAAS,EAAC,0BAA0B,aACzCC,IAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,KAAK,GACZ,EACFA,IAAC,MAAM,IAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,6BAErD,IACH,GACF,EAENA,aAAK,SAAS,EAAC,oBAAoB,YAChC,OAAO,CAAC,GAAG,CAAC,UAAC,EAAe;wBAAd,OAAO,QAAA,EAAE,IAAI,QAAA;oBAAM,QAChCA,aAAmB,SAAS,EAAC,QAAQ,YACnCD,cAAK,SAAS,EAAC~~,+DAA+D~~,~~aAC5EC~~,IAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,EAClBA,cAAM,SAAS,EAAC,YAAY,YAAE,OAAO,GAAQ,IACzC,IAJE,OAAO,CAKX;iBACP,CAAC,GACE,IACF,EACN;AACJ;;;;;"}
1	+ {"version":3,"file":"icons.stories.js","sources":["../../../../../src/lib/components/icon/icons.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { Input } from '../input';\nimport * as icons from './icons';\nimport { Button } from '../button';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\nconst story = {\n title: 'JSX/Icon/IconsList',\n};\n\nconst iconsList = Object.entries(icons);\n\nexport const IconsList = () => {\n const [value, setValue] = useState('');\n const [options, setOptions] = useState(iconsList);\n\n const clearSearch = () => {\n setValue('');\n setOptions(iconsList);\n };\n\n const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n const searchValue = event.target.value;\n setValue(event.target.value);\n\n if (searchValue === '') {\n setOptions(iconsList);\n return;\n }\n\n setOptions(iconsList.filter(([key]) => \n key.toLowerCase()\n .includes(searchValue.toLowerCase())\n ));\n };\n\n return (\n <div>\n <div className={classNames(styles.searchBar, 'bg-white')}>\n <div className='d-flex gap8 wmx12 m-auto'>\n <Input\n className='w70'\n onChange={handleOnSearch}\n placeholder='Search icon'\n value={value} \n />\n <Button className='w30' disabled={!value} onClick={clearSearch}>\n Clear search\n </Button>\n </div>\n </div>\n\n <div className='d-flex f-wrap mt80'>\n {options.map(([iconKey, Icon]) => (\n <div key={iconKey} className=\"w20 p8\">\n <div className='br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center'>\n <Icon size={32} />\n <span className='p-p--small'>{iconKey}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOM,KAAK,GAAG;IACZ,KAAK,EAAE,oBAAoB;EAC3B;AAEF,IAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE3B,SAAS,GAAG;IACjB,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACjC,IAAA,KAAwB,QAAQ,CAAC,SAAS,CAAC,EAA1C,OAAO,QAAA,EAAE,UAAU,QAAuB,CAAC;IAElD,IAAM,WAAW,GAAG;QAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,UAAU,CAAC,SAAS,CAAC,CAAC;KACvB,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,WAAW,KAAK,EAAE,EAAE;YACtB,UAAU,CAAC,SAAS,CAAC,CAAC;YACtB,OAAO;SACR;QAED,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,UAAC,EAAK;gBAAJ,GAAG,QAAA;YAC/B,OAAA,GAAG,CAAC,WAAW,EAAE;iBACd,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;SAAA,CACvC,CAAC,CAAC;KACJ,CAAC;IAEF,QACEA,yBACEC,aAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,YACtDD,cAAK,SAAS,EAAC,0BAA0B,aACzCC,IAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,KAAK,GACZ,EACFA,IAAC,MAAM,IAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,6BAErD,IACH,GACF,EAENA,aAAK,SAAS,EAAC,oBAAoB,YAChC,OAAO,CAAC,GAAG,CAAC,UAAC,EAAe;wBAAd,OAAO,QAAA,EAAE,IAAI,QAAA;oBAAM,QAChCA,aAAmB,SAAS,EAAC,QAAQ,YACnCD,cAAK,SAAS,EAAC,iEAAiE,aAC9EC,IAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,EAClBA,cAAM,SAAS,EAAC,YAAY,YAAE,OAAO,GAAQ,IACzC,IAJE,OAAO,CAKX;iBACP,CAAC,GACE,IACF,EACN;AACJ;;;;;"}

package/dist/esm/components/icon/index.stories.js CHANGED Viewed

@@ -431,7 +431,7 @@ var story = {
     args: {
         icon: 'InfoIcon',
         size: 32,
-        color: 'primary-500',
+        color: 'purple-600',
         noMargin: false,
         className: ''
     }

package/dist/esm/components/icon/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/icon/index.stories.tsx"],"sourcesContent":["import { IconWrapper, IconWrapperProps } from './IconWrapper';\nimport * as icons from './icons';\n\nconst iconsList = Object.keys(icons);\ntype IconKey = typeof iconsList[number];\n\nconst story = {\n title: 'JSX/Icon',\n component: IconWrapper,\n argTypes: {\n icon: {\n description: 'Identifier key of the icon',\n table: {\n type: { \n summary: 'IconKey (see Available Icons story for all icons)'\n },\n },\n control: 'select',\n options: iconsList,\n },\n size: {\n description: 'Icon size',\n },\n color: {\n description: 'Icon color',\n },\n className: {\n description: 'Class name for updating components styles',\n control: 'text',\n table: {\n type: { \n summary: 'Your own custom classnames can be added here'\n },\n },\n },\n },\n args: {\n icon: 'InfoIcon',\n size: 32,\n color: '~~primary~~-~~500~~',\n noMargin: false,\n className: ''\n }\n};\n\nexport const IconStory = ({ color, className, icon, size }: IconWrapperProps & { icon: IconKey }) => {\n // @ts-ignore\n const Icon = icons?.[icon];\n\n return Icon && (\n <Icon\n size={size}\n color={color}\n className={className}\n />\n );\n}\n\nIconStory.storyName = \"Icon\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAG/B,KAAK,GAAG;IACZ,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,4BAA4B;YACzC,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,mDAAmD;iBAC7D;aACF;YACD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,WAAW;SACzB;QACD,KAAK,EAAE;YACL,WAAW,EAAE,YAAY;SAC1B;QACD,SAAS,EAAE;YACT,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,8CAA8C;iBACxD;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,~~aAAa~~;~~QACpB~~,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,EAAE;KACd;EACD;IAEW,SAAS,GAAG,UAAC,EAAsE;QAApE,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA;;IAEtD,IAAM,IAAI,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,IAAI,CAAC,CAAC;IAE3B,OAAO,IAAI,KACTA,IAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,EAAC;AAED,SAAS,CAAC,SAAS,GAAG,MAAM;;;;;"}
1	+ {"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/icon/index.stories.tsx"],"sourcesContent":["import { IconWrapper, IconWrapperProps } from './IconWrapper';\nimport * as icons from './icons';\n\nconst iconsList = Object.keys(icons);\ntype IconKey = typeof iconsList[number];\n\nconst story = {\n title: 'JSX/Icon',\n component: IconWrapper,\n argTypes: {\n icon: {\n description: 'Identifier key of the icon',\n table: {\n type: { \n summary: 'IconKey (see Available Icons story for all icons)'\n },\n },\n control: 'select',\n options: iconsList,\n },\n size: {\n description: 'Icon size',\n },\n color: {\n description: 'Icon color',\n },\n className: {\n description: 'Class name for updating components styles',\n control: 'text',\n table: {\n type: { \n summary: 'Your own custom classnames can be added here'\n },\n },\n },\n },\n args: {\n icon: 'InfoIcon',\n size: 32,\n color: 'purple-600',\n noMargin: false,\n className: ''\n }\n};\n\nexport const IconStory = ({ color, className, icon, size }: IconWrapperProps & { icon: IconKey }) => {\n // @ts-ignore\n const Icon = icons?.[icon];\n\n return Icon && (\n <Icon\n size={size}\n color={color}\n className={className}\n />\n );\n}\n\nIconStory.storyName = \"Icon\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAG/B,KAAK,GAAG;IACZ,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,4BAA4B;YACzC,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,mDAAmD;iBAC7D;aACF;YACD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,WAAW;SACzB;QACD,KAAK,EAAE;YACL,WAAW,EAAE,YAAY;SAC1B;QACD,SAAS,EAAE;YACT,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,8CAA8C;iBACxD;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,EAAE;KACd;EACD;IAEW,SAAS,GAAG,UAAC,EAAsE;QAApE,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA;;IAEtD,IAAM,IAAI,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,IAAI,CAAC,CAAC;IAE3B,OAAO,IAAI,KACTA,IAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,EAAC;AAED,SAAS,CAAC,SAAS,GAAG,MAAM;;;;;"}

package/dist/esm/components/informationBox/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ import 'react';
 import '../icon/IconWrapper/IconWrapper.js';
 import '../../tslib.es6-a39f91fc.js';
-var css_248z = ".style-module_informationBox__1dzYO {\n  border: 1px solid;\n}\n.style-module_informationBox--information__rsyoM {\n  background-color: #e5f0ff;\n  border-color: #8bb4ea;\n}\n.style-module_informationBox--error__3BqOR {\n  background-color: #fedede;\n  border-color: #e55454;\n}\n.style-module_informationBox--warning__10V-E {\n  background-color: #fff8e3;\n  border-color: #f7ce5c;\n}\n.style-module_informationBox--success__d3gTw {\n  background-color: #e4ffe6;\n  border-color: #84de8a;\n}\n.style-module_informationBox--neutral__1XsMl {\n  background-color: #fff;\n  border-color: #fff;\n}";
+var css_248z = ".style-module_informationBox__1dzYO {\n  border: 1px solid;\n}\n.style-module_informationBox--information__rsyoM {\n  background-color: #E5F0FF;\n  border-color: #8BB4EA;\n}\n.style-module_informationBox--error__3BqOR {\n  background-color: #FEE6E6;\n  border-color: #E55454;\n}\n.style-module_informationBox--warning__10V-E {\n  background-color: #FEFAEC;\n  border-color: #F0D26F;\n}\n.style-module_informationBox--success__d3gTw {\n  background-color: #E6FAF1;\n  border-color: #85DCB4;\n}\n.style-module_informationBox--neutral__1XsMl {\n  background-color: #fff;\n  border-color: #fff;\n}";
 var styles = {"informationBox":"style-module_informationBox__1dzYO","informationBox--information":"style-module_informationBox--information__rsyoM","informationBox--error":"style-module_informationBox--error__3BqOR","informationBox--warning":"style-module_informationBox--warning__10V-E","informationBox--success":"style-module_informationBox--success__d3gTw","informationBox--neutral":"style-module_informationBox--neutral__1XsMl"};
 styleInject(css_248z);
@@ -17,7 +17,7 @@ var InformationBox = function (_a) {
         error: 'red-500',
         success: 'green-500',
         information: 'blue-500',
-        neutral: 'purple-500',
+        neutral: 'purple-600',
     };
     return (jsx("div", { className: classNames(className, 'p16 br8 color-black', styles.informationBox, styles["informationBox--".concat(variant)]), role: "alert", children: jsxs("div", { className: "d-flex", children: [showIcon && (jsx("div", { "data-testid": "information-box-icon", className: 'mr8', children: jsx(AlertCircleIcon, { className: styles.icon, color: mapAlertIconColor[variant], size: size === 'default' ? 24 : 16 }) })), jsxs("div", { children: [title && (jsx("h4", { "data-testid": "information-box-title", className: classNames(size === 'default' ? 'p-h4' : 'p-h5', 'mb8'), children: title })), jsx("p", { className: size === 'default' ? 'p-p' : 'p-p--small', children: children })] })] }) }));
 };

package/dist/esm/components/informationBox/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/informationBox/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { AlertCircleIcon } from '../icon/icons';\nimport { Color } from '../../models/styles';\nimport styles from './style.module.scss';\n\ntype Variant = 'warning' \| 'error' \| 'success' \| 'information' \| 'neutral';\n\nexport interface InformationBoxProps {\n className?: string;\n variant?: Variant;\n title?: string;\n children: ReactNode;\n showIcon?: boolean;\n size?: 'default' \| 'small';\n}\n\nconst InformationBox = ({\n className = '',\n variant = 'information',\n title,\n children,\n showIcon,\n size = 'default',\n}: InformationBoxProps) => {\n const mapAlertIconColor: { [k in Variant]: Color } = {\n warning: 'yellow-500',\n error: 'red-500',\n success: 'green-500',\n information: 'blue-500',\n neutral: 'purple-~~500~~',\n };\n\n return (\n <div\n className={classNames(\n className,\n 'p16 br8 color-black',\n styles.informationBox,\n styles[`informationBox--${variant}`]\n )}\n role=\"alert\"\n >\n <div className=\"d-flex\">\n {showIcon && (\n <div data-testid=\"information-box-icon\" className={'mr8'}>\n <AlertCircleIcon\n className={styles.icon}\n color={mapAlertIconColor[variant]}\n size={size === 'default' ? 24 : 16}\n />\n </div>\n )}\n <div>\n {title && (\n <h4\n data-testid=\"information-box-title\"\n className={classNames(\n size === 'default' ? 'p-h4' : 'p-h5',\n 'mb8'\n )}\n >\n {title}\n </h4>\n )}\n\n <p className={size === 'default' ? 'p-p' : 'p-p--small'}>\n {children}\n </p>\n </div>\n </div>\n </div>\n );\n};\n\nexport { InformationBox };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;IAkBM,cAAc,GAAG,UAAC,EAOF;QANpB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,YAAgB,EAAhB,IAAI,mBAAG,SAAS,KAAA;IAEhB,IAAM,iBAAiB,GAA8B;QACnD,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,WAAW;QACpB,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,YAAY;KACtB,CAAC;IAEF,QACEA,aACE,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,qBAAqB,EACrB,MAAM,CAAC,cAAc,EACrB,MAAM,CAAC,0BAAmB,OAAO,CAAE,CAAC,CACrC,EACD,IAAI,EAAC,OAAO,YAEZC,cAAK,SAAS,EAAC,QAAQ,aACpB,QAAQ,KACPD,4BAAiB,sBAAsB,EAAC,SAAS,EAAE,KAAK,YACtDA,IAAC,eAAe,IACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,EACjC,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,EAAE,GAAG,EAAE,GAClC,GACE,CACP,EACDC,yBACG,KAAK,KACJD,2BACc,uBAAuB,EACnC,SAAS,EAAE,UAAU,CACnB,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,EACpC,KAAK,CACN,YAEA,KAAK,GACH,CACN,EAEDA,WAAG,SAAS,EAAE,IAAI,KAAK,SAAS,GAAG,KAAK,GAAG,YAAY,YACpD,QAAQ,GACP,IACA,IACF,GACF,EACN;AACJ;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/informationBox/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { AlertCircleIcon } from '../icon/icons';\nimport { Color } from '../../models/styles';\nimport styles from './style.module.scss';\n\ntype Variant = 'warning' \| 'error' \| 'success' \| 'information' \| 'neutral';\n\nexport interface InformationBoxProps {\n className?: string;\n variant?: Variant;\n title?: string;\n children: ReactNode;\n showIcon?: boolean;\n size?: 'default' \| 'small';\n}\n\nconst InformationBox = ({\n className = '',\n variant = 'information',\n title,\n children,\n showIcon,\n size = 'default',\n}: InformationBoxProps) => {\n const mapAlertIconColor: { [k in Variant]: Color } = {\n warning: 'yellow-500',\n error: 'red-500',\n success: 'green-500',\n information: 'blue-500',\n neutral: 'purple-600',\n };\n\n return (\n <div\n className={classNames(\n className,\n 'p16 br8 color-black',\n styles.informationBox,\n styles[`informationBox--${variant}`]\n )}\n role=\"alert\"\n >\n <div className=\"d-flex\">\n {showIcon && (\n <div data-testid=\"information-box-icon\" className={'mr8'}>\n <AlertCircleIcon\n className={styles.icon}\n color={mapAlertIconColor[variant]}\n size={size === 'default' ? 24 : 16}\n />\n </div>\n )}\n <div>\n {title && (\n <h4\n data-testid=\"information-box-title\"\n className={classNames(\n size === 'default' ? 'p-h4' : 'p-h5',\n 'mb8'\n )}\n >\n {title}\n </h4>\n )}\n\n <p className={size === 'default' ? 'p-p' : 'p-p--small'}>\n {children}\n </p>\n </div>\n </div>\n </div>\n );\n};\n\nexport { InformationBox };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;IAkBM,cAAc,GAAG,UAAC,EAOF;QANpB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,YAAgB,EAAhB,IAAI,mBAAG,SAAS,KAAA;IAEhB,IAAM,iBAAiB,GAA8B;QACnD,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,WAAW;QACpB,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,YAAY;KACtB,CAAC;IAEF,QACEA,aACE,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,qBAAqB,EACrB,MAAM,CAAC,cAAc,EACrB,MAAM,CAAC,0BAAmB,OAAO,CAAE,CAAC,CACrC,EACD,IAAI,EAAC,OAAO,YAEZC,cAAK,SAAS,EAAC,QAAQ,aACpB,QAAQ,KACPD,4BAAiB,sBAAsB,EAAC,SAAS,EAAE,KAAK,YACtDA,IAAC,eAAe,IACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,EACjC,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,EAAE,GAAG,EAAE,GAClC,GACE,CACP,EACDC,yBACG,KAAK,KACJD,2BACc,uBAAuB,EACnC,SAAS,EAAE,UAAU,CACnB,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,EACpC,KAAK,CACN,YAEA,KAAK,GACH,CACN,EAEDA,WAAG,SAAS,EAAE,IAAI,KAAK,SAAS,GAAG,KAAK,GAAG,YAAY,YACpD,QAAQ,GACP,IACA,IACF,GACF,EACN;AACJ;;;;"}

package/dist/esm/components/input/autoSuggestInput/index.js CHANGED Viewed

@@ -2129,7 +2129,7 @@ _defineProperty(Autosuggest, "defaultProps", {
 var dist = Autosuggest["default"];
-var css_248z = "@keyframes style-module_appearInAnimation__yvH4A {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}\n.style-module_suggestionsContainer__2yVXd {\n  position: relative;\n}\n\n.style-module_suggestionsList__11o48 {\n  position: absolute;\n  z-index: 100;\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--ds-primary-500);\n  width: 100%;\n  height: fit-content;\n  max-height: 216px;\n  overflow-y: scroll;\n  background-color: white;\n  animation-name: style-module_appearInAnimation__yvH4A;\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform: translateY(8px);\n}\n\n.style-module_suggestion-option__z7pqG {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  margin: 0;\n  padding: 12px 16px;\n  color: var(--ds-grey-900);\n  min-height: 48px;\n  line-height: 24px;\n}\n\n.style-module_suggestion-img__1TfiA {\n  width: 32px;\n  height: 24px;\n  border-radius: 2px;\n}\n\n.style-module_suggestion-text__7wL31 {\n  flex: 1;\n}\n\n.style-module_nowrap__uks9c {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.style-module_suggestionHighlighted__2zu5h {\n  background-color: var(--ds-primary-100);\n}";
+var css_248z = "@keyframes style-module_appearInAnimation__yvH4A {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}\n.style-module_suggestionsContainer__2yVXd {\n  position: relative;\n}\n\n.style-module_suggestionsList__11o48 {\n  position: absolute;\n  z-index: 100;\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--ds-purple-600);\n  width: 100%;\n  height: fit-content;\n  max-height: 216px;\n  overflow-y: scroll;\n  background-color: white;\n  animation-name: style-module_appearInAnimation__yvH4A;\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform: translateY(8px);\n}\n\n.style-module_suggestion-option__z7pqG {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  margin: 0;\n  padding: 12px 16px;\n  color: var(--ds-neutral-900);\n  min-height: 48px;\n  line-height: 24px;\n}\n\n.style-module_suggestion-img__1TfiA {\n  width: 32px;\n  height: 24px;\n  border-radius: 2px;\n}\n\n.style-module_suggestion-text__7wL31 {\n  flex: 1;\n}\n\n.style-module_nowrap__uks9c {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.style-module_suggestionHighlighted__2zu5h {\n  background-color: var(--ds-purple-300);\n}";
 var styles = {"suggestionsContainer":"style-module_suggestionsContainer__2yVXd","suggestionsList":"style-module_suggestionsList__11o48","appearInAnimation":"style-module_appearInAnimation__yvH4A","suggestion-option":"style-module_suggestion-option__z7pqG","suggestion-img":"style-module_suggestion-img__1TfiA","suggestion-text":"style-module_suggestion-text__7wL31","nowrap":"style-module_nowrap__uks9c","suggestionHighlighted":"style-module_suggestionHighlighted__2zu5h"};
 styleInject(css_248z);

package/dist/esm/components/input/checkbox/index.js CHANGED Viewed

@@ -52,7 +52,7 @@ var Checkbox = function (_a) {
                                 'p-label--bordered': bordered,
                                 'jc-center': customIcon,
                                 'fd-column': customIcon,
-                            }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+                            }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-neutral-700", children: label.description })] })) : (label)] })] }, currentValue));
             })] }));
 };

package/dist/esm/components/input/checkbox/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n title: ReactNode;\n description?: string;\n icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n options: Record<ValueType, ReactNode \| CheckboxWithDescription>;\n value?: ValueType[];\n onChange: (value: ValueType[]) => void;\n wide?: boolean;\n inlineLayout?: boolean;\n bordered?: Boolean;\n classNames?: {\n container?: string;\n label?: string;\n option?: string;\n };\n fieldLegend?: string;\n}\n\nexport const Checkbox = <ValueType extends string>({\n options,\n value = [],\n onChange,\n wide = false,\n inlineLayout = false,\n bordered = true,\n classNames: classNamesObj,\n fieldLegend,\n}: CheckboxProps<ValueType> & {}) => {\n const hasNoneValue = Object.keys(options).includes('NONE');\n\n const handleOnChange = (newValue: ValueType) => {\n if (value?.includes(newValue)) {\n const filteredCheckboxValues = value.filter(\n (selectedValue) => selectedValue !== newValue\n );\n\n onChange(filteredCheckboxValues);\n return;\n }\n\n if (hasNoneValue && newValue === 'NONE') {\n onChange([newValue]);\n return;\n }\n\n if (hasNoneValue && newValue !== 'NONE') {\n const newValues = value\n ? [...value.filter((v) => v !== 'NONE'), newValue]\n : [newValue];\n onChange(newValues);\n return;\n }\n\n const newValues = value ? [...value, newValue] : [newValue];\n onChange(newValues);\n };\n\n const entries = Object.entries(options) as [\n ValueType,\n ReactNode \| CheckboxWithDescription\n ][];\n\n const isCheckboxLabelObject = (\n label: ReactNode \| CheckboxWithDescription\n ): label is CheckboxWithDescription => {\n return (label as CheckboxWithDescription).title !== undefined;\n };\n\n const legend =\n fieldLegend ??\n (Object.keys(options).length > 1\n ? 'Select one or more options'\n : 'You may select this option');\n\n return (\n <fieldset\n className={classNames(\n classNamesObj?.container,\n styles.container,\n 'd-flex gap8',\n {\n [styles.narrow]: !wide,\n 'fd-row': inlineLayout,\n 'f-wrap': inlineLayout,\n 'fd-column': !inlineLayout,\n }\n )}\n >\n <legend className=\"sr-only\">{legend}</legend>\n {entries.map(([currentValue, label]) => {\n const checked = value?.includes(currentValue);\n const customIcon = (label as CheckboxWithDescription)?.icon;\n\n return (\n <div className={classNamesObj?.option} key={currentValue}>\n <input\n className={classNames('p-checkbox', {\n 'p-checkbox--no-icon': customIcon,\n })}\n id={currentValue}\n type=\"checkbox\"\n value={currentValue}\n onChange={() => handleOnChange(currentValue)}\n checked={checked}\n data-testid={`checkbox-input-${currentValue}`}\n />\n\n <label\n htmlFor={currentValue}\n className={classNames(classNamesObj?.label, 'p-label pr16', {\n 'p-label--bordered': bordered,\n 'jc-center': customIcon,\n 'fd-column': customIcon,\n })}\n data-cy={`checkbox-${currentValue}`}\n data-testid={`checkbox-${currentValue}`}\n >\n {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n {isCheckboxLabelObject(label) ? (\n <div>\n <p className=\"p-p\">{label.title}</p>\n <span className=\"d-block p-p p-p--small tc-~~grey~~-~~600~~\">\n {label.description}\n </span>\n </div>\n ) : (\n label\n )}\n </label>\n </div>\n );\n })}\n </fieldset>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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~~oCAAoC~~,~~YACjD~~,KAAK,CAAC,WAAW,GACb,IACH,KAEN,KAAK,CACN,IACK,KAnCkC,YAAY,CAoClD,EACN;aACH,CAAC,IACO,EACX;AACJ;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n title: ReactNode;\n description?: string;\n icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n options: Record<ValueType, ReactNode \| CheckboxWithDescription>;\n value?: ValueType[];\n onChange: (value: ValueType[]) => void;\n wide?: boolean;\n inlineLayout?: boolean;\n bordered?: Boolean;\n classNames?: {\n container?: string;\n label?: string;\n option?: string;\n };\n fieldLegend?: string;\n}\n\nexport const Checkbox = <ValueType extends string>({\n options,\n value = [],\n onChange,\n wide = false,\n inlineLayout = false,\n bordered = true,\n classNames: classNamesObj,\n fieldLegend,\n}: CheckboxProps<ValueType> & {}) => {\n const hasNoneValue = Object.keys(options).includes('NONE');\n\n const handleOnChange = (newValue: ValueType) => {\n if (value?.includes(newValue)) {\n const filteredCheckboxValues = value.filter(\n (selectedValue) => selectedValue !== newValue\n );\n\n onChange(filteredCheckboxValues);\n return;\n }\n\n if (hasNoneValue && newValue === 'NONE') {\n onChange([newValue]);\n return;\n }\n\n if (hasNoneValue && newValue !== 'NONE') {\n const newValues = value\n ? [...value.filter((v) => v !== 'NONE'), newValue]\n : [newValue];\n onChange(newValues);\n return;\n }\n\n const newValues = value ? [...value, newValue] : [newValue];\n onChange(newValues);\n };\n\n const entries = Object.entries(options) as [\n ValueType,\n ReactNode \| CheckboxWithDescription\n ][];\n\n const isCheckboxLabelObject = (\n label: ReactNode \| CheckboxWithDescription\n ): label is CheckboxWithDescription => {\n return (label as CheckboxWithDescription).title !== undefined;\n };\n\n const legend =\n fieldLegend ??\n (Object.keys(options).length > 1\n ? 'Select one or more options'\n : 'You may select this option');\n\n return (\n <fieldset\n className={classNames(\n classNamesObj?.container,\n styles.container,\n 'd-flex gap8',\n {\n [styles.narrow]: !wide,\n 'fd-row': inlineLayout,\n 'f-wrap': inlineLayout,\n 'fd-column': !inlineLayout,\n }\n )}\n >\n <legend className=\"sr-only\">{legend}</legend>\n {entries.map(([currentValue, label]) => {\n const checked = value?.includes(currentValue);\n const customIcon = (label as CheckboxWithDescription)?.icon;\n\n return (\n <div className={classNamesObj?.option} key={currentValue}>\n <input\n className={classNames('p-checkbox', {\n 'p-checkbox--no-icon': customIcon,\n })}\n id={currentValue}\n type=\"checkbox\"\n value={currentValue}\n onChange={() => handleOnChange(currentValue)}\n checked={checked}\n data-testid={`checkbox-input-${currentValue}`}\n />\n\n <label\n htmlFor={currentValue}\n className={classNames(classNamesObj?.label, 'p-label pr16', {\n 'p-label--bordered': bordered,\n 'jc-center': customIcon,\n 'fd-column': customIcon,\n })}\n data-cy={`checkbox-${currentValue}`}\n data-testid={`checkbox-${currentValue}`}\n >\n {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n {isCheckboxLabelObject(label) ? (\n <div>\n <p className=\"p-p\">{label.title}</p>\n <span className=\"d-block p-p p-p--small tc-neutral-700\">\n {label.description}\n </span>\n </div>\n ) : (\n label\n )}\n </label>\n </div>\n );\n })}\n </fieldset>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/input/checkbox/index.stories.js CHANGED Viewed

@@ -89,7 +89,7 @@ var CheckboxWithCustomWrapperStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT1: 'Cat',
             DOG1: 'Dog',
-        }, classNames: { container: 'p32 bg-primary-300 br24 bs-lg' } }));
+        }, classNames: { container: 'p32 bg-purple-500 br24 bs-lg' } }));
 };
 var CheckboxWithCustomOptionStyles = function (_a) {
     var onChange = _a.onChange;
@@ -115,7 +115,7 @@ var CheckboxWithCustomLabelStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT3: 'Cat',
             DOG3: 'Dog',
-        }, classNames: { label: 'bg-grey-900 tc-white' } }));
+        }, classNames: { label: 'bg-neutral-900 tc-white' } }));
 };
 var CheckboxWithInlineLayout = function (_a) {
     var onChange = _a.onChange;

package/dist/esm/components/input/checkbox/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\nimport classNames from 'classnames';\n\nconst story = {\n title: 'JSX/Inputs/Checkbox',\n component: Checkbox,\n argTypes: {\n options: {\n description:\n 'Object that contains the possible options for rendering in the input.',\n },\n value: {\n description: 'Current checked values.',\n },\n fieldLegend: {\n description:\n 'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',\n },\n onChange: {\n description: 'Function called everytime a value changes.',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n wide: {\n description:\n 'Property that defines if options should fill 100% of available horizontal space',\n defaultValue: false,\n },\n bordered: {\n control: 'boolean',\n description:\n 'Property that defines if checkbox should show the border around each label',\n },\n inlineLayout: {\n description:\n 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n },\n className: {\n description: 'ClassNames for custom styling',\n },\n },\n args: {\n options: {\n CAT: {\n title: 'Cat',\n description: 'At least 1',\n },\n DOG: {\n title: 'Dog',\n description: 'At least 2',\n },\n NONE: {\n title: 'None',\n description: 'No pets',\n },\n },\n fieldLegend: 'Owned pets',\n wide: false,\n bordered: true,\n inlineLayout: false,\n classNames: {\n container: '',\n label: '',\n option: '',\n },\n value: [],\n className: '',\n },\n};\n\nexport const CheckboxStory = ({\n onChange,\n options,\n wide,\n bordered,\n classNames,\n inlineLayout,\n fieldLegend,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[]) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n wide={wide}\n options={options}\n onChange={handleOnChange}\n value={checkedValues}\n bordered={bordered}\n classNames={classNames}\n inlineLayout={inlineLayout}\n fieldLegend={fieldLegend}\n />\n );\n};\n\nexport const CheckboxWithCustomWrapperStyles = ({\n onChange,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT1: 'Cat',\n DOG1: 'Dog',\n }}\n classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}\n />\n );\n};\n\nexport const CheckboxWithCustomOptionStyles = ({\n onChange,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT2: 'Cat',\n DOG2: 'Dog',\n }}\n classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n />\n );\n};\n\nexport const CheckboxWithCustomLabelStyles = ({\n onChange,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT3: 'Cat',\n DOG3: 'Dog',\n }}\n classNames={{ label: 'bg-grey-900 tc-white' }}\n />\n );\n};\n\nexport const CheckboxWithInlineLayout = ({\n onChange,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT4: 'Cat',\n DOG4: 'Dog',\n FISHER: 'Fish',\n RABBIT: 'Rabbit',\n RAT: 'Rat',\n ANOTHER: 'Other',\n }}\n classNames={{ option: 'w30' }}\n inlineLayout\n wide\n />\n );\n};\n\nexport const CheckboxWithCustomLabel = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\nimport classNames from 'classnames';\n\nconst story = {\n title: 'JSX/Inputs/Checkbox',\n component: Checkbox,\n argTypes: {\n options: {\n description:\n 'Object that contains the possible options for rendering in the input.',\n },\n value: {\n description: 'Current checked values.',\n },\n fieldLegend: {\n description:\n 'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',\n },\n onChange: {\n description: 'Function called everytime a value changes.',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n wide: {\n description:\n 'Property that defines if options should fill 100% of available horizontal space',\n defaultValue: false,\n },\n bordered: {\n control: 'boolean',\n description:\n 'Property that defines if checkbox should show the border around each label',\n },\n inlineLayout: {\n description:\n 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n },\n className: {\n description: 'ClassNames for custom styling',\n },\n },\n args: {\n options: {\n CAT: {\n title: 'Cat',\n description: 'At least 1',\n },\n DOG: {\n title: 'Dog',\n description: 'At least 2',\n },\n NONE: {\n title: 'None',\n description: 'No pets',\n },\n },\n fieldLegend: 'Owned pets',\n wide: false,\n bordered: true,\n inlineLayout: false,\n classNames: {\n container: '',\n label: '',\n option: '',\n },\n value: [],\n className: '',\n },\n};\n\nexport const CheckboxStory = ({\n onChange,\n options,\n wide,\n bordered,\n classNames,\n inlineLayout,\n fieldLegend,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[]) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n wide={wide}\n options={options}\n onChange={handleOnChange}\n value={checkedValues}\n bordered={bordered}\n classNames={classNames}\n inlineLayout={inlineLayout}\n fieldLegend={fieldLegend}\n />\n );\n};\n\nexport const CheckboxWithCustomWrapperStyles = ({\n onChange,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT1: 'Cat',\n DOG1: 'Dog',\n }}\n classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}\n />\n );\n};\n\nexport const CheckboxWithCustomOptionStyles = ({\n onChange,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT2: 'Cat',\n DOG2: 'Dog',\n }}\n classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n />\n );\n};\n\nexport const CheckboxWithCustomLabelStyles = ({\n onChange,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT3: 'Cat',\n DOG3: 'Dog',\n }}\n classNames={{ label: 'bg-neutral-900 tc-white' }}\n />\n );\n};\n\nexport const CheckboxWithInlineLayout = ({\n onChange,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT4: 'Cat',\n DOG4: 'Dog',\n FISHER: 'Fish',\n RABBIT: 'Rabbit',\n RAT: 'Rat',\n ANOTHER: 'Other',\n }}\n classNames={{ option: 'w30' }}\n inlineLayout\n wide\n />\n );\n};\n\nexport const CheckboxWithCustomLabel = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: CheckboxProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Checkbox\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { c as classNames } from '../../index-6ea95111.js';
 import { g as generateId } from '../../index-69a46657.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-var css_248z = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-grey-500);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-grey-600);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n.style-module_input--with-inside-label__253bZ {\n  padding-top: 9px;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-grey-500);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-grey-600);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
+var css_248z = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-neutral-600);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-neutral-700);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-purple-600);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-purple-600);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n.style-module_input--with-inside-label__253bZ {\n  padding-top: 9px;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-neutral-600);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-neutral-700);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
 var styles = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","input--with-inside-label":"style-module_input--with-inside-label__253bZ","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","label":"style-module_label__3FEZ1","label--with-error":"style-module_label--with-error__166bP","error":"style-module_error__167Zc"};
 styleInject(css_248z);

package/dist/esm/components/input/radio/index.js CHANGED Viewed

@@ -33,7 +33,7 @@ var Radio = function (_a) {
                                 'jc-center': customIcon && !inlineIcon,
                                 'fd-column': customIcon && !inlineIcon,
                                 'p-label--bordered': bordered,
-                            }), "data-cy": "radio-".concat(currentValue), "data-testid": "radio-".concat(currentValue), children: [customIcon && (jsx("div", { className: classNames('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+                            }), "data-cy": "radio-".concat(currentValue), "data-testid": "radio-".concat(currentValue), children: [customIcon && (jsx("div", { className: classNames('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-neutral-700", children: label.description })] })) : (label)] })] }, currentValue));
             })] }));
 };

package/dist/esm/components/input/radio/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/radio/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nimport generateId from '../../../util/generateId';\nexport interface RadioWithDescription {\n title: ReactNode;\n description?: string;\n icon?: (selected: boolean) => ReactNode;\n hideBox?: boolean;\n}\n\nexport interface RadioProps<ValueType extends string> {\n options: Record<ValueType, ReactNode \| RadioWithDescription>;\n value?: ValueType;\n onChange: (value: ValueType) => void;\n wide?: boolean;\n inlineLayout?: boolean;\n inlineIcon?: boolean;\n classNames?: {\n container?: string;\n label?: string;\n option?: string;\n };\n bordered?: boolean;\n disabled?: boolean;\n fieldLegend?: string;\n groupName?: string;\n}\n\nexport const Radio = <ValueType extends string>({\n options,\n value,\n onChange,\n wide = false,\n inlineLayout = false,\n inlineIcon = false,\n classNames: classNamesObj,\n bordered = true,\n disabled = false,\n fieldLegend = 'Select an option',\n groupName,\n}: RadioProps<ValueType>) => {\n const entries = Object.entries(options) as [\n ValueType,\n ReactNode \| RadioWithDescription\n ][];\n\n const name = groupName ?? generateId();\n\n return (\n <fieldset\n className={classNames(\n classNamesObj?.container,\n styles.container,\n 'd-flex gap8',\n {\n [styles.wide]: wide,\n [styles.narrow]: !wide,\n 'fd-row': inlineLayout,\n 'f-wrap': inlineLayout,\n 'fd-column': !inlineLayout,\n }\n )}\n >\n <legend className=\"sr-only\">{fieldLegend}</legend>\n {entries.map(([currentValue, label]) => {\n const checked = value === currentValue;\n const customIcon = (label as RadioWithDescription)?.icon;\n const hideIcon = (label as RadioWithDescription)?.hideBox;\n\n const isRadioLabelObject = (\n label: ReactNode \| RadioWithDescription\n ): label is RadioWithDescription => {\n return (label as RadioWithDescription).title !== undefined;\n };\n\n return (\n <div className={classNamesObj?.option} key={currentValue}>\n <input\n className={classNames('p-radio', {\n 'p-radio--no-icon': customIcon \|\| hideIcon,\n 'p-radio--centered': !label,\n })}\n id={currentValue}\n type=\"radio\"\n value={currentValue}\n onChange={() => onChange(currentValue)}\n checked={checked}\n data-testid={`radio-input-${currentValue}`}\n disabled={disabled}\n name={name}\n />\n\n <label\n htmlFor={currentValue}\n className={classNames(classNamesObj?.label, 'p-label', {\n 'jc-center': customIcon && !inlineIcon,\n 'fd-column': customIcon && !inlineIcon,\n 'p-label--bordered': bordered,\n })}\n data-cy={`radio-${currentValue}`}\n data-testid={`radio-${currentValue}`}\n >\n {customIcon && (\n <div\n className={classNames(\n 'd-inline-flex ai-center jc-center',\n inlineIcon ? 'mr8' : 'mt8'\n )}\n >\n {customIcon?.(checked)}\n </div>\n )}\n\n {isRadioLabelObject(label) ? (\n <div>\n <p className=\"p-p\">{label.title}</p>\n <span className=\"d-block p-p p-p--small tc-~~grey~~-~~600~~\">\n {label.description}\n </span>\n </div>\n ) : (\n label\n )}\n </label>\n </div>\n );\n })}\n </fieldset>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;IA8Ba,KAAK,GAAG,UAA2B,EAYxB;;QAXtB,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EACN,aAAa,gBAAA,EACzB,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,mBAAgC,EAAhC,WAAW,mBAAG,kBAAkB,KAAA,EAChC,SAAS,eAAA;IAET,IAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAGnC,CAAC;IAEJ,IAAM,IAAI,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,UAAU,EAAE,CAAC;IAEvC,QACEA,mBACE,SAAS,EAAE,UAAU,CACnB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,EACxB,MAAM,CAAC,SAAS,EAChB,aAAa;YAEX,GAAC,MAAM,CAAC,IAAI,IAAG,IAAI;YACnB,GAAC,MAAM,CAAC,MAAM,IAAG,CAAC,IAAI;YACtB,YAAQ,GAAE,YAAY;YACtB,YAAQ,GAAE,YAAY;YACtB,eAAW,GAAE,CAAC,YAAY;gBAE7B,aAEDC,gBAAQ,SAAS,EAAC,SAAS,YAAE,WAAW,GAAU,EACjD,OAAO,CAAC,GAAG,CAAC,UAAC,EAAqB;oBAApB,YAAY,QAAA,EAAE,KAAK,QAAA;gBAChC,IAAM,OAAO,GAAG,KAAK,KAAK,YAAY,CAAC;gBACvC,IAAM,UAAU,GAAI,KAA8B,aAA9B,KAAK,uBAAL,KAAK,CAA2B,IAAI,CAAC;gBACzD,IAAM,QAAQ,GAAI,KAA8B,aAA9B,KAAK,uBAAL,KAAK,CAA2B,OAAO,CAAC;gBAE1D,IAAM,kBAAkB,GAAG,UACzB,KAAuC;oBAEvC,OAAQ,KAA8B,CAAC,KAAK,KAAK,SAAS,CAAC;iBAC5D,CAAC;gBAEF,QACED,cAAK,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,aACnCC,eACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;gCAC/B,kBAAkB,EAAE,UAAU,IAAI,QAAQ;gCAC1C,mBAAmB,EAAE,CAAC,KAAK;6BAC5B,CAAC,EACF,EAAE,EAAE,YAAY,EAChB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,cAAM,OAAA,QAAQ,CAAC,YAAY,CAAC,GAAA,EACtC,OAAO,EAAE,OAAO,iBACH,sBAAe,YAAY,CAAE,EAC1C,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,EAEFD,gBACE,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,UAAU,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,SAAS,EAAE;gCACrD,WAAW,EAAE,UAAU,IAAI,CAAC,UAAU;gCACtC,WAAW,EAAE,UAAU,IAAI,CAAC,UAAU;gCACtC,mBAAmB,EAAE,QAAQ;6BAC9B,CAAC,aACO,gBAAS,YAAY,CAAE,iBACnB,gBAAS,YAAY,CAAE,aAEnC,UAAU,KACTC,aACE,SAAS,EAAE,UAAU,CACnB,mCAAmC,EACnC,UAAU,GAAG,KAAK,GAAG,KAAK,CAC3B,YAEA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,OAAO,CAAC,GAClB,CACP,EAEA,kBAAkB,CAAC,KAAK,CAAC,IACxBD,yBACEC,WAAG,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAK,EACpCA,cAAM,SAAS,EAAC,~~oCAAoC~~,~~YACjD~~,KAAK,CAAC,WAAW,GACb,IACH,KAEN,KAAK,CACN,IACK,KA/CkC,YAAY,CAgDlD,EACN;aACH,CAAC,IACO,EACX;AACJ;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/radio/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nimport generateId from '../../../util/generateId';\nexport interface RadioWithDescription {\n title: ReactNode;\n description?: string;\n icon?: (selected: boolean) => ReactNode;\n hideBox?: boolean;\n}\n\nexport interface RadioProps<ValueType extends string> {\n options: Record<ValueType, ReactNode \| RadioWithDescription>;\n value?: ValueType;\n onChange: (value: ValueType) => void;\n wide?: boolean;\n inlineLayout?: boolean;\n inlineIcon?: boolean;\n classNames?: {\n container?: string;\n label?: string;\n option?: string;\n };\n bordered?: boolean;\n disabled?: boolean;\n fieldLegend?: string;\n groupName?: string;\n}\n\nexport const Radio = <ValueType extends string>({\n options,\n value,\n onChange,\n wide = false,\n inlineLayout = false,\n inlineIcon = false,\n classNames: classNamesObj,\n bordered = true,\n disabled = false,\n fieldLegend = 'Select an option',\n groupName,\n}: RadioProps<ValueType>) => {\n const entries = Object.entries(options) as [\n ValueType,\n ReactNode \| RadioWithDescription\n ][];\n\n const name = groupName ?? generateId();\n\n return (\n <fieldset\n className={classNames(\n classNamesObj?.container,\n styles.container,\n 'd-flex gap8',\n {\n [styles.wide]: wide,\n [styles.narrow]: !wide,\n 'fd-row': inlineLayout,\n 'f-wrap': inlineLayout,\n 'fd-column': !inlineLayout,\n }\n )}\n >\n <legend className=\"sr-only\">{fieldLegend}</legend>\n {entries.map(([currentValue, label]) => {\n const checked = value === currentValue;\n const customIcon = (label as RadioWithDescription)?.icon;\n const hideIcon = (label as RadioWithDescription)?.hideBox;\n\n const isRadioLabelObject = (\n label: ReactNode \| RadioWithDescription\n ): label is RadioWithDescription => {\n return (label as RadioWithDescription).title !== undefined;\n };\n\n return (\n <div className={classNamesObj?.option} key={currentValue}>\n <input\n className={classNames('p-radio', {\n 'p-radio--no-icon': customIcon \|\| hideIcon,\n 'p-radio--centered': !label,\n })}\n id={currentValue}\n type=\"radio\"\n value={currentValue}\n onChange={() => onChange(currentValue)}\n checked={checked}\n data-testid={`radio-input-${currentValue}`}\n disabled={disabled}\n name={name}\n />\n\n <label\n htmlFor={currentValue}\n className={classNames(classNamesObj?.label, 'p-label', {\n 'jc-center': customIcon && !inlineIcon,\n 'fd-column': customIcon && !inlineIcon,\n 'p-label--bordered': bordered,\n })}\n data-cy={`radio-${currentValue}`}\n data-testid={`radio-${currentValue}`}\n >\n {customIcon && (\n <div\n className={classNames(\n 'd-inline-flex ai-center jc-center',\n inlineIcon ? 'mr8' : 'mt8'\n )}\n >\n {customIcon?.(checked)}\n </div>\n )}\n\n {isRadioLabelObject(label) ? (\n <div>\n <p className=\"p-p\">{label.title}</p>\n <span className=\"d-block p-p p-p--small tc-neutral-700\">\n {label.description}\n </span>\n </div>\n ) : (\n label\n )}\n </label>\n </div>\n );\n })}\n </fieldset>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/input/radio/index.stories.js CHANGED Viewed

@@ -97,7 +97,7 @@ var RadioWithCustomWrapperStyles = function (_a) {
     return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
             CAT1: 'Cat',
             DOG1: 'Dog',
-        }, classNames: { container: 'p32 bg-primary-300 br24 bs-lg' } }));
+        }, classNames: { container: 'p32 bg-purple-500 br24 bs-lg' } }));
 };
 var RadioWithCustomOptionStyles = function (_a) {
     var onChange = _a.onChange;
@@ -121,7 +121,7 @@ var RadioWithCustomLabelStyles = function (_a) {
     return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
             CAT3: 'Cat',
             DOG3: 'Dog',
-        }, classNames: { label: 'bg-grey-900 tc-white' } }));
+        }, classNames: { label: 'bg-neutral-900 tc-white' } }));
 };
 var RadioWithInlineLayout = function (_a) {
     var onChange = _a.onChange;

package/dist/esm/components/input/radio/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/radio/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Radio, RadioProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n title: 'JSX/Inputs/Radio',\n component: Radio,\n argTypes: {\n options: {\n description:\n 'Object that contains the possible options for rendering in the input.',\n },\n value: {\n description: 'Current checked values.',\n },\n fieldLegend: {\n description:\n 'Property that describes the purpose of a group of radio buttons, read aloud by screen readers to provide context.',\n },\n groupName: {\n description:\n 'Property passed to each radio button. Informs the browser that the radio buttons belong to the same group, so only one can be selected',\n },\n onChange: {\n description: 'Function called everytime a value changes.',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n wide: {\n description:\n 'Property that defines if options should fill 100% of available horizontal space',\n },\n inlineLayout: {\n description:\n 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',\n },\n inlineIcon: {\n description:\n 'Property that defines if options should show inline with icon',\n },\n classNames: {\n description: 'ClassNames for custom styling',\n },\n bordered: {\n description: 'Property that defines if option should show with border',\n },\n disabled: {\n description:\n 'Property that defines if the input and corresponding label are disabled and not clickable',\n },\n },\n args: {\n options: {\n CAT: {\n title: 'Cat',\n description: 'At least 1',\n },\n DOG: {\n title: 'Dog',\n description: 'At least 2',\n },\n NONE: {\n title: 'None',\n description: 'No pets',\n },\n },\n fieldLegend: 'Owned pets',\n groupName: 'Pets',\n value: '',\n wide: false,\n classNames: {\n container: '',\n label: '',\n option: '',\n },\n bordered: true,\n inlineLayout: false,\n inlineIcon: false,\n disabled: false,\n },\n};\n\nexport const RadioStory = ({\n onChange,\n options,\n wide,\n classNames,\n inlineLayout,\n bordered,\n disabled,\n fieldLegend,\n groupName,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n wide={wide}\n options={options}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={classNames}\n inlineLayout={inlineLayout}\n bordered={bordered}\n disabled={disabled}\n fieldLegend={fieldLegend}\n groupName={groupName}\n />\n );\n};\n\nexport const RadioWithCustomWrapperStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT1: 'Cat',\n DOG1: 'Dog',\n }}\n classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}\n />\n );\n};\n\nexport const RadioWithCustomOptionStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT2: 'Cat',\n DOG2: 'Dog',\n }}\n classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n />\n );\n};\n\nexport const RadioWithCustomLabelStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT3: 'Cat',\n DOG3: 'Dog',\n }}\n classNames={{ label: 'bg-grey-900 tc-white' }}\n />\n );\n};\n\nexport const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT4: 'Cat',\n DOG4: 'Dog',\n FISHER: 'Fish',\n RABBIT: 'Rabbit',\n RAT: 'Rat',\n ANOTHER: 'Other',\n }}\n classNames={{ option: 'w30' }}\n inlineLayout\n wide\n />\n );\n};\n\nexport const RadioWithCustomLabel = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nexport const RadioWithCustomLabelInline = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n inlineIcon\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport const RadioIconOnly = ({ onChange }: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{ NOTHING: '' }}\n onChange={handleOnChange}\n classNames={{ label: 'jc-start' }}\n value={checkedValues}\n bordered={false}\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/radio/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Radio, RadioProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n title: 'JSX/Inputs/Radio',\n component: Radio,\n argTypes: {\n options: {\n description:\n 'Object that contains the possible options for rendering in the input.',\n },\n value: {\n description: 'Current checked values.',\n },\n fieldLegend: {\n description:\n 'Property that describes the purpose of a group of radio buttons, read aloud by screen readers to provide context.',\n },\n groupName: {\n description:\n 'Property passed to each radio button. Informs the browser that the radio buttons belong to the same group, so only one can be selected',\n },\n onChange: {\n description: 'Function called everytime a value changes.',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n wide: {\n description:\n 'Property that defines if options should fill 100% of available horizontal space',\n },\n inlineLayout: {\n description:\n 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',\n },\n inlineIcon: {\n description:\n 'Property that defines if options should show inline with icon',\n },\n classNames: {\n description: 'ClassNames for custom styling',\n },\n bordered: {\n description: 'Property that defines if option should show with border',\n },\n disabled: {\n description:\n 'Property that defines if the input and corresponding label are disabled and not clickable',\n },\n },\n args: {\n options: {\n CAT: {\n title: 'Cat',\n description: 'At least 1',\n },\n DOG: {\n title: 'Dog',\n description: 'At least 2',\n },\n NONE: {\n title: 'None',\n description: 'No pets',\n },\n },\n fieldLegend: 'Owned pets',\n groupName: 'Pets',\n value: '',\n wide: false,\n classNames: {\n container: '',\n label: '',\n option: '',\n },\n bordered: true,\n inlineLayout: false,\n inlineIcon: false,\n disabled: false,\n },\n};\n\nexport const RadioStory = ({\n onChange,\n options,\n wide,\n classNames,\n inlineLayout,\n bordered,\n disabled,\n fieldLegend,\n groupName,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n wide={wide}\n options={options}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={classNames}\n inlineLayout={inlineLayout}\n bordered={bordered}\n disabled={disabled}\n fieldLegend={fieldLegend}\n groupName={groupName}\n />\n );\n};\n\nexport const RadioWithCustomWrapperStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT1: 'Cat',\n DOG1: 'Dog',\n }}\n classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}\n />\n );\n};\n\nexport const RadioWithCustomOptionStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT2: 'Cat',\n DOG2: 'Dog',\n }}\n classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n />\n );\n};\n\nexport const RadioWithCustomLabelStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT3: 'Cat',\n DOG3: 'Dog',\n }}\n classNames={{ label: 'bg-neutral-900 tc-white' }}\n />\n );\n};\n\nexport const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT4: 'Cat',\n DOG4: 'Dog',\n FISHER: 'Fish',\n RABBIT: 'Rabbit',\n RAT: 'Rat',\n ANOTHER: 'Other',\n }}\n classNames={{ option: 'w30' }}\n inlineLayout\n wide\n />\n );\n};\n\nexport const RadioWithCustomLabel = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nexport const RadioWithCustomLabelInline = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n inlineIcon\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport const RadioIconOnly = ({ onChange }: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{ NOTHING: '' }}\n onChange={handleOnChange}\n classNames={{ label: 'jc-start' }}\n value={checkedValues}\n bordered={false}\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/toggle/index.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { c as classNames } from '../../../index-6ea95111.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
-var css_248z = ".styles-module_container__F0d5Q {\n  max-width: 100%;\n}\n\n.styles-module_toggleContainer__2yz_j {\n  position: relative;\n  width: 40px;\n  height: 12px;\n}\n\n.styles-module_label__3EAX_ {\n  align-items: center;\n}\n\n.styles-module_toggle__2sL88 {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--ds-grey-400);\n  transition: all 0.3s ease-in-out;\n  border-radius: 100px;\n}\n.styles-module_toggle__2sL88:before {\n  position: absolute;\n  content: \"\";\n  height: 20px;\n  width: 20px;\n  left: 0;\n  bottom: -4px;\n  background: var(--ds-grey-500);\n  transition: 0.3s ease-in-out;\n  transition-property: background-color, outline, transform;\n  outline-color: var(--ds-purple-300);\n  border-radius: 50%;\n}\n\n.styles-module_input__2sUF3 {\n  opacity: 0;\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88 {\n  background: var(--ds-purple-100);\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88:before {\n  background: var(--ds-purple-500);\n}\n.styles-module_input__2sUF3:disabled + .styles-module_toggle__2sL88 {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.styles-module_input__2sUF3:focus-visible ~ .styles-module_toggle__2sL88:before {\n  outline: 4px solid var(--ds-purple-300);\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88:before {\n  transform: translateX(20px);\n}";
+var css_248z = ".styles-module_container__F0d5Q {\n  max-width: 100%;\n}\n\n.styles-module_toggleContainer__2yz_j {\n  position: relative;\n  width: 40px;\n  height: 12px;\n}\n\n.styles-module_label__3EAX_ {\n  align-items: center;\n}\n\n.styles-module_toggle__2sL88 {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--ds-neutral-400);\n  transition: all 0.3s ease-in-out;\n  border-radius: 100px;\n}\n.styles-module_toggle__2sL88:before {\n  position: absolute;\n  content: \"\";\n  height: 20px;\n  width: 20px;\n  left: 0;\n  bottom: -4px;\n  background: var(--ds-neutral-600);\n  transition: 0.3s ease-in-out;\n  transition-property: background-color, outline, transform;\n  outline-color: var(--ds-purple-500);\n  border-radius: 50%;\n}\n\n.styles-module_input__2sUF3 {\n  opacity: 0;\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88 {\n  background: var(--ds-purple-300);\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88:before {\n  background: var(--ds-purple-600);\n}\n.styles-module_input__2sUF3:disabled + .styles-module_toggle__2sL88 {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.styles-module_input__2sUF3:focus-visible ~ .styles-module_toggle__2sL88:before {\n  outline: 4px solid var(--ds-purple-500);\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88:before {\n  transform: translateX(20px);\n}";
 var styles = {"container":"styles-module_container__F0d5Q","toggleContainer":"styles-module_toggleContainer__2yz_j","label":"styles-module_label__3EAX_","toggle":"styles-module_toggle__2sL88","input":"styles-module_input__2sUF3"};
 styleInject(css_248z);
@@ -43,7 +43,7 @@ var Toggle = function (_a) {
             var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
             return (jsx("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: jsxs("label", { className: classNames(styles.label, classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16 gap16', {
                         'p-label--bordered': bordered,
-                    }), "data-cy": "toggle-".concat(currentValue), "data-testid": "toggle-".concat(currentValue), children: [jsxs("span", { className: classNames(styles.toggleContainer, 'd-inline-block'), children: [jsx("input", { checked: checked, className: styles.input, "data-testid": "toggle-input-".concat(currentValue), onChange: function () { return handleOnChange(currentValue); }, type: "checkbox", value: currentValue, disabled: disabled }), jsx("span", { className: styles.toggle })] }), isToggleLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : label] }) }, currentValue));
+                    }), "data-cy": "toggle-".concat(currentValue), "data-testid": "toggle-".concat(currentValue), children: [jsxs("span", { className: classNames(styles.toggleContainer, 'd-inline-block'), children: [jsx("input", { checked: checked, className: styles.input, "data-testid": "toggle-input-".concat(currentValue), onChange: function () { return handleOnChange(currentValue); }, type: "checkbox", value: currentValue, disabled: disabled }), jsx("span", { className: styles.toggle })] }), isToggleLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-neutral-700", children: label.description })] })) : label] }) }, currentValue));
         }) }));
 };

package/dist/esm/components/input/toggle/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/toggle/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from './styles.module.scss';\nexport interface ToggleWithDescription {\n title: ReactNode;\n description?: string;\n}\n\nexport interface ToggleProps<ValueType extends string> {\n options: Record<ValueType, ReactNode \| ToggleWithDescription>;\n value?: ValueType[];\n onChange: (value: ValueType[]) => void;\n inlineLayout?: boolean;\n disabled?: boolean;\n bordered?: boolean,\n classNames?: {\n container?: string;\n label?: string;\n option?: string;\n }\n}\n\nexport const Toggle = <ValueType extends string>({\n options,\n value = [],\n onChange,\n inlineLayout = false,\n bordered = true,\n classNames: classNamesObj,\n disabled,\n}: ToggleProps<ValueType> & { }) => {\n const hasNoneValue = Object.keys(options).includes('NONE');\n\n const isToggleLabelObject = (\n label: ReactNode \| ToggleWithDescription\n ): label is ToggleWithDescription => {\n return (label as ToggleWithDescription).title !== undefined;\n };\n\n const handleOnChange = (newValue: ValueType) => {\n if (value?.includes(newValue)) {\n const filteredToggleValues = value.filter(\n (selectedValue) => selectedValue !== newValue\n );\n\n onChange(filteredToggleValues);\n return;\n }\n\n if (hasNoneValue && newValue === 'NONE') {\n onChange([newValue]);\n return;\n }\n\n if (hasNoneValue && newValue !== 'NONE') {\n const newValues = value\n ? [...value.filter((v) => v !== 'NONE'), newValue]\n : [newValue];\n onChange(newValues);\n return;\n }\n\n const newValues = value\n ? [...value, newValue]\n : [newValue];\n onChange(newValues);\n };\n\n\n const entries = Object.entries(options) as [\n ValueType,\n string \| ToggleWithDescription\n ][];\n\n return (\n <div\n className={classNames(classNamesObj?.container, styles.container, 'd-flex gap8', {\n 'fd-row': inlineLayout,\n 'f-wrap': inlineLayout,\n 'fd-column': !inlineLayout,\n })}\n >\n {entries.map(([currentValue, label]) => {\n const checked = value?.includes(currentValue);\n\n return (\n <div className={classNamesObj?.option} key={currentValue}>\n <label\n className={classNames(\n styles.label,\n classNamesObj?.label,\n 'p-label pr16 gap16',\n {\n 'p-label--bordered': bordered,\n }\n )}\n data-cy={`toggle-${currentValue}`}\n data-testid={`toggle-${currentValue}`}\n >\n <span className={classNames(styles.toggleContainer, 'd-inline-block')}>\n <input \n checked={checked}\n className={styles.input}\n data-testid={`toggle-input-${currentValue}`}\n onChange={() => handleOnChange(currentValue)}\n type=\"checkbox\" \n value={currentValue}\n disabled={disabled}\n />\n <span className={styles.toggle} />\n </span>\n \n {isToggleLabelObject(label) ? (\n <div>\n <p className=\"p-p\">{label.title}</p>\n <span className=\"d-block p-p p-p--small tc-~~grey~~-~~600~~\">\n {label.description}\n </span>\n </div>\n ) : label}\n </label>\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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~~oCAAoC~~,~~YACjD~~,KAAK,CAAC,WAAW,GACb,IACH,IACJ,KAAK,IACH,IAlCkC,YAAY,CAmClD,EACN;SACH,CAAC,GACE,EACN;AACJ;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/toggle/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from './styles.module.scss';\nexport interface ToggleWithDescription {\n title: ReactNode;\n description?: string;\n}\n\nexport interface ToggleProps<ValueType extends string> {\n options: Record<ValueType, ReactNode \| ToggleWithDescription>;\n value?: ValueType[];\n onChange: (value: ValueType[]) => void;\n inlineLayout?: boolean;\n disabled?: boolean;\n bordered?: boolean,\n classNames?: {\n container?: string;\n label?: string;\n option?: string;\n }\n}\n\nexport const Toggle = <ValueType extends string>({\n options,\n value = [],\n onChange,\n inlineLayout = false,\n bordered = true,\n classNames: classNamesObj,\n disabled,\n}: ToggleProps<ValueType> & { }) => {\n const hasNoneValue = Object.keys(options).includes('NONE');\n\n const isToggleLabelObject = (\n label: ReactNode \| ToggleWithDescription\n ): label is ToggleWithDescription => {\n return (label as ToggleWithDescription).title !== undefined;\n };\n\n const handleOnChange = (newValue: ValueType) => {\n if (value?.includes(newValue)) {\n const filteredToggleValues = value.filter(\n (selectedValue) => selectedValue !== newValue\n );\n\n onChange(filteredToggleValues);\n return;\n }\n\n if (hasNoneValue && newValue === 'NONE') {\n onChange([newValue]);\n return;\n }\n\n if (hasNoneValue && newValue !== 'NONE') {\n const newValues = value\n ? [...value.filter((v) => v !== 'NONE'), newValue]\n : [newValue];\n onChange(newValues);\n return;\n }\n\n const newValues = value\n ? [...value, newValue]\n : [newValue];\n onChange(newValues);\n };\n\n\n const entries = Object.entries(options) as [\n ValueType,\n string \| ToggleWithDescription\n ][];\n\n return (\n <div\n className={classNames(classNamesObj?.container, styles.container, 'd-flex gap8', {\n 'fd-row': inlineLayout,\n 'f-wrap': inlineLayout,\n 'fd-column': !inlineLayout,\n })}\n >\n {entries.map(([currentValue, label]) => {\n const checked = value?.includes(currentValue);\n\n return (\n <div className={classNamesObj?.option} key={currentValue}>\n <label\n className={classNames(\n styles.label,\n classNamesObj?.label,\n 'p-label pr16 gap16',\n {\n 'p-label--bordered': bordered,\n }\n )}\n data-cy={`toggle-${currentValue}`}\n data-testid={`toggle-${currentValue}`}\n >\n <span className={classNames(styles.toggleContainer, 'd-inline-block')}>\n <input \n checked={checked}\n className={styles.input}\n data-testid={`toggle-input-${currentValue}`}\n onChange={() => handleOnChange(currentValue)}\n type=\"checkbox\" \n value={currentValue}\n disabled={disabled}\n />\n <span className={styles.toggle} />\n </span>\n \n {isToggleLabelObject(label) ? (\n <div>\n <p className=\"p-p\">{label.title}</p>\n <span className=\"d-block p-p p-p--small tc-neutral-700\">\n {label.description}\n </span>\n </div>\n ) : label}\n </label>\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/input/toggle/index.stories.js CHANGED Viewed

@@ -81,7 +81,7 @@ var ToggleWithCustomWrapperStyles = function (_a) {
     return (jsx(Toggle, { onChange: handleOnChange, value: checkedValues, options: {
             CAT1: 'Cat',
             DOG1: 'Dog',
-        }, classNames: { container: "p32 bg-primary-300 br24 bs-lg" } }));
+        }, classNames: { container: "p32 bg-purple-500 br24 bs-lg" } }));
 };
 var ToggleWithCustomOptionStyles = function (_a) {
     var onChange = _a.onChange;
@@ -107,7 +107,7 @@ var ToggleWithCustomLabelStyles = function (_a) {
     return (jsx(Toggle, { onChange: handleOnChange, value: checkedValues, options: {
             CAT3: 'Cat',
             DOG3: 'Dog',
-        }, classNames: { label: "bg-grey-900 tc-white" } }));
+        }, classNames: { label: "bg-neutral-900 tc-white" } }));
 };
 var ToggleWithInlineLayout = function (_a) {
     var onChange = _a.onChange;

package/dist/esm/components/input/toggle/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/toggle/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Toggle, ToggleProps } from '.';\n\nconst story = {\n title: 'JSX/Inputs/Toggle',\n component: Toggle,\n argTypes: {\n options: {\n description: 'Object that contains the possible options for rendering in the input. To create an icon-only toggle, pass an empty string.',\n },\n value: {\n description: 'Current checked values.',\n },\n onChange: {\n description: 'Function called everytime a value changes.',\n action: true,\n table: {\n category: \"Callbacks\",\n },\n },\n bordered: {\n description: 'Property that defines if checkbox should show the border around each label',\n },\n inlineLayout: {\n description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n },\n disabled: {\n description: 'Shows toggle on a disabled state.',\n },\n className: {\n description: 'ClassNames for custom styling',\n },\n },\n args: {\n options:{\n CAT:{\n title: 'Cat',\n description: 'At least 1'\n },\n DOG:{\n title: 'Dog',\n description: 'At least 2'\n },\n NONE:{\n title: 'None',\n description: 'No pets'\n }\n },\n value: [],\n bordered: true,\n inlineLayout: false,\n disabled: false,\n className: {\n container: '',\n label: '',\n option: ''\n }\n \n }\n};\n\nexport const ToggleStory = ({ \n onChange,\n options,\n bordered,\n classNames,\n inlineLayout,\n disabled,\n}: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[]) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n options={options} \n onChange={handleOnChange}\n value={checkedValues}\n bordered={bordered}\n classNames={classNames}\n inlineLayout={inlineLayout}\n disabled={disabled}\n />\n );\n}\n\nexport const ToggleWithCustomWrapperStyles = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT1: 'Cat',\n DOG1: 'Dog',\n }} \n classNames={{ container: \"p32 bg-~~primary~~-~~300~~ br24 bs-lg\" }}\n />\n );\n}\n\nexport const ToggleWithCustomOptionStyles = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT2: 'Cat',\n DOG2: 'Dog',\n }} \n classNames={{ option: \"mb32 p24 bg-green-100 br12 bs-lg\" }}\n />\n );\n}\n\nexport const ToggleWithCustomLabelStyles = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT3: 'Cat',\n DOG3: 'Dog',\n }} \n classNames={{ label: \"bg-~~grey~~-900 tc-white\" }}\n />\n );\n}\n\nexport const ToggleWithInlineLayout = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT4: 'Cat',\n DOG4: 'Dog',\n FISHER: 'Fish',\n RABBIT: 'Rabbit',\n RAT: 'Rat',\n ANOTHER: 'Other',\n }} \n classNames={{ option: \"w30\" }}\n inlineLayout\n />\n );\n}\n\nexport const ToggleIconOnly = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n options={{ CAT: '' }} \n onChange={handleOnChange}\n value={checkedValues}\n bordered={false}\n />\n );\n}\n\nToggleStory.storyName = 'Toggle';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;IAIM,KAAK,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,4HAA4H;SAC1I;QACD,KAAK,EAAE;YACL,WAAW,EAAE,yBAAyB;SACvC;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,4CAA4C;YACzD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,4EAA4E;SAC1F;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,yHAAyH;SACvI;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mCAAmC;SACjD;QACD,SAAS,EAAE;YACT,WAAW,EAAE,+BAA+B;SAC7C;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAC;YACN,GAAG,EAAC;gBACF,KAAK,EAAE,KAAK;gBACZ,WAAW,EAAE,YAAY;aAC1B;YACD,GAAG,EAAC;gBACF,KAAK,EAAE,KAAK;gBACZ,WAAW,EAAE,YAAY;aAC1B;YACD,IAAI,EAAC;gBACH,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,SAAS;aACvB;SACF;QACD,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE;YACT,SAAS,EAAE,EAAE;YACb,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX;KAEF;EACD;IAEW,WAAW,GAAG,UAAC,EAON;QANpB,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,QAAQ,cAAA;IAEF,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAkB;QACxC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,GAClB,EACF;AACJ,EAAC;IAEY,6BAA6B,GAAG,UAAC,EAAiC;QAA/B,QAAQ,cAAA;IAChD,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,MAAM,IACL,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,UAAU,EAAE,EAAE,SAAS,EAAE~~,+BAA+B~~,EAAE,~~GAC1D~~,EACF;AACJ,EAAC;IAEY,4BAA4B,GAAG,UAAC,EAAiC;QAA/B,QAAQ,cAAA;IAC/C,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,MAAM,IACL,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,UAAU,EAAE,EAAE,MAAM,EAAE,kCAAkC,EAAE,GAC1D,EACF;AACJ,EAAC;IAEY,2BAA2B,GAAG,UAAC,EAAiC;QAA/B,QAAQ,cAAA;IAC9C,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,MAAM,IACL,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,UAAU,EAAE,EAAE,KAAK,EAAE,~~sBAAsB~~,EAAE,~~GAC7C~~,EACF;AACJ,EAAC;IAEY,sBAAsB,GAAG,UAAC,EAAiC;QAA/B,QAAQ,cAAA;IACzC,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,MAAM,IACL,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,OAAO;SACjB,EACD,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAC7B,YAAY,SACZ,EACF;AACJ,EAAC;IAEY,cAAc,GAAG,UAAC,EAAiC;QAA/B,QAAQ,cAAA;IACjC,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,MAAM,IACL,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EACpB,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,KAAK,GACf,EACF;AACJ,EAAC;AAED,WAAW,CAAC,SAAS,GAAG,QAAQ;;;;;"}
1	+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/toggle/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Toggle, ToggleProps } from '.';\n\nconst story = {\n title: 'JSX/Inputs/Toggle',\n component: Toggle,\n argTypes: {\n options: {\n description: 'Object that contains the possible options for rendering in the input. To create an icon-only toggle, pass an empty string.',\n },\n value: {\n description: 'Current checked values.',\n },\n onChange: {\n description: 'Function called everytime a value changes.',\n action: true,\n table: {\n category: \"Callbacks\",\n },\n },\n bordered: {\n description: 'Property that defines if checkbox should show the border around each label',\n },\n inlineLayout: {\n description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n },\n disabled: {\n description: 'Shows toggle on a disabled state.',\n },\n className: {\n description: 'ClassNames for custom styling',\n },\n },\n args: {\n options:{\n CAT:{\n title: 'Cat',\n description: 'At least 1'\n },\n DOG:{\n title: 'Dog',\n description: 'At least 2'\n },\n NONE:{\n title: 'None',\n description: 'No pets'\n }\n },\n value: [],\n bordered: true,\n inlineLayout: false,\n disabled: false,\n className: {\n container: '',\n label: '',\n option: ''\n }\n \n }\n};\n\nexport const ToggleStory = ({ \n onChange,\n options,\n bordered,\n classNames,\n inlineLayout,\n disabled,\n}: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[]) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n options={options} \n onChange={handleOnChange}\n value={checkedValues}\n bordered={bordered}\n classNames={classNames}\n inlineLayout={inlineLayout}\n disabled={disabled}\n />\n );\n}\n\nexport const ToggleWithCustomWrapperStyles = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT1: 'Cat',\n DOG1: 'Dog',\n }} \n classNames={{ container: \"p32 bg-purple-500 br24 bs-lg\" }}\n />\n );\n}\n\nexport const ToggleWithCustomOptionStyles = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT2: 'Cat',\n DOG2: 'Dog',\n }} \n classNames={{ option: \"mb32 p24 bg-green-100 br12 bs-lg\" }}\n />\n );\n}\n\nexport const ToggleWithCustomLabelStyles = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT3: 'Cat',\n DOG3: 'Dog',\n }} \n classNames={{ label: \"bg-neutral-900 tc-white\" }}\n />\n );\n}\n\nexport const ToggleWithInlineLayout = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT4: 'Cat',\n DOG4: 'Dog',\n FISHER: 'Fish',\n RABBIT: 'Rabbit',\n RAT: 'Rat',\n ANOTHER: 'Other',\n }} \n classNames={{ option: \"w30\" }}\n inlineLayout\n />\n );\n}\n\nexport const ToggleIconOnly = ({ onChange }: ToggleProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n const handleOnChange = (newValue: string[] = []) => {\n setCheckedValues(newValue);\n onChange(newValue);\n }\n\n return (\n <Toggle \n options={{ CAT: '' }} \n onChange={handleOnChange}\n value={checkedValues}\n bordered={false}\n />\n );\n}\n\nToggleStory.storyName = 'Toggle';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/logo/LogoBlack.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import { LogoWrapper } from './LogoWrapper/LogoWrapper.js';
+import '../../tslib.es6-a39f91fc.js';
+import '../../index-6ea95111.js';
+import '../../style-inject.es-1f59c1d0.js';
+var LogoBlack = function (props) {
+    return createElement(LogoWrapper, props, jsx("path", { d: "M60.916 103.119C48.8557 105.797 38.8036 107.385 33.2556 112.037C27.7077 116.689 25.8924 120.807 23.2262 126.684C22.7951 127.626 22.466 128 21.7399 128H17.2698C16.6004 128 16.1239 127.489 16.1125 126.877C16.7025 115.713 28.7741 79.0782 47.6757 53.9365C66.5774 28.7836 79.0574 17.0636 105.731 0C106.026 0.669385 106.661 2.23506 106.797 2.55274C112.595 16.3602 113.956 32.902 108.17 46.9477C102.69 60.256 91.2992 68.4701 77.5938 71.7944C74.5873 72.5205 71.5354 73.0651 68.4607 73.4962C67.9048 73.5756 67.485 74.0521 67.485 74.6081V78.4996C67.485 79.0555 67.8708 79.5207 68.4153 79.6228C71.0929 80.1106 74.7121 80.3035 80.1239 79.7816C85.2521 79.2937 89.9378 78.25 93.0237 76.7864C93.0237 76.7864 95.1454 95.983 60.916 103.108V103.119Z", fill: "#3F3F47" }));
+};
+export { LogoBlack };
+//# sourceMappingURL=LogoBlack.js.map

package/dist/esm/components/logo/LogoBlack.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LogoBlack.js","sources":["../../../../../src/lib/components/logo/LogoBlack.tsx"],"sourcesContent":["import { createElement } from 'react';\nimport { LogoWrapper } from './LogoWrapper/LogoWrapper';\nimport type { LogoWrapperProps } from './LogoWrapper/LogoWrapper';\n\nexport const LogoBlack = (props: LogoWrapperProps) =>\n createElement(\n LogoWrapper,\n props,\n <path\n d=\"M60.916 103.119C48.8557 105.797 38.8036 107.385 33.2556 112.037C27.7077 116.689 25.8924 120.807 23.2262 126.684C22.7951 127.626 22.466 128 21.7399 128H17.2698C16.6004 128 16.1239 127.489 16.1125 126.877C16.7025 115.713 28.7741 79.0782 47.6757 53.9365C66.5774 28.7836 79.0574 17.0636 105.731 0C106.026 0.669385 106.661 2.23506 106.797 2.55274C112.595 16.3602 113.956 32.902 108.17 46.9477C102.69 60.256 91.2992 68.4701 77.5938 71.7944C74.5873 72.5205 71.5354 73.0651 68.4607 73.4962C67.9048 73.5756 67.485 74.0521 67.485 74.6081V78.4996C67.485 79.0555 67.8708 79.5207 68.4153 79.6228C71.0929 80.1106 74.7121 80.3035 80.1239 79.7816C85.2521 79.2937 89.9378 78.25 93.0237 76.7864C93.0237 76.7864 95.1454 95.983 60.916 103.108V103.119Z\"\n fill=\"#3F3F47\"\n />\n );"],"names":["_jsx"],"mappings":";;;;;;;IAIa,SAAS,GAAG,UAAC,KAAuB;IAC/C,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,CAAC,EAAC,6tBAA6tB,EAC/tB,IAAI,EAAC,SAAS,GACd,CACH;AAPD;;;;"}