@coorpacademy/components 11.33.2 → 11.33.3-alpha.12

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

@@ -27,6 +27,7 @@ declare const ButtonLink: {
         disabled: import("prop-types").Requireable<boolean>;
         className: import("prop-types").Requireable<string>;
         customStyle: import("prop-types").Requireable<import("prop-types").InferProps<{}>>;
+        isCustomSkillMenu: import("prop-types").Requireable<boolean>;
     };
 };
 export default ButtonLink;

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

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

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

@@ -8,7 +8,7 @@ import { ICONS } from '../../util/button-icons';
 import ToolTip from '../tooltip';
 import propTypes from './types';
 import style from './style.css';
-const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverColor) => {
+const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverColor, isCustomSkillMenu) => {
   const {
     type,
     faIcon,
@@ -18,11 +18,14 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
     position: ''
   };
   const Icon = type && ICONS[type];
+  const labelClassName = classnames(style.label, {
+    [style.customSkillLabel]: isCustomSkillMenu && faIcon
+  });
   if (!Icon && !faIcon) {
     return /*#__PURE__*/React.createElement("div", {
       className: style.buttonContent
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.label
+      className: labelClassName
     }, content));
   }
   const iconComponent = faIcon ? /*#__PURE__*/React.createElement(FaIcon, {
@@ -42,7 +45,7 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
   return /*#__PURE__*/React.createElement("div", {
     className: style.buttonContent
   }, position === 'left' ? iconComponent : null, content ? /*#__PURE__*/React.createElement("span", {
-    className: style.label
+    className: labelClassName
   }, content) : null, position === 'right' ? iconComponent : null);
 };
 const ButtonLink = props => {
@@ -65,9 +68,10 @@ const ButtonLink = props => {
     onKeyDown = _noop,
     className,
     customStyle,
-    useTitle = true
+    useTitle = true,
+    isCustomSkillMenu
   } = props;
-  const styleButton = classnames(className, style.button, !label && style.iconButton, type === 'primary' && style.primary, type === 'secondary' && style.secondary, type === 'tertiary' && style.tertiary, type === 'text' && style.text, type === 'dangerous' && style.dangerous, link && style.link, disabled && style.disabled);
+  const styleButton = classnames(className, style.button, !label && style.iconButton, type === 'primary' && style.primary, type === 'secondary' && style.secondary, type === 'tertiary' && style.tertiary, type === 'text' && style.text, type === 'dangerous' && style.dangerous, link && style.link, disabled && style.disabled, isCustomSkillMenu && style.customSkillButton);
   const [hovered, setHovered] = useState(false);
   const handleOnClick = useCallback(event => onClick(event), [onClick]);
   const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);
@@ -112,7 +116,7 @@ const ButtonLink = props => {
       hoverBackgroundColor: hoverBackgroundColor,
       onMouseEnter: handleMouseOver,
       onMouseLeave: handleMouseLeave
-    }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor), renderToolTip());
+    }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor, isCustomSkillMenu), renderToolTip());
   }
   return /*#__PURE__*/React.createElement("button", _extends({}, useTitle && {
     title: ariaLabel || label
@@ -133,7 +137,7 @@ const ButtonLink = props => {
     onMouseLeave: handleMouseLeave,
     tabIndex: 0,
     disabled: disabled
-  }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor), renderToolTip());
+  }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor, isCustomSkillMenu), renderToolTip());
 };
 ButtonLink.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 export default ButtonLink;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","ICONS","ToolTip","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","createElement","className","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop","onKeyDown","useTitle","styleButton","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","_extends","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","process","env","NODE_ENV"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: hovered && hoverColor ? hoverColor : faIcon.color,\n        // eslint-disable-next-line no-nested-ternary\n        backgroundColor: !faIcon?.backgroundColor\n          ? 'transparent'\n          : hovered && hoverBackgroundColor\n          ? hoverBackgroundColor\n          : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    tooltipText,\n    tooltipPlacement = 'left',\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    !label && style.iconButton,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n    [tooltipText, ariaLabel]\n  );\n\n  const renderToolTip = () => {\n    const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n    if (!closeToolTipInformationTextAriaLabel) return null;\n    return (\n      <ToolTip\n        fontSize={12}\n        anchorId=\"button-icon\"\n        toolTipIsVisible={hovered}\n        placement={tooltipPlacement}\n        TooltipContent={TooltipContent}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      />\n    );\n  };\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n        hoverColor={hoverColor}\n        hoverBackgroundColor={hoverBackgroundColor}\n        onMouseEnter={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n      >\n        {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n        {renderToolTip()}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      {...(ariaLabel && !label\n        ? {\n            'data-for': 'button-icon',\n            'data-tip': hovered\n          }\n        : {})}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n      {renderToolTip()}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","ICONS","ToolTip","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","isCustomSkillMenu","type","faIcon","position","Icon","labelClassName","label","customSkillLabel","createElement","className","buttonContent","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop","onKeyDown","useTitle","styleButton","button","iconButton","primary","secondary","tertiary","text","dangerous","customSkillButton","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","_extends","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","process","env","NODE_ENV"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string,\n  isCustomSkillMenu?: boolean\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  const labelClassName = classnames(style.label, {\n    [style.customSkillLabel]: isCustomSkillMenu && faIcon\n  });\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={labelClassName}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: hovered && hoverColor ? hoverColor : faIcon.color,\n        // eslint-disable-next-line no-nested-ternary\n        backgroundColor: !faIcon?.backgroundColor\n          ? 'transparent'\n          : hovered && hoverBackgroundColor\n          ? hoverBackgroundColor\n          : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={labelClassName}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    tooltipText,\n    tooltipPlacement = 'left',\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true,\n    isCustomSkillMenu\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    !label && style.iconButton,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled,\n    isCustomSkillMenu && style.customSkillButton\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n    [tooltipText, ariaLabel]\n  );\n\n  const renderToolTip = () => {\n    const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n    if (!closeToolTipInformationTextAriaLabel) return null;\n    return (\n      <ToolTip\n        fontSize={12}\n        anchorId=\"button-icon\"\n        toolTipIsVisible={hovered}\n        placement={tooltipPlacement}\n        TooltipContent={TooltipContent}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      />\n    );\n  };\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n        hoverColor={hoverColor}\n        hoverBackgroundColor={hoverBackgroundColor}\n        onMouseEnter={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n      >\n        {getButtonContent(\n          icon,\n          content ?? label,\n          hovered,\n          hoverBackgroundColor,\n          hoverColor,\n          isCustomSkillMenu\n        )}\n        {renderToolTip()}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      {...(ariaLabel && !label\n        ? {\n            'data-for': 'button-icon',\n            'data-tip': hovered\n          }\n        : {})}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(\n        icon,\n        content ?? label,\n        hovered,\n        hoverBackgroundColor,\n        hoverColor,\n        isCustomSkillMenu\n      )}\n      {renderToolTip()}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}

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

@@ -109,4 +109,14 @@
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
+}
+
+.customSkillButton {
+  composes: button;
+  padding: 12px 16px;
+  padding-left: 6px;
+}
+
+.customSkillLabel {
+  margin: 0;
 }

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

@@ -26,6 +26,7 @@ declare const propTypes: {
     disabled: PropTypes.Requireable<boolean>;
     className: PropTypes.Requireable<string>;
     customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+    isCustomSkillMenu: PropTypes.Requireable<boolean>;
 };
 export declare type FaIcontype = {
     name: string;
@@ -63,6 +64,7 @@ export declare type ButtonLinkProps = {
     className?: string;
     customStyle?: Record<string, unknown>;
     useTitle?: boolean;
+    isCustomSkillMenu?: boolean;
 };
 export declare type Fixture = {
     props: ButtonLinkProps;

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

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

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

@@ -25,7 +25,8 @@ const propTypes = {
   hoverColor: PropTypes.string,
   disabled: PropTypes.bool,
   className: PropTypes.string,
-  customStyle: PropTypes.shape({})
+  customStyle: PropTypes.shape({}),
+  isCustomSkillMenu: PropTypes.bool
 };
 export default propTypes;
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PropTypes","ICONS","propTypes","type","oneOf","usage","label","string","content","node","tooltipText","tooltipPlacement","icon","shape","position","_keys","onClick","func","link","href","download","bool","target","hoverBackgroundColor","hoverColor","disabled","className","customStyle"],"sources":["../../../src/atom/button-link/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport {ICONS} from '../../util/button-icons';\n\nconst propTypes = {\n  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  usage: PropTypes.oneOf(['button', 'submit', 'reset']),\n  label: PropTypes.string,\n  content: PropTypes.node,\n  'aria-label': PropTypes.string,\n  tooltipText: PropTypes.string,\n  tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),\n  'data-name': PropTypes.string,\n  'data-testid': PropTypes.string,\n  icon: PropTypes.shape({\n    position: PropTypes.oneOf(['right', 'left']),\n    type: PropTypes.oneOf(keys(ICONS))\n  }),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  hoverBackgroundColor: PropTypes.string,\n  hoverColor: PropTypes.string,\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  customStyle: PropTypes.shape({})\n};\n\nexport type FaIcontype = {\n  name: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: number;\n  customStyle?: Record<string, unknown>;\n};\n\nexport type IconType = {\n  position: 'right' | 'left';\n  type?: keyof typeof ICONS;\n  faIcon?: FaIcontype;\n};\nexport type ButtonLinkProps = {\n  type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';\n  usage?: 'button' | 'submit' | 'reset';\n  label?: string;\n  content?: React.ReactNode;\n  'aria-label'?: string;\n  tooltipText?: string;\n  tooltipPlacement?: 'left' | 'right' | 'top' | 'bottom';\n  'data-name'?: string;\n  'data-testid'?: string;\n  icon?: IconType;\n  onClick?: () => void;\n  onKeyDown?: () => void;\n  link?: {\n    href?: string;\n    download?: boolean;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  };\n  hoverBackgroundColor?: string;\n  hoverColor?: string;\n  disabled?: boolean;\n  className?: string;\n  customStyle?: Record<string, unknown>;\n  useTitle?: boolean;\n};\n\nexport type Fixture = {props: ButtonLinkProps};\n\nexport default propTypes;\n"],"mappings":";AAAA,OAAOA,SAAS,MAAM,YAAY;AAElC,SAAQC,KAAK,QAAO,yBAAyB;AAE7C,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAEH,SAAS,CAACI,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;EAChFC,KAAK,EAAEL,SAAS,CAACI,KAAK,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;EACrDE,KAAK,EAAEN,SAAS,CAACO,MAAM;EACvBC,OAAO,EAAER,SAAS,CAACS,IAAI;EACvB,YAAY,EAAET,SAAS,CAACO,MAAM;EAC9BG,WAAW,EAAEV,SAAS,CAACO,MAAM;EAC7BI,gBAAgB,EAAEX,SAAS,CAACI,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;EACrE,WAAW,EAAEJ,SAAS,CAACO,MAAM;EAC7B,aAAa,EAAEP,SAAS,CAACO,MAAM;EAC/BK,IAAI,EAAEZ,SAAS,CAACa,KAAK,CAAC;IACpBC,QAAQ,EAAEd,SAAS,CAACI,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC5CD,IAAI,EAAEH,SAAS,CAACI,KAAK,CAACW,KAAA,CAAKd,KAAK,CAAC;EACnC,CAAC,CAAC;EACFe,OAAO,EAAEhB,SAAS,CAACiB,IAAI;EACvBC,IAAI,EAAElB,SAAS,CAACa,KAAK,CAAC;IACpBM,IAAI,EAAEnB,SAAS,CAACO,MAAM;IACtBa,QAAQ,EAAEpB,SAAS,CAACqB,IAAI;IACxBC,MAAM,EAAEtB,SAAS,CAACI,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;EAChE,CAAC,CAAC;EACFmB,oBAAoB,EAAEvB,SAAS,CAACO,MAAM;EACtCiB,UAAU,EAAExB,SAAS,CAACO,MAAM;EAC5BkB,QAAQ,EAAEzB,SAAS,CAACqB,IAAI;EACxBK,SAAS,EAAE1B,SAAS,CAACO,MAAM;EAC3BoB,WAAW,EAAE3B,SAAS,CAACa,KAAK,CAAC,CAAC,CAAC;AACjC,CAAC;AA2CD,eAAeX,SAAS","ignoreList":[]}
+{"version":3,"file":"types.js","names":["PropTypes","ICONS","propTypes","type","oneOf","usage","label","string","content","node","tooltipText","tooltipPlacement","icon","shape","position","_keys","onClick","func","link","href","download","bool","target","hoverBackgroundColor","hoverColor","disabled","className","customStyle","isCustomSkillMenu"],"sources":["../../../src/atom/button-link/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport {ICONS} from '../../util/button-icons';\n\nconst propTypes = {\n  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  usage: PropTypes.oneOf(['button', 'submit', 'reset']),\n  label: PropTypes.string,\n  content: PropTypes.node,\n  'aria-label': PropTypes.string,\n  tooltipText: PropTypes.string,\n  tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),\n  'data-name': PropTypes.string,\n  'data-testid': PropTypes.string,\n  icon: PropTypes.shape({\n    position: PropTypes.oneOf(['right', 'left']),\n    type: PropTypes.oneOf(keys(ICONS))\n  }),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  hoverBackgroundColor: PropTypes.string,\n  hoverColor: PropTypes.string,\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  customStyle: PropTypes.shape({}),\n  isCustomSkillMenu: PropTypes.bool\n};\n\nexport type FaIcontype = {\n  name: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: number;\n  customStyle?: Record<string, unknown>;\n};\n\nexport type IconType = {\n  position: 'right' | 'left';\n  type?: keyof typeof ICONS;\n  faIcon?: FaIcontype;\n};\nexport type ButtonLinkProps = {\n  type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';\n  usage?: 'button' | 'submit' | 'reset';\n  label?: string;\n  content?: React.ReactNode;\n  'aria-label'?: string;\n  tooltipText?: string;\n  tooltipPlacement?: 'left' | 'right' | 'top' | 'bottom';\n  'data-name'?: string;\n  'data-testid'?: string;\n  icon?: IconType;\n  onClick?: () => void;\n  onKeyDown?: () => void;\n  link?: {\n    href?: string;\n    download?: boolean;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  };\n  hoverBackgroundColor?: string;\n  hoverColor?: string;\n  disabled?: boolean;\n  className?: string;\n  customStyle?: Record<string, unknown>;\n  useTitle?: boolean;\n  isCustomSkillMenu?: boolean;\n};\n\nexport type Fixture = {props: ButtonLinkProps};\n\nexport default propTypes;\n"],"mappings":";AAAA,OAAOA,SAAS,MAAM,YAAY;AAElC,SAAQC,KAAK,QAAO,yBAAyB;AAE7C,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAEH,SAAS,CAACI,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;EAChFC,KAAK,EAAEL,SAAS,CAACI,KAAK,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;EACrDE,KAAK,EAAEN,SAAS,CAACO,MAAM;EACvBC,OAAO,EAAER,SAAS,CAACS,IAAI;EACvB,YAAY,EAAET,SAAS,CAACO,MAAM;EAC9BG,WAAW,EAAEV,SAAS,CAACO,MAAM;EAC7BI,gBAAgB,EAAEX,SAAS,CAACI,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;EACrE,WAAW,EAAEJ,SAAS,CAACO,MAAM;EAC7B,aAAa,EAAEP,SAAS,CAACO,MAAM;EAC/BK,IAAI,EAAEZ,SAAS,CAACa,KAAK,CAAC;IACpBC,QAAQ,EAAEd,SAAS,CAACI,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC5CD,IAAI,EAAEH,SAAS,CAACI,KAAK,CAACW,KAAA,CAAKd,KAAK,CAAC;EACnC,CAAC,CAAC;EACFe,OAAO,EAAEhB,SAAS,CAACiB,IAAI;EACvBC,IAAI,EAAElB,SAAS,CAACa,KAAK,CAAC;IACpBM,IAAI,EAAEnB,SAAS,CAACO,MAAM;IACtBa,QAAQ,EAAEpB,SAAS,CAACqB,IAAI;IACxBC,MAAM,EAAEtB,SAAS,CAACI,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;EAChE,CAAC,CAAC;EACFmB,oBAAoB,EAAEvB,SAAS,CAACO,MAAM;EACtCiB,UAAU,EAAExB,SAAS,CAACO,MAAM;EAC5BkB,QAAQ,EAAEzB,SAAS,CAACqB,IAAI;EACxBK,SAAS,EAAE1B,SAAS,CAACO,MAAM;EAC3BoB,WAAW,EAAE3B,SAAS,CAACa,KAAK,CAAC,CAAC,CAAC,CAAC;EAChCe,iBAAiB,EAAE5B,SAAS,CAACqB;AAC/B,CAAC;AA4CD,eAAenB,SAAS","ignoreList":[]}

package/es/atom/button-link-icon/style.css

@@ -46,14 +46,14 @@
   composes: button;
   width: 44px;
   height: 44px;
-  border-radius: 7px;
+  border-radius: 12px;
 }
 
 .responsive {
   composes: button;
   width: 44px;
   height: 44px;
-  border-radius: 7px;
+  border-radius: 12px;
 }
 
 .responsive .icon {

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

@@ -9,6 +9,21 @@ declare const ButtonMenu: {
             label: import("prop-types").Validator<string>;
             onClick: import("prop-types").Validator<(...args: any[]) => any>;
             type: import("prop-types").Requireable<string>;
+            linkType: import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                position: import("prop-types").Validator<string>;
+                type: import("prop-types").Requireable<string>;
+                faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    name: import("prop-types").Validator<string>;
+                    size: import("prop-types").Requireable<number>;
+                    color: import("prop-types").Requireable<string>;
+                }>>;
+            }>>;
+            customStyle: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+                hoverBackgroundColor: import("prop-types").Requireable<string>;
+            }>>;
+            isCustomSkillMenu: import("prop-types").Requireable<boolean>;
         }> | null | undefined)[]>;
         'data-name': import("prop-types").Requireable<string>;
     };

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":";AAIA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AAiCjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;CAazC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AA8EjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -2,19 +2,53 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useMemo, useCallback } from 'react';
 import map from 'lodash/fp/map';
 import classnames from 'classnames';
+import ButtonLink from '../button-link';
 import style from './style.css';
 import propTypes, { buttonPropTypes } from './types';
+const getIconProps = icon => {
+  if (!icon) return undefined;
+  return icon.faIcon ? {
+    faIcon: {
+      name: icon.faIcon.name,
+      size: icon.faIcon.size,
+      color: icon.faIcon.color
+    },
+    position: icon.position
+  } : {
+    type: icon.type,
+    position: icon.position
+  };
+};
 const Button = props => {
   const {
     'data-name': dataName,
     disabled,
     label,
     onClick,
-    type = 'default'
+    type = 'default',
+    linkType,
+    icon,
+    customStyle,
+    isCustomSkillMenu
   } = props;
-  const styleButton = classnames(style.button, type === 'default' && style.default, type === 'defaultLeft' && style.defaultLeft, type === 'dangerous' && style.dangerous, type === 'dangerousLeft' && style.dangerousLeft, disabled && style.disabled);
+  const styleButton = classnames(style.button, type === 'default' && style.default, type === 'defaultLeft' && style.defaultLeft, type === 'dangerous' && style.dangerous, type === 'dangerousLeft' && style.dangerousLeft, disabled && style.disabled, isCustomSkillMenu && style.customSkillButton);
   const handleOnClick = useCallback(() => onClick(), [onClick]);
-  return /*#__PURE__*/React.createElement("button", {
+  const iconProps = useMemo(() => getIconProps(icon), [icon]);
+  return icon ? /*#__PURE__*/React.createElement(ButtonLink, {
+    label: label,
+    type: linkType,
+    disabled: disabled,
+    onClick: handleOnClick,
+    "data-name": dataName,
+    className: styleButton,
+    customStyle: {
+      color: customStyle?.color
+    },
+    hoverBackgroundColor: customStyle?.hoverBackgroundColor,
+    hoverColor: customStyle?.color,
+    icon: iconProps,
+    isCustomSkillMenu: isCustomSkillMenu
+  }) : /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": label,
     title: label,
@@ -32,7 +66,8 @@ Button.propTypes = process.env.NODE_ENV !== "production" ? buttonPropTypes : {};
 const ButtonMenu = props => {
   const {
     buttons,
-    'data-name': dataName
+    'data-name': dataName,
+    isCustomSkillMenu
   } = props;
   const buildButton = useCallback((button, index) => {
     return /*#__PURE__*/React.createElement(Button, _extends({}, button, {
@@ -45,7 +80,10 @@ const ButtonMenu = props => {
     cap: false
   })(buildButton, buttons), [buttons, buildButton]);
   return /*#__PURE__*/React.createElement("div", {
-    "data-name": dataName
+    "data-name": dataName,
+    className: classnames({
+      [style.buttonMenuContainer]: isCustomSkillMenu
+    })
   }, buttonList);
 };
 ButtonMenu.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useCallback","map","classnames","style","propTypes","buttonPropTypes","Button","props","dataName","disabled","label","onClick","type","styleButton","button","default","defaultLeft","dangerous","dangerousLeft","handleOnClick","createElement","title","className","buttonContent","process","env","NODE_ENV","ButtonMenu","buttons","buildButton","index","_extends","key","buttonList","convert","cap"],"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 style from './style.css';\nimport propTypes, {ButtonMenuProps, ButtonProps, buttonPropTypes} from './types';\n\nconst Button = (props: ButtonProps) => {\n  const {'data-name': dataName, disabled, label, onClick, type = 'default'} = props;\n  const styleButton = classnames(\n    style.button,\n    type === 'default' && style.default,\n    type === 'defaultLeft' && style.defaultLeft,\n    type === 'dangerous' && style.dangerous,\n    type === 'dangerousLeft' && style.dangerousLeft,\n    disabled && style.disabled\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n  return (\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 <div data-name={dataName}>{buttonList}</div>;\n};\n\nButtonMenu.propTypes = propTypes;\n\nexport default ButtonMenu;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,OAAO,EAAEC,WAAW,QAAO,OAAO;AACjD,OAAOC,GAAG,MAAM,eAAe;AAC/B,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,SAAS,IAAiCC,eAAe,QAAO,SAAS;AAEhF,MAAMC,MAAM,GAAIC,KAAkB,IAAK;EACrC,MAAM;IAAC,WAAW,EAAEC,QAAQ;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO;IAAEC,IAAI,GAAG;EAAS,CAAC,GAAGL,KAAK;EACjF,MAAMM,WAAW,GAAGX,UAAU,CAC5BC,KAAK,CAACW,MAAM,EACZF,IAAI,KAAK,SAAS,IAAIT,KAAK,CAACY,OAAO,EACnCH,IAAI,KAAK,aAAa,IAAIT,KAAK,CAACa,WAAW,EAC3CJ,IAAI,KAAK,WAAW,IAAIT,KAAK,CAACc,SAAS,EACvCL,IAAI,KAAK,eAAe,IAAIT,KAAK,CAACe,aAAa,EAC/CT,QAAQ,IAAIN,KAAK,CAACM,QACpB,CAAC;EAED,MAAMU,aAAa,GAAGnB,WAAW,CAAC,MAAMW,OAAO,CAAC,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAC7D,oBACEb,KAAA,CAAAsB,aAAA;IACER,IAAI,EAAC,QAAQ;IACb,cAAYF,KAAM;IAClBW,KAAK,EAAEX,KAAM;IACb,aAAWF,QAAS;IACpBc,SAAS,EAAET,WAAY;IACvBF,OAAO,EAAEQ,aAAc;IACvBV,QAAQ,EAAEA;EAAS,gBAEnBX,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAEnB,KAAK,CAACoB;EAAc,gBAClCzB,KAAA,CAAAsB,aAAA;IAAME,SAAS,EAAEnB,KAAK,CAACO;EAAM,GAAEA,KAAY,CACxC,CACC,CAAC;AAEb,CAAC;AAEDJ,MAAM,CAACF,SAAS,GAAAoB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGrB,eAAe;AAElC,MAAMsB,UAAU,GAAIpB,KAAsB,IAAK;EAC7C,MAAM;IAACqB,OAAO;IAAE,WAAW,EAAEpB;EAAQ,CAAC,GAAGD,KAAK;EAC9C,MAAMsB,WAAW,GAAG7B,WAAW,CAAC,CAACc,MAAmB,EAAEgB,KAAK,KAAK;IAC9D,oBAAOhC,KAAA,CAAAsB,aAAA,CAACd,MAAM,EAAAyB,QAAA,KAAKjB,MAAM;MAAEkB,GAAG,EAAElB,MAAM,CAACJ,KAAK,GAAGoB;IAAM,EAAE,CAAC;EAC1D,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,UAAU,GAAGlC,OAAO;EACxB;EACA,MAAME,GAAG,CAACiC,OAAO,CAAC;IAACC,GAAG,EAAE;EAAK,CAAC,CAAC,CAACN,WAAW,EAAED,OAAO,CAAC,EACrD,CAACA,OAAO,EAAEC,WAAW,CACvB,CAAC;EAED,oBAAO/B,KAAA,CAAAsB,aAAA;IAAK,aAAWZ;EAAS,GAAEyB,UAAgB,CAAC;AACrD,CAAC;AAEDN,UAAU,CAACvB,SAAS,GAAAoB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGtB,SAAS;AAEhC,eAAeuB,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useCallback","map","classnames","ButtonLink","style","propTypes","buttonPropTypes","getIconProps","icon","undefined","faIcon","name","size","color","position","type","Button","props","dataName","disabled","label","onClick","linkType","customStyle","isCustomSkillMenu","styleButton","button","default","defaultLeft","dangerous","dangerousLeft","customSkillButton","handleOnClick","iconProps","createElement","className","hoverBackgroundColor","hoverColor","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 {IconType} from '../button-link/types';\nimport style from './style.css';\nimport propTypes, {ButtonMenuProps, ButtonProps, buttonPropTypes} from './types';\n\nconst getIconProps = (icon: IconType | undefined) => {\n  if (!icon) return undefined;\n  return icon.faIcon\n    ? {\n        faIcon: {\n          name: icon.faIcon.name,\n          size: icon.faIcon.size,\n          color: icon.faIcon.color\n        },\n        position: icon.position\n      }\n    : {\n        type: icon.type,\n        position: icon.position\n      };\n};\n\nconst Button = (props: ButtonProps) => {\n  const {\n    'data-name': dataName,\n    disabled,\n    label,\n    onClick,\n    type = 'default',\n    linkType,\n    icon,\n    customStyle,\n    isCustomSkillMenu\n  } = props;\n  const styleButton = classnames(\n    style.button,\n    type === 'default' && style.default,\n    type === 'defaultLeft' && style.defaultLeft,\n    type === 'dangerous' && style.dangerous,\n    type === 'dangerousLeft' && style.dangerousLeft,\n    disabled && style.disabled,\n    isCustomSkillMenu && style.customSkillButton\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const iconProps = useMemo(() => getIconProps(icon), [icon]);\n\n  return icon ? (\n    <ButtonLink\n      label={label}\n      type={linkType}\n      disabled={disabled}\n      onClick={handleOnClick}\n      data-name={dataName}\n      className={styleButton}\n      customStyle={{color: customStyle?.color}}\n      hoverBackgroundColor={customStyle?.hoverBackgroundColor}\n      hoverColor={customStyle?.color}\n      icon={iconProps}\n      isCustomSkillMenu={isCustomSkillMenu}\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, isCustomSkillMenu} = 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\n      data-name={dataName}\n      className={classnames({\n        [style.buttonMenuContainer]: isCustomSkillMenu\n      })}\n    >\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

@@ -59,3 +59,16 @@
   composes: dangerous;
   justify-content: flex-start;
 }
+
+.customSkillButton {
+  background-color: transparent;
+  font-weight: 600;
+  width: 201px;
+  justify-content: flex-start;
+}
+
+.buttonMenuContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

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

@@ -1,10 +1,26 @@
 import PropTypes from 'prop-types';
+import { ButtonLinkProps, IconType } from '../button-link/types';
 export declare const buttonPropTypes: {
     'data-name': PropTypes.Requireable<string>;
     disabled: PropTypes.Requireable<boolean>;
     label: PropTypes.Validator<string>;
     onClick: PropTypes.Validator<(...args: any[]) => any>;
     type: PropTypes.Requireable<string>;
+    linkType: PropTypes.Requireable<string>;
+    icon: PropTypes.Requireable<PropTypes.InferProps<{
+        position: PropTypes.Validator<string>;
+        type: PropTypes.Requireable<string>;
+        faIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            size: PropTypes.Requireable<number>;
+            color: PropTypes.Requireable<string>;
+        }>>;
+    }>>;
+    customStyle: PropTypes.Requireable<PropTypes.InferProps<{
+        color: PropTypes.Requireable<string>;
+        hoverBackgroundColor: PropTypes.Requireable<string>;
+    }>>;
+    isCustomSkillMenu: PropTypes.Requireable<boolean>;
 };
 declare const propTypes: {
     buttons: PropTypes.Validator<(PropTypes.InferProps<{
@@ -13,21 +29,45 @@ declare const propTypes: {
         label: PropTypes.Validator<string>;
         onClick: PropTypes.Validator<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;
+        linkType: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<{
+            position: PropTypes.Validator<string>;
+            type: PropTypes.Requireable<string>;
+            faIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                size: PropTypes.Requireable<number>;
+                color: PropTypes.Requireable<string>;
+            }>>;
+        }>>;
+        customStyle: PropTypes.Requireable<PropTypes.InferProps<{
+            color: PropTypes.Requireable<string>;
+            hoverBackgroundColor: PropTypes.Requireable<string>;
+        }>>;
+        isCustomSkillMenu: PropTypes.Requireable<boolean>;
     }> | null | undefined)[]>;
     'data-name': PropTypes.Requireable<string>;
 };
 export default propTypes;
+declare type CustomStyleProps = {
+    color?: string;
+    hoverBackgroundColor?: string;
+};
 export declare type ButtonProps = {
     'data-name'?: string;
     disabled?: boolean;
     label: string;
     onClick: () => void;
     type?: 'default' | 'defaultLeft' | 'dangerous' | 'dangerousLeft';
+    linkType?: ButtonLinkProps['type'];
+    icon?: IconType;
+    customStyle?: CustomStyleProps;
+    isCustomSkillMenu?: boolean;
 };
 export declare type ButtonMenuProps = {
     buttons: ButtonProps[];
     'data-name'?: string;
     'aria-label'?: string;
+    isCustomSkillMenu?: boolean;
 };
 export declare type ButtonMenuPropsFixture = {
     props: 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;AAEnC,eAAO,MAAM,eAAe;;;;;;CAM3B,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;CAGd,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;CAClE,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,EAAC,MAAM,sBAAsB,CAAC;AAE/D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;CAqB3B,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAGd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,aAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,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,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC"}

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

@@ -4,7 +4,22 @@ export const buttonPropTypes = {
   disabled: PropTypes.bool,
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
-  type: PropTypes.oneOf(['default', 'defaultLeft', 'dangerous', 'dangerousLeft'])
+  type: PropTypes.oneOf(['default', 'defaultLeft', 'dangerous', 'dangerousLeft']),
+  linkType: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),
+  icon: PropTypes.shape({
+    position: PropTypes.oneOf(['right', 'left']).isRequired,
+    type: PropTypes.string,
+    faIcon: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      size: PropTypes.number,
+      color: PropTypes.string
+    })
+  }),
+  customStyle: PropTypes.shape({
+    color: PropTypes.string,
+    hoverBackgroundColor: PropTypes.string
+  }),
+  isCustomSkillMenu: PropTypes.bool
 };
 const propTypes = {
   buttons: PropTypes.arrayOf(PropTypes.shape(buttonPropTypes)).isRequired,

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PropTypes","buttonPropTypes","string","disabled","bool","label","isRequired","onClick","func","type","oneOf","propTypes","buttons","arrayOf","shape"],"sources":["../../../src/atom/button-menu/types.ts"],"sourcesContent":["import PropTypes from 'prop-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};\n\nconst propTypes = {\n  buttons: PropTypes.arrayOf(PropTypes.shape(buttonPropTypes)).isRequired,\n  'data-name': 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};\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;AAElC,OAAO,MAAMC,eAAe,GAAG;EAC7B,WAAW,EAAED,SAAS,CAACE,MAAM;EAC7BC,QAAQ,EAAEH,SAAS,CAACI,IAAI;EACxBC,KAAK,EAAEL,SAAS,CAACE,MAAM,CAACI,UAAU;EAClCC,OAAO,EAAEP,SAAS,CAACQ,IAAI,CAACF,UAAU;EAClCG,IAAI,EAAET,SAAS,CAACU,KAAK,CAAC,CAAC,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,CAAC;AAChF,CAAC;AAED,MAAMC,SAAS,GAAG;EAChBC,OAAO,EAAEZ,SAAS,CAACa,OAAO,CAACb,SAAS,CAACc,KAAK,CAACb,eAAe,CAAC,CAAC,CAACK,UAAU;EACvE,WAAW,EAAEN,SAAS,CAACE;AACzB,CAAC;AAED,eAAeS,SAAS","ignoreList":[]}
+{"version":3,"file":"types.js","names":["PropTypes","buttonPropTypes","string","disabled","bool","label","isRequired","onClick","func","type","oneOf","linkType","icon","shape","position","faIcon","name","size","number","color","customStyle","hoverBackgroundColor","isCustomSkillMenu","propTypes","buttons","arrayOf"],"sources":["../../../src/atom/button-menu/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {ButtonLinkProps, IconType} 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  linkType: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  icon: PropTypes.shape({\n    position: PropTypes.oneOf(['right', 'left']).isRequired,\n    type: PropTypes.string,\n    faIcon: PropTypes.shape({\n      name: PropTypes.string.isRequired,\n      size: PropTypes.number,\n      color: PropTypes.string\n    })\n  }),\n  customStyle: PropTypes.shape({\n    color: PropTypes.string,\n    hoverBackgroundColor: PropTypes.string\n  }),\n  isCustomSkillMenu: PropTypes.bool\n};\n\nconst propTypes = {\n  buttons: PropTypes.arrayOf(PropTypes.shape(buttonPropTypes)).isRequired,\n  'data-name': PropTypes.string\n};\n\nexport default propTypes;\n\ntype CustomStyleProps = {\n  color?: string;\n  hoverBackgroundColor?: string;\n};\n\nexport type ButtonProps = {\n  'data-name'?: string;\n  disabled?: boolean;\n  label: string;\n  onClick: () => void;\n  type?: 'default' | 'defaultLeft' | 'dangerous' | 'dangerousLeft';\n  linkType?: ButtonLinkProps['type'];\n  icon?: IconType;\n  customStyle?: CustomStyleProps;\n  isCustomSkillMenu?: boolean;\n};\n\nexport type ButtonMenuProps = {\n  buttons: ButtonProps[];\n  'data-name'?: string;\n  'aria-label'?: string;\n  isCustomSkillMenu?: boolean;\n};\n\nexport type ButtonMenuPropsFixture = {props: ButtonMenuProps};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAGlC,OAAO,MAAMC,eAAe,GAAG;EAC7B,WAAW,EAAED,SAAS,CAACE,MAAM;EAC7BC,QAAQ,EAAEH,SAAS,CAACI,IAAI;EACxBC,KAAK,EAAEL,SAAS,CAACE,MAAM,CAACI,UAAU;EAClCC,OAAO,EAAEP,SAAS,CAACQ,IAAI,CAACF,UAAU;EAClCG,IAAI,EAAET,SAAS,CAACU,KAAK,CAAC,CAAC,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC;EAC/EC,QAAQ,EAAEX,SAAS,CAACU,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;EACpFE,IAAI,EAAEZ,SAAS,CAACa,KAAK,CAAC;IACpBC,QAAQ,EAAEd,SAAS,CAACU,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAACJ,UAAU;IACvDG,IAAI,EAAET,SAAS,CAACE,MAAM;IACtBa,MAAM,EAAEf,SAAS,CAACa,KAAK,CAAC;MACtBG,IAAI,EAAEhB,SAAS,CAACE,MAAM,CAACI,UAAU;MACjCW,IAAI,EAAEjB,SAAS,CAACkB,MAAM;MACtBC,KAAK,EAAEnB,SAAS,CAACE;IACnB,CAAC;EACH,CAAC,CAAC;EACFkB,WAAW,EAAEpB,SAAS,CAACa,KAAK,CAAC;IAC3BM,KAAK,EAAEnB,SAAS,CAACE,MAAM;IACvBmB,oBAAoB,EAAErB,SAAS,CAACE;EAClC,CAAC,CAAC;EACFoB,iBAAiB,EAAEtB,SAAS,CAACI;AAC/B,CAAC;AAED,MAAMmB,SAAS,GAAG;EAChBC,OAAO,EAAExB,SAAS,CAACyB,OAAO,CAACzB,SAAS,CAACa,KAAK,CAACZ,eAAe,CAAC,CAAC,CAACK,UAAU;EACvE,WAAW,EAAEN,SAAS,CAACE;AACzB,CAAC;AAED,eAAeqB,SAAS","ignoreList":[]}

package/es/atom/tag/style.css

@@ -1,9 +1,13 @@
 @value colors: "../../variables/colors.css";
 @value white from colors;
+@value cm_yellow_100 from colors;
 @value cm_yellow_200 from colors;
+@value cm_yellow_300 from colors;
 @value cm_positive_100 from colors;
+@value cm_positive_300 from colors;
 @value cm_negative_100 from colors;
 @value cm_orange_700 from colors;
+@value cm_orange_800 from colors;
 @value black from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_500 from colors;
@@ -43,14 +47,14 @@
 
 .progress {
   composes: tag;
-  background-color: color(cm_yellow_200 a(15%));
-  color: cm_yellow_200;
+  background-color: color(cm_yellow_100 a(25%));
+  color: cm_yellow_300;
 }
 
 .success {
   composes: tag;
-  background-color: color(cm_positive_100 a(15%));
-  color: cm_positive_100;
+  background-color: color(cm_positive_100 a(20%));
+  color: cm_positive_300;
 }
 
 .failure {
@@ -61,8 +65,8 @@
 
 .warning {
   composes: tag;
-  background-color: color(cm_orange_700 a(15%));
-  color: cm_orange_700;
+  background-color: color(cm_orange_700 a(18%));
+  color: cm_orange_800;
 }
 
 .content {

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

@@ -12,10 +12,26 @@ declare const BulletPointMenuButton: {
             label: import("prop-types").Validator<string>;
             onClick: import("prop-types").Validator<(...args: any[]) => any>;
             type: import("prop-types").Requireable<string>;
+            linkType: import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                position: import("prop-types").Validator<string>;
+                type: import("prop-types").Requireable<string>;
+                faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    name: import("prop-types").Validator<string>;
+                    size: import("prop-types").Requireable<number>;
+                    color: import("prop-types").Requireable<string>;
+                }>>;
+            }>>;
+            customStyle: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+                hoverBackgroundColor: import("prop-types").Requireable<string>;
+            }>>;
+            isCustomSkillMenu: import("prop-types").Requireable<boolean>;
         }> | null | undefined)[]>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         menuButtonClassName: import("prop-types").Requireable<string>;
         isBulkMenu: import("prop-types").Requireable<boolean>;
+        isCustomSkillMenu: import("prop-types").Requireable<boolean>;
     };
 };
 export default BulletPointMenuButton;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D/D,CAAC;AAIF,eAAe,qBAAqB,CAAC"}

package/es/molecule/bullet-point-menu-button/index.js

@@ -13,7 +13,8 @@ const BulletPointMenuButton = props => {
     onClick = _noop,
     buttons,
     menuButtonClassName,
-    isBulkMenu
+    isBulkMenu,
+    isCustomSkillMenu
   } = props;
   const [visible, setVisible] = useState(false);
   const handleOnClick = useCallback(() => {
@@ -29,10 +30,11 @@ const BulletPointMenuButton = props => {
   }, []);
   const menuProps = {
     'data-name': 'button-menu',
-    buttons
+    buttons,
+    isCustomSkillMenu
   };
   const menu = /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.bulletPointMenu, isBulkMenu && style.bulkBulletPointMenu, visible && style.visible),
+    className: classnames(style.bulletPointMenu, isBulkMenu && style.bulkBulletPointMenu, visible && style.visible, isCustomSkillMenu && style.customSkillBulletPointMenu),
     "data-name": "menu-wrapper",
     "aria-label": menuAriaLabel
   }, /*#__PURE__*/React.createElement(ButtonMenu, menuProps));