@coorpacademy/components 11.38.3-alpha.6 → 11.38.3-alpha.7

package/es/atom/checkbox-with-title/style.css

@@ -35,7 +35,6 @@
   justify-content: center;
   align-items: center;
   border-radius: 4px;
-  cursor: pointer;
 }
 
 .container:hover .label {

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

@@ -28,7 +28,6 @@ declare namespace Search {
         const value: PropTypes.Requireable<string>;
         const placeholder: PropTypes.Validator<string>;
         const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         const onClear: PropTypes.Requireable<(...args: any[]) => any>;
         const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         const onBlur: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-search/index.js"],"names":[],"mappings":";AAYA,iDA2DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-search/index.js"],"names":[],"mappings":";AAYA,iDAmEC"}

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

@@ -11,35 +11,46 @@ const Search = props => {
     value,
     placeholder,
     onChange = _noop,
-    onSearch = _noop,
     onClear = _noop,
     onFocus,
     onBlur,
     theme = 'default',
     dataTestId
   } = props;
-  const handleChange = useMemo(() => e => {
-    const newValue = e.target.value;
-    onChange(newValue);
-    onSearch(newValue);
-  }, [onChange, onSearch]);
-  const cmStyle = classnames(style.coorpmanager);
-  const isDefaultTheme = theme === 'default';
+  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
+  const isCoorpManager = theme === 'coorpmanager';
+  const isMooc = theme === 'mooc';
+  const isDefault = theme === 'default';
+  const wrapperClass = classnames({
+    [style.wrapperSearch]: isDefault,
+    [style.coorpmanager]: isCoorpManager,
+    [style.wrapperMooc]: isMooc
+  });
+  const wrapperParentClass = classnames({
+    [style.wrapperMoocParent]: isMooc
+  });
+  const searchClass = classnames({
+    [style.search]: true,
+    [style.moocSearch]: isMooc
+  });
+  const SearchIconComponent = isCoorpManager ? CMSearchIcon : SearchIcon;
+  const showTitle = isCoorpManager;
+  const showClearIcon = value && isCoorpManager;
   return /*#__PURE__*/React.createElement("div", {
-    className: isDefaultTheme ? style.wrapperSearch : cmStyle
+    className: wrapperParentClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: wrapperClass
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "search",
     title: placeholder
-  }, !isDefaultTheme ? /*#__PURE__*/React.createElement(CMSearchIcon, {
+  }, /*#__PURE__*/React.createElement(SearchIconComponent, {
     className: style.searchIcon
-  }) : /*#__PURE__*/React.createElement(SearchIcon, {
-    className: style.searchIcon
-  }), !isDefaultTheme ? /*#__PURE__*/React.createElement("span", {
+  }), showTitle ? /*#__PURE__*/React.createElement("span", {
     className: classnames(style.title, _isEmpty(value) && style.noValue)
   }, placeholder) : null), /*#__PURE__*/React.createElement("input", {
     "data-name": "search-input",
     "data-testid": dataTestId,
-    className: style.search,
+    className: searchClass,
     "aria-label": placeholder,
     type: "text",
     name: "search",
@@ -51,10 +62,10 @@ const Search = props => {
     onFocus: onFocus,
     onChange: _noop,
     onBlur: onBlur
-  }), value && !isDefaultTheme ? /*#__PURE__*/React.createElement(CloseIcon, {
+  }), showClearIcon ? /*#__PURE__*/React.createElement(CloseIcon, {
     onClick: onClear,
     className: style.clearIcon
-  }) : null);
+  }) : null));
 };
 Search.contextTypes = {
   skin: Provider.childContextTypes.skin
@@ -63,11 +74,10 @@ Search.propTypes = process.env.NODE_ENV !== "production" ? {
   value: PropTypes.string,
   placeholder: PropTypes.string.isRequired,
   onChange: PropTypes.func,
-  onSearch: PropTypes.func,
   onClear: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  theme: PropTypes.oneOf(['default', 'coorpmanager']),
+  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),
   dataTestId: PropTypes.string
 } : {};
 export default Search;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","Search","props","value","placeholder","onChange","_noop","onSearch","onClear","onFocus","onBlur","theme","dataTestId","handleChange","e","newValue","target","cmStyle","coorpmanager","isDefaultTheme","createElement","className","wrapperSearch","htmlFor","title","searchIcon","_isEmpty","noValue","search","type","name","id","onInput","onClick","clearIcon","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademySearchThin as CMSearchIcon,\n  NovaCompositionCoorpacademySearch as SearchIcon,\n  NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst Search = props => {\n  const {\n    value,\n    placeholder,\n    onChange = noop,\n    onSearch = noop,\n    onClear = noop,\n    onFocus,\n    onBlur,\n    theme = 'default',\n    dataTestId\n  } = props;\n\n  const handleChange = useMemo(\n    () => e => {\n      const newValue = e.target.value;\n      onChange(newValue);\n      onSearch(newValue);\n    },\n    [onChange, onSearch]\n  );\n  const cmStyle = classnames(style.coorpmanager);\n  const isDefaultTheme = theme === 'default';\n\n  return (\n    <div className={isDefaultTheme ? style.wrapperSearch : cmStyle}>\n      <label htmlFor=\"search\" title={placeholder}>\n        {!isDefaultTheme ? (\n          <CMSearchIcon className={style.searchIcon} />\n        ) : (\n          <SearchIcon className={style.searchIcon} />\n        )}\n        {!isDefaultTheme ? (\n          <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n            {placeholder}\n          </span>\n        ) : null}\n      </label>\n      <input\n        data-name=\"search-input\"\n        data-testid={dataTestId}\n        className={style.search}\n        aria-label={placeholder}\n        type=\"text\"\n        name=\"search\"\n        id=\"search\"\n        placeholder={placeholder}\n        title={placeholder}\n        value={value}\n        onInput={handleChange}\n        onFocus={onFocus}\n        onChange={noop}\n        onBlur={onBlur}\n      />\n      {value && !isDefaultTheme ? (\n        <CloseIcon onClick={onClear} className={style.clearIcon} />\n      ) : null}\n    </div>\n  );\n};\n\nSearch.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  placeholder: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onSearch: PropTypes.func,\n  onClear: PropTypes.func,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  theme: PropTypes.oneOf(['default', 'coorpmanager']),\n  dataTestId: PropTypes.string\n};\n\nexport default Search;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","Search","props","value","placeholder","onChange","_noop","onClear","onFocus","onBlur","theme","dataTestId","handleChange","e","target","isCoorpManager","isMooc","isDefault","wrapperClass","wrapperSearch","coorpmanager","wrapperMooc","wrapperParentClass","wrapperMoocParent","searchClass","search","moocSearch","SearchIconComponent","showTitle","showClearIcon","createElement","className","htmlFor","title","searchIcon","_isEmpty","noValue","type","name","id","onInput","onClick","clearIcon","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademySearchThin as CMSearchIcon,\n  NovaCompositionCoorpacademySearch as SearchIcon,\n  NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst Search = props => {\n  const {\n    value,\n    placeholder,\n    onChange = noop,\n    onClear = noop,\n    onFocus,\n    onBlur,\n    theme = 'default',\n    dataTestId\n  } = props;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n\n  const isCoorpManager = theme === 'coorpmanager';\n  const isMooc = theme === 'mooc';\n  const isDefault = theme === 'default';\n\n  const wrapperClass = classnames({\n    [style.wrapperSearch]: isDefault,\n    [style.coorpmanager]: isCoorpManager,\n    [style.wrapperMooc]: isMooc\n  });\n\n  const wrapperParentClass = classnames({\n    [style.wrapperMoocParent]: isMooc\n  });\n\n  const searchClass = classnames({\n    [style.search]: true,\n    [style.moocSearch]: isMooc\n  });\n\n  const SearchIconComponent = isCoorpManager ? CMSearchIcon : SearchIcon;\n  const showTitle = isCoorpManager;\n  const showClearIcon = value && isCoorpManager;\n\n  return (\n    <div className={wrapperParentClass}>\n      <div className={wrapperClass}>\n        <label htmlFor=\"search\" title={placeholder}>\n          <SearchIconComponent className={style.searchIcon} />\n          {showTitle ? (\n            <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n              {placeholder}\n            </span>\n          ) : null}\n        </label>\n        <input\n          data-name=\"search-input\"\n          data-testid={dataTestId}\n          className={searchClass}\n          aria-label={placeholder}\n          type=\"text\"\n          name=\"search\"\n          id=\"search\"\n          placeholder={placeholder}\n          title={placeholder}\n          value={value}\n          onInput={handleChange}\n          onFocus={onFocus}\n          onChange={noop}\n          onBlur={onBlur}\n        />\n        {showClearIcon ? <CloseIcon onClick={onClear} className={style.clearIcon} /> : null}\n      </div>\n    </div>\n  );\n};\n\nSearch.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  placeholder: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onClear: PropTypes.func,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n  dataTestId: PropTypes.string\n};\n\nexport default Search;\n"],"mappings":"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","ignoreList":[]}

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

@@ -8,11 +8,13 @@
 @value white from colors;
 @value dark from colors;
 @value black from colors;
+@value cm_grey_75 from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_150 from colors;
 @value cm_grey_400 from colors;
 @value cm_grey_500 from colors;
 @value cm_grey_700 from colors;
+@value brand from colors;
 
 .wrapperSearch {
   display: flex;
@@ -66,6 +68,7 @@
   color: medium;
 }
 
+/* Theme: coorpmanager */
 .coorpmanager {
   position: relative;
 }
@@ -177,6 +180,62 @@
   line-height: 16px;
 }
 
+/* Theme: mooc */
+.wrapperMooc {
+  display: flex;
+  flex-flow: nowrap;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 12px;
+  transition: box-shadow 0.3s ease-in-out;
+  background: cm_grey_100;
+  padding: 2px;
+}
+
+.wrapperMoocParent {
+  width: 100%;
+  border-radius: 12px;
+  transition: box-shadow 0.3s ease-in-out;
+  background: transparent;
+}
+
+.moocSearch {
+  background-color: cm_grey_100;
+  border-radius: 12px;
+  height: 44px;
+  margin: 0;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: 500;
+  color: cm_grey_700;
+  padding: 0 0 0 45px;
+  padding-right: 48px;
+  outline: none;
+}
+
+.moocSearch:focus-within {
+  background-color: cm_grey_75;
+}
+
+.wrapperMoocParent:focus-within .wrapperMooc {
+  background: transparent;
+  box-shadow: 0 0 0 2px rgba(255,255,255,0), 0 0 0 2px brand;
+}
+
+.wrapperMooc:hover {
+  box-shadow: 0 0 0 2px brand;
+}
+
+.wrapperMooc .clearIcon {
+  position: relative;
+  right: 26px;
+  color: cm_grey_400;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus, 
@@ -194,6 +253,10 @@ input:-webkit-autofill:active{
     font-size: 12px;
     color: medium;
   }
+
+  .wrapperMoocParent {
+    min-width: 100%;
+  }
 }
 
 @media mobile {

package/es/atom/tag/style.css

@@ -19,30 +19,26 @@
   font-weight: 600;
   text-align: center;
   line-height: normal;
-  min-width: 6px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1px 6px;
-
+  display: inline-block;
+  min-width: max-content;
 }
 
 .small {
   composes: tag;
   font-size: 10px;
-  line-height: 12px;
+  padding: 2px 5px;
 }
 
 .medium {
   composes: tag;
   font-size: 12px;
-  line-height: 16px;
+  padding: 4px 8px;
 }
 
 .large {
   composes: tag;
   font-size: 14px;
-  line-height: 20px;
+  padding: 8px 16px;
 }
 
 .defaultStyle {

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

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

@@ -137,8 +137,7 @@ const BaseModal = (props, context) => {
     className: style.modalWrapper,
     "data-testid": "modal"
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.modal,
-    style: customStyle
+    className: style.modal
   }, /*#__PURE__*/React.createElement("header", {
     className: style.header
   }, headerIcon?.name ? /*#__PURE__*/React.createElement("div", {
@@ -172,7 +171,8 @@ const BaseModal = (props, context) => {
     ref: bodyRef,
     className: isScrollbarVisible ? style.body : style.bodyWithoutScrollbar,
     onScroll: onScroll,
-    "data-testid": "modal-body"
+    "data-testid": "modal-body",
+    style: customStyle
   }, children), /*#__PURE__*/React.createElement(Footer, null)));
 };
 BaseModal.contextTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","PropTypes","convert","Provider","Icon","ButtonLink","COLORS","style","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","customStyle","skin","bodyRef","isScrollbarVisible","setIsScrollbarVisible","checkScrollbar","bodyElement","current","scrollHeight","clientHeight","debouncedCheckScrollbar","_debounce","mutationObserver","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnect","cancel","Footer","_isEmpty","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","_get","createElement","className","footerCTAWrapper","button","type","onClick","_extends","backgroundColor","paddingLeft","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","iconColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","ref","body","bodyWithoutScrollbar","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","node","bool","oneOfType","func","boolean","objectOf","number"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get, debounce} 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 {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n  const {\n    title,\n    description,\n    headerIcon,\n    children,\n    isOpen,\n    footer,\n    onClose,\n    onScroll,\n    detectScrollbar = false,\n    customStyle\n  } = props;\n  const {skin} = context;\n  const bodyRef = useRef(null);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(!detectScrollbar);\n\n  const checkScrollbar = () => {\n    const bodyElement = bodyRef.current;\n    if (bodyElement) {\n      setIsScrollbarVisible(bodyElement.scrollHeight > bodyElement.clientHeight);\n    }\n  };\n\n  useEffect(() => {\n    if (!detectScrollbar) return;\n    const bodyElement = bodyRef.current;\n\n    if (!bodyElement) return;\n\n    const debouncedCheckScrollbar = debounce(100, () => {\n      checkScrollbar();\n    });\n\n    // Observer of the body content\n    const mutationObserver = new MutationObserver(() => {\n      debouncedCheckScrollbar();\n    });\n\n    mutationObserver.observe(bodyElement, {childList: true, subtree: true});\n\n    // Observer of the body size\n    const resizeObserver = new ResizeObserver(() => {\n      debouncedCheckScrollbar();\n    });\n\n    if (bodyRef.current) {\n      resizeObserver.observe(bodyRef.current);\n    }\n\n    checkScrollbar();\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n      debouncedCheckScrollbar.cancel();\n    };\n  }, [children, detectScrollbar]);\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.button,\n                type: 'secondary',\n                onClick: onCancel,\n                label: cancelLabel,\n                disabled: cancelDisabled,\n                'data-testid': `button-link-${cancelLabel}`\n              }}\n            />\n          ) : null}\n          {onConfirm && confirmLabel ? (\n            <div>\n              <ButtonLink\n                {...{\n                  customStyle: {backgroundColor: buttonConfirmColor, paddingLeft: '16px'},\n                  hoverBackgroundColor: convert(\n                    `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n                  ),\n                  hoverColor: COLORS.white,\n                  className: style.button,\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: COLORS.white,\n                            size: 14,\n                            customStyle: {padding: 0}\n                          }\n                        }\n                      }\n                    : {}),\n                  'data-testid': `button-link-${confirmLabel}`\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} data-testid=\"modal\">\n      <div className={style.modal} style={customStyle}>\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\n          ref={bodyRef}\n          className={isScrollbarVisible ? style.body : style.bodyWithoutScrollbar}\n          onScroll={onScroll}\n          data-testid=\"modal-body\"\n        >\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  detectScrollbar: PropTypes.bool,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default BaseModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","PropTypes","convert","Provider","Icon","ButtonLink","COLORS","style","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","customStyle","skin","bodyRef","isScrollbarVisible","setIsScrollbarVisible","checkScrollbar","bodyElement","current","scrollHeight","clientHeight","debouncedCheckScrollbar","_debounce","mutationObserver","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnect","cancel","Footer","_isEmpty","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","_get","createElement","className","footerCTAWrapper","button","type","onClick","_extends","backgroundColor","paddingLeft","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","iconColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","ref","body","bodyWithoutScrollbar","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","node","bool","oneOfType","func","boolean","objectOf","number"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get, debounce} 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 {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n  const {\n    title,\n    description,\n    headerIcon,\n    children,\n    isOpen,\n    footer,\n    onClose,\n    onScroll,\n    detectScrollbar = false,\n    customStyle\n  } = props;\n  const {skin} = context;\n  const bodyRef = useRef(null);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(!detectScrollbar);\n\n  const checkScrollbar = () => {\n    const bodyElement = bodyRef.current;\n    if (bodyElement) {\n      setIsScrollbarVisible(bodyElement.scrollHeight > bodyElement.clientHeight);\n    }\n  };\n\n  useEffect(() => {\n    if (!detectScrollbar) return;\n    const bodyElement = bodyRef.current;\n\n    if (!bodyElement) return;\n\n    const debouncedCheckScrollbar = debounce(100, () => {\n      checkScrollbar();\n    });\n\n    // Observer of the body content\n    const mutationObserver = new MutationObserver(() => {\n      debouncedCheckScrollbar();\n    });\n\n    mutationObserver.observe(bodyElement, {childList: true, subtree: true});\n\n    // Observer of the body size\n    const resizeObserver = new ResizeObserver(() => {\n      debouncedCheckScrollbar();\n    });\n\n    if (bodyRef.current) {\n      resizeObserver.observe(bodyRef.current);\n    }\n\n    checkScrollbar();\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n      debouncedCheckScrollbar.cancel();\n    };\n  }, [children, detectScrollbar]);\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.button,\n                type: 'secondary',\n                onClick: onCancel,\n                label: cancelLabel,\n                disabled: cancelDisabled,\n                'data-testid': `button-link-${cancelLabel}`\n              }}\n            />\n          ) : null}\n          {onConfirm && confirmLabel ? (\n            <div>\n              <ButtonLink\n                {...{\n                  customStyle: {backgroundColor: buttonConfirmColor, paddingLeft: '16px'},\n                  hoverBackgroundColor: convert(\n                    `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n                  ),\n                  hoverColor: COLORS.white,\n                  className: style.button,\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: COLORS.white,\n                            size: 14,\n                            customStyle: {padding: 0}\n                          }\n                        }\n                      }\n                    : {}),\n                  'data-testid': `button-link-${confirmLabel}`\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} data-testid=\"modal\">\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\n          ref={bodyRef}\n          className={isScrollbarVisible ? style.body : style.bodyWithoutScrollbar}\n          onScroll={onScroll}\n          data-testid=\"modal-body\"\n          style={customStyle}\n        >\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  detectScrollbar: PropTypes.bool,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default BaseModal;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/base-modal/style.css

@@ -24,6 +24,10 @@
 }
 
 .modal {
+  max-width: 71vw;
+  max-height: 86vh;
+  min-width: 450px;
+  min-height: 165px;
   overflow: hidden;
   border-radius: 16px;
   background-color: white;
@@ -73,7 +77,6 @@
   min-height: 100px;
   border-top: 1px solid cm_grey_150;
   border-bottom: 1px solid cm_grey_150;
-  flex: 1;
 }
 
 .bodyWithoutScrollbar {

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

@@ -645,7 +645,6 @@ declare const propTypes: {
                 value: PropTypes.Requireable<string>;
                 placeholder: PropTypes.Validator<string>;
                 onChange: PropTypes.Requireable<(...args: any[]) => any>;
-                onSearch: PropTypes.Requireable<(...args: any[]) => any>;
                 onClear: PropTypes.Requireable<(...args: any[]) => any>;
                 onFocus: PropTypes.Requireable<(...args: any[]) => any>;
                 onBlur: PropTypes.Requireable<(...args: any[]) => any>;

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":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"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"}

package/es/molecule/multi-filter-panel/index.d.ts

@@ -36,7 +36,6 @@ declare const MultiFilterPanel: {
                     value: import("prop-types").Requireable<string>;
                     placeholder: import("prop-types").Validator<string>;
                     onChange: import("prop-types").Requireable<(...args: any[]) => any>;
-                    onSearch: import("prop-types").Requireable<(...args: any[]) => any>;
                     onClear: import("prop-types").Requireable<(...args: any[]) => any>;
                     onFocus: import("prop-types").Requireable<(...args: any[]) => any>;
                     onBlur: import("prop-types").Requireable<(...args: any[]) => any>;

package/es/molecule/multi-filter-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAEjE,OAAkB,EAAC,qBAAqB,EAAqB,MAAM,cAAc,CAAC;AAqBlF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAEjE,OAAkB,EAAC,qBAAqB,EAAqB,MAAM,cAAc,CAAC;AAqBlF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}

package/es/molecule/multi-filter-panel/prop-types.d.ts

@@ -34,7 +34,6 @@ declare const propTypes: {
                 value: PropTypes.Requireable<string>;
                 placeholder: PropTypes.Validator<string>;
                 onChange: PropTypes.Requireable<(...args: any[]) => any>;
-                onSearch: PropTypes.Requireable<(...args: any[]) => any>;
                 onClear: PropTypes.Requireable<(...args: any[]) => any>;
                 onFocus: PropTypes.Requireable<(...args: any[]) => any>;
                 onBlur: PropTypes.Requireable<(...args: any[]) => any>;

package/es/molecule/multi-filter-panel/prop-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAC3F,OAAyC,EACvC,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAE/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAed,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG,oBAAoB,CAAC;AAEzE,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAC3F,OAAyC,EACvC,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAE/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAed,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG,oBAAoB,CAAC;AAEzE,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/es/molecule/search-form/index.d.ts

@@ -12,7 +12,6 @@ declare namespace SearchForm {
             value: PropTypes.Requireable<string>;
             placeholder: PropTypes.Validator<string>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
-            onSearch: PropTypes.Requireable<(...args: any[]) => any>;
             onClear: PropTypes.Requireable<(...args: any[]) => any>;
             onFocus: PropTypes.Requireable<(...args: any[]) => any>;
             onBlur: PropTypes.Requireable<(...args: any[]) => any>;
@@ -21,6 +20,7 @@ declare namespace SearchForm {
         }>>;
         'search-reset-aria-label': PropTypes.Requireable<string>;
         dataTestId: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
     };
 }
 import PropTypes from "prop-types";

package/es/molecule/search-form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/search-form/index.js"],"names":[],"mappings":";AAOA,mEA0CC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/search-form/index.js"],"names":[],"mappings":";AAOA,mEAqDC"}

package/es/molecule/search-form/index.js

@@ -1,8 +1,8 @@
-import _get from "lodash/fp/get";
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { NovaCompositionNavigationMore as ClearIcon } from '@coorpacademy/nova-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classnames from 'classnames';
 import Search from '../../atom/input-search';
 import style from './style.css';
 const SearchForm = (props, context) => {
@@ -15,16 +15,15 @@ const SearchForm = (props, context) => {
     onSearchFocus,
     onSearchBlur,
     'search-reset-aria-label': searchResetAriaLabel,
-    dataTestId
+    dataTestId,
+    theme
   } = props;
   const handleSubmit = useMemo(() => evt => {
     evt.preventDefault();
     return onSubmit && onSubmit(evt);
   }, [onSubmit]);
-  const {
-    skin
-  } = context;
-  const dark = _get('common.dark', skin);
+  const isMooc = theme === 'mooc';
+  const clearClassName = search.value ? classnames(style.wrapperClear, isMooc && style.wrapperClearMooc) : style.wrapperNoClear;
   return /*#__PURE__*/React.createElement("form", {
     className: style.form,
     action: action,
@@ -35,17 +34,16 @@ const SearchForm = (props, context) => {
   }, /*#__PURE__*/React.createElement(Search, _extends({}, search, {
     onFocus: onSearchFocus,
     onBlur: onSearchBlur,
-    dataTestId: dataTestId
+    dataTestId: dataTestId,
+    theme: theme
   })), /*#__PURE__*/React.createElement("div", {
     "data-name": "search-form-reset",
     "aria-label": searchResetAriaLabel,
     onClick: onReset,
-    className: search.value ? style.wrapperClear : style.wrapperNoClear
-  }, /*#__PURE__*/React.createElement(ClearIcon, {
-    style: {
-      color: dark
-    },
-    className: style.clear
+    className: clearClassName
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: "xmark",
+    className: style.clearIcon
   })));
 };
 SearchForm.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -57,7 +55,8 @@ SearchForm.propTypes = process.env.NODE_ENV !== "production" ? {
   onSearchBlur: PropTypes.func,
   search: PropTypes.shape(Search.propTypes),
   'search-reset-aria-label': PropTypes.string,
-  dataTestId: PropTypes.string
+  dataTestId: PropTypes.string,
+  theme: PropTypes.string
 } : {};
 export default SearchForm;
 //# sourceMappingURL=index.js.map

package/es/molecule/search-form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","NovaCompositionNavigationMore","ClearIcon","Search","style","SearchForm","props","context","action","method","onSubmit","onReset","search","onSearchFocus","onSearchBlur","searchResetAriaLabel","dataTestId","handleSubmit","evt","preventDefault","skin","dark","_get","createElement","className","form","placeholder","_extends","onFocus","onBlur","onClick","value","wrapperClear","wrapperNoClear","color","clear","propTypes","process","env","NODE_ENV","string","func","shape"],"sources":["../../../src/molecule/search-form/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationMore as ClearIcon} from '@coorpacademy/nova-icons';\nimport Search from '../../atom/input-search';\nimport style from './style.css';\n\nconst SearchForm = (props, context) => {\n  const {\n    action,\n    method,\n    onSubmit,\n    onReset,\n    search,\n    onSearchFocus,\n    onSearchBlur,\n    'search-reset-aria-label': searchResetAriaLabel,\n    dataTestId\n  } = props;\n  const handleSubmit = useMemo(\n    () => evt => {\n      evt.preventDefault();\n      return onSubmit && onSubmit(evt);\n    },\n    [onSubmit]\n  );\n  const {skin} = context;\n  const dark = get('common.dark', skin);\n\n  return (\n    <form\n      className={style.form}\n      action={action}\n      method={method}\n      onSubmit={handleSubmit}\n      data-name=\"searchForm\"\n      aria-label={search.placeholder}\n    >\n      <Search {...search} onFocus={onSearchFocus} onBlur={onSearchBlur} dataTestId={dataTestId} />\n      <div\n        data-name=\"search-form-reset\"\n        aria-label={searchResetAriaLabel}\n        onClick={onReset}\n        className={search.value ? style.wrapperClear : style.wrapperNoClear}\n      >\n        <ClearIcon style={{color: dark}} className={style.clear} />\n      </div>\n    </form>\n  );\n};\n\nSearchForm.propTypes = {\n  action: PropTypes.string,\n  method: PropTypes.string,\n  onSubmit: PropTypes.func,\n  onReset: PropTypes.func,\n  onSearchFocus: PropTypes.func,\n  onSearchBlur: PropTypes.func,\n  search: PropTypes.shape(Search.propTypes),\n  'search-reset-aria-label': PropTypes.string,\n  dataTestId: PropTypes.string\n};\n\nexport default SearchForm;\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAGC,OAAO,QAAO,OAAO;AACpC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAAQC,6BAA6B,IAAIC,SAAS,QAAO,0BAA0B;AACnF,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,UAAU,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EACrC,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,YAAY;IACZ,yBAAyB,EAAEC,oBAAoB;IAC/CC;EACF,CAAC,GAAGV,KAAK;EACT,MAAMW,YAAY,GAAGlB,OAAO,CAC1B,MAAMmB,GAAG,IAAI;IACXA,GAAG,CAACC,cAAc,CAAC,CAAC;IACpB,OAAOT,QAAQ,IAAIA,QAAQ,CAACQ,GAAG,CAAC;EAClC,CAAC,EACD,CAACR,QAAQ,CACX,CAAC;EACD,MAAM;IAACU;EAAI,CAAC,GAAGb,OAAO;EACtB,MAAMc,IAAI,GAAGC,IAAA,CAAI,aAAa,EAAEF,IAAI,CAAC;EAErC,oBACEtB,KAAA,CAAAyB,aAAA;IACEC,SAAS,EAAEpB,KAAK,CAACqB,IAAK;IACtBjB,MAAM,EAAEA,MAAO;IACfC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEO,YAAa;IACvB,aAAU,YAAY;IACtB,cAAYL,MAAM,CAACc;EAAY,gBAE/B5B,KAAA,CAAAyB,aAAA,CAACpB,MAAM,EAAAwB,QAAA,KAAKf,MAAM;IAAEgB,OAAO,EAAEf,aAAc;IAACgB,MAAM,EAAEf,YAAa;IAACE,UAAU,EAAEA;EAAW,EAAE,CAAC,eAC5FlB,KAAA,CAAAyB,aAAA;IACE,aAAU,mBAAmB;IAC7B,cAAYR,oBAAqB;IACjCe,OAAO,EAAEnB,OAAQ;IACjBa,SAAS,EAAEZ,MAAM,CAACmB,KAAK,GAAG3B,KAAK,CAAC4B,YAAY,GAAG5B,KAAK,CAAC6B;EAAe,gBAEpEnC,KAAA,CAAAyB,aAAA,CAACrB,SAAS;IAACE,KAAK,EAAE;MAAC8B,KAAK,EAAEb;IAAI,CAAE;IAACG,SAAS,EAAEpB,KAAK,CAAC+B;EAAM,CAAE,CACvD,CACD,CAAC;AAEX,CAAC;AAED9B,UAAU,CAAC+B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACrB/B,MAAM,EAAER,SAAS,CAACwC,MAAM;EACxB/B,MAAM,EAAET,SAAS,CAACwC,MAAM;EACxB9B,QAAQ,EAAEV,SAAS,CAACyC,IAAI;EACxB9B,OAAO,EAAEX,SAAS,CAACyC,IAAI;EACvB5B,aAAa,EAAEb,SAAS,CAACyC,IAAI;EAC7B3B,YAAY,EAAEd,SAAS,CAACyC,IAAI;EAC5B7B,MAAM,EAAEZ,SAAS,CAAC0C,KAAK,CAACvC,MAAM,CAACiC,SAAS,CAAC;EACzC,yBAAyB,EAAEpC,SAAS,CAACwC,MAAM;EAC3CxB,UAAU,EAAEhB,SAAS,CAACwC;AACxB,CAAC;AAED,eAAenC,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FontAwesomeIcon","classnames","Search","style","SearchForm","props","context","action","method","onSubmit","onReset","search","onSearchFocus","onSearchBlur","searchResetAriaLabel","dataTestId","theme","handleSubmit","evt","preventDefault","isMooc","clearClassName","value","wrapperClear","wrapperClearMooc","wrapperNoClear","createElement","className","form","placeholder","_extends","onFocus","onBlur","onClick","icon","clearIcon","propTypes","process","env","NODE_ENV","string","func","shape"],"sources":["../../../src/molecule/search-form/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport classnames from 'classnames';\nimport Search from '../../atom/input-search';\nimport style from './style.css';\n\nconst SearchForm = (props, context) => {\n  const {\n    action,\n    method,\n    onSubmit,\n    onReset,\n    search,\n    onSearchFocus,\n    onSearchBlur,\n    'search-reset-aria-label': searchResetAriaLabel,\n    dataTestId,\n    theme\n  } = props;\n  const handleSubmit = useMemo(\n    () => evt => {\n      evt.preventDefault();\n      return onSubmit && onSubmit(evt);\n    },\n    [onSubmit]\n  );\n\n  const isMooc = theme === 'mooc';\n\n  const clearClassName = search.value\n    ? classnames(style.wrapperClear, isMooc && style.wrapperClearMooc)\n    : style.wrapperNoClear;\n\n  return (\n    <form\n      className={style.form}\n      action={action}\n      method={method}\n      onSubmit={handleSubmit}\n      data-name=\"searchForm\"\n      aria-label={search.placeholder}\n    >\n      <Search\n        {...search}\n        onFocus={onSearchFocus}\n        onBlur={onSearchBlur}\n        dataTestId={dataTestId}\n        theme={theme}\n      />\n      <div\n        data-name=\"search-form-reset\"\n        aria-label={searchResetAriaLabel}\n        onClick={onReset}\n        className={clearClassName}\n      >\n        <FontAwesomeIcon icon=\"xmark\" className={style.clearIcon} />\n      </div>\n    </form>\n  );\n};\n\nSearchForm.propTypes = {\n  action: PropTypes.string,\n  method: PropTypes.string,\n  onSubmit: PropTypes.func,\n  onReset: PropTypes.func,\n  onSearchFocus: PropTypes.func,\n  onSearchBlur: PropTypes.func,\n  search: PropTypes.shape(Search.propTypes),\n  'search-reset-aria-label': PropTypes.string,\n  dataTestId: PropTypes.string,\n  theme: PropTypes.string\n};\n\nexport default SearchForm;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,OAAO,QAAO,OAAO;AACpC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAAQC,eAAe,QAAO,gCAAgC;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,UAAU,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EACrC,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,YAAY;IACZ,yBAAyB,EAAEC,oBAAoB;IAC/CC,UAAU;IACVC;EACF,CAAC,GAAGX,KAAK;EACT,MAAMY,YAAY,GAAGnB,OAAO,CAC1B,MAAMoB,GAAG,IAAI;IACXA,GAAG,CAACC,cAAc,CAAC,CAAC;IACpB,OAAOV,QAAQ,IAAIA,QAAQ,CAACS,GAAG,CAAC;EAClC,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,MAAMW,MAAM,GAAGJ,KAAK,KAAK,MAAM;EAE/B,MAAMK,cAAc,GAAGV,MAAM,CAACW,KAAK,GAC/BrB,UAAU,CAACE,KAAK,CAACoB,YAAY,EAAEH,MAAM,IAAIjB,KAAK,CAACqB,gBAAgB,CAAC,GAChErB,KAAK,CAACsB,cAAc;EAExB,oBACE5B,KAAA,CAAA6B,aAAA;IACEC,SAAS,EAAExB,KAAK,CAACyB,IAAK;IACtBrB,MAAM,EAAEA,MAAO;IACfC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEQ,YAAa;IACvB,aAAU,YAAY;IACtB,cAAYN,MAAM,CAACkB;EAAY,gBAE/BhC,KAAA,CAAA6B,aAAA,CAACxB,MAAM,EAAA4B,QAAA,KACDnB,MAAM;IACVoB,OAAO,EAAEnB,aAAc;IACvBoB,MAAM,EAAEnB,YAAa;IACrBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA;EAAM,EACd,CAAC,eACFnB,KAAA,CAAA6B,aAAA;IACE,aAAU,mBAAmB;IAC7B,cAAYZ,oBAAqB;IACjCmB,OAAO,EAAEvB,OAAQ;IACjBiB,SAAS,EAAEN;EAAe,gBAE1BxB,KAAA,CAAA6B,aAAA,CAAC1B,eAAe;IAACkC,IAAI,EAAC,OAAO;IAACP,SAAS,EAAExB,KAAK,CAACgC;EAAU,CAAE,CACxD,CACD,CAAC;AAEX,CAAC;AAED/B,UAAU,CAACgC,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACrBhC,MAAM,EAAER,SAAS,CAACyC,MAAM;EACxBhC,MAAM,EAAET,SAAS,CAACyC,MAAM;EACxB/B,QAAQ,EAAEV,SAAS,CAAC0C,IAAI;EACxB/B,OAAO,EAAEX,SAAS,CAAC0C,IAAI;EACvB7B,aAAa,EAAEb,SAAS,CAAC0C,IAAI;EAC7B5B,YAAY,EAAEd,SAAS,CAAC0C,IAAI;EAC5B9B,MAAM,EAAEZ,SAAS,CAAC2C,KAAK,CAACxC,MAAM,CAACkC,SAAS,CAAC;EACzC,yBAAyB,EAAErC,SAAS,CAACyC,MAAM;EAC3CzB,UAAU,EAAEhB,SAAS,CAACyC,MAAM;EAC5BxB,KAAK,EAAEjB,SAAS,CAACyC;AACnB,CAAC;AAED,eAAepC,UAAU","ignoreList":[]}

package/es/molecule/search-form/style.css

@@ -1,3 +1,6 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_500 from colors;
+
 .form {
   display: flex;
   justify-content: flex-start;
@@ -23,11 +26,22 @@
   display: none;
 }
 
-.clear {
-  transform: rotate(45deg);
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  top: 0;
-  left: 0;
+.clearIcon {
+  color: cm_grey_500;
+  width: 12px;
+  height: 14px;
+}
+
+.wrapperClearMooc {
+  position: relative;
+  right: 30px;
+  width: 14px;
+  height: 14px;
+  top: 8px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2002;
 }

package/es/organism/brand-table/index.d.ts

@@ -6,7 +6,6 @@ declare namespace BrandTable {
             value: PropTypes.Requireable<string>;
             placeholder: PropTypes.Validator<string>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
-            onSearch: PropTypes.Requireable<(...args: any[]) => any>;
             onClear: PropTypes.Requireable<(...args: any[]) => any>;
             onFocus: PropTypes.Requireable<(...args: any[]) => any>;
             onBlur: PropTypes.Requireable<(...args: any[]) => any>;