@coorpacademy/components 11.32.42 → 11.32.44

package/es/atom/icon/index.d.ts

@@ -1,4 +1,5 @@
 export const DEFAULT_ICON_COLOR: "hsl(0, 0%, 32%)";
+export function createGradientBackground(baseColor: any): string;
 export function getForegroundColor(backgroundColor: any): any;
 export default Icon;
 declare const Icon: React.NamedExoticComponent<object>;

package/es/atom/icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,8DAC8D;;AAGrE,uDAmCG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,iEAIN;AAEM,8DAC8D;;AAGrE,uDAoCG"}

package/es/atom/icon/index.js

@@ -30,12 +30,18 @@ const SIZE_CONFIGS = {
     wrapperSize: 48
   }
 };
+export const createGradientBackground = baseColor => {
+  const startColor = convert(`color(${baseColor} lightness(91%))`);
+  const endColor = convert(`color(${baseColor} lightness(81%))`);
+  return `linear-gradient(180deg, ${startColor} 0%, ${endColor} 100%)`;
+};
 export const getForegroundColor = backgroundColor => convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`); // set lightness to 32%
 
 const Icon = /*#__PURE__*/React.memo(function Icon({
   iconName,
   iconColor,
   backgroundColor,
+  gradientBackground,
   borderRadius,
   preset = DEFAULT_PRESET,
   size,
@@ -45,7 +51,7 @@ const Icon = /*#__PURE__*/React.memo(function Icon({
   const effectiveSize = size ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size) : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);
   const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
   const iconWrapperStyle = {
-    backgroundColor,
+    background: gradientBackground ? createGradientBackground(effectiveIconColor) : backgroundColor,
     borderRadius,
     width: wrapperSize,
     height: wrapperSize,
@@ -64,6 +70,7 @@ Icon.propTypes = process.env.NODE_ENV !== "production" ? {
   iconName: PropTypes.string.isRequired,
   iconColor: PropTypes.string,
   backgroundColor: PropTypes.string,
+  gradientBackground: PropTypes.bool,
   borderRadius: PropTypes.string,
   preset: PropTypes.oneOf(['s', 'm', 'xl']),
   size: PropTypes.shape({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","number","FontAwesomeIcon","fas","library","toLower","merge","getOr","convert","style","add","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","Icon","memo","iconName","iconColor","borderRadius","preset","size","customStyle","effectiveIconColor","effectiveSize","iconWrapperStyle","width","height","padding","iconWrapper","propTypes","string","isRequired","oneOf","shape","objectOf","oneOfType"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport {convert} from 'css-color-function';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 12,\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 16,\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 20,\n    wrapperSize: 48\n  }\n};\n\nexport const getForegroundColor = backgroundColor =>\n  convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);\n// set lightness to 32%\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  borderRadius,\n  preset = DEFAULT_PRESET,\n  size,\n  customStyle\n}) {\n  const effectiveIconColor =\n    iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n  const iconWrapperStyle = {\n    backgroundColor,\n    borderRadius,\n    width: wrapperSize,\n    height: wrapperSize,\n    padding: ICON_PADDING\n  };\n\n  return (\n    <div className={style.iconWrapper} style={{...iconWrapperStyle, ...customStyle}}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        fontSize={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  borderRadius: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: number,\n    wrapperSize: PropTypes.number\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Icon;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","number","FontAwesomeIcon","fas","library","toLower","merge","getOr","convert","style","add","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","createGradientBackground","baseColor","startColor","endColor","getForegroundColor","backgroundColor","Icon","memo","iconName","iconColor","gradientBackground","borderRadius","preset","size","customStyle","effectiveIconColor","effectiveSize","iconWrapperStyle","background","width","height","padding","iconWrapper","propTypes","string","isRequired","bool","oneOf","shape","objectOf","oneOfType"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport {convert} from 'css-color-function';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 12,\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 16,\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 20,\n    wrapperSize: 48\n  }\n};\n\nexport const createGradientBackground = baseColor => {\n  const startColor = convert(`color(${baseColor} lightness(91%))`);\n  const endColor = convert(`color(${baseColor} lightness(81%))`);\n  return `linear-gradient(180deg, ${startColor} 0%, ${endColor} 100%)`;\n};\n\nexport const getForegroundColor = backgroundColor =>\n  convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);\n// set lightness to 32%\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  gradientBackground,\n  borderRadius,\n  preset = DEFAULT_PRESET,\n  size,\n  customStyle\n}) {\n  const effectiveIconColor =\n    iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n  const iconWrapperStyle = {\n    background: gradientBackground ? createGradientBackground(effectiveIconColor) : backgroundColor,\n    borderRadius,\n    width: wrapperSize,\n    height: wrapperSize,\n    padding: ICON_PADDING\n  };\n\n  return (\n    <div className={style.iconWrapper} style={{...iconWrapperStyle, ...customStyle}}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        fontSize={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  gradientBackground: PropTypes.bool,\n  borderRadius: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: number,\n    wrapperSize: PropTypes.number\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Icon;\n"],"mappings":"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"}

package/es/atom/select-icon/index.d.ts

@@ -0,0 +1,17 @@
+export default SelectIcon;
+declare function SelectIcon(props: any): JSX.Element;
+declare namespace SelectIcon {
+    const propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'data-name': PropTypes.Requireable<string>;
+        faIcon: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        options: PropTypes.Requireable<PropTypes.InferProps<{
+            selectionMode: PropTypes.Requireable<string>;
+            isSelected: PropTypes.Requireable<boolean>;
+            iconColor: PropTypes.Requireable<string>;
+        }>>;
+    };
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/atom/select-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select-icon/index.js"],"names":[],"mappings":";AAgDA,qDA0BC"}

package/es/atom/select-icon/index.js

@@ -0,0 +1,93 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import FaIcon from '../icon';
+import { COLORS } from '../../variables/colors';
+import style from './style.css';
+const ICON_COLOR = COLORS.cm_primary_blue;
+const BACKGROUND_COLOR = COLORS.white;
+const CHECK_ICON_NAME_MAP = {
+  single: 'circle-check',
+  multi: 'square-check'
+};
+
+const getButtonContent = (faIcon, options = {}) => {
+  const {
+    selectionMode = 'single',
+    isSelected = false,
+    iconColor = ICON_COLOR
+  } = options;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.contentWrapper
+  }, isSelected ?
+  /*#__PURE__*/
+
+  /* checkbox icon */
+  React.createElement("div", {
+    className: style.checkIcon
+  }, /*#__PURE__*/React.createElement(FaIcon, {
+    iconName: CHECK_ICON_NAME_MAP[selectionMode],
+    iconColor: iconColor,
+    backgroundColor: BACKGROUND_COLOR,
+    size: {
+      faSize: 16,
+      wrapperSize: 16
+    }
+  })) : null,
+  /*#__PURE__*/
+
+  /* selection tick (L18) / icon */
+  React.createElement("div", {
+    className: style.iconWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.icon
+  }, /*#__PURE__*/React.createElement(FaIcon, {
+    iconName: faIcon,
+    iconColor: isSelected ? iconColor : '',
+    size: {
+      faSize: 32,
+      wrapperSize: 32
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.iconText
+  }, faIcon)));
+};
+
+const SelectIcon = props => {
+  const {
+    faIcon,
+    'data-name': dataName,
+    'aria-label': ariaLabel,
+    onClick,
+    options = {}
+  } = props;
+  const {
+    isSelected = false
+  } = options;
+  const contentView = getButtonContent(faIcon, options);
+  const styleButton = classnames(style.default, isSelected && style.selected);
+  const handleOnClick = useCallback(() => onClick(), [onClick]);
+  const IconButton = useCallback(() => /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    "data-name": dataName,
+    "data-testid": `button-${dataName}`,
+    className: styleButton,
+    onClick: handleOnClick
+  }, contentView), [ariaLabel, contentView, dataName, handleOnClick, styleButton]);
+  return /*#__PURE__*/React.createElement(IconButton, null);
+};
+
+SelectIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': PropTypes.string,
+  'data-name': PropTypes.string,
+  faIcon: PropTypes.string,
+  onClick: PropTypes.func,
+  options: PropTypes.shape({
+    selectionMode: PropTypes.oneOf(['single', 'multi']),
+    isSelected: PropTypes.bool,
+    iconColor: PropTypes.string
+  })
+} : {};
+export default SelectIcon;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","FaIcon","COLORS","style","ICON_COLOR","cm_primary_blue","BACKGROUND_COLOR","white","CHECK_ICON_NAME_MAP","single","multi","getButtonContent","faIcon","options","selectionMode","isSelected","iconColor","contentWrapper","checkIcon","faSize","wrapperSize","iconWrapper","icon","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","default","selected","handleOnClick","IconButton","propTypes","string","func","shape","oneOf","bool"],"sources":["../../../src/atom/select-icon/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport FaIcon from '../icon';\n\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst ICON_COLOR = COLORS.cm_primary_blue;\nconst BACKGROUND_COLOR = COLORS.white;\nconst CHECK_ICON_NAME_MAP = {\n  single: 'circle-check',\n  multi: 'square-check'\n};\n\nconst getButtonContent = (faIcon, options = {}) => {\n  const {selectionMode = 'single', isSelected = false, iconColor = ICON_COLOR} = options;\n\n  return (\n    <div className={style.contentWrapper}>\n      {isSelected ? (\n        /* checkbox icon */\n        <div className={style.checkIcon}>\n          <FaIcon\n            iconName={CHECK_ICON_NAME_MAP[selectionMode]}\n            iconColor={iconColor}\n            backgroundColor={BACKGROUND_COLOR}\n            size={{faSize: 16, wrapperSize: 16}}\n          />\n        </div>\n      ) : null}\n      {\n        /* selection tick (L18) / icon */\n        <div className={style.iconWrapper}>\n          <div className={style.icon}>\n            <FaIcon\n              iconName={faIcon}\n              iconColor={isSelected ? iconColor : ''}\n              size={{faSize: 32, wrapperSize: 32}}\n            />\n          </div>\n          <div className={style.iconText}>{faIcon}</div>\n        </div>\n      }\n    </div>\n  );\n};\n\nconst SelectIcon = props => {\n  const {faIcon, 'data-name': dataName, 'aria-label': ariaLabel, onClick, options = {}} = props;\n\n  const {isSelected = false} = options;\n\n  const contentView = getButtonContent(faIcon, options);\n  const styleButton = classnames(style.default, isSelected && style.selected);\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const IconButton = useCallback(\n    () => (\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-name={dataName}\n        data-testid={`button-${dataName}`}\n        className={styleButton}\n        onClick={handleOnClick}\n      >\n        {contentView}\n      </button>\n    ),\n    [ariaLabel, contentView, dataName, handleOnClick, styleButton]\n  );\n\n  return <IconButton />;\n};\n\nSelectIcon.propTypes = {\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  faIcon: PropTypes.string,\n  onClick: PropTypes.func,\n  options: PropTypes.shape({\n    selectionMode: PropTypes.oneOf(['single', 'multi']),\n    isSelected: PropTypes.bool,\n    iconColor: PropTypes.string\n  })\n};\n\nexport default SelectIcon;\n"],"mappings":"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"}

package/es/atom/select-icon/style.css

@@ -0,0 +1,73 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_75 from colors;
+@value cm_grey_50 from colors;
+@value cm_primary_blue from colors;
+@value white from colors;
+
+.button {
+  font-family: Gilroy;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+  color: cm_grey_400;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  background-color: white;
+}
+
+.button:hover {
+  background-color: cm_grey_100;
+}
+
+.selected {
+  background-color: cm_grey_50;
+  border: 2px solid cm_primary_blue;
+}
+
+.selected:hover {
+  background-color: cm_grey_75;
+  color: cm_grey_500;
+}
+
+.default {
+  composes: button;
+  width: 144px;
+  height: 120px;
+  border-radius: 12px;
+  position: relative;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.checkIcon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.iconWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.icon {
+  margin-bottom: 8px;
+}
+
+.iconText {
+  font-size: 12px;
+}

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

@@ -51,6 +51,7 @@ declare namespace BaseModal {
             }>>;
         }> | null | undefined>>;
         const onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        const onScroll: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

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,yEA6GC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AASA,yEA+GC"}

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

@@ -19,7 +19,8 @@ const BaseModal = (props, context) => {
     children,
     isOpen,
     footer,
-    onClose
+    onClose,
+    onScroll
   } = props;
   const {
     skin
@@ -113,7 +114,8 @@ const BaseModal = (props, context) => {
     className: style.headerDescription
   }, description) : null), /*#__PURE__*/React.createElement("div", {
     className: style.headerCloseIcon,
-    onClick: handleOnClose
+    onClick: handleOnClose,
+    "data-testid": "close-icon"
   }, /*#__PURE__*/React.createElement(Icon, {
     iconName: "close",
     backgroundColor: "#F4F4F5",
@@ -122,7 +124,9 @@ const BaseModal = (props, context) => {
       wrapperSize: 28
     }
   }))), /*#__PURE__*/React.createElement("div", {
-    className: style.body
+    className: style.body,
+    onScroll: onScroll,
+    "data-testid": "modal-body"
   }, children), /*#__PURE__*/React.createElement(Footer, null)));
 };
 
@@ -155,7 +159,8 @@ BaseModal.propTypes = process.env.NODE_ENV !== "production" ? {
       color: PropTypes.string
     })
   })]),
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  onScroll: PropTypes.func
 } : {};
 export default BaseModal;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","convert","Provider","Icon","ButtonLink","style","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","skin","Footer","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","footerCTAWrapper","className","footerCancelButton","type","onClick","customStyle","backgroundColor","hoverBackgroundColor","hoverColor","footerConfirmButton","icon","position","faIcon","name","size","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","body","contextTypes","childContextTypes","propTypes","string","shape","node","bool","oneOfType","func","boolean"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n  const {title, description, headerIcon, children, isOpen, footer, onClose} = props;\n  const {skin} = context;\n\n  const Footer = useCallback(() => {\n    if (isEmpty(footer)) return null;\n    if (typeof footer === 'function') return footer();\n\n    const {cancelButton, confirmButton, text, isError} = footer;\n    const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton || {};\n    const {\n      label: confirmLabel,\n      onConfirm,\n      disabled: confirmDisabled,\n      iconName,\n      color\n    } = confirmButton || {};\n    const buttonConfirmColor = color || get('common.primary', skin);\n\n    return (\n      <div className={style.footer}>\n        <div className={style.footerCTAWrapper}>\n          {onCancel && cancelLabel ? (\n            <ButtonLink\n              {...{\n                className: style.footerCancelButton,\n                type: 'secondary',\n                onClick: onCancel,\n                label: cancelLabel,\n                disabled: cancelDisabled\n              }}\n            />\n          ) : null}\n          {onConfirm && confirmLabel ? (\n            <div>\n              <ButtonLink\n                {...{\n                  customStyle: {backgroundColor: buttonConfirmColor},\n                  hoverBackgroundColor: convert(\n                    `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n                  ),\n                  hoverColor: '#FFFFFF',\n                  className: style.footerConfirmButton,\n                  type: 'primary',\n                  onClick: onConfirm,\n                  label: confirmLabel,\n                  disabled: confirmDisabled,\n                  ...(iconName\n                    ? {\n                        icon: {\n                          position: 'left',\n                          faIcon: {\n                            name: iconName,\n                            color: '#FFFFFF',\n                            size: 16\n                          }\n                        }\n                      }\n                    : {})\n                }}\n              />\n            </div>\n          ) : null}\n        </div>\n        {text ? (\n          <div\n            className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n          >\n            {text}\n          </div>\n        ) : null}\n      </div>\n    );\n  }, [footer, skin]);\n\n  if (!isOpen || !title || !children) return null;\n\n  function handleOnClose(e) {\n    e?.stopPropagation();\n    onClose();\n  }\n\n  return (\n    <div className={style.modalWrapper}>\n      <div className={style.modal}>\n        <header className={style.header}>\n          {headerIcon?.name ? (\n            <div className={style.headerIcon}>\n              <Icon\n                iconName={headerIcon.name}\n                iconColor={headerIcon.color}\n                backgroundColor={headerIcon.backgroundColor}\n                size={{faSize: 20, wrapperSize: 48}}\n              />\n            </div>\n          ) : null}\n          <div className={style.headerContent}>\n            <div className={style.headerTitle}>{title}</div>\n            {description ? <div className={style.headerDescription}>{description}</div> : null}\n          </div>\n          <div className={style.headerCloseIcon} onClick={handleOnClose}>\n            <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n          </div>\n        </header>\n        <div className={style.body}>{children}</div>\n        <Footer />\n      </div>\n    </div>\n  );\n};\n\nBaseModal.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nBaseModal.propTypes = {\n  title: PropTypes.string,\n  headerIcon: PropTypes.shape({\n    name: PropTypes.string,\n    color: PropTypes.string,\n    backgroundColor: PropTypes.string\n  }),\n  description: PropTypes.string,\n  children: PropTypes.node,\n  isOpen: PropTypes.bool,\n  footer: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({\n      text: PropTypes.string,\n      isError: PropTypes.boolean,\n      cancelButton: PropTypes.shape({\n        label: PropTypes.string,\n        onCancel: PropTypes.func,\n        disabled: PropTypes.bool\n      }),\n      confirmButton: PropTypes.shape({\n        label: PropTypes.string,\n        onConfirm: PropTypes.func,\n        iconName: PropTypes.string,\n        disabled: PropTypes.bool,\n        color: PropTypes.string\n      })\n    })\n  ]),\n  onClose: PropTypes.func\n};\n\nexport default BaseModal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","convert","Provider","Icon","ButtonLink","style","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","onScroll","skin","Footer","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","footerCTAWrapper","className","footerCancelButton","type","onClick","customStyle","backgroundColor","hoverBackgroundColor","hoverColor","footerConfirmButton","icon","position","faIcon","name","size","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","body","contextTypes","childContextTypes","propTypes","string","shape","node","bool","oneOfType","func","boolean"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n  const {title, description, headerIcon, children, isOpen, footer, onClose, onScroll} = props;\n  const {skin} = context;\n\n  const Footer = useCallback(() => {\n    if (isEmpty(footer)) return null;\n    if (typeof footer === 'function') return footer();\n\n    const {cancelButton, confirmButton, text, isError} = footer;\n    const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton || {};\n    const {\n      label: confirmLabel,\n      onConfirm,\n      disabled: confirmDisabled,\n      iconName,\n      color\n    } = confirmButton || {};\n    const buttonConfirmColor = color || get('common.primary', skin);\n\n    return (\n      <div className={style.footer}>\n        <div className={style.footerCTAWrapper}>\n          {onCancel && cancelLabel ? (\n            <ButtonLink\n              {...{\n                className: style.footerCancelButton,\n                type: 'secondary',\n                onClick: onCancel,\n                label: cancelLabel,\n                disabled: cancelDisabled\n              }}\n            />\n          ) : null}\n          {onConfirm && confirmLabel ? (\n            <div>\n              <ButtonLink\n                {...{\n                  customStyle: {backgroundColor: buttonConfirmColor},\n                  hoverBackgroundColor: convert(\n                    `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n                  ),\n                  hoverColor: '#FFFFFF',\n                  className: style.footerConfirmButton,\n                  type: 'primary',\n                  onClick: onConfirm,\n                  label: confirmLabel,\n                  disabled: confirmDisabled,\n                  ...(iconName\n                    ? {\n                        icon: {\n                          position: 'left',\n                          faIcon: {\n                            name: iconName,\n                            color: '#FFFFFF',\n                            size: 16\n                          }\n                        }\n                      }\n                    : {})\n                }}\n              />\n            </div>\n          ) : null}\n        </div>\n        {text ? (\n          <div\n            className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n          >\n            {text}\n          </div>\n        ) : null}\n      </div>\n    );\n  }, [footer, skin]);\n\n  if (!isOpen || !title || !children) return null;\n\n  function handleOnClose(e) {\n    e?.stopPropagation();\n    onClose();\n  }\n\n  return (\n    <div className={style.modalWrapper}>\n      <div className={style.modal}>\n        <header className={style.header}>\n          {headerIcon?.name ? (\n            <div className={style.headerIcon}>\n              <Icon\n                iconName={headerIcon.name}\n                iconColor={headerIcon.color}\n                backgroundColor={headerIcon.backgroundColor}\n                size={{faSize: 20, wrapperSize: 48}}\n              />\n            </div>\n          ) : null}\n          <div className={style.headerContent}>\n            <div className={style.headerTitle}>{title}</div>\n            {description ? <div className={style.headerDescription}>{description}</div> : null}\n          </div>\n          <div className={style.headerCloseIcon} onClick={handleOnClose} data-testid=\"close-icon\">\n            <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n          </div>\n        </header>\n        <div className={style.body} onScroll={onScroll} data-testid=\"modal-body\">\n          {children}\n        </div>\n        <Footer />\n      </div>\n    </div>\n  );\n};\n\nBaseModal.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nBaseModal.propTypes = {\n  title: PropTypes.string,\n  headerIcon: PropTypes.shape({\n    name: PropTypes.string,\n    color: PropTypes.string,\n    backgroundColor: PropTypes.string\n  }),\n  description: PropTypes.string,\n  children: PropTypes.node,\n  isOpen: PropTypes.bool,\n  footer: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({\n      text: PropTypes.string,\n      isError: PropTypes.boolean,\n      cancelButton: PropTypes.shape({\n        label: PropTypes.string,\n        onCancel: PropTypes.func,\n        disabled: PropTypes.bool\n      }),\n      confirmButton: PropTypes.shape({\n        label: PropTypes.string,\n        onConfirm: PropTypes.func,\n        iconName: PropTypes.string,\n        disabled: PropTypes.bool,\n        color: PropTypes.string\n      })\n    })\n  ]),\n  onClose: PropTypes.func,\n  onScroll: PropTypes.func\n};\n\nexport default BaseModal;\n"],"mappings":"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"}

package/es/molecule/certification-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EAwDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EA0DC"}

package/es/molecule/certification-card/index.js

@@ -53,10 +53,12 @@ const CertificationCard = (props, context) => {
     },
     icon: progressIconProps
   }) : null, /*#__PURE__*/React.createElement("div", {
-    className: style.imageWrapper
+    className: style.imageSection
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.imageContainer
   }, /*#__PURE__*/React.createElement("img", {
     src: imgUrl
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: style.detailWrapper
   }, /*#__PURE__*/React.createElement("div", {
     className: style.titleWrapper

package/es/molecule/certification-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","style","CertificationCard","props","context","label","goal","progress","imgUrl","onClick","title","condition","nbDone","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","container","top","right","imageWrapper","detailWrapper","titleWrapper","moduleCount","customProgressBar","positive","contextTypes","childContextTypes","propTypes","string","shape","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {label, goal, progress, imgUrl, onClick} = props;\n  const {\n    title,\n    condition: {nbDone}\n  } = goal;\n  const {translate} = context;\n\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageWrapper}>\n        <img src={imgUrl} />\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={translate('certification')} size=\"S\" />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>\n            <span>{nbDone}</span>\n            {` ${translate('certification_module')}`}\n          </div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.positive}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default CertificationCard;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,MAAR,QAAqB,wBAArB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC5C,MAAM;IAACC,KAAD;IAAQC,IAAR;IAAcC,QAAd;IAAwBC,MAAxB;IAAgCC;EAAhC,IAA2CN,KAAjD;EACA,MAAM;IACJO,KADI;IAEJC,SAAS,EAAE;MAACC;IAAD;EAFP,IAGFN,IAHJ;EAIA,MAAM;IAACO;EAAD,IAAcT,OAApB;EAEA,MAAMU,YAAY,GAAGP,QAAQ,GAAG,GAAhC;EACA,MAAMQ,aAAa,GAAGD,YAAY,GAAGD,SAAS,CAAC,aAAD,CAAZ,GAA8BA,SAAS,CAAC,WAAD,CAAzE;EACA,MAAMG,eAAe,GAAGF,YAAY,GAAG,UAAH,GAAgB,SAApD;EACA,MAAMG,iBAAiB,GAAG;IACxBC,QAAQ,EAAE,MADc;IAExBC,QAAQ,EAAEL,YAAY,GAAG,OAAH,GAAa,cAFX;IAGxBM,SAAS,EAAEN,YAAY,GAAG,SAAH,GAAe,SAHd;IAIxBO,eAAe,EAAEP,YAAY,GAAG,SAAH,GAAe,SAJpB;IAKxBQ,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT,CALkB;IASxBC,WAAW,EAAE;MAACC,OAAO,EAAE;IAAV;EATW,CAA1B;EAWA,oBACE;IAAK,SAAS,EAAEzB,KAAK,CAAC0B,SAAtB;IAAiC,aAAY,sBAAqBtB,KAAM,EAAxE;IAA2E,OAAO,EAAEI;EAApF,GACGF,QAAQ,GAAG,CAAX,gBACC,oBAAC,GAAD;IACE,KAAK,EAAEQ,aADT;IAEE,IAAI,EAAEC,eAFR;IAGE,WAAW,EAAE;MAACE,QAAQ,EAAE,UAAX;MAAuBU,GAAG,EAAE,MAA5B;MAAoCC,KAAK,EAAE;IAA3C,CAHf;IAIE,IAAI,EAAEZ;EAJR,EADD,GAOG,IARN,eASE;IAAK,SAAS,EAAEhB,KAAK,CAAC6B;EAAtB,gBACE;IAAK,GAAG,EAAEtB;EAAV,EADF,CATF,eAYE;IAAK,SAAS,EAAEP,KAAK,CAAC8B;EAAtB,gBACE;IAAK,SAAS,EAAE9B,KAAK,CAAC+B;EAAtB,gBACE,oBAAC,GAAD;IAAK,KAAK,EAAEnB,SAAS,CAAC,eAAD,CAArB;IAAwC,IAAI,EAAC;EAA7C,EADF,eAEE;IAAK,SAAS,EAAEZ,KAAK,CAACS,KAAtB;IAA6B,aAAU;EAAvC,GACGA,KADH,CAFF,eAKE;IAAK,SAAS,EAAET,KAAK,CAACgC;EAAtB,gBACE,kCAAOrB,MAAP,CADF,EAEI,IAAGC,SAAS,CAAC,sBAAD,CAAyB,EAFzC,CALF,CADF,eAWE,oBAAC,WAAD;IACE,SAAS,EAAEZ,KAAK,CAACiC,iBADnB;IAEE,KAAK,EAAE;MAACb,eAAe,EAAExB,MAAM,CAACsC;IAAzB,CAFT;IAGE,WAAW,EAAE,KAHf;IAIE,KAAK,EAAE5B,QAJT;IAKE,GAAG,EAAE;EALP,EAXF,CAZF,CADF;AAkCD,CAxDD;;AA0DAL,iBAAiB,CAACkC,YAAlB,GAAiC;EAC/BvB,SAAS,EAAEf,QAAQ,CAACuC,iBAAT,CAA2BxB;AADP,CAAjC;AAIAX,iBAAiB,CAACoC,SAAlB,2CAA8B;EAC5BjC,KAAK,EAAET,SAAS,CAAC2C,MADW;EAE5BjC,IAAI,EAAEV,SAAS,CAAC4C,KAAV,CAAgB;IACpB9B,KAAK,EAAEd,SAAS,CAAC2C,MADG;IAEpB5B,SAAS,EAAEf,SAAS,CAAC4C,KAAV,CAAgB;MACzB5B,MAAM,EAAEhB,SAAS,CAAC6C;IADO,CAAhB;EAFS,CAAhB,CAFsB;EAQ5BlC,QAAQ,EAAEX,SAAS,CAAC6C,MARQ;EAS5BjC,MAAM,EAAEZ,SAAS,CAAC2C,MATU;EAU5B9B,OAAO,EAAEb,SAAS,CAAC8C;AAVS,CAA9B;AAaA,eAAexC,iBAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","style","CertificationCard","props","context","label","goal","progress","imgUrl","onClick","title","condition","nbDone","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","container","top","right","imageSection","imageContainer","detailWrapper","titleWrapper","moduleCount","customProgressBar","positive","contextTypes","childContextTypes","propTypes","string","shape","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {label, goal, progress, imgUrl, onClick} = props;\n  const {\n    title,\n    condition: {nbDone}\n  } = goal;\n  const {translate} = context;\n\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={translate('certification')} size=\"S\" />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>\n            <span>{nbDone}</span>\n            {` ${translate('certification_module')}`}\n          </div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.positive}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default CertificationCard;\n"],"mappings":"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"}

package/es/molecule/certification-card/style.css

@@ -22,7 +22,7 @@
   transition: all 0.5s ease-out;
 }
 
-.imageWrapper {
+.imageSection {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -30,22 +30,38 @@
   height: 160px;
   width: auto;
   transition: all 0.5s ease-out;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
   
-  img {
-    width: 100px;
+  .imageContainer {
     transition: all 0.5s ease-out;
   }
 }
 
+.imageContainer {
+  width: 202px;
+  height: 112px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
 .container:hover {
   box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14);
 
+  .imageContainer {
+    width: 244px;
+    height: 136px;
+  }
+
   .imageWrapper {
     background-color: cm_grey_75;
-
-    img {
-      width: 115px;
-    }
   }
 }
 .detailWrapper {

package/es/molecule/cm-popin/types.d.ts

@@ -136,6 +136,7 @@ declare const propTypes: {
                 items: PropTypes.Requireable<(PropTypes.InferProps<{
                     title: PropTypes.Validator<string>;
                     subtitle: PropTypes.Requireable<string>;
+                    provider: PropTypes.Requireable<string>;
                     selected: PropTypes.Requireable<boolean>;
                     selectedColor: PropTypes.Requireable<string>;
                     dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -188,6 +189,17 @@ declare const propTypes: {
                     'aria-label': PropTypes.Requireable<string>;
                     contentType: PropTypes.Requireable<string>;
                     id: PropTypes.Requireable<string>;
+                    leftIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                        iconName: PropTypes.Requireable<string>;
+                        iconColor: PropTypes.Requireable<string>;
+                        backgroundColor: PropTypes.Requireable<string>;
+                        borderRadius: PropTypes.Requireable<string>;
+                        preset: PropTypes.Requireable<string>;
+                        gradientBackground: PropTypes.Requireable<boolean>;
+                        size: PropTypes.Requireable<number>;
+                        wrapperSize: PropTypes.Requireable<number>;
+                    }>>;
+                    editAsIcon: PropTypes.Requireable<boolean>;
                 }> | null | undefined)[]>;
                 type: PropTypes.Requireable<string>;
                 itemType: PropTypes.Requireable<string>;

package/es/molecule/cm-popin/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/es/molecule/draggable-list/index.d.ts

@@ -62,6 +62,7 @@ declare namespace DraggableList {
         }> | PropTypes.InferProps<{
             title: PropTypes.Validator<string>;
             subtitle: PropTypes.Requireable<string>;
+            provider: PropTypes.Requireable<string>;
             selected: PropTypes.Requireable<boolean>;
             selectedColor: PropTypes.Requireable<string>;
             dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -114,6 +115,17 @@ declare namespace DraggableList {
             'aria-label': PropTypes.Requireable<string>;
             contentType: PropTypes.Requireable<string>;
             id: PropTypes.Requireable<string>;
+            leftIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                iconName: PropTypes.Requireable<string>;
+                iconColor: PropTypes.Requireable<string>;
+                backgroundColor: PropTypes.Requireable<string>;
+                borderRadius: PropTypes.Requireable<string>;
+                preset: PropTypes.Requireable<string>;
+                gradientBackground: PropTypes.Requireable<boolean>;
+                size: PropTypes.Requireable<number>;
+                wrapperSize: PropTypes.Requireable<number>;
+            }>>;
+            editAsIcon: PropTypes.Requireable<boolean>;
         }> | PropTypes.InferProps<{
             'aria-label': PropTypes.Requireable<string>;
             id: PropTypes.Requireable<string>;

package/es/molecule/icon-picker-modal/index.d.ts

@@ -0,0 +1,15 @@
+export default IconPickerModal;
+declare function IconPickerModal(props: any, context: any): JSX.Element | null;
+declare namespace IconPickerModal {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const isOpen: PropTypes.Requireable<boolean>;
+        const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        const onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        const onClose: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/icon-picker-modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAwIC"}