@coorpacademy/components 11.32.24-alpha.6 → 11.32.25

package/es/atom/button-link/index.d.ts

@@ -4,6 +4,7 @@ declare const ButtonLink: {
     (props: ButtonLinkProps): JSX.Element;
     propTypes: {
         type: import("prop-types").Requireable<string>;
+        usage: import("prop-types").Requireable<string>;
         label: import("prop-types").Requireable<string>;
         content: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         'aria-label': import("prop-types").Requireable<string>;

package/es/atom/button-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AA+C7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;CA4FzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AA+C7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;CA8FzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/es/atom/button-link/index.js

@@ -52,6 +52,7 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
 const ButtonLink = props => {
   const {
     type,
+    usage = 'button',
     label,
     content,
     hoverBackgroundColor,
@@ -70,7 +71,7 @@ const ButtonLink = props => {
   } = props;
   const styleButton = classnames(className, style.button, type === 'primary' && style.primary, type === 'secondary' && style.secondary, type === 'tertiary' && style.tertiary, type === 'text' && style.text, type === 'dangerous' && style.dangerous, link && style.link, disabled && style.disabled);
   const [hovered, setHovered] = useState(false);
-  const handleOnClick = useCallback(() => onClick(), [onClick]);
+  const handleOnClick = useCallback(event => onClick(event), [onClick]);
   const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);
   const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
   const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
@@ -97,7 +98,8 @@ const ButtonLink = props => {
   return /*#__PURE__*/React.createElement("button", _extends({}, useTitle && {
     title: ariaLabel || label
   }, {
-    type: "button",
+    // eslint-disable-next-line react/button-has-type
+    type: usage,
     "aria-label": ariaLabel || label,
     "data-name": dataName,
     "data-testid": dataTestId,

package/es/atom/button-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","ICONS","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","isApplyHover","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","styleButton","button","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","handleOnKeyDown","event","handleMouseOver","handleMouseLeave","_customStyle","title"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n  const isApplyHover = hovered && hoverBackgroundColor && hoverColor;\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: isApplyHover ? hoverColor : faIcon.color,\n        backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        }\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n      >\n        {getButtonContent(icon, content ?? label)}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      type=\"button\"\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,EAAsCC,OAAtC,QAAoD,OAApD;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,MAAP,MAAmB,SAAnB;AACA,SAAQC,KAAR,QAAoB,yBAApB;AACA,OAAOC,SAAP,MAAmD,SAAnD;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CACvBC,IADuB,EAEvBC,OAFuB,EAGvBC,OAHuB,EAIvBC,oBAJuB,EAKvBC,UALuB,KAMpB;EACH,MAAM;IAACC,IAAD;IAAOC,MAAP;IAAeC;EAAf,IAA2BP,IAAI,IAAI;IAACK,IAAI,EAAE,EAAP;IAAWE,QAAQ,EAAE;EAArB,CAAzC;EACA,MAAMC,IAAI,GAAGH,IAAI,IAAIT,KAAK,CAACS,IAAD,CAA1B;EACA,MAAMI,YAAY,GAAGP,OAAO,IAAIC,oBAAX,IAAmCC,UAAxD;;EAEA,IAAI,CAACI,IAAD,IAAS,CAACF,MAAd,EAAsB;IACpB,oBACE;MAAK,SAAS,EAAER,KAAK,CAACY;IAAtB,gBACE;MAAM,SAAS,EAAEZ,KAAK,CAACa;IAAvB,GAA+BV,OAA/B,CADF,CADF;EAKD;;EAED,MAAMW,aAAa,GAAGN,MAAM,gBAC1B,oBAAC,MAAD;IAEIO,QAAQ,EAAEP,MAAM,CAACQ,IAFrB;IAGIC,SAAS,EAAEN,YAAY,GAAGL,UAAH,GAAgBE,MAAM,CAACU,KAHlD;IAIIC,eAAe,EAAER,YAAY,GAAGN,oBAAH,GAA0BG,MAAM,CAACW,eAJlE;IAKIC,IAAI,EAAE;MACJC,MAAM,EAAEb,MAAM,CAACY,IADX;MAEJE,WAAW,EAAEd,MAAM,CAACY;IAFhB;EALV,EAD0B,gBAa1B,oBAAC,IAAD;IAAM,SAAS,EAAEpB,KAAK,CAACE,IAAvB;IAA6B,KAAK,EAAC;EAAnC,EAbF;EAgBA,oBACE;IAAK,SAAS,EAAEF,KAAK,CAACY;EAAtB,GACGH,QAAQ,KAAK,MAAb,GAAsBK,aAAtB,GAAsC,IADzC,EAEGX,OAAO,gBAAG;IAAM,SAAS,EAAEH,KAAK,CAACa;EAAvB,GAA+BV,OAA/B,CAAH,GAAoD,IAF9D,EAGGM,QAAQ,KAAK,OAAb,GAAuBK,aAAvB,GAAuC,IAH1C,CADF;AAOD,CA1CD;;AA4CA,MAAMS,UAAU,GAAIC,KAAD,IAA4B;EAC7C,MAAM;IACJjB,IADI;IAEJM,KAFI;IAGJV,OAHI;IAIJE,oBAJI;IAKJC,UALI;IAMJmB,QAAQ,GAAG,KANP;IAOJvB,IAPI;IAQJ,aAAawB,QART;IASJ,eAAeC,UAAU,GAAG,aATxB;IAUJ,cAAcC,SAVV;IAWJC,IAXI;IAYJC,OAAO,QAZH;IAaJC,SAAS,QAbL;IAcJC,SAdI;IAeJC,WAfI;IAgBJC,QAAQ,GAAG;EAhBP,IAiBFV,KAjBJ;EAkBA,MAAMW,WAAW,GAAGxC,UAAU,CAC5BqC,SAD4B,EAE5BhC,KAAK,CAACoC,MAFsB,EAG5B7B,IAAI,KAAK,SAAT,IAAsBP,KAAK,CAACqC,OAHA,EAI5B9B,IAAI,KAAK,WAAT,IAAwBP,KAAK,CAACsC,SAJF,EAK5B/B,IAAI,KAAK,UAAT,IAAuBP,KAAK,CAACuC,QALD,EAM5BhC,IAAI,KAAK,MAAT,IAAmBP,KAAK,CAACwC,IANG,EAO5BjC,IAAI,KAAK,WAAT,IAAwBP,KAAK,CAACyC,SAPF,EAQ5BZ,IAAI,IAAI7B,KAAK,CAAC6B,IARc,EAS5BJ,QAAQ,IAAIzB,KAAK,CAACyB,QATU,CAA9B;EAYA,MAAM,CAACrB,OAAD,EAAUsC,UAAV,IAAwBjD,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMkD,aAAa,GAAGnD,WAAW,CAAC,MAAMsC,OAAO,EAAd,EAAkB,CAACA,OAAD,CAAlB,CAAjC;EAEA,MAAMc,eAAe,GAAGpD,WAAW,CAACqD,KAAK,IAAId,SAAS,CAACc,KAAD,CAAnB,EAA4B,CAACd,SAAD,CAA5B,CAAnC;EAEA,MAAMe,eAAe,GAAGtD,WAAW,CAAC,MAAMkD,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;EAEA,MAAMK,gBAAgB,GAAGvD,WAAW,CAAC,MAAMkD,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;;EAEA,MAAMM,YAAY,GAAGtD,OAAO,CAAC,MAAM;IACjC,oBACKuC,WADL,EAEM,CAAC5B,oBAAoB,IAAIC,UAAzB,KAAwCF,OAAxC,GACA;MACEe,eAAe,EAAEd,oBADnB;MAEEa,KAAK,EAAEZ;IAFT,CADA,GAKA,IAPN;EASD,CAV2B,EAUzB,CAACD,oBAAD,EAAuBC,UAAvB,EAAmCF,OAAnC,EAA4C6B,WAA5C,CAVyB,CAA5B;;EAYA,IAAIJ,IAAJ,EAAU;IACR,oBACE,oBAAC,IAAD,eACMA,IADN,EAEOK,QAAQ,IAAI;MACfe,KAAK,EAAErB,SAAS,IAAIf;IADL,CAFnB;MAKE,KAAK,EAAEoB,WALT;MAME,SAAS,EAAEE,WANb;MAOE,aAAWT,QAPb;MAQE,eAAaC,UARf;MASE,cAAYC,SAAS,IAAIf;IAT3B,IAWGZ,gBAAgB,CAACC,IAAD,EAAOC,OAAO,IAAIU,KAAlB,CAXnB,CADF;EAeD;;EAED,oBACE,2CACOqB,QAAQ,IAAI;IACfe,KAAK,EAAErB,SAAS,IAAIf;EADL,CADnB;IAIE,IAAI,EAAC,QAJP;IAKE,cAAYe,SAAS,IAAIf,KAL3B;IAME,aAAWa,QANb;IAOE,eAAaC,UAPf;IAQE,KAAK,EAAEqB,YART;IASE,SAAS,EAAEb,WATb;IAUE,OAAO,EAAEQ,aAVX;IAWE,SAAS,EAAEC,eAXb;IAYE,WAAW,EAAEE,eAZf;IAaE,YAAY,EAAEC,gBAbhB;IAcE,QAAQ,EAAE,CAdZ;IAeE,QAAQ,EAAEtB;EAfZ,IAiBGxB,gBAAgB,CAACC,IAAD,EAAOC,OAAO,IAAIU,KAAlB,EAAyBT,OAAzB,EAAkCC,oBAAlC,EAAwDC,UAAxD,CAjBnB,CADF;AAqBD,CA5FD;;AA8FAiB,UAAU,CAACxB,SAAX,2CAAuBA,SAAvB;AAEA,eAAewB,UAAf"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","ICONS","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","isApplyHover","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","styleButton","button","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","_customStyle","title"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n  const isApplyHover = hovered && hoverBackgroundColor && hoverColor;\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: isApplyHover ? hoverColor : faIcon.color,\n        backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        }\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n      >\n        {getButtonContent(icon, content ?? label)}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}

package/es/atom/button-link/types.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { ICONS } from '../../util/button-icons';
 declare const propTypes: {
     type: PropTypes.Requireable<string>;
+    usage: PropTypes.Requireable<string>;
     label: PropTypes.Requireable<string>;
     content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     'aria-label': PropTypes.Requireable<string>;
@@ -37,6 +38,7 @@ export declare type IconType = {
 };
 export declare type ButtonLinkProps = {
     type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';
+    usage?: 'button' | 'submit' | 'reset';
     label?: string;
     content?: React.ReactNode;
     'aria-label'?: string;

package/es/atom/button-link/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAsBd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AACF,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC;IACF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,OAAO,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC;AAE/C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAuBd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AACF,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACnE,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC;IACF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,OAAO,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC;AAE/C,eAAe,SAAS,CAAC"}

package/es/atom/button-link/types.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { ICONS } from '../../util/button-icons';
 const propTypes = {
   type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),
+  usage: PropTypes.oneOf(['button', 'submit', 'reset']),
   label: PropTypes.string,
   content: PropTypes.node,
   'aria-label': PropTypes.string,

package/es/atom/button-link/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PropTypes","ICONS","propTypes","type","oneOf","label","string","content","node","icon","shape","position","onClick","func","link","href","download","bool","target","hoverBackgroundColor","hoverColor","disabled","className","customStyle"],"sources":["../../../src/atom/button-link/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport {ICONS} from '../../util/button-icons';\n\nconst propTypes = {\n  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  label: PropTypes.string,\n  content: PropTypes.node,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  'data-testid': PropTypes.string,\n  icon: PropTypes.shape({\n    position: PropTypes.oneOf(['right', 'left']),\n    type: PropTypes.oneOf(keys(ICONS))\n  }),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  hoverBackgroundColor: PropTypes.string,\n  hoverColor: PropTypes.string,\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  customStyle: PropTypes.shape({})\n};\n\nexport type FaIcontype = {\n  name: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: number;\n};\n\nexport type IconType = {\n  position: 'right' | 'left';\n  type?: keyof typeof ICONS;\n  faIcon?: FaIcontype;\n};\nexport type ButtonLinkProps = {\n  type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';\n  label?: string;\n  content?: React.ReactNode;\n  'aria-label'?: string;\n  'data-name'?: string;\n  'data-testid'?: string;\n  icon?: IconType;\n  onClick?: () => void;\n  onKeyDown?: () => void;\n  link?: {\n    href?: string;\n    download?: boolean;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  };\n  hoverBackgroundColor?: string;\n  hoverColor?: string;\n  disabled?: boolean;\n  className?: string;\n  customStyle?: Record<string, unknown>;\n  useTitle?: boolean;\n};\n\nexport type Fixture = {props: ButtonLinkProps};\n\nexport default propTypes;\n"],"mappings":";AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,SAAQC,KAAR,QAAoB,yBAApB;AAEA,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,CAAC,SAAD,EAAY,WAAZ,EAAyB,UAAzB,EAAqC,MAArC,EAA6C,WAA7C,CAAhB,CADU;EAEhBC,KAAK,EAAEL,SAAS,CAACM,MAFD;EAGhBC,OAAO,EAAEP,SAAS,CAACQ,IAHH;EAIhB,cAAcR,SAAS,CAACM,MAJR;EAKhB,aAAaN,SAAS,CAACM,MALP;EAMhB,eAAeN,SAAS,CAACM,MANT;EAOhBG,IAAI,EAAET,SAAS,CAACU,KAAV,CAAgB;IACpBC,QAAQ,EAAEX,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CADU;IAEpBD,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,MAAKH,KAAL,CAAhB;EAFc,CAAhB,CAPU;EAWhBW,OAAO,EAAEZ,SAAS,CAACa,IAXH;EAYhBC,IAAI,EAAEd,SAAS,CAACU,KAAV,CAAgB;IACpBK,IAAI,EAAEf,SAAS,CAACM,MADI;IAEpBU,QAAQ,EAAEhB,SAAS,CAACiB,IAFA;IAGpBC,MAAM,EAAElB,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAZU;EAiBhBe,oBAAoB,EAAEnB,SAAS,CAACM,MAjBhB;EAkBhBc,UAAU,EAAEpB,SAAS,CAACM,MAlBN;EAmBhBe,QAAQ,EAAErB,SAAS,CAACiB,IAnBJ;EAoBhBK,SAAS,EAAEtB,SAAS,CAACM,MApBL;EAqBhBiB,WAAW,EAAEvB,SAAS,CAACU,KAAV,CAAgB,EAAhB;AArBG,CAAlB;AA6DA,eAAeR,SAAf"}
+{"version":3,"file":"types.js","names":["PropTypes","ICONS","propTypes","type","oneOf","usage","label","string","content","node","icon","shape","position","onClick","func","link","href","download","bool","target","hoverBackgroundColor","hoverColor","disabled","className","customStyle"],"sources":["../../../src/atom/button-link/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport {ICONS} from '../../util/button-icons';\n\nconst propTypes = {\n  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  usage: PropTypes.oneOf(['button', 'submit', 'reset']),\n  label: PropTypes.string,\n  content: PropTypes.node,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  'data-testid': PropTypes.string,\n  icon: PropTypes.shape({\n    position: PropTypes.oneOf(['right', 'left']),\n    type: PropTypes.oneOf(keys(ICONS))\n  }),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  hoverBackgroundColor: PropTypes.string,\n  hoverColor: PropTypes.string,\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  customStyle: PropTypes.shape({})\n};\n\nexport type FaIcontype = {\n  name: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: number;\n};\n\nexport type IconType = {\n  position: 'right' | 'left';\n  type?: keyof typeof ICONS;\n  faIcon?: FaIcontype;\n};\nexport type ButtonLinkProps = {\n  type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';\n  usage?: 'button' | 'submit' | 'reset';\n  label?: string;\n  content?: React.ReactNode;\n  'aria-label'?: string;\n  'data-name'?: string;\n  'data-testid'?: string;\n  icon?: IconType;\n  onClick?: () => void;\n  onKeyDown?: () => void;\n  link?: {\n    href?: string;\n    download?: boolean;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  };\n  hoverBackgroundColor?: string;\n  hoverColor?: string;\n  disabled?: boolean;\n  className?: string;\n  customStyle?: Record<string, unknown>;\n  useTitle?: boolean;\n};\n\nexport type Fixture = {props: ButtonLinkProps};\n\nexport default propTypes;\n"],"mappings":";AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,SAAQC,KAAR,QAAoB,yBAApB;AAEA,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,CAAC,SAAD,EAAY,WAAZ,EAAyB,UAAzB,EAAqC,MAArC,EAA6C,WAA7C,CAAhB,CADU;EAEhBC,KAAK,EAAEL,SAAS,CAACI,KAAV,CAAgB,CAAC,QAAD,EAAW,QAAX,EAAqB,OAArB,CAAhB,CAFS;EAGhBE,KAAK,EAAEN,SAAS,CAACO,MAHD;EAIhBC,OAAO,EAAER,SAAS,CAACS,IAJH;EAKhB,cAAcT,SAAS,CAACO,MALR;EAMhB,aAAaP,SAAS,CAACO,MANP;EAOhB,eAAeP,SAAS,CAACO,MAPT;EAQhBG,IAAI,EAAEV,SAAS,CAACW,KAAV,CAAgB;IACpBC,QAAQ,EAAEZ,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CADU;IAEpBD,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,MAAKH,KAAL,CAAhB;EAFc,CAAhB,CARU;EAYhBY,OAAO,EAAEb,SAAS,CAACc,IAZH;EAahBC,IAAI,EAAEf,SAAS,CAACW,KAAV,CAAgB;IACpBK,IAAI,EAAEhB,SAAS,CAACO,MADI;IAEpBU,QAAQ,EAAEjB,SAAS,CAACkB,IAFA;IAGpBC,MAAM,EAAEnB,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAbU;EAkBhBgB,oBAAoB,EAAEpB,SAAS,CAACO,MAlBhB;EAmBhBc,UAAU,EAAErB,SAAS,CAACO,MAnBN;EAoBhBe,QAAQ,EAAEtB,SAAS,CAACkB,IApBJ;EAqBhBK,SAAS,EAAEvB,SAAS,CAACO,MArBL;EAsBhBiB,WAAW,EAAExB,SAAS,CAACW,KAAV,CAAgB,EAAhB;AAtBG,CAAlB;AA+DA,eAAeT,SAAf"}

package/es/atom/circular-progress-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAwD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAgD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}

package/es/atom/circular-progress-bar/index.js

@@ -40,16 +40,7 @@ const CircularProgressBar = ({
       length: length_
     };
   }, [size, strokeWidth]);
-  useEffect(() => {
-    console.log('CircularProgressBar mounted');
-    const timeoutId = setTimeout(() => {
-      setOffset(Math.ceil(length * ((100 - progression) / 100)));
-    }, 1000);
-    return () => {
-      console.log('CircularProgressBar unmounted');
-      clearTimeout(timeoutId);
-    };
-  }, [length, progression]);
+  useEffect(() => setOffset(Math.ceil(length * ((100 - progression) / 100))), [length, progression]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "aria-label": ariaLabel,

package/es/atom/circular-progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useEffect","CircularProgressBarPropTypes","style","ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","center","radius","length","center_","radius_","length_","Math","ceil","PI","console","log","timeoutId","setTimeout","clearTimeout","container","svg","mainCircle","progressionCircle","infos","propTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect, useRef} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n  <defs>\n    <linearGradient\n      id=\"gradient-stroke-progression\"\n      x1=\"81\"\n      y1=\"0\"\n      x2=\"81\"\n      y2=\"162\"\n      gradientUnits=\"userSpaceOnUse\"\n    >\n      <stop stopColor=\"#35CC7F\" />\n      <stop offset=\"1\" stopColor=\"#55F2A7\" />\n    </linearGradient>\n  </defs>\n);\n\nconst CircularProgressBar = ({\n  label,\n  progression,\n  size,\n  strokeWidth,\n  'aria-label': ariaLabel,\n  'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n  const [offset, setOffset] = useState<null | number>(null);\n\n  const {center, radius, length} = useMemo(() => {\n    const center_ = size / 2;\n    const radius_ = center_ - strokeWidth;\n    const length_ = Math.ceil(2 * Math.PI * radius_);\n\n    return {center: center_, radius: radius_, length: length_};\n  }, [size, strokeWidth]);\n\n  useEffect(() => {\n    console.log('CircularProgressBar mounted');\n\n    const timeoutId = setTimeout(() => {\n      setOffset(Math.ceil(length * ((100 - progression) / 100)));\n    }, 1000);\n\n    return () => {\n      console.log('CircularProgressBar unmounted');\n      clearTimeout(timeoutId);\n    };\n  }, [length, progression]);\n\n  return (\n    <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n      <svg className={style.svg} width={size} height={size}>\n        <ProgressionGradient />\n        <circle\n          className={style.mainCircle}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={3}\n          fill=\"transparent\"\n        />\n        <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n        <circle\n          className={style.progressionCircle}\n          cx={center}\n          cy={center}\n          r={radius}\n          stroke={`url(#gradient-stroke-progression)`}\n          strokeWidth={strokeWidth}\n          strokeDasharray={length}\n          strokeDashoffset={isNull(offset) ? length : offset}\n          fill=\"transparent\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      <div className={style.infos}>\n        <span className={style.progression}>{progression}%</span>\n        <span className={style.label}>{label}</span>\n      </div>\n    </div>\n  );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useEffect","CircularProgressBarPropTypes","style","ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","center","radius","length","center_","radius_","length_","Math","ceil","PI","container","svg","mainCircle","progressionCircle","infos","propTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n  <defs>\n    <linearGradient\n      id=\"gradient-stroke-progression\"\n      x1=\"81\"\n      y1=\"0\"\n      x2=\"81\"\n      y2=\"162\"\n      gradientUnits=\"userSpaceOnUse\"\n    >\n      <stop stopColor=\"#35CC7F\" />\n      <stop offset=\"1\" stopColor=\"#55F2A7\" />\n    </linearGradient>\n  </defs>\n);\n\nconst CircularProgressBar = ({\n  label,\n  progression,\n  size,\n  strokeWidth,\n  'aria-label': ariaLabel,\n  'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n  const [offset, setOffset] = useState<null | number>(null);\n\n  const {center, radius, length} = useMemo(() => {\n    const center_ = size / 2;\n    const radius_ = center_ - strokeWidth;\n    const length_ = Math.ceil(2 * Math.PI * radius_);\n\n    return {center: center_, radius: radius_, length: length_};\n  }, [size, strokeWidth]);\n\n  useEffect(\n    () => setOffset(Math.ceil(length * ((100 - progression) / 100))),\n    [length, progression]\n  );\n\n  return (\n    <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n      <svg className={style.svg} width={size} height={size}>\n        <ProgressionGradient />\n        <circle\n          className={style.mainCircle}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={3}\n          fill=\"transparent\"\n        />\n        <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n        <circle\n          className={style.progressionCircle}\n          cx={center}\n          cy={center}\n          r={radius}\n          stroke={`url(#gradient-stroke-progression)`}\n          strokeWidth={strokeWidth}\n          strokeDasharray={length}\n          strokeDashoffset={isNull(offset) ? length : offset}\n          fill=\"transparent\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      <div className={style.infos}>\n        <span className={style.progression}>{progression}%</span>\n        <span className={style.label}>{label}</span>\n      </div>\n    </div>\n  );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":"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"}

package/es/atom/input-doublestep/index.d.ts

@@ -6,6 +6,7 @@ declare class InputDoublestep extends React.Component<any, any, any> {
         onClick: PropTypes.Validator<(...args: any[]) => any>;
         onOpenConfirmation: PropTypes.Requireable<(...args: any[]) => any>;
         onCloseConfirmation: PropTypes.Requireable<(...args: any[]) => any>;
+        icon: PropTypes.Requireable<string>;
     };
     constructor(props: any, context: any);
     state: {

package/es/atom/input-doublestep/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-doublestep/index.js"],"names":[],"mappings":";AAiGA;IACE;;;;;;MAME;IAEF,sCAOC;IALC;;MAEC;IAKH,qBAQC;IAED,2BAKC;IAED,sBA0BC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-doublestep/index.js"],"names":[],"mappings":";AAwGA;IACE;;;;;;;MAOE;IAEF,sCAOC;IALC;;MAEC;IAKH,qBAQC;IAED,2BAKC;IAED,sBAuCC;CACF"}

package/es/atom/input-doublestep/index.js

@@ -7,6 +7,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Loader from '../loader';
+import ButtonLink from '../button-link';
 import style from './style.css';
 
 const ConfirmationInput = ({
@@ -17,6 +18,7 @@ const ConfirmationInput = ({
     return onChange(e.target.value);
   }, [onChange]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    "data-testid": "input",
     onInput: handleOnChange,
     placeholder: placeholder,
     className: style.input,
@@ -48,13 +50,22 @@ const ConfirmationForm = props => {
     placeholder: placeholder
   }) : /*#__PURE__*/React.createElement("div", {
     className: style.confirmEmptySpace
-  }), /*#__PURE__*/React.createElement("span", {
-    onClick: onHandleClose,
-    className: style.cancel
-  }, cancelValue), /*#__PURE__*/React.createElement("span", {
-    onClick: confirmDisabled ? _noop : onConfirm,
-    className: confirmDisabled ? style.disabled : style.delete
-  }, confirmValue));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.confirmationCTAWrapper
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    label: cancelValue,
+    "data-testid": "cancel-confirmation-button",
+    onClick: onHandleClose
+  }), /*#__PURE__*/React.createElement(ButtonLink, {
+    label: confirmValue,
+    disabled: confirmDisabled,
+    "data-testid": "confirm-delete-button",
+    onClick: onConfirm,
+    customStyle: {
+      backgroundColor: 'orange',
+      color: 'white'
+    }
+  })));
   return isPending ? /*#__PURE__*/React.createElement("div", {
     className: style.confirmForm
   }, /*#__PURE__*/React.createElement(Loader, null)) : form;
@@ -124,15 +135,28 @@ class InputDoublestep extends React.Component {
   render() {
     const {
       toggleValue,
-      disabled
+      disabled,
+      icon
     } = this.props;
     const {
       open
     } = this.state;
-    const formView = !open ? /*#__PURE__*/React.createElement("span", {
-      onClick: disabled ? _noop : this.handleToggle,
-      className: disabled ? style.toggleDisabled : style.toggle
-    }, toggleValue) : /*#__PURE__*/React.createElement(Confirmation, _extends({}, this.props, {
+    const formView = !open ? /*#__PURE__*/React.createElement(ButtonLink, _extends({}, icon ? {
+      icon: {
+        position: 'left',
+        faIcon: {
+          name: icon,
+          color: '#ffffff',
+          size: 16
+        }
+      }
+    } : {}, {
+      type: "dangerous",
+      label: toggleValue,
+      disabled: disabled,
+      "data-testid": "input-toggle-button",
+      onClick: this.handleToggle
+    })) : /*#__PURE__*/React.createElement(Confirmation, _extends({}, this.props, {
       onHandleClose: this.handleToggle,
       onConfirm: this.handleOnClick
     }));
@@ -150,7 +174,8 @@ InputDoublestep.propTypes = process.env.NODE_ENV !== "production" ? _extends({
   toggleValue: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   onOpenConfirmation: PropTypes.func,
-  onCloseConfirmation: PropTypes.func
+  onCloseConfirmation: PropTypes.func,
+  icon: PropTypes.string
 }, inputDoubleProps) : {};
 export default InputDoublestep;
 //# sourceMappingURL=index.js.map

package/es/atom/input-doublestep/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","Loader","style","ConfirmationInput","onChange","placeholder","handleOnChange","e","target","value","input","propTypes","func","string","ConfirmationForm","props","confirmValue","confirmDisabled","onConfirm","cancelValue","onHandleClose","textValidation","isPending","form","confirmForm","confirmEmptySpace","cancel","disabled","delete","isRequired","bool","Confirmation","description","sectionConfirm","inputDoubleProps","InputDoublestep","Component","constructor","context","state","open","handleToggle","bind","handleOnClick","setState","onCloseConfirmation","onOpenConfirmation","preventDefault","onClick","render","toggleValue","formView","toggleDisabled","toggle","wrapper"],"sources":["../../../src/atom/input-doublestep/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {snakeCase, omit, noop} from 'lodash/fp';\nimport Loader from '../loader';\nimport style from './style.css';\n\nconst ConfirmationInput = ({onChange, placeholder = ''}) => {\n  const handleOnChange = useMemo(\n    () => e => {\n      return onChange(e.target.value);\n    },\n    [onChange]\n  );\n\n  return (\n    <div>\n      <input\n        onInput={handleOnChange}\n        placeholder={placeholder}\n        className={style.input}\n        onChange={noop}\n      />\n    </div>\n  );\n};\n\nConfirmationInput.propTypes = {\n  onChange: PropTypes.func,\n  placeholder: PropTypes.string\n};\n\nconst ConfirmationForm = props => {\n  const {\n    confirmValue,\n    confirmDisabled = false,\n    onConfirm,\n    cancelValue,\n    onHandleClose,\n    onChange,\n    textValidation,\n    placeholder,\n    isPending = false\n  } = props;\n\n  const form = (\n    <div className={style.confirmForm}>\n      {textValidation ? (\n        <ConfirmationInput onChange={onChange} placeholder={placeholder} />\n      ) : (\n        <div className={style.confirmEmptySpace} />\n      )}\n      <span onClick={onHandleClose} className={style.cancel}>\n        {cancelValue}\n      </span>\n      <span\n        onClick={confirmDisabled ? noop : onConfirm}\n        className={confirmDisabled ? style.disabled : style.delete}\n      >\n        {confirmValue}\n      </span>\n    </div>\n  );\n\n  return isPending ? (\n    <div className={style.confirmForm}>\n      <Loader />\n    </div>\n  ) : (\n    form\n  );\n};\nConfirmationForm.propTypes = {\n  confirmValue: PropTypes.string.isRequired,\n  confirmDisabled: PropTypes.bool,\n  onConfirm: PropTypes.func.isRequired,\n  cancelValue: PropTypes.string.isRequired,\n  onHandleClose: PropTypes.func.isRequired,\n  textValidation: PropTypes.bool,\n  isPending: PropTypes.bool,\n  ...ConfirmationInput.propTypes\n};\n\nconst Confirmation = props => {\n  const {description} = props;\n\n  return (\n    <div className={style.sectionConfirm}>\n      <div className={style.description}>{description}</div>\n      <ConfirmationForm {...props} />\n    </div>\n  );\n};\nConfirmation.propTypes = {\n  description: PropTypes.string\n};\n\nconst inputDoubleProps = omit(['onConfirm', 'onHandleClose'], {...Confirmation.propTypes});\nclass InputDoublestep extends React.Component {\n  static propTypes = {\n    toggleValue: PropTypes.string.isRequired,\n    onClick: PropTypes.func.isRequired,\n    onOpenConfirmation: PropTypes.func,\n    onCloseConfirmation: PropTypes.func,\n    ...inputDoubleProps\n  };\n\n  constructor(props, context) {\n    super(props);\n    this.state = {\n      open: false\n    };\n    this.handleToggle = this.handleToggle.bind(this);\n    this.handleOnClick = this.handleOnClick.bind(this);\n  }\n\n  handleToggle() {\n    this.setState(state => ({\n      open: !state.open\n    }));\n\n    const {open} = this.state;\n    const {onCloseConfirmation = noop, onOpenConfirmation = noop} = this.props;\n    open ? onCloseConfirmation() : onOpenConfirmation();\n  }\n\n  handleOnClick(e) {\n    e.preventDefault();\n    this.setState({open: false});\n    const {onClick = noop} = this.props;\n    return onClick(e);\n  }\n\n  render() {\n    const {toggleValue, disabled} = this.props;\n    const {open} = this.state;\n\n    const formView = !open ? (\n      <span\n        onClick={disabled ? noop : this.handleToggle}\n        className={disabled ? style.toggleDisabled : style.toggle}\n      >\n        {toggleValue}\n      </span>\n    ) : (\n      <Confirmation\n        {...this.props}\n        onHandleClose={this.handleToggle}\n        onConfirm={this.handleOnClick}\n      />\n    );\n\n    return (\n      <div className={style.wrapper}>\n        <div data-name={`input_doublestep_${snakeCase(toggleValue)}`} className={style.value}>\n          {formView}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default InputDoublestep;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","Loader","ButtonLink","style","ConfirmationInput","onChange","placeholder","handleOnChange","e","target","value","input","propTypes","func","string","ConfirmationForm","props","confirmValue","confirmDisabled","onConfirm","cancelValue","onHandleClose","textValidation","isPending","form","confirmForm","confirmEmptySpace","confirmationCTAWrapper","backgroundColor","color","isRequired","bool","Confirmation","description","sectionConfirm","inputDoubleProps","InputDoublestep","Component","constructor","context","state","open","handleToggle","bind","handleOnClick","setState","onCloseConfirmation","onOpenConfirmation","preventDefault","onClick","render","toggleValue","disabled","icon","formView","position","faIcon","name","size","wrapper"],"sources":["../../../src/atom/input-doublestep/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {snakeCase, omit, noop} from 'lodash/fp';\nimport Loader from '../loader';\nimport ButtonLink from '../button-link';\nimport style from './style.css';\n\nconst ConfirmationInput = ({onChange, placeholder = ''}) => {\n  const handleOnChange = useMemo(\n    () => e => {\n      return onChange(e.target.value);\n    },\n    [onChange]\n  );\n\n  return (\n    <div>\n      <input\n        data-testid=\"input\"\n        onInput={handleOnChange}\n        placeholder={placeholder}\n        className={style.input}\n        onChange={noop}\n      />\n    </div>\n  );\n};\n\nConfirmationInput.propTypes = {\n  onChange: PropTypes.func,\n  placeholder: PropTypes.string\n};\n\nconst ConfirmationForm = props => {\n  const {\n    confirmValue,\n    confirmDisabled = false,\n    onConfirm,\n    cancelValue,\n    onHandleClose,\n    onChange,\n    textValidation,\n    placeholder,\n    isPending = false\n  } = props;\n\n  const form = (\n    <div className={style.confirmForm}>\n      {textValidation ? (\n        <ConfirmationInput onChange={onChange} placeholder={placeholder} />\n      ) : (\n        <div className={style.confirmEmptySpace} />\n      )}\n      <div className={style.confirmationCTAWrapper}>\n        <ButtonLink\n          label={cancelValue}\n          data-testid=\"cancel-confirmation-button\"\n          onClick={onHandleClose}\n        />\n        <ButtonLink\n          label={confirmValue}\n          disabled={confirmDisabled}\n          data-testid=\"confirm-delete-button\"\n          onClick={onConfirm}\n          customStyle={{backgroundColor: 'orange', color: 'white'}}\n        />\n      </div>\n    </div>\n  );\n\n  return isPending ? (\n    <div className={style.confirmForm}>\n      <Loader />\n    </div>\n  ) : (\n    form\n  );\n};\nConfirmationForm.propTypes = {\n  confirmValue: PropTypes.string.isRequired,\n  confirmDisabled: PropTypes.bool,\n  onConfirm: PropTypes.func.isRequired,\n  cancelValue: PropTypes.string.isRequired,\n  onHandleClose: PropTypes.func.isRequired,\n  textValidation: PropTypes.bool,\n  isPending: PropTypes.bool,\n  ...ConfirmationInput.propTypes\n};\n\nconst Confirmation = props => {\n  const {description} = props;\n\n  return (\n    <div className={style.sectionConfirm}>\n      <div className={style.description}>{description}</div>\n      <ConfirmationForm {...props} />\n    </div>\n  );\n};\nConfirmation.propTypes = {\n  description: PropTypes.string\n};\n\nconst inputDoubleProps = omit(['onConfirm', 'onHandleClose'], {...Confirmation.propTypes});\nclass InputDoublestep extends React.Component {\n  static propTypes = {\n    toggleValue: PropTypes.string.isRequired,\n    onClick: PropTypes.func.isRequired,\n    onOpenConfirmation: PropTypes.func,\n    onCloseConfirmation: PropTypes.func,\n    icon: PropTypes.string,\n    ...inputDoubleProps\n  };\n\n  constructor(props, context) {\n    super(props);\n    this.state = {\n      open: false\n    };\n    this.handleToggle = this.handleToggle.bind(this);\n    this.handleOnClick = this.handleOnClick.bind(this);\n  }\n\n  handleToggle() {\n    this.setState(state => ({\n      open: !state.open\n    }));\n\n    const {open} = this.state;\n    const {onCloseConfirmation = noop, onOpenConfirmation = noop} = this.props;\n    open ? onCloseConfirmation() : onOpenConfirmation();\n  }\n\n  handleOnClick(e) {\n    e.preventDefault();\n    this.setState({open: false});\n    const {onClick = noop} = this.props;\n    return onClick(e);\n  }\n\n  render() {\n    const {toggleValue, disabled, icon} = this.props;\n    const {open} = this.state;\n\n    const formView = !open ? (\n      <ButtonLink\n        {...(icon\n          ? {\n              icon: {\n                position: 'left',\n                faIcon: {\n                  name: icon,\n                  color: '#ffffff',\n                  size: 16\n                }\n              }\n            }\n          : {})}\n        type=\"dangerous\"\n        label={toggleValue}\n        disabled={disabled}\n        data-testid=\"input-toggle-button\"\n        onClick={this.handleToggle}\n      />\n    ) : (\n      <Confirmation\n        {...this.props}\n        onHandleClose={this.handleToggle}\n        onConfirm={this.handleOnClick}\n      />\n    );\n\n    return (\n      <div className={style.wrapper}>\n        <div data-name={`input_doublestep_${snakeCase(toggleValue)}`} className={style.value}>\n          {formView}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default InputDoublestep;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,gBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAG,CAAC;EAACC,QAAD;EAAWC,WAAW,GAAG;AAAzB,CAAD,KAAkC;EAC1D,MAAMC,cAAc,GAAGR,OAAO,CAC5B,MAAMS,CAAC,IAAI;IACT,OAAOH,QAAQ,CAACG,CAAC,CAACC,MAAF,CAASC,KAAV,CAAf;EACD,CAH2B,EAI5B,CAACL,QAAD,CAJ4B,CAA9B;EAOA,oBACE,8CACE;IACE,eAAY,OADd;IAEE,OAAO,EAAEE,cAFX;IAGE,WAAW,EAAED,WAHf;IAIE,SAAS,EAAEH,KAAK,CAACQ,KAJnB;IAKE,QAAQ;EALV,EADF,CADF;AAWD,CAnBD;;AAqBAP,iBAAiB,CAACQ,SAAlB,2CAA8B;EAC5BP,QAAQ,EAAEL,SAAS,CAACa,IADQ;EAE5BP,WAAW,EAAEN,SAAS,CAACc;AAFK,CAA9B;;AAKA,MAAMC,gBAAgB,GAAGC,KAAK,IAAI;EAChC,MAAM;IACJC,YADI;IAEJC,eAAe,GAAG,KAFd;IAGJC,SAHI;IAIJC,WAJI;IAKJC,aALI;IAMJhB,QANI;IAOJiB,cAPI;IAQJhB,WARI;IASJiB,SAAS,GAAG;EATR,IAUFP,KAVJ;EAYA,MAAMQ,IAAI,gBACR;IAAK,SAAS,EAAErB,KAAK,CAACsB;EAAtB,GACGH,cAAc,gBACb,oBAAC,iBAAD;IAAmB,QAAQ,EAAEjB,QAA7B;IAAuC,WAAW,EAAEC;EAApD,EADa,gBAGb;IAAK,SAAS,EAAEH,KAAK,CAACuB;EAAtB,EAJJ,eAME;IAAK,SAAS,EAAEvB,KAAK,CAACwB;EAAtB,gBACE,oBAAC,UAAD;IACE,KAAK,EAAEP,WADT;IAEE,eAAY,4BAFd;IAGE,OAAO,EAAEC;EAHX,EADF,eAME,oBAAC,UAAD;IACE,KAAK,EAAEJ,YADT;IAEE,QAAQ,EAAEC,eAFZ;IAGE,eAAY,uBAHd;IAIE,OAAO,EAAEC,SAJX;IAKE,WAAW,EAAE;MAACS,eAAe,EAAE,QAAlB;MAA4BC,KAAK,EAAE;IAAnC;EALf,EANF,CANF,CADF;EAwBA,OAAON,SAAS,gBACd;IAAK,SAAS,EAAEpB,KAAK,CAACsB;EAAtB,gBACE,oBAAC,MAAD,OADF,CADc,GAKdD,IALF;AAOD,CA5CD;;AA6CAT,gBAAgB,CAACH,SAAjB;EACEK,YAAY,EAAEjB,SAAS,CAACc,MAAV,CAAiBgB,UADjC;EAEEZ,eAAe,EAAElB,SAAS,CAAC+B,IAF7B;EAGEZ,SAAS,EAAEnB,SAAS,CAACa,IAAV,CAAeiB,UAH5B;EAIEV,WAAW,EAAEpB,SAAS,CAACc,MAAV,CAAiBgB,UAJhC;EAKET,aAAa,EAAErB,SAAS,CAACa,IAAV,CAAeiB,UALhC;EAMER,cAAc,EAAEtB,SAAS,CAAC+B,IAN5B;EAOER,SAAS,EAAEvB,SAAS,CAAC+B;AAPvB,GAQK3B,iBAAiB,CAACQ,SARvB;;AAWA,MAAMoB,YAAY,GAAGhB,KAAK,IAAI;EAC5B,MAAM;IAACiB;EAAD,IAAgBjB,KAAtB;EAEA,oBACE;IAAK,SAAS,EAAEb,KAAK,CAAC+B;EAAtB,gBACE;IAAK,SAAS,EAAE/B,KAAK,CAAC8B;EAAtB,GAAoCA,WAApC,CADF,eAEE,oBAAC,gBAAD,EAAsBjB,KAAtB,CAFF,CADF;AAMD,CATD;;AAUAgB,YAAY,CAACpB,SAAb,2CAAyB;EACvBqB,WAAW,EAAEjC,SAAS,CAACc;AADA,CAAzB;AAIA,MAAMqB,gBAAN,2CAAyB,MAAK,CAAC,WAAD,EAAc,eAAd,CAAL,eAAyCH,YAAY,CAACpB,SAAtD,EAAzB;;AACA,MAAMwB,eAAN,SAA8BtC,KAAK,CAACuC,SAApC,CAA8C;EAU5CC,WAAW,CAACtB,KAAD,EAAQuB,OAAR,EAAiB;IAC1B,MAAMvB,KAAN;IACA,KAAKwB,KAAL,GAAa;MACXC,IAAI,EAAE;IADK,CAAb;IAGA,KAAKC,YAAL,GAAoB,KAAKA,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB,CAApB;IACA,KAAKC,aAAL,GAAqB,KAAKA,aAAL,CAAmBD,IAAnB,CAAwB,IAAxB,CAArB;EACD;;EAEDD,YAAY,GAAG;IACb,KAAKG,QAAL,CAAcL,KAAK,KAAK;MACtBC,IAAI,EAAE,CAACD,KAAK,CAACC;IADS,CAAL,CAAnB;IAIA,MAAM;MAACA;IAAD,IAAS,KAAKD,KAApB;IACA,MAAM;MAACM,mBAAmB,QAApB;MAA6BC,kBAAkB;IAA/C,IAA0D,KAAK/B,KAArE;IACAyB,IAAI,GAAGK,mBAAmB,EAAtB,GAA2BC,kBAAkB,EAAjD;EACD;;EAEDH,aAAa,CAACpC,CAAD,EAAI;IACfA,CAAC,CAACwC,cAAF;IACA,KAAKH,QAAL,CAAc;MAACJ,IAAI,EAAE;IAAP,CAAd;IACA,MAAM;MAACQ,OAAO;IAAR,IAAmB,KAAKjC,KAA9B;IACA,OAAOiC,OAAO,CAACzC,CAAD,CAAd;EACD;;EAED0C,MAAM,GAAG;IACP,MAAM;MAACC,WAAD;MAAcC,QAAd;MAAwBC;IAAxB,IAAgC,KAAKrC,KAA3C;IACA,MAAM;MAACyB;IAAD,IAAS,KAAKD,KAApB;IAEA,MAAMc,QAAQ,GAAG,CAACb,IAAD,gBACf,oBAAC,UAAD,eACOY,IAAI,GACL;MACEA,IAAI,EAAE;QACJE,QAAQ,EAAE,MADN;QAEJC,MAAM,EAAE;UACNC,IAAI,EAAEJ,IADA;UAENxB,KAAK,EAAE,SAFD;UAGN6B,IAAI,EAAE;QAHA;MAFJ;IADR,CADK,GAWL,EAZN;MAaE,IAAI,EAAC,WAbP;MAcE,KAAK,EAAEP,WAdT;MAeE,QAAQ,EAAEC,QAfZ;MAgBE,eAAY,qBAhBd;MAiBE,OAAO,EAAE,KAAKV;IAjBhB,GADe,gBAqBf,oBAAC,YAAD,eACM,KAAK1B,KADX;MAEE,aAAa,EAAE,KAAK0B,YAFtB;MAGE,SAAS,EAAE,KAAKE;IAHlB,GArBF;IA4BA,oBACE;MAAK,SAAS,EAAEzC,KAAK,CAACwD;IAAtB,gBACE;MAAK,aAAY,oBAAmB,WAAUR,WAAV,CAAuB,EAA3D;MAA8D,SAAS,EAAEhD,KAAK,CAACO;IAA/E,GACG4C,QADH,CADF,CADF;EAOD;;AA3E2C;;AAAxClB,e,CACGxB,S;EACLuC,WAAW,EAAEnD,SAAS,CAACc,MAAV,CAAiBgB,U;EAC9BmB,OAAO,EAAEjD,SAAS,CAACa,IAAV,CAAeiB,U;EACxBiB,kBAAkB,EAAE/C,SAAS,CAACa,I;EAC9BiC,mBAAmB,EAAE9C,SAAS,CAACa,I;EAC/BwC,IAAI,EAAErD,SAAS,CAACc;GACbqB,gB;AAuEP,eAAeC,eAAf"}

package/es/atom/input-doublestep/style.css

@@ -35,73 +35,6 @@
   min-height: 63px;
 }
 
-.toggle {
-  height: 52px;
-  padding: 0 40px;
-  line-height: 52px;
-  border-radius: 2px;
-  font-family: 'Gilroy';
-  font-size: 15px;
-  color: white;
-  font-weight: 700px;
-  display: block;
-  background-color: negative;
-  cursor: pointer;
-  text-align: center;
-}
-
-.toggleDisabled {
-  composes: toggle;
-  cursor: default;
-  background-color: light;
-  border: 1px solid light;
-}
-
-.button {
-  height: 32px;
-  padding: 0 15px;
-  text-transform: uppercase;
-  border-radius: 2px;
-  font-family: 'Gilroy';
-  font-size: 15px;
-  font-weight: 700;
-  cursor: pointer;
-  line-height: 30px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.cancel {
-  composes: button;
-  border: 1px solid dark;
-  color: white;
-  background-color: dark;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  font-weight: 600;
-  display: inline-block;
-  min-width: 120px;
-}
-
-.delete {
-  composes: button;
-  border: 1px solid orange;
-  color: white;
-  background-color: orange;
-  margin-right: 5px;
-  margin-bottom: 10px;
-  font-weight: 600;
-  display: inline-block;
-  min-width: 120px;
-}
-
-.disabled {
-  composes: delete;
-  cursor: default;
-  background-color: light;
-  border: 1px solid light;
-}
-
 .description {
   font-family: 'Gilroy';
   font-weight: 500;
@@ -123,3 +56,10 @@
   width: 230px;
   appearance: none;
 }
+
+.confirmationCTAWrapper {
+  display: flex;
+  margin: auto;
+  width: 50%;
+  gap: 16px;
+}

package/es/atom/select/index.js

@@ -43,7 +43,7 @@ const ArrowView = ({
     color: arrowColor
   }, {
     className: arrowClass
-  }), [ariaLabel, arrowClass, arrowColor]);
+  }), [arrowClass, arrowColor]);
 
   if (shouldRender) {
     return isArrowUp ? /*#__PURE__*/React.createElement(ArrowUp, _extends({}, props, {

package/es/atom/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","classnames","concat","filter","find","flatMapDeep","get","getOr","includes","isEmpty","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","NovaCompositionNavigationArrowTop","ArrowUp","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","skillDetail","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","color","className","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","selectOption","option","index","value","optionList","optgroup","label","i","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","shouldUseSkinFontColor","undefined","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","childContextTypes","propTypes","func","oneOf"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport concat from 'lodash/fp/concat';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport flatMapDeep from 'lodash/fp/flatMapDeep';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n  NovaCompositionNavigationArrowDown as ArrowDown,\n  NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template,\n  skillDetail: style.skillDetail,\n  coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n  const props = useMemo(\n    () => ({\n      ...(arrowColor &\n        {\n          color: arrowColor\n        }),\n      className: arrowClass\n    }),\n    [ariaLabel, arrowClass, arrowColor]\n  );\n  if (shouldRender) {\n    return isArrowUp ? (\n      <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n    ) : (\n      <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n    );\n  } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\n    optgroups = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const title = useMemo(\n    () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n    [propTitle, required]\n  );\n\n  const [isArrowUp, setIsArrowUp] = useState(false);\n\n  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);\n  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);\n\n  const selectOption = (option, index) => {\n    return (\n      <option key={index} value={option.value} className={style.selectOption}>\n        {option.name}\n      </option>\n    );\n  };\n\n  const optionList = !isEmpty(options)\n    ? options.map((option, index) => selectOption(option, index))\n    : optgroups.map((optgroup, index) => {\n        return (\n          <optgroup key={index} label={optgroup.label}>\n            {optgroup.options && optgroup.options.map((option, i) => selectOption(option, i))}\n          </optgroup>\n        );\n      });\n\n  const titleView = title ? <span className={style.title}>{title}</span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            setIsArrowUp(false);\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            setIsArrowUp(false);\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n    () => includes(theme, ['question', 'template', 'player']),\n    [theme]\n  );\n  const shouldUseSkinFontColor = useMemo(\n    () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n    [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const behaviorClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviorClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        data-testid=\"select-wrapper\"\n        data-name=\"select-wrapper\"\n        title={title}\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-testid=\"select-span\"\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, [\n              'player',\n              'invalid',\n              'question',\n              'thematiques',\n              'template',\n              'skillDetail'\n            ])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n        >\n          {selectedLabel}\n        </span>\n        <ArrowView\n          shouldRender={!multiple}\n          isArrowUp={isArrowUp}\n          ariaLabel={ariaLabel}\n          arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n          arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n        />\n        <select\n          {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n          {...(ariaLabel && !ariaLabelledBy ? {'aria-label': ariaLabel} : {})}\n          {...(ariaLabel ? {title: ariaLabel} : {})}\n          data-name=\"native-select\"\n          className={style.selectBox}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n          onClick={handleSelectOnFocus}\n          onBlur={handleSelectOnBlur}\n          // onBlur does not handle completely an out of bounds click\n          // ex: select is Opened and a click is done outside, cancelling the select\n          // that doesn't count as a Blur, so an onMouseLeave is needed\n          onMouseLeave={handleSelectOnBlur}\n          data-testid=\"native-select\"\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nexport const SelectOptionGroupPropTypes = {\n  label: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string,\n  'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","classnames","concat","filter","find","flatMapDeep","get","getOr","includes","isEmpty","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","NovaCompositionNavigationArrowTop","ArrowUp","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","skillDetail","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","color","className","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","selectOption","option","index","value","optionList","optgroup","label","i","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","shouldUseSkinFontColor","undefined","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","childContextTypes","propTypes","func","oneOf"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport concat from 'lodash/fp/concat';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport flatMapDeep from 'lodash/fp/flatMapDeep';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n  NovaCompositionNavigationArrowDown as ArrowDown,\n  NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template,\n  skillDetail: style.skillDetail,\n  coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n  const props = useMemo(\n    () => ({\n      ...(arrowColor &\n        {\n          color: arrowColor\n        }),\n      className: arrowClass\n    }),\n    [arrowClass, arrowColor]\n  );\n  if (shouldRender) {\n    return isArrowUp ? (\n      <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n    ) : (\n      <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n    );\n  } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\n    optgroups = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const title = useMemo(\n    () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n    [propTitle, required]\n  );\n\n  const [isArrowUp, setIsArrowUp] = useState(false);\n\n  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);\n  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);\n\n  const selectOption = (option, index) => {\n    return (\n      <option key={index} value={option.value} className={style.selectOption}>\n        {option.name}\n      </option>\n    );\n  };\n\n  const optionList = !isEmpty(options)\n    ? options.map((option, index) => selectOption(option, index))\n    : optgroups.map((optgroup, index) => {\n        return (\n          <optgroup key={index} label={optgroup.label}>\n            {optgroup.options && optgroup.options.map((option, i) => selectOption(option, i))}\n          </optgroup>\n        );\n      });\n\n  const titleView = title ? <span className={style.title}>{title}</span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            setIsArrowUp(false);\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            setIsArrowUp(false);\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n    () => includes(theme, ['question', 'template', 'player']),\n    [theme]\n  );\n  const shouldUseSkinFontColor = useMemo(\n    () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n    [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const behaviorClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviorClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        data-testid=\"select-wrapper\"\n        data-name=\"select-wrapper\"\n        title={title}\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-testid=\"select-span\"\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, [\n              'player',\n              'invalid',\n              'question',\n              'thematiques',\n              'template',\n              'skillDetail'\n            ])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n        >\n          {selectedLabel}\n        </span>\n        <ArrowView\n          shouldRender={!multiple}\n          isArrowUp={isArrowUp}\n          ariaLabel={ariaLabel}\n          arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n          arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n        />\n        <select\n          {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n          {...(ariaLabel && !ariaLabelledBy ? {'aria-label': ariaLabel} : {})}\n          {...(ariaLabel ? {title: ariaLabel} : {})}\n          data-name=\"native-select\"\n          className={style.selectBox}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n          onClick={handleSelectOnFocus}\n          onBlur={handleSelectOnBlur}\n          // onBlur does not handle completely an out of bounds click\n          // ex: select is Opened and a click is done outside, cancelling the select\n          // that doesn't count as a Blur, so an onMouseLeave is needed\n          onMouseLeave={handleSelectOnBlur}\n          data-testid=\"native-select\"\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nexport const SelectOptionGroupPropTypes = {\n  label: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string,\n  'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}

package/es/molecule/base-modal/index.d.ts

@@ -47,6 +47,7 @@ declare namespace BaseModal {
                 onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
                 iconName: PropTypes.Requireable<string>;
                 disabled: PropTypes.Requireable<boolean>;
+                color: PropTypes.Requireable<string>;
             }>>;
         }> | null | undefined>>;
         const onClose: PropTypes.Requireable<(...args: any[]) => any>;

package/es/molecule/base-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AASA,yEA4GC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AASA,yEA6GC"}

package/es/molecule/base-modal/index.js

@@ -42,10 +42,11 @@ const BaseModal = (props, context) => {
       label: confirmLabel,
       onConfirm,
       disabled: confirmDisabled,
-      iconName
+      iconName,
+      color
     } = confirmButton || {};
 
-    const primarySkinColor = _get('common.primary', skin);
+    const buttonConfirmColor = color || _get('common.primary', skin);
 
     return /*#__PURE__*/React.createElement("div", {
       className: style.footer
@@ -59,9 +60,9 @@ const BaseModal = (props, context) => {
       disabled: cancelDisabled
     }) : null, onConfirm && confirmLabel ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, _extends({
       customStyle: {
-        backgroundColor: primarySkinColor
+        backgroundColor: buttonConfirmColor
       },
-      hoverBackgroundColor: convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`),
+      hoverBackgroundColor: convert(`hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`),
       hoverColor: '#FFFFFF',
       className: style.footerConfirmButton,
       type: 'primary',
@@ -80,7 +81,7 @@ const BaseModal = (props, context) => {
     } : {}))) : null), text ? /*#__PURE__*/React.createElement("div", {
       className: `${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`
     }, text) : null);
-  }, [footer, skin, style, convert, _get, _isEmpty]);
+  }, [footer, skin]);
   if (!isOpen || !title || !children) return null;
 
   function handleOnClose(e) {
@@ -150,7 +151,8 @@ BaseModal.propTypes = process.env.NODE_ENV !== "production" ? {
       label: PropTypes.string,
       onConfirm: PropTypes.func,
       iconName: PropTypes.string,
-      disabled: PropTypes.bool
+      disabled: PropTypes.bool,
+      color: PropTypes.string
     })
   })]),
   onClose: PropTypes.func