@coorpacademy/components 11.33.12 → 11.33.13-alpha.10

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

@@ -11,6 +11,7 @@ declare const ButtonMenu: {
             type: import("prop-types").Requireable<string>;
             buttonLinkType: import("prop-types").Requireable<string>;
             icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                theme: import("prop-types").Requireable<string>;
                 position: import("prop-types").Requireable<string>;
                 type: import("prop-types").Requireable<string>;
                 faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AAqDjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AA8DjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -5,6 +5,27 @@ import classnames from 'classnames';
 import ButtonLink from '../button-link';
 import style from './style.css';
 import propTypes, { buttonPropTypes } from './types';
+import { DEFAULT_ICON_STYLE, THEMES } from './utils';
+const buildCustomIconByTheme = icon => {
+  if (!icon) return;
+  const {
+    theme,
+    ...iconProps
+  } = icon;
+  const custom = theme && THEMES[theme];
+  if (!custom) return iconProps;
+  const customProps = custom ? {
+    ...DEFAULT_ICON_STYLE,
+    faIcon: {
+      ...DEFAULT_ICON_STYLE.faIcon,
+      ...custom
+    }
+  } : null;
+  return {
+    ...iconProps,
+    ...customProps
+  };
+};
 const Button = props => {
   const {
     'data-name': dataName,
@@ -18,30 +39,22 @@ const Button = props => {
   } = props;
   const styleButton = classnames(style.button, type === 'default' && style.defaultStyle, type === 'defaultLeft' && style.defaultLeft, type === 'dangerous' && style.dangerous, type === 'dangerousLeft' && style.dangerousLeft, disabled && style.disabled);
   const handleOnClick = useCallback(() => onClick(), [onClick]);
-  return icon ? /*#__PURE__*/React.createElement(ButtonLink, {
-    label: label,
+  const buttonLinkProps = {
+    'aria-label': label,
+    disabled,
+    label,
     type: buttonLinkType,
-    disabled: disabled,
     onClick: handleOnClick,
-    "data-name": dataName,
+    'data-name': dataName,
     className: styleButton,
     customStyle: {
       ...customStyle
-    },
-    icon: icon
-  }) : /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": label,
-    title: label,
-    "data-name": dataName,
-    className: styleButton,
-    onClick: handleOnClick,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.buttonContent
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.label
-  }, label)));
+    }
+  };
+  const iconProps = buildCustomIconByTheme(icon);
+  return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonLinkProps, {
+    icon: iconProps
+  }));
 };
 Button.propTypes = process.env.NODE_ENV !== "production" ? buttonPropTypes : {};
 const ButtonMenu = props => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useCallback","map","classnames","ButtonLink","style","propTypes","buttonPropTypes","Button","props","dataName","disabled","label","onClick","type","buttonLinkType","icon","customStyle","styleButton","button","defaultStyle","defaultLeft","dangerous","dangerousLeft","handleOnClick","createElement","className","title","buttonContent","process","env","NODE_ENV","ButtonMenu","buttons","buildButton","index","_extends","key","buttonList","convert","cap","buttonMenuContainer"],"sources":["../../../src/atom/button-menu/index.tsx"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport map from 'lodash/fp/map';\nimport classnames from 'classnames';\nimport ButtonLink from '../button-link';\nimport style from './style.css';\nimport propTypes, {ButtonMenuProps, ButtonProps, buttonPropTypes} from './types';\n\nconst Button = (props: ButtonProps) => {\n  const {\n    'data-name': dataName,\n    disabled,\n    label,\n    onClick,\n    type = 'default',\n    buttonLinkType,\n    icon,\n    customStyle = {}\n  } = props;\n  const styleButton = classnames(\n    style.button,\n    type === 'default' && style.defaultStyle,\n    type === 'defaultLeft' && style.defaultLeft,\n    type === 'dangerous' && style.dangerous,\n    type === 'dangerousLeft' && style.dangerousLeft,\n    disabled && style.disabled\n  );\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  return icon ? (\n    <ButtonLink\n      label={label}\n      type={buttonLinkType}\n      disabled={disabled}\n      onClick={handleOnClick}\n      data-name={dataName}\n      className={styleButton}\n      customStyle={{...customStyle}}\n      icon={icon}\n    />\n  ) : (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      data-name={dataName}\n      className={styleButton}\n      onClick={handleOnClick}\n      disabled={disabled}\n    >\n      <div className={style.buttonContent}>\n        <span className={style.label}>{label}</span>\n      </div>\n    </button>\n  );\n};\n\nButton.propTypes = buttonPropTypes;\n\nconst ButtonMenu = (props: ButtonMenuProps) => {\n  const {buttons, 'data-name': dataName} = props;\n  const buildButton = useCallback((button: ButtonProps, index) => {\n    return <Button {...button} key={button.label + index} />;\n  }, []);\n\n  const buttonList = useMemo(\n    // @ts-expect-error (to avoid using map as any)\n    () => map.convert({cap: false})(buildButton, buttons),\n    [buttons, buildButton]\n  );\n\n  return (\n    <div data-name={dataName} className={style.buttonMenuContainer}>\n      {buttonList}\n    </div>\n  );\n};\n\nButtonMenu.propTypes = propTypes;\n\nexport default ButtonMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useCallback","map","classnames","ButtonLink","style","propTypes","buttonPropTypes","DEFAULT_ICON_STYLE","THEMES","buildCustomIconByTheme","icon","theme","iconProps","custom","customProps","faIcon","Button","props","dataName","disabled","label","onClick","type","buttonLinkType","customStyle","styleButton","button","defaultStyle","defaultLeft","dangerous","dangerousLeft","handleOnClick","buttonLinkProps","className","createElement","_extends","process","env","NODE_ENV","ButtonMenu","buttons","buildButton","index","key","buttonList","convert","cap","buttonMenuContainer"],"sources":["../../../src/atom/button-menu/index.tsx"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport map from 'lodash/fp/map';\nimport classnames from 'classnames';\nimport ButtonLink from '../button-link';\nimport style from './style.css';\nimport propTypes, {ButtonMenuProps, ButtonProps, buttonPropTypes} from './types';\nimport {DEFAULT_ICON_STYLE, THEMES} from './utils';\n\nconst buildCustomIconByTheme = (icon: ButtonProps['icon']) => {\n  if (!icon) return;\n\n  const {theme, ...iconProps} = icon;\n  const custom = theme && THEMES[theme];\n  if (!custom) return iconProps;\n\n  const customProps = custom\n    ? {\n        ...DEFAULT_ICON_STYLE,\n        faIcon: {...DEFAULT_ICON_STYLE.faIcon, ...custom}\n      }\n    : null;\n\n  return {\n    ...iconProps,\n    ...customProps\n  };\n};\n\nconst Button = (props: ButtonProps) => {\n  const {\n    'data-name': dataName,\n    disabled,\n    label,\n    onClick,\n    type = 'default',\n    buttonLinkType,\n    icon,\n    customStyle = {}\n  } = props;\n  const styleButton = classnames(\n    style.button,\n    type === 'default' && style.defaultStyle,\n    type === 'defaultLeft' && style.defaultLeft,\n    type === 'dangerous' && style.dangerous,\n    type === 'dangerousLeft' && style.dangerousLeft,\n    disabled && style.disabled\n  );\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const buttonLinkProps = {\n    'aria-label': label,\n    disabled,\n    label,\n    type: buttonLinkType,\n    onClick: handleOnClick,\n    'data-name': dataName,\n    className: styleButton,\n    customStyle: {...customStyle}\n  };\n\n  const iconProps = buildCustomIconByTheme(icon);\n\n  return <ButtonLink {...buttonLinkProps} icon={iconProps} />;\n};\n\nButton.propTypes = buttonPropTypes;\n\nconst ButtonMenu = (props: ButtonMenuProps) => {\n  const {buttons, 'data-name': dataName} = props;\n  const buildButton = useCallback((button: ButtonProps, index) => {\n    return <Button {...button} key={button.label + index} />;\n  }, []);\n\n  const buttonList = useMemo(\n    // @ts-expect-error (to avoid using map as any)\n    () => map.convert({cap: false})(buildButton, buttons),\n    [buttons, buildButton]\n  );\n\n  return (\n    <div data-name={dataName} className={style.buttonMenuContainer}>\n      {buttonList}\n    </div>\n  );\n};\n\nButtonMenu.propTypes = propTypes;\n\nexport default ButtonMenu;\n"],"mappings":"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","ignoreList":[]}

package/es/atom/button-menu/style.css

@@ -33,16 +33,6 @@
   pointer-events: none;
 }
 
-.buttonContent {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.label {
-  margin: 0 8px 0 8px;
-  display: block;
-}
 
 .defaultStyle {
   background-color: transparent;

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

@@ -8,6 +8,7 @@ export declare const buttonPropTypes: {
     type: PropTypes.Requireable<string>;
     buttonLinkType: PropTypes.Requireable<string>;
     icon: PropTypes.Requireable<PropTypes.InferProps<{
+        theme: PropTypes.Requireable<string>;
         position: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
         faIcon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -33,6 +34,7 @@ declare const propTypes: {
         type: PropTypes.Requireable<string>;
         buttonLinkType: PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<PropTypes.InferProps<{
+            theme: PropTypes.Requireable<string>;
             position: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
             faIcon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -53,6 +55,7 @@ declare const propTypes: {
     'aria-label': PropTypes.Requireable<string>;
 };
 export default propTypes;
+export declare type Theme = 'archive' | 'publish' | 'delete';
 export declare type ButtonProps = {
     'data-name'?: string;
     disabled?: boolean;
@@ -60,7 +63,9 @@ export declare type ButtonProps = {
     onClick: () => void;
     type?: 'default' | 'defaultLeft' | 'dangerous' | 'dangerousLeft';
     buttonLinkType?: ButtonLinkProps['type'];
-    icon?: IconType;
+    icon?: IconType & {
+        theme?: Theme;
+    };
     customStyle?: Record<string, string | number>;
 };
 export declare type ButtonMenuProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AAE9E,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;CAS3B,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAId,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,eAAe,CAAC;IACjE,cAAc,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CAC/C,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AAE9E,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;CAY3B,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAId,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErD,oBAAY,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,eAAe,CAAC;IACjE,cAAc,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,QAAQ,GAAG;QAAC,KAAK,CAAC,EAAE,KAAK,CAAA;KAAC,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CAC/C,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC"}

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

@@ -7,7 +7,10 @@ export const buttonPropTypes = {
   onClick: PropTypes.func.isRequired,
   type: PropTypes.oneOf(['default', 'defaultLeft', 'dangerous', 'dangerousLeft']),
   buttonLinkType: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),
-  icon: PropTypes.shape(iconPropTypes),
+  icon: PropTypes.shape({
+    ...iconPropTypes,
+    theme: PropTypes.oneOf(['archive', 'publish', 'delete'])
+  }),
   customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 };
 const propTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PropTypes","iconPropTypes","buttonPropTypes","string","disabled","bool","label","isRequired","onClick","func","type","oneOf","buttonLinkType","icon","shape","customStyle","objectOf","oneOfType","number","propTypes","buttons","arrayOf"],"sources":["../../../src/atom/button-menu/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {ButtonLinkProps, IconType, iconPropTypes} from '../button-link/types';\n\nexport const buttonPropTypes = {\n  'data-name': PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  type: PropTypes.oneOf(['default', 'defaultLeft', 'dangerous', 'dangerousLeft']),\n  buttonLinkType: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  icon: PropTypes.shape(iconPropTypes),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nconst propTypes = {\n  buttons: PropTypes.arrayOf(PropTypes.shape(buttonPropTypes)).isRequired,\n  'data-name': PropTypes.string,\n  'aria-label': PropTypes.string\n};\n\nexport default propTypes;\n\nexport type ButtonProps = {\n  'data-name'?: string;\n  disabled?: boolean;\n  label: string;\n  onClick: () => void;\n  type?: 'default' | 'defaultLeft' | 'dangerous' | 'dangerousLeft';\n  buttonLinkType?: ButtonLinkProps['type'];\n  icon?: IconType;\n  customStyle?: Record<string, string | number>;\n};\n\nexport type ButtonMenuProps = {\n  buttons: ButtonProps[];\n  'data-name'?: string;\n  'aria-label'?: string;\n};\n\nexport type ButtonMenuPropsFixture = {props: ButtonMenuProps};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAAmCC,aAAa,QAAO,sBAAsB;AAE7E,OAAO,MAAMC,eAAe,GAAG;EAC7B,WAAW,EAAEF,SAAS,CAACG,MAAM;EAC7BC,QAAQ,EAAEJ,SAAS,CAACK,IAAI;EACxBC,KAAK,EAAEN,SAAS,CAACG,MAAM,CAACI,UAAU;EAClCC,OAAO,EAAER,SAAS,CAACS,IAAI,CAACF,UAAU;EAClCG,IAAI,EAAEV,SAAS,CAACW,KAAK,CAAC,CAAC,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC;EAC/EC,cAAc,EAAEZ,SAAS,CAACW,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;EAC1FE,IAAI,EAAEb,SAAS,CAACc,KAAK,CAACb,aAAa,CAAC;EACpCc,WAAW,EAAEf,SAAS,CAACgB,QAAQ,CAAChB,SAAS,CAACiB,SAAS,CAAC,CAACjB,SAAS,CAACG,MAAM,EAAEH,SAAS,CAACkB,MAAM,CAAC,CAAC;AAC3F,CAAC;AAED,MAAMC,SAAS,GAAG;EAChBC,OAAO,EAAEpB,SAAS,CAACqB,OAAO,CAACrB,SAAS,CAACc,KAAK,CAACZ,eAAe,CAAC,CAAC,CAACK,UAAU;EACvE,WAAW,EAAEP,SAAS,CAACG,MAAM;EAC7B,YAAY,EAAEH,SAAS,CAACG;AAC1B,CAAC;AAED,eAAegB,SAAS","ignoreList":[]}
+{"version":3,"file":"types.js","names":["PropTypes","iconPropTypes","buttonPropTypes","string","disabled","bool","label","isRequired","onClick","func","type","oneOf","buttonLinkType","icon","shape","theme","customStyle","objectOf","oneOfType","number","propTypes","buttons","arrayOf"],"sources":["../../../src/atom/button-menu/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {ButtonLinkProps, IconType, iconPropTypes} from '../button-link/types';\n\nexport const buttonPropTypes = {\n  'data-name': PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  type: PropTypes.oneOf(['default', 'defaultLeft', 'dangerous', 'dangerousLeft']),\n  buttonLinkType: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  icon: PropTypes.shape({\n    ...iconPropTypes,\n    theme: PropTypes.oneOf(['archive', 'publish', 'delete'])\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nconst propTypes = {\n  buttons: PropTypes.arrayOf(PropTypes.shape(buttonPropTypes)).isRequired,\n  'data-name': PropTypes.string,\n  'aria-label': PropTypes.string\n};\n\nexport default propTypes;\n\nexport type Theme = 'archive' | 'publish' | 'delete';\n\nexport type ButtonProps = {\n  'data-name'?: string;\n  disabled?: boolean;\n  label: string;\n  onClick: () => void;\n  type?: 'default' | 'defaultLeft' | 'dangerous' | 'dangerousLeft';\n  buttonLinkType?: ButtonLinkProps['type'];\n  icon?: IconType & {theme?: Theme};\n  customStyle?: Record<string, string | number>;\n};\n\nexport type ButtonMenuProps = {\n  buttons: ButtonProps[];\n  'data-name'?: string;\n  'aria-label'?: string;\n};\n\nexport type ButtonMenuPropsFixture = {props: ButtonMenuProps};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAAmCC,aAAa,QAAO,sBAAsB;AAE7E,OAAO,MAAMC,eAAe,GAAG;EAC7B,WAAW,EAAEF,SAAS,CAACG,MAAM;EAC7BC,QAAQ,EAAEJ,SAAS,CAACK,IAAI;EACxBC,KAAK,EAAEN,SAAS,CAACG,MAAM,CAACI,UAAU;EAClCC,OAAO,EAAER,SAAS,CAACS,IAAI,CAACF,UAAU;EAClCG,IAAI,EAAEV,SAAS,CAACW,KAAK,CAAC,CAAC,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC;EAC/EC,cAAc,EAAEZ,SAAS,CAACW,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;EAC1FE,IAAI,EAAEb,SAAS,CAACc,KAAK,CAAC;IACpB,GAAGb,aAAa;IAChBc,KAAK,EAAEf,SAAS,CAACW,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC;EACzD,CAAC,CAAC;EACFK,WAAW,EAAEhB,SAAS,CAACiB,QAAQ,CAACjB,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACG,MAAM,EAAEH,SAAS,CAACmB,MAAM,CAAC,CAAC;AAC3F,CAAC;AAED,MAAMC,SAAS,GAAG;EAChBC,OAAO,EAAErB,SAAS,CAACsB,OAAO,CAACtB,SAAS,CAACc,KAAK,CAACZ,eAAe,CAAC,CAAC,CAACK,UAAU;EACvE,WAAW,EAAEP,SAAS,CAACG,MAAM;EAC7B,YAAY,EAAEH,SAAS,CAACG;AAC1B,CAAC;AAED,eAAeiB,SAAS","ignoreList":[]}

package/es/atom/button-menu/utils.d.ts

@@ -0,0 +1,23 @@
+export declare const DEFAULT_ICON_STYLE: {
+    position: "left";
+    faIcon: {
+        size: number;
+        color: "#515161";
+        customStyle: {
+            padding: number;
+        };
+    };
+};
+export declare const THEMES: {
+    publish: {
+        name: string;
+    };
+    archive: {
+        name: string;
+    };
+    delete: {
+        name: string;
+        color: "#B81400";
+    };
+};
+//# sourceMappingURL=utils.d.ts.map

package/es/atom/button-menu/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;;;;CAO9B,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;CAIlB,CAAC"}

package/es/atom/button-menu/utils.js

@@ -0,0 +1,24 @@
+import { COLORS } from '../../variables/colors';
+export const DEFAULT_ICON_STYLE = {
+  position: 'left',
+  faIcon: {
+    size: 14,
+    color: COLORS.cm_grey_500,
+    customStyle: {
+      padding: 0
+    }
+  }
+};
+export const THEMES = {
+  publish: {
+    name: 'cloud-arrow-up'
+  },
+  archive: {
+    name: 'folder-open'
+  },
+  delete: {
+    name: 'trash',
+    color: COLORS.cm_negative_200
+  }
+};
+//# sourceMappingURL=utils.js.map

package/es/atom/button-menu/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["COLORS","DEFAULT_ICON_STYLE","position","faIcon","size","color","cm_grey_500","customStyle","padding","THEMES","publish","name","archive","delete","cm_negative_200"],"sources":["../../../src/atom/button-menu/utils.ts"],"sourcesContent":["import {COLORS} from '../../variables/colors';\n\nexport const DEFAULT_ICON_STYLE = {\n  position: 'left' as const,\n  faIcon: {\n    size: 14,\n    color: COLORS.cm_grey_500,\n    customStyle: {padding: 0}\n  }\n};\n\nexport const THEMES = {\n  publish: {name: 'cloud-arrow-up'},\n  archive: {name: 'folder-open'},\n  delete: {name: 'trash', color: COLORS.cm_negative_200}\n};\n"],"mappings":"AAAA,SAAQA,MAAM,QAAO,wBAAwB;AAE7C,OAAO,MAAMC,kBAAkB,GAAG;EAChCC,QAAQ,EAAE,MAAe;EACzBC,MAAM,EAAE;IACNC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAEL,MAAM,CAACM,WAAW;IACzBC,WAAW,EAAE;MAACC,OAAO,EAAE;IAAC;EAC1B;AACF,CAAC;AAED,OAAO,MAAMC,MAAM,GAAG;EACpBC,OAAO,EAAE;IAACC,IAAI,EAAE;EAAgB,CAAC;EACjCC,OAAO,EAAE;IAACD,IAAI,EAAE;EAAa,CAAC;EAC9BE,MAAM,EAAE;IAACF,IAAI,EAAE,OAAO;IAAEN,KAAK,EAAEL,MAAM,CAACc;EAAe;AACvD,CAAC","ignoreList":[]}

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

@@ -1,7 +1,23 @@
 export const DEFAULT_ICON_COLOR: "hsl(0, 0%, 32%)";
 export function createGradientBackground(baseColor: any): string;
 export function getForegroundColor(backgroundColor: any): any;
+export namespace iconPropTypes {
+    const iconName: PropTypes.Validator<string>;
+    const iconColor: PropTypes.Requireable<string>;
+    const backgroundColor: PropTypes.Requireable<string>;
+    const gradientBackground: PropTypes.Requireable<boolean>;
+    const borderRadius: PropTypes.Requireable<string>;
+    const preset: PropTypes.Requireable<string>;
+    const size: PropTypes.Requireable<PropTypes.InferProps<{
+        faSize: PropTypes.Requireable<number>;
+        wrapperSize: PropTypes.Requireable<number>;
+    }>>;
+    const customStyle: PropTypes.Requireable<{
+        [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+    }>;
+}
 export default Icon;
+import PropTypes from "prop-types";
 declare const Icon: React.NamedExoticComponent<object>;
 import React from "react";
 //# sourceMappingURL=index.d.ts.map

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,iEAIN;AAEM,8DAC8D;;AAGrE,uDAoCG"}
+{"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

@@ -68,7 +68,7 @@ const Icon = /*#__PURE__*/React.memo(function Icon({
     fontSize: effectiveSize.faSize
   }));
 });
-Icon.propTypes = process.env.NODE_ENV !== "production" ? {
+export const iconPropTypes = {
   iconName: PropTypes.string.isRequired,
   iconColor: PropTypes.string,
   backgroundColor: PropTypes.string,
@@ -80,6 +80,7 @@ Icon.propTypes = process.env.NODE_ENV !== "production" ? {
     wrapperSize: PropTypes.number
   }),
   customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
-} : {};
+};
+Icon.propTypes = process.env.NODE_ENV !== "production" ? iconPropTypes : {};
 export default Icon;
 //# sourceMappingURL=index.js.map

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","createGradientBackground","baseColor","startColor","endColor","getForegroundColor","backgroundColor","Icon","memo","iconName","iconColor","gradientBackground","borderRadius","preset","size","customStyle","effectiveIconColor","effectiveSize","iconWrapperStyle","background","width","height","padding","createElement","className","iconWrapper","icon","color","fontSize","propTypes","process","env","NODE_ENV","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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","ignoreList":[]}
+{"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","createElement","className","iconWrapper","icon","color","fontSize","iconPropTypes","string","isRequired","bool","oneOf","shape","objectOf","oneOfType","propTypes","process","env","NODE_ENV"],"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\nexport const iconPropTypes = {\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\nIcon.propTypes = iconPropTypes;\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/bullet-point-menu-button/index.d.ts

@@ -14,6 +14,7 @@ declare const BulletPointMenuButton: {
             type: import("prop-types").Requireable<string>;
             buttonLinkType: import("prop-types").Requireable<string>;
             icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                theme: import("prop-types").Requireable<string>;
                 position: import("prop-types").Requireable<string>;
                 type: import("prop-types").Requireable<string>;
                 faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{

package/es/molecule/bullet-point-menu-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/bullet-point-menu-button/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,0BAA0B,EAAC,MAAM,SAAS,CAAC;AAG9D,QAAA,MAAM,qBAAqB;YAAW,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D/D,CAAC;AAIF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/bullet-point-menu-button/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,0BAA0B,EAAC,MAAM,SAAS,CAAC;AAG9D,QAAA,MAAM,qBAAqB;YAAW,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D/D,CAAC;AAIF,eAAe,qBAAqB,CAAC"}

package/es/molecule/bullet-point-menu-button/types.d.ts

@@ -12,6 +12,7 @@ declare const propTypes: {
         type: PropTypes.Requireable<string>;
         buttonLinkType: PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<PropTypes.InferProps<{
+            theme: PropTypes.Requireable<string>;
             position: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
             faIcon: PropTypes.Requireable<PropTypes.InferProps<{

package/es/molecule/bullet-point-menu-button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/bullet-point-menu-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAC;AAEzD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,iCAAiC,GAAG;IAAC,KAAK,EAAE,0BAA0B,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/bullet-point-menu-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAC;AAEzD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,iCAAiC,GAAG;IAAC,KAAK,EAAE,0BAA0B,CAAA;CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AAkCA,kDAoQC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AA4CA,kDAqRC"}

package/es/molecule/cm-popin/index.js

@@ -1,18 +1,29 @@
+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, { useRef, useEffect, useMemo } from 'react';
 import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond, NovaSolidApplicationsWindowUpload3 as WindowUpload, NovaLineSettingsCookie as Cookie, NovaSolidSpaceMoonRocket as MoonRocket, NovaCompositionCoorpacademyPadlock as LockIcon, NovaLineStatusCheckCircle1 as CheckCircle1, NovaSolidFilesBasicFileLines as FileLinesIcon, NovaSolidInterfaceFeedbackInterfaceAlertRounded as AlertIcon } from '@coorpacademy/nova-icons';
 import map from 'lodash/fp/map';
 import isEmpty from 'lodash/fp/isEmpty';
 import classNames from 'classnames';
 import Provider from '../../atom/provider';
-import Cta from '../../atom/button-link';
+import ButtonLink from '../../atom/button-link';
 import ButtonLinkIcon from '../../atom/button-link-icon';
 import InputSwitch from '../../atom/input-switch';
 import Title from '../../atom/title';
 import CardsGrid from '../../organism/cards-grid';
 import ListItems from '../../organism/list-items';
 import Link from '../../atom/link';
+import Icon from '../../atom/icon';
 import style from './style.css';
 import propTypes from './types';
+
+// DEPRECATED
+const LOGO = {
+  AlertDiamond,
+  WindowUpload,
+  MoonRocket,
+  CheckCircle1,
+  AlertIcon
+};
 const IconType = {
   lockedContent: /*#__PURE__*/React.createElement(LockIcon, {
     className: style.lockIcon
@@ -41,14 +52,6 @@ const CMPopin = props => {
     items,
     link
   } = props;
-  const logo = {
-    AlertDiamond,
-    WindowUpload,
-    MoonRocket,
-    CheckCircle1,
-    AlertIcon
-  };
-  const LogoComponent = logo[icon];
   const backgroundImageStyle = backgroundImageUrl ? {
     backgroundImage: `url(${backgroundImageUrl})`,
     backgroundSize: 'cover'
@@ -77,7 +80,19 @@ const CMPopin = props => {
       };
     }
   }, [handleCloseButton, mode, onClose]);
-  const renderHeader = () => {
+  const wrapperPopinStyle = classNames(style.popin, mode === 'cookie' && style.popinCookie, mode === 'list' && style.popinFilesList, mode === 'items' && style.popinItems);
+  const buildIcon = () => {
+    if (typeof icon === 'string') {
+      const LogoComponent = LOGO[icon];
+      return LogoComponent ? /*#__PURE__*/React.createElement(LogoComponent, {
+        className: style.icon
+      }) : null;
+    }
+    return !isEmpty(icon) ? /*#__PURE__*/React.createElement(Icon, _extends({}, icon, {
+      className: style.icon
+    })) : null;
+  };
+  const buildHeader = () => {
     if (header) {
       const {
         title,
@@ -101,7 +116,22 @@ const CMPopin = props => {
     })), /*#__PURE__*/React.createElement("div", {
       className: style.cookieTitle
     }, cookieTitle));
-    return null;
+  };
+  const renderHeader = () => {
+    const headerContent = buildHeader();
+    const close = onClose ? /*#__PURE__*/React.createElement("div", {
+      className: style.onCloseButton
+    }, /*#__PURE__*/React.createElement(ButtonLinkIcon, {
+      onClick: handleCloseButton,
+      "data-name": 'close-icon',
+      "aria-label": 'close-icon',
+      size: "small",
+      icon: "close"
+    })) : null;
+    if (isEmpty(headerContent) && isEmpty(close)) return null;
+    return /*#__PURE__*/React.createElement("header", {
+      className: style.popinHeader
+    }, headerContent, close);
   };
   const getClassBtnSwitch = (index, btnList) => {
     switch (index) {
@@ -149,11 +179,11 @@ const CMPopin = props => {
     })(listBtnSwicth);
   };
   const renderItems = () => {
+    if (isEmpty(items)) return null;
     const {
       type,
       list
     } = items;
-    if (isEmpty(list)) return null;
     if (type === 'content') return /*#__PURE__*/React.createElement("div", {
       className: style.itemsContainer,
       "data-name": 'cm-popin-cards'
@@ -163,7 +193,56 @@ const CMPopin = props => {
     }, /*#__PURE__*/React.createElement(ListItems, list));
     return null;
   };
-  const wrapperPopinStyle = classNames(mode === 'cookie' && style.popinCookie, mode === 'list' && style.popinFilesList, mode === 'items' && style.popinItems, style.popin);
+  const renderContent = () => {
+    if (mode === 'items' || mode === 'list') return;
+    const isCookieOrInformations = mode === 'cookie' || mode === 'information';
+    const renderContentTitle = () => {
+      if (!content) return null;
+      if (isCookieOrInformations) return /*#__PURE__*/React.createElement("p", {
+        className: mode === 'alert' ? style.content : style.message,
+        "data-name": 'cm-popin-content'
+        // eslint-disable-next-line react/no-danger
+        ,
+        dangerouslySetInnerHTML: {
+          __html: content
+        }
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: mode === 'alert' ? style.content : style.message
+      }, /*#__PURE__*/React.createElement(Title, {
+        title: content,
+        "data-name": 'cm-popin-content'
+      }));
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: isCookieOrInformations ? style.cookieTitleContainer : style.titleContainer
+    }, buildIcon(), /*#__PURE__*/React.createElement("div", {
+      className: style.contentSection
+    }, renderContentTitle(), descriptionText ? /*#__PURE__*/React.createElement("div", {
+      className: style.descriptionText
+    }, descriptionText) : null), link ? /*#__PURE__*/React.createElement(Link, link) : null);
+  };
+  const renderButtons = () => {
+    if (!firstButton && !secondButton && !thirdButton) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.buttonContainer
+    }, firstButton ? /*#__PURE__*/React.createElement("div", {
+      className: firstButton.largeButton ? style.largeButton : style.button
+    }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, firstButton, {
+      onClick: firstButton.handleOnclick,
+      "data-name": 'cm-popin-cta'
+    }))) : null, secondButton ? /*#__PURE__*/React.createElement("div", {
+      className: secondButton.largeButton ? style.largeButton : style.button
+    }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, secondButton, {
+      onClick: secondButton.handleOnclick,
+      "data-name": `cm-popin-cta-${secondButton.type}`
+    }))) : null, thirdButton ? /*#__PURE__*/React.createElement("div", {
+      className: thirdButton.largeButton ? style.largeButton : style.button
+    }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, thirdButton, {
+      onClick: thirdButton.handleOnclick,
+      "data-name": `cm-popin-cta-${thirdButton.type}`
+    }))) : null);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: mode !== 'cookie' ? style.background : null,
     style: backgroundImageStyle,
@@ -171,70 +250,9 @@ const CMPopin = props => {
   }, /*#__PURE__*/React.createElement("div", {
     className: wrapperPopinStyle,
     ref: nodeRef
-  }, /*#__PURE__*/React.createElement("header", {
-    className: style.popinHeader
-  }, renderHeader(), onClose ? /*#__PURE__*/React.createElement("div", {
-    className: style.onCloseButton
-  }, /*#__PURE__*/React.createElement(ButtonLinkIcon, {
-    onClick: handleCloseButton,
-    "data-name": 'close-icon',
-    "aria-label": 'close-icon',
-    size: "small",
-    icon: "close"
-  })) : null), mode !== 'items' && mode !== 'list' ? /*#__PURE__*/React.createElement("div", {
-    className: mode === 'cookie' || mode === 'information' ? style.cookieTitleContainer : style.titleContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.contentSection
-  }, LogoComponent ? /*#__PURE__*/React.createElement(LogoComponent, {
-    className: style.icon
-  }) : null, content ? /*#__PURE__*/React.createElement("p", {
-    className: mode === 'alert' ? style.content : style.message,
-    "data-name": 'cm-popin-content'
-    // eslint-disable-next-line react/no-danger
-    ,
-    dangerouslySetInnerHTML: {
-      __html: content
-    }
-  }) : null), descriptionText ? /*#__PURE__*/React.createElement("p", {
-    className: style.descriptionText
-    // eslint-disable-next-line react/no-danger
-    ,
-    dangerouslySetInnerHTML: {
-      __html: descriptionText
-    }
-  }) : null, link ? /*#__PURE__*/React.createElement(Link, link) : null) : null, descriptionBtnTxt ? /*#__PURE__*/React.createElement("div", {
+  }, renderHeader(), renderContent(), descriptionBtnTxt ? /*#__PURE__*/React.createElement("div", {
     className: style.descriptionBtn
-  }, descriptionBtnTxt) : null, !isEmpty(items) ? renderItems() : null, renderBtnSwitch(), firstButton || secondButton || thirdButton ? /*#__PURE__*/React.createElement("div", {
-    className: style.buttonContainer
-  }, firstButton ? /*#__PURE__*/React.createElement("div", {
-    className: firstButton.largeButton ? style.largeButton : style.button
-  }, /*#__PURE__*/React.createElement(Cta, {
-    label: firstButton.label,
-    onClick: firstButton.handleOnclick,
-    "data-name": 'cm-popin-cta',
-    "aria-label": firstButton['aria-label'],
-    type: firstButton.type,
-    customStyle: firstButton.customStyle
-  })) : null, secondButton ? /*#__PURE__*/React.createElement("div", {
-    className: secondButton.largeButton ? style.largeButton : style.button
-  }, /*#__PURE__*/React.createElement(Cta, {
-    label: secondButton.label,
-    onClick: secondButton.handleOnclick,
-    "data-name": `cm-popin-cta-${secondButton.type}`,
-    "aria-label": secondButton['aria-label'],
-    type: secondButton.type,
-    customStyle: secondButton.customStyle,
-    icon: secondButton.icon
-  })) : null, thirdButton ? /*#__PURE__*/React.createElement("div", {
-    className: thirdButton.largeButton ? style.largeButton : style.button
-  }, /*#__PURE__*/React.createElement(Cta, {
-    label: thirdButton.label,
-    onClick: thirdButton.handleOnclick,
-    "data-name": `cm-popin-cta-${thirdButton.type}`,
-    "aria-label": thirdButton['aria-label'],
-    type: thirdButton.type,
-    customStyle: thirdButton.customStyle
-  })) : null) : null));
+  }, descriptionBtnTxt) : null, renderItems(), renderBtnSwitch(), renderButtons()));
 };
 CMPopin.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 CMPopin.contextTypes = {