@coorpacademy/components 11.32.43 → 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/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/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"}

package/es/molecule/icon-picker-modal/index.js

@@ -0,0 +1,152 @@
+import _size from "lodash/fp/size";
+import _slice from "lodash/fp/slice";
+import _values from "lodash/fp/values";
+import _get from "lodash/fp/get";
+import _pipe from "lodash/fp/pipe";
+import _map from "lodash/fp/map";
+import _entries from "lodash/fp/entries";
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { fas } from '@fortawesome/pro-solid-svg-icons';
+import BaseModal from '../base-modal';
+import SelectIcon from '../../atom/select-icon';
+import Provider from '../../atom/provider';
+import SearchForm from '../search-form';
+import { COLORS } from '../../variables/colors';
+import style from './style.css';
+import useIconSearch from './use-icon-search';
+const ICONS_PER_LOAD = 48;
+
+const IconPickerModal = (props, context) => {
+  const {
+    isOpen,
+    onCancel,
+    onConfirm,
+    onClose
+  } = props;
+  const {
+    translate
+  } = context;
+  const [selectedIcon, setSelectedIcon] = useState(null);
+  const [displayedIcons, setDisplayedIcons] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const allIcons = useMemo(() => _pipe(_values, _map(_get('iconName')))(fas), []);
+  const {
+    searchValue,
+    searchResults,
+    handleSearch,
+    handleReset
+  } = useIconSearch(allIcons);
+  const handleCancel = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  const handleIconClick = useCallback(iconName => () => {
+    setSelectedIcon(prevSelectedIcon => prevSelectedIcon === iconName ? null : iconName);
+  }, []);
+  const loadMoreIcons = useCallback(() => {
+    const nextIndex = currentIndex + ICONS_PER_LOAD;
+
+    const newIcons = _slice(currentIndex, nextIndex, searchResults);
+
+    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);
+    setCurrentIndex(nextIndex);
+  }, [currentIndex, searchResults]);
+  useEffect(() => {
+    setDisplayedIcons(() => _slice(0, ICONS_PER_LOAD, searchResults));
+    setCurrentIndex(ICONS_PER_LOAD);
+  }, [searchResults]);
+  const handleScroll = useCallback(event => {
+    const {
+      scrollTop,
+      clientHeight,
+      scrollHeight
+    } = event.currentTarget;
+
+    if (scrollHeight - scrollTop <= clientHeight + 1) {
+      loadMoreIcons();
+    }
+  }, [loadMoreIcons]);
+  const icons = useMemo(() => _pipe(_entries, _map(([index, iconName]) => /*#__PURE__*/React.createElement(SelectIcon, {
+    key: `icon-${index}`,
+    size: "responsive",
+    "data-name": `icon-${index}`,
+    "aria-label": iconName,
+    faIcon: iconName,
+    onClick: handleIconClick(iconName),
+    options: {
+      isSelected: selectedIcon === iconName
+    }
+  })))(displayedIcons), [displayedIcons, selectedIcon, handleIconClick]);
+  const footer = useMemo(() => {
+    return {
+      cancelButton: {
+        onCancel: handleCancel,
+        label: translate('cancel')
+      },
+      confirmButton: {
+        onConfirm: () => {
+          onConfirm(selectedIcon);
+          setSelectedIcon(null);
+          onClose();
+        },
+        label: translate('confirm'),
+        iconName: 'plus',
+        disabled: selectedIcon === null,
+        color: COLORS.cm_primary_blue
+      }
+    };
+  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);
+  if (!isOpen) return null;
+  return /*#__PURE__*/React.createElement(BaseModal, {
+    title: translate('icon_picker_title'),
+    description: translate('icon_picker_description'),
+    isOpen: isOpen,
+    onClose: handleClose,
+    onScroll: handleScroll,
+    footer: footer,
+    headerIcon: {
+      name: 'arrows-rotate',
+      backgroundColor: '#D6E6FF'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.iconPicker
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.searchWrapper
+  }, /*#__PURE__*/React.createElement(SearchForm, {
+    search: {
+      placeholder: translate('search_place_holder'),
+      value: searchValue,
+      onChange: handleSearch
+    },
+    onReset: handleReset,
+    dataTestId: "search-input"
+  })), searchValue && _size(searchResults) === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: style.emptySearchResultContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.emptySearchResultTitle
+  }, translate('empty_search_result_title', {
+    searchValue
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.emptySearchResultDescription
+  }, translate('empty_search_result_description')), /*#__PURE__*/React.createElement("div", {
+    className: style.emptySearchResultClearSearch,
+    onClick: handleReset
+  }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/React.createElement("div", {
+    className: style.iconsListWrapper
+  }, icons))));
+};
+
+IconPickerModal.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+IconPickerModal.propTypes = process.env.NODE_ENV !== "production" ? {
+  isOpen: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  onClose: PropTypes.func
+} : {};
+export default IconPickerModal;
+//# sourceMappingURL=index.js.map

package/es/molecule/icon-picker-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useEffect","PropTypes","fas","BaseModal","SelectIcon","Provider","SearchForm","COLORS","style","useIconSearch","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","prevIcons","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","index","isSelected","footer","cancelButton","label","confirmButton","disabled","color","cm_primary_blue","name","backgroundColor","iconPicker","searchWrapper","placeholder","value","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')))(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={`icon-${index}`}\n            size=\"responsive\"\n            data-name={`icon-${index}`}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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"}

package/es/molecule/icon-picker-modal/style.css

@@ -0,0 +1,61 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_primary_blue from colors;
+@value cm_grey_500 from colors;
+
+.iconPicker {
+  height: 485px;
+  width: calc(71vw - 68px);
+  max-width: 612px;
+}
+
+.searchWrapper {
+  border-radius: 12px;
+  width: 300px;
+  background-color: cm_grey_100;
+  margin-bottom: 20px;
+}
+
+.iconsListWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  margin: auto;
+  gap: 12px;
+  overflow: visible;
+}
+
+.emptySearchResultContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.emptySearchResultTitle {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+
+.emptySearchResultDescription {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 16px;
+}
+
+.emptySearchResultClearSearch {
+  color: #0061FF;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+@media mobile {
+  .iconPicker {
+    width: 100%;
+  }
+}

package/es/molecule/icon-picker-modal/use-icon-search.d.ts

@@ -0,0 +1,9 @@
+export function filterIcons(query: any, allIcons: any): any;
+export default useIconSearch;
+declare function useIconSearch(allIcons: any): {
+    searchValue: string;
+    searchResults: any;
+    handleSearch: (value: any) => void;
+    handleReset: () => void;
+};
+//# sourceMappingURL=use-icon-search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-icon-search.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/use-icon-search.js"],"names":[],"mappings":"AAGO,4DAEN;;AACD;;;;;EAiCC"}

package/es/molecule/icon-picker-modal/use-icon-search.js

@@ -0,0 +1,36 @@
+import _toLower from "lodash/fp/toLower";
+import _includes from "lodash/fp/includes";
+import _pipe from "lodash/fp/pipe";
+import _filter from "lodash/fp/filter";
+import _debounce from "lodash/fp/debounce";
+import { useState, useCallback, useMemo } from 'react';
+export const filterIcons = (query, allIcons) => {
+  return query ? _filter(_pipe(_toLower, _includes(_toLower(query))), allIcons) : allIcons;
+};
+
+const useIconSearch = allIcons => {
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResults, setSearchResults] = useState(allIcons);
+  const updateSearchResults = useCallback(query => {
+    const results = filterIcons(query, allIcons);
+    setSearchResults(results);
+  }, [allIcons]);
+  const debouncedSearch = useMemo(() => _debounce(300, updateSearchResults), [updateSearchResults]);
+  const handleSearch = useCallback(value => {
+    setSearchValue(value);
+    debouncedSearch(value);
+  }, [debouncedSearch]);
+  const handleReset = useCallback(() => {
+    setSearchValue('');
+    updateSearchResults('');
+  }, [updateSearchResults]);
+  return {
+    searchValue,
+    searchResults,
+    handleSearch,
+    handleReset
+  };
+};
+
+export default useIconSearch;
+//# sourceMappingURL=use-icon-search.js.map

package/es/molecule/icon-picker-modal/use-icon-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-icon-search.js","names":["useState","useCallback","useMemo","filterIcons","query","allIcons","useIconSearch","searchValue","setSearchValue","searchResults","setSearchResults","updateSearchResults","results","debouncedSearch","handleSearch","value","handleReset"],"sources":["../../../src/molecule/icon-picker-modal/use-icon-search.js"],"sourcesContent":["import {useState, useCallback, useMemo} from 'react';\nimport {debounce, filter, pipe, includes, toLower} from 'lodash/fp';\n\nexport const filterIcons = (query, allIcons) => {\n  return query ? filter(pipe(toLower, includes(toLower(query))), allIcons) : allIcons;\n};\nconst useIconSearch = allIcons => {\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(allIcons);\n\n  const updateSearchResults = useCallback(\n    query => {\n      const results = filterIcons(query, allIcons);\n      setSearchResults(results);\n    },\n    [allIcons]\n  );\n\n  const debouncedSearch = useMemo(() => debounce(300, updateSearchResults), [updateSearchResults]);\n\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      debouncedSearch(value);\n    },\n    [debouncedSearch]\n  );\n\n  const handleReset = useCallback(() => {\n    setSearchValue('');\n    updateSearchResults('');\n  }, [updateSearchResults]);\n\n  return {\n    searchValue,\n    searchResults,\n    handleSearch,\n    handleReset\n  };\n};\n\nexport default useIconSearch;\n"],"mappings":";;;;;AAAA,SAAQA,QAAR,EAAkBC,WAAlB,EAA+BC,OAA/B,QAA6C,OAA7C;AAGA,OAAO,MAAMC,WAAW,GAAG,CAACC,KAAD,EAAQC,QAAR,KAAqB;EAC9C,OAAOD,KAAK,GAAG,QAAO,gBAAc,UAAS,SAAQA,KAAR,CAAT,CAAd,CAAP,EAAgDC,QAAhD,CAAH,GAA+DA,QAA3E;AACD,CAFM;;AAGP,MAAMC,aAAa,GAAGD,QAAQ,IAAI;EAChC,MAAM,CAACE,WAAD,EAAcC,cAAd,IAAgCR,QAAQ,CAAC,EAAD,CAA9C;EACA,MAAM,CAACS,aAAD,EAAgBC,gBAAhB,IAAoCV,QAAQ,CAACK,QAAD,CAAlD;EAEA,MAAMM,mBAAmB,GAAGV,WAAW,CACrCG,KAAK,IAAI;IACP,MAAMQ,OAAO,GAAGT,WAAW,CAACC,KAAD,EAAQC,QAAR,CAA3B;IACAK,gBAAgB,CAACE,OAAD,CAAhB;EACD,CAJoC,EAKrC,CAACP,QAAD,CALqC,CAAvC;EAQA,MAAMQ,eAAe,GAAGX,OAAO,CAAC,MAAM,UAAS,GAAT,EAAcS,mBAAd,CAAP,EAA2C,CAACA,mBAAD,CAA3C,CAA/B;EAEA,MAAMG,YAAY,GAAGb,WAAW,CAC9Bc,KAAK,IAAI;IACPP,cAAc,CAACO,KAAD,CAAd;IACAF,eAAe,CAACE,KAAD,CAAf;EACD,CAJ6B,EAK9B,CAACF,eAAD,CAL8B,CAAhC;EAQA,MAAMG,WAAW,GAAGf,WAAW,CAAC,MAAM;IACpCO,cAAc,CAAC,EAAD,CAAd;IACAG,mBAAmB,CAAC,EAAD,CAAnB;EACD,CAH8B,EAG5B,CAACA,mBAAD,CAH4B,CAA/B;EAKA,OAAO;IACLJ,WADK;IAELE,aAFK;IAGLK,YAHK;IAILE;EAJK,CAAP;AAMD,CAjCD;;AAmCA,eAAeV,aAAf"}

package/es/organism/brand-learning-priorities/index.d.ts

@@ -62,6 +62,7 @@ declare namespace BrandLearningPriorities {
             }> | 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 BrandLearningPriorities {
                 '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>;