@laerdal/life-react-components 5.0.0-dev.1 → 5.0.0-dev.2

package/dist/Button/Iconbutton.cjs

@@ -19,12 +19,12 @@ var _excluded = ["id", "variant", "shape", "action", "children", "useTransparent
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var getBorderRadius = function getBorderRadius(props) {
-  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
+var getBorderRadius = function getBorderRadius(borderRadius) {
+  return borderRadius ? "".concat(borderRadius, "px") : '4px';
 };
-var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
-  var radius = getBorderRadius(props);
-  switch (props.flatEdge) {
+var getBorderRadiusStyle = function getBorderRadiusStyle(flatEdge, borderRadius) {
+  var radius = getBorderRadius(borderRadius);
+  switch (flatEdge) {
     case 'left':
       return "0px ".concat(radius, " ").concat(radius, " 0px");
     case 'right':
@@ -37,21 +37,23 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
 var IconButtonContentStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 exports.IconButtonContentStyles = IconButtonContentStyles;
 var IconButtonStyled = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
-  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
-}, IconButtonContentStyles, getBorderRadiusStyle, function (props) {
-  return props.unsetIconSize ? 'unset' : '24px';
+  return props.$borderRadius ? "".concat(props.$borderRadius, "px") : '4px';
+}, IconButtonContentStyles, function (props) {
+  return getBorderRadiusStyle(props.$flatEdge, props.$borderRadius);
+}, function (props) {
+  return props.$unsetIconSize ? 'unset' : '24px';
 }, function (props) {
-  return props.unsetIconSize ? 'unset' : '24px';
+  return props.$unsetIconSize ? 'unset' : '24px';
 }, function (props) {
-  return props.invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles;
+  return props.$invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles;
 });
 exports.IconButtonStyled = IconButtonStyled;
 var IconButtonStyledPrimary = (0, _styledComponents["default"])(IconButtonStyled)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('primary_500', props.theme);
+  return props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('primary_500', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.getColor('white', props.theme);
+  return props.$iconColor || _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.getColor('white', props.theme);
+  return props.$iconColor || _styles.COLORS.getColor('white', props.theme);
 }, IconButtonContentStyles, function (props) {
   return _styles.COLORS.getColor('primary_700', props.theme);
 }, IconButtonContentStyles, IconButtonContentStyles, function (props) {
@@ -69,11 +71,11 @@ var IconButtonStyledPrimary = (0, _styledComponents["default"])(IconButtonStyled
 });
 exports.IconButtonStyledPrimary = IconButtonStyledPrimary;
 var IconButtonStyledSecondary = (0, _styledComponents["default"])(IconButtonStyled)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme);
+  return props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.getColor('neutral_600', props.theme);
+  return props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.getColor('neutral_600', props.theme);
+  return props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme);
 }, IconButtonContentStyles, function (props) {
   return _styles.COLORS.getColor('primary_20', props.theme);
 }, IconButtonContentStyles, IconButtonContentStyles, function (props) {
@@ -83,7 +85,7 @@ var IconButtonStyledSecondary = (0, _styledComponents["default"])(IconButtonStyl
 }, IconButtonContentStyles, IconButtonContentStyles, function (props) {
   return _styles.COLORS.getColor('primary_800', props.theme);
 }, IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme);
+  return props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
   return _styles.COLORS.getColor('neutral_300', props.theme);
 }, function (props) {
@@ -123,21 +125,21 @@ var IconButton = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       id: id,
       type: type !== null && type !== void 0 ? type : 'button',
       "data-testid": dataTestId,
-      flatEdge: flatEdge,
+      $flatEdge: flatEdge,
       ref: ref,
       onClick: function onClick(event) {
         event.stopPropagation();
         action(event);
       },
       disabled: disabled,
-      useTransparentBackground: useTransparentBackground,
-      iconColor: iconColor,
-      unsetIconSize: unsetIconSize,
+      $useTransparentBackground: useTransparentBackground,
+      $iconColor: iconColor,
+      $unsetIconSize: unsetIconSize,
       tabIndex: tabIndex,
-      borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
+      $borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
       onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
       hidden: hidden,
-      invertFocus: invertFocus
+      $invertFocus: invertFocus
     }, rest), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContentStyles, {
         children: children

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","props","borderRadius","concat","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","styled","div","_taggedTemplateLiteral2","exports","IconButtonStyled","button","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","useTransparentBackground","COLORS","getColor","theme","iconColor","IconButtonStyledSecondary","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","disabled","tabIndex","type","hidden","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          useTransparentBackground={useTransparentBackground}\r\n          iconColor={iconColor}\r\n          unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","borderRadius","concat","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","styled","div","_taggedTemplateLiteral2","exports","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","$useTransparentBackground","COLORS","getColor","theme","$iconColor","IconButtonStyledSecondary","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (borderRadius?: number) => (borderRadius ? `${borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = ( flatEdge?: string, borderRadius?: number ) => {\r\n  const radius = getBorderRadius(borderRadius);\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<{$borderRadius?: number; $flatEdge?: string; $unsetIconSize?: boolean;\r\n              $invertFocus?: boolean; $useTransparentBackground?: boolean; $iconColor?: string;}>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.$borderRadius ? `${props.$borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.$invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          $flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          $useTransparentBackground={useTransparentBackground}\r\n          $iconColor={iconColor}\r\n          $unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          $borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          $invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/Iconbutton.d.ts

@@ -13,11 +13,32 @@ export interface HeaderItemProps {
     shouldNotInteract?: boolean;
 }
 export declare const IconButtonContentStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, HeaderItemProps>> & string;
-export declare const IconButtonStyledPrimary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof HeaderItemProps> & HeaderItemProps, "ref"> & {
+export declare const IconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $borderRadius?: number | undefined;
+    $flatEdge?: string | undefined;
+    $unsetIconSize?: boolean | undefined;
+    $invertFocus?: boolean | undefined;
+    $useTransparentBackground?: boolean | undefined;
+    $iconColor?: string | undefined;
+}>> & string;
+export declare const IconButtonStyledPrimary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$borderRadius" | "$flatEdge" | "$unsetIconSize" | "$invertFocus" | "$useTransparentBackground" | "$iconColor"> & {
+    $borderRadius?: number | undefined;
+    $flatEdge?: string | undefined;
+    $unsetIconSize?: boolean | undefined;
+    $invertFocus?: boolean | undefined;
+    $useTransparentBackground?: boolean | undefined;
+    $iconColor?: string | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, never>> & string;
-export declare const IconButtonStyledSecondary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof HeaderItemProps> & HeaderItemProps, "ref"> & {
+export declare const IconButtonStyledSecondary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$borderRadius" | "$flatEdge" | "$unsetIconSize" | "$invertFocus" | "$useTransparentBackground" | "$iconColor"> & {
+    $borderRadius?: number | undefined;
+    $flatEdge?: string | undefined;
+    $unsetIconSize?: boolean | undefined;
+    $invertFocus?: boolean | undefined;
+    $useTransparentBackground?: boolean | undefined;
+    $iconColor?: string | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, never>> & string;
 export interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {

package/dist/Button/Iconbutton.js

@@ -12,12 +12,12 @@ import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 import TooltipWrapper from "../Tooltips/TooltipWrapper";
 import { jsx as _jsx } from "react/jsx-runtime";
-var getBorderRadius = function getBorderRadius(props) {
-  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
+var getBorderRadius = function getBorderRadius(borderRadius) {
+  return borderRadius ? "".concat(borderRadius, "px") : '4px';
 };
-var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
-  var radius = getBorderRadius(props);
-  switch (props.flatEdge) {
+var getBorderRadiusStyle = function getBorderRadiusStyle(flatEdge, borderRadius) {
+  var radius = getBorderRadius(borderRadius);
+  switch (flatEdge) {
     case 'left':
       return "0px ".concat(radius, " ").concat(radius, " 0px");
     case 'right':
@@ -29,20 +29,22 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
 };
 export var IconButtonContentStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 export var IconButtonStyled = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
-  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
-}, IconButtonContentStyles, getBorderRadiusStyle, function (props) {
-  return props.unsetIconSize ? 'unset' : '24px';
+  return props.$borderRadius ? "".concat(props.$borderRadius, "px") : '4px';
+}, IconButtonContentStyles, function (props) {
+  return getBorderRadiusStyle(props.$flatEdge, props.$borderRadius);
+}, function (props) {
+  return props.$unsetIconSize ? 'unset' : '24px';
 }, function (props) {
-  return props.unsetIconSize ? 'unset' : '24px';
+  return props.$unsetIconSize ? 'unset' : '24px';
 }, function (props) {
-  return props.invertFocus ? invertedFocusStyles : focusStyles;
+  return props.$invertFocus ? invertedFocusStyles : focusStyles;
 });
 export var IconButtonStyledPrimary = styled(IconButtonStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme);
+  return props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.getColor('white', props.theme);
+  return props.$iconColor || COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.getColor('white', props.theme);
+  return props.$iconColor || COLORS.getColor('white', props.theme);
 }, IconButtonContentStyles, function (props) {
   return COLORS.getColor('primary_700', props.theme);
 }, IconButtonContentStyles, IconButtonContentStyles, function (props) {
@@ -59,11 +61,11 @@ export var IconButtonStyledPrimary = styled(IconButtonStyled)(_templateObject3 |
   return COLORS.getColor('white', props.theme);
 });
 export var IconButtonStyledSecondary = styled(IconButtonStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme);
+  return props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.getColor('neutral_600', props.theme);
+  return props.$iconColor || COLORS.getColor('neutral_600', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.getColor('neutral_600', props.theme);
+  return props.$iconColor || COLORS.getColor('neutral_600', props.theme);
 }, IconButtonContentStyles, function (props) {
   return COLORS.getColor('primary_20', props.theme);
 }, IconButtonContentStyles, IconButtonContentStyles, function (props) {
@@ -73,7 +75,7 @@ export var IconButtonStyledSecondary = styled(IconButtonStyled)(_templateObject4
 }, IconButtonContentStyles, IconButtonContentStyles, function (props) {
   return COLORS.getColor('primary_800', props.theme);
 }, IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme);
+  return props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme);
 }, function (props) {
   return COLORS.getColor('neutral_300', props.theme);
 }, function (props) {
@@ -112,21 +114,21 @@ export var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       id: id,
       type: type !== null && type !== void 0 ? type : 'button',
       "data-testid": dataTestId,
-      flatEdge: flatEdge,
+      $flatEdge: flatEdge,
       ref: ref,
       onClick: function onClick(event) {
         event.stopPropagation();
         action(event);
       },
       disabled: disabled,
-      useTransparentBackground: useTransparentBackground,
-      iconColor: iconColor,
-      unsetIconSize: unsetIconSize,
+      $useTransparentBackground: useTransparentBackground,
+      $iconColor: iconColor,
+      $unsetIconSize: unsetIconSize,
       tabIndex: tabIndex,
-      borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
+      $borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
       onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined,
       hidden: hidden,
-      invertFocus: invertFocus
+      $invertFocus: invertFocus
     }, rest), {}, {
       children: /*#__PURE__*/_jsx(IconButtonContentStyles, {
         children: children

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","props","borderRadius","concat","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","div","_templateObject","_taggedTemplateLiteral","IconButtonStyled","button","_templateObject2","unsetIconSize","invertFocus","IconButtonStyledPrimary","_templateObject3","useTransparentBackground","getColor","theme","iconColor","IconButtonStyledSecondary","_templateObject4","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","disabled","tabIndex","type","hidden","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          useTransparentBackground={useTransparentBackground}\r\n          iconColor={iconColor}\r\n          unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Iconbutton.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","borderRadius","concat","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","div","_templateObject","_taggedTemplateLiteral","IconButtonStyled","button","_templateObject2","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","IconButtonStyledPrimary","_templateObject3","$useTransparentBackground","getColor","theme","$iconColor","IconButtonStyledSecondary","_templateObject4","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (borderRadius?: number) => (borderRadius ? `${borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = ( flatEdge?: string, borderRadius?: number ) => {\r\n  const radius = getBorderRadius(borderRadius);\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<{$borderRadius?: number; $flatEdge?: string; $unsetIconSize?: boolean;\r\n              $invertFocus?: boolean; $useTransparentBackground?: boolean; $iconColor?: string;}>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.$borderRadius ? `${props.$borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.$invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          $flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          $useTransparentBackground={useTransparentBackground}\r\n          $iconColor={iconColor}\r\n          $unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          $borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          $invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardBottomSection.cjs

@@ -24,7 +24,7 @@ var CardBottomSectionNotesStyles = _styledComponents["default"].div(_templateObj
 });
 exports.CardBottomSectionNotesStyles = CardBottomSectionNotesStyles;
 var CardBottomSectionAuthorStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
-  return props.disabled ? "\n    color: ".concat(_index.COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+  return props.$disabled ? "\n    color: ".concat(_index.COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
 exports.CardBottomSectionAuthorStyles = CardBottomSectionAuthorStyles;
 var CardBottomSectionDivider = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), function (props) {
@@ -96,7 +96,7 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         })]
       })]
     }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionAuthorStyles, {
-      disabled: disabled,
+      $disabled: disabled,
       "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
         children: authorName

package/dist/Card/VerticalCard/CardBottomSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardBottomSectionProgressStyles","styled","div","_taggedTemplateLiteral2","exports","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","disabled","concat","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","_React$useState","useState","_React$useState2","_slicedToArray2","elRefs","setElRefs","useTheme","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","jsxs","children","jsx","LinearProgress","size","Size","Small","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.disabled ? `\r\n    color: ${COLORS.getColor('neutral_300', props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n                                              progressLevel,\r\n                                              progressMax,\r\n                                              progressType = LinearProgressType.Line,\r\n                                              noteLeft,\r\n                                              noteLeftIcon,\r\n                                              noteRight,\r\n                                              noteRightIcon,\r\n                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel}/>\r\n      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {actions && <CardBottomSectionButtonRowContainerStyles>\r\n        {actions.map((x, index) => (\r\n          <IconButton ref={elRefs[index]}\r\n                      key={index}\r\n                      disabled={disabled}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      action={(e) => {\r\n                        x.onClick();\r\n                      }}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AASA,IAAAG,OAAA,GAAAH,OAAA;AAAwC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,IAAAK,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAkCjC,IAAMW,+BAA+B,GAAGC,4BAAM,CAACC,GAAG,CAAA9B,eAAA,KAAAA,eAAA,OAAA+B,uBAAA,yCAExD;AAACC,OAAA,CAAAJ,+BAAA,GAAAA,+BAAA;AAEK,IAAMK,4BAA4B,GAAGJ,4BAAM,CAACC,GAAG,CAAA7B,gBAAA,KAAAA,gBAAA,OAAA8B,uBAAA,iJAG3C,UAAAG,KAAK;EAAA,OAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAI9D;AAACL,OAAA,CAAAC,4BAAA,GAAAA,4BAAA;AAEK,IAAMK,6BAA6B,GAAGT,4BAAM,CAACC,GAAG,CAAA5B,gBAAA,KAAAA,gBAAA,OAAA6B,uBAAA,kPAgBnD,UAAAG,KAAK;EAAA,OAAIA,KAAK,CAACK,QAAQ,mBAAAC,MAAA,CACdL,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,0EAKlD,EAAE;AAAA,EACP;AAACL,OAAA,CAAAM,6BAAA,GAAAA,6BAAA;AAEK,IAAMG,wBAAwB,GAAGZ,4BAAM,CAACC,GAAG,CAAA3B,gBAAA,KAAAA,gBAAA,OAAA4B,uBAAA,kHAE5B,UAAAG,KAAK;EAAA,OAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAGzE;AAACL,OAAA,CAAAS,wBAAA,GAAAA,wBAAA;AAEK,IAAMC,+BAA+B,GAAGb,4BAAM,CAACC,GAAG,CAAA1B,gBAAA,KAAAA,gBAAA,OAAA2B,uBAAA,6MAYxD;AAACC,OAAA,CAAAU,+BAAA,GAAAA,+BAAA;AAEK,IAAMC,gCAAgC,GAAGd,4BAAM,CAACC,GAAG,CAAAzB,gBAAA,KAAAA,gBAAA,OAAA0B,uBAAA,8MAYzD;AAACC,OAAA,CAAAW,gCAAA,GAAAA,gCAAA;AAEK,IAAMC,yCAAyC,GAAGf,4BAAM,CAACC,GAAG,CAAAxB,gBAAA,KAAAA,gBAAA,OAAAyB,uBAAA,kWAM7C,UAAAG,KAAK;EAAA,OAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAY7D,UAAAH,KAAK;EAAA,OAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAEhE;AAACL,OAAA,CAAAY,yCAAA,GAAAA,yCAAA;AAEK,IAAMC,0BAA0B,GAAGhB,4BAAM,CAACC,GAAG,CAAAvB,gBAAA,KAAAA,gBAAA,OAAAwB,uBAAA,kFAGnD;AAACC,OAAA,CAAAa,0BAAA,GAAAA,0BAAA;AAEF,IAAMC,iBAAiB,gBAAGrD,KAAK,CAACsD,UAAU,CAAC,UAAAC,IAAA,EAaCC,GAAoD,EAAK;EAAA,IAZvDC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IACbC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAAC,iBAAA,GAAAJ,IAAA,CACXK,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAGE,yBAAkB,CAACC,IAAI,GAAAH,iBAAA;IACtCI,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACRC,YAAY,GAAAT,IAAA,CAAZS,YAAY;IACZC,SAAS,GAAAV,IAAA,CAATU,SAAS;IACTC,aAAa,GAAAX,IAAA,CAAbW,aAAa;IACbC,UAAU,GAAAZ,IAAA,CAAVY,UAAU;IACVC,IAAI,GAAAb,IAAA,CAAJa,IAAI;IACJC,OAAO,GAAAd,IAAA,CAAPc,OAAO;IACPvB,QAAQ,GAAAS,IAAA,CAART,QAAQ;EAIpD,IAAAwB,eAAA,GAA4BtE,KAAK,CAACuE,QAAQ,CAAuC,EAAE,CAAC;IAAAC,gBAAA,OAAAC,eAAA,aAAAH,eAAA;IAA7EI,MAAM,GAAAF,gBAAA;IAAEG,SAAS,GAAAH,gBAAA;EACxB,IAAM5B,KAAK,GAAG,IAAAgC,0BAAQ,EAAC,CAAC;EACxB,IAAMC,MAAM,GAAG,CAAAR,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEQ,MAAM,KAAI,CAAC;EAEnC7E,KAAK,CAAC8E,SAAS,CAAC,YAAM;IACpBH,SAAS,CAACI,KAAK,CAACF,MAAM,IAAI,CAAC,CAAC,CAACG,IAAI,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC;MAAA,oBAAMjF,KAAK,CAACkF,SAAS,CAAoB,CAAC;IAAA,EAAC,CAAC;EAC1F,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ7E,KAAK,CAACmF,mBAAmB,CAAC3B,GAAG,EAAE;IAAA,OAAMkB,MAAM;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEtD,IAAMU,oBAAoB,GAAG3B,aAAa,IAAI4B,SAAS,IAAItB,QAAQ,IAAIC,YAAY,IAAIC,SAAS,IAAIC,aAAa,IAAIC,UAAU;EAE/H,oBACE,IAAA7D,WAAA,CAAAgF,IAAA,EAAClC,0BAA0B;IAAC,eAAa,oBAAqB;IAAAmC,QAAA,GAC3DH,oBAAoB,iBAAI,IAAA9E,WAAA,CAAAkF,GAAA,EAACxC,wBAAwB,IAAC,CAAC,EACnDS,aAAa,IAAI4B,SAAS,iBAAI,IAAA/E,WAAA,CAAAkF,GAAA,EAACrD,+BAA+B;MAAAoD,QAAA,eAC7D,IAAAjF,WAAA,CAAAkF,GAAA,EAACpF,MAAA,CAAAqF,cAAc;QAACC,IAAI,EAAEC,WAAI,CAACC,KAAM;QACjBC,IAAI,EAAEjC,YAAa;QACnBkC,OAAO,EAAEC,4BAAqB,CAACC,MAAO;QACtCC,KAAK,EAAExC,aAAc;QACrByC,GAAG,EAAExC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAID;MAAc,CAAC;IAAC,CACrB,CAAC,EAEjC,CAACM,QAAQ,IAAIC,YAAY,IAAIC,SAAS,IAAIC,aAAa,kBAAK,IAAA5D,WAAA,CAAAgF,IAAA,EAAC9C,4BAA4B;MAAA+C,QAAA,GACvF,CAACxB,QAAQ,IAAIC,YAAY,kBACxB,IAAA1D,WAAA,CAAAgF,IAAA,EAACrC,+BAA+B;QAAAsC,QAAA,GAC7BvB,YAAY,eACb,IAAA1D,WAAA,CAAAkF,GAAA,EAACpF,MAAA,CAAA+F,YAAY;UAACC,KAAK,EAAE1D,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAE;UAACyD,SAAS,EAAEC,yBAAkB,CAACC,IAAK;UAAAhB,QAAA,EAAExB;QAAQ,CAAe,CAAC;MAAA,CAC1F,CAClC,EACA,CAACE,SAAS,IAAIC,aAAa,kBAC1B,IAAA5D,WAAA,CAAAgF,IAAA,EAACpC,gCAAgC;QAAAqC,QAAA,GAC9BrB,aAAa,eACd,IAAA5D,WAAA,CAAAkF,GAAA,EAACpF,MAAA,CAAA+F,YAAY;UAACC,KAAK,EAAE1D,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAE;UAACyD,SAAS,EAAEC,yBAAkB,CAACC,IAAK;UAAAhB,QAAA,EAAEtB;QAAS,CAAe,CAAC;MAAA,CAC1F,CACnC;IAAA,CAC2B,CAAC,EAE9B,CAACE,UAAU,IAAIC,IAAI,kBAAK,IAAA9D,WAAA,CAAAgF,IAAA,EAACzC,6BAA6B;MAACC,QAAQ,EAAEA,QAAS;MAAC,eAAa,2BAA4B;MAAAyC,QAAA,gBACnH,IAAAjF,WAAA,CAAAkF,GAAA,EAACpF,MAAA,CAAA+F,YAAY;QAAAZ,QAAA,EAAEpB;MAAU,CAAe,CAAC,EACxCC,IAAI;IAAA,CACwB,CAAC,EAE/BC,OAAO,iBAAI,IAAA/D,WAAA,CAAAkF,GAAA,EAACrC,yCAAyC;MAAAoC,QAAA,EACnDlB,OAAO,CAACY,GAAG,CAAC,UAACuB,CAAC,EAAEC,KAAK;QAAA,oBACpB,IAAAnG,WAAA,CAAAkF,GAAA,EAACnF,OAAA,CAAAqG,UAAU;UAAClD,GAAG,EAAEkB,MAAM,CAAC+B,KAAK,CAAE;UAEnB3D,QAAQ,EAAEA,QAAS;UACnBgD,OAAO,EAAC,WAAW;UACnBa,KAAK,EAAC,UAAU;UAChBC,MAAM,EAAE,SAAAA,OAAC5F,CAAC,EAAK;YACbwF,CAAC,CAACK,OAAO,CAAC,CAAC;UACb,CAAE;UAAAtB,QAAA,EACXiB,CAAC,CAACM;QAAI,GAPQL,KAQL,CAAC;MAAA,CACd;IAAC,CACuC,CAAC;EAAA,CAClB,CAAC;AAEjC,CAAC,CAAC;AAACpD,iBAAA,CAAA0D,SAAA;EAvMDtD,aAAa,EAAAuD,UAAA,YAAAC,MAAA;EAEbvD,WAAW,EAAAsD,UAAA,YAAAC,MAAA;EAKXlD,QAAQ,EAAAiD,UAAA,YAAAE,MAAA;EAERlD,YAAY,EAAAgD,UAAA,YAAAG,IAAA;EAEZlD,SAAS,EAAA+C,UAAA,YAAAE,MAAA;EAEThD,aAAa,EAAA8C,UAAA,YAAAG,IAAA;EAGbhD,UAAU,EAAA6C,UAAA,YAAAE,MAAA;EAEV7C,OAAO,EAAA2C,UAAA,YAAAI,OAAA,CAAAJ,UAAA,YAAAL,KAAA;IAxBPG,IAAI,EAAAE,UAAA,YAAAG,IAAA,CAAAE,UAAA;IACJR,OAAO,EAAAG,UAAA,YAAAM,IAAA,CAAAD;EAAA;EAyBPjD,IAAI,EAAA4C,UAAA,YAAAG,IAAA;EAEJrE,QAAQ,EAAAkE,UAAA,YAAAO;AAAA;AAAA,IAAAC,QAAA,GAmLKnE,iBAAiB;AAAAd,OAAA,cAAAiF,QAAA","ignoreList":[]}
+{"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardBottomSectionProgressStyles","styled","div","_taggedTemplateLiteral2","exports","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","concat","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","_React$useState","useState","_React$useState2","_slicedToArray2","elRefs","setElRefs","useTheme","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","jsxs","children","jsx","LinearProgress","size","Size","Small","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.getColor('neutral_300', props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n                                              progressLevel,\r\n                                              progressMax,\r\n                                              progressType = LinearProgressType.Line,\r\n                                              noteLeft,\r\n                                              noteLeftIcon,\r\n                                              noteRight,\r\n                                              noteRightIcon,\r\n                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel}/>\r\n      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {actions && <CardBottomSectionButtonRowContainerStyles>\r\n        {actions.map((x, index) => (\r\n          <IconButton ref={elRefs[index]}\r\n                      key={index}\r\n                      disabled={disabled}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      action={(e) => {\r\n                        x.onClick();\r\n                      }}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardBottomSection.d.ts

@@ -31,7 +31,7 @@ export interface CardBottomSectionProps {
 export declare const CardBottomSectionProgressStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CardBottomSectionNotesStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CardBottomSectionAuthorStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    disabled?: boolean | undefined;
+    $disabled?: boolean | undefined;
 }>> & string;
 export declare const CardBottomSectionDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CardBottomSectionNoteLeftStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Card/VerticalCard/CardBottomSection.js

@@ -13,7 +13,7 @@ export var CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templ
   return COLORS.getColor('neutral_500', props.theme);
 });
 export var CardBottomSectionAuthorStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
-  return props.disabled ? "\n    color: ".concat(COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+  return props.$disabled ? "\n    color: ".concat(COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
 export var CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), function (props) {
   return COLORS.getColor('neutral_100', props.theme);
@@ -79,7 +79,7 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         })]
       })]
     }), (authorName || logo) && /*#__PURE__*/_jsxs(CardBottomSectionAuthorStyles, {
-      disabled: disabled,
+      $disabled: disabled,
       "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/_jsx(ComponentXXS, {
         children: authorName