@laerdal/life-react-components 1.7.0-dev.9.full → 1.7.0-dev.95

package/dist/Button/Iconbutton.cjs

@@ -43,7 +43,7 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
   }
 };
 
-var StyledIconButton = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  div {\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) {
+var StyledIconButton = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  div {\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  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n"])), function (props) {
   return props.hideOnLowWidth ? 'none' : 'block';
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
@@ -51,25 +51,27 @@ var StyledIconButton = _styledComponents.default.button(_templateObject || (_tem
   return props.unsetIconSize ? 'unset' : '24px';
 }, function (props) {
   return props.unsetIconSize ? 'unset' : '24px';
-}, function (props) {
-  return props.invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles;
 });
 
-var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), function (props) {
+var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ", " !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), function (props) {
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500;
 }, function (props) {
   return props.iconColor || _styles.COLORS.white;
 }, function (props) {
   return props.iconColor || _styles.COLORS.white;
-}, _styles.COLORS.primary_700, _styles.COLORS.white, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.white, _styles.COLORS.white);
+}, function (props) {
+  return props.focusBackgroundColor || _styles.COLORS.primary_700;
+}, _styles.COLORS.white, _styles.COLORS.primary_700, _styles.COLORS.white, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.white, _styles.COLORS.white);
 exports.StyledPrimaryIconButton = StyledPrimaryIconButton;
-var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), function (props) {
+var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ", ";\n      box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), function (props) {
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
 }, function (props) {
   return props.iconColor || _styles.COLORS.neutral_600;
 }, function (props) {
   return props.iconColor || _styles.COLORS.neutral_600;
-}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, function (props) {
+}, function (props) {
+  return props.focusBackgroundColor || 'transparent';
+}, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, function (props) {
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
 }, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 exports.StyledSecondaryIconButton = StyledSecondaryIconButton;
@@ -93,10 +95,18 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       focusBackgroundColor = _ref.focusBackgroundColor,
       type = _ref.type,
       hidden = _ref.hidden,
-      style = _ref.style,
-      invertFocus = _ref.invertFocus;
+      style = _ref.style;
+
+  var isPressingEnterOrSpace = function isPressingEnterOrSpace(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  }; // Let's render button
+
 
-  // Let's render button
   switch (variant) {
     case 'secondary':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSecondaryIconButton, {
@@ -108,6 +118,9 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           event.stopPropagation();
           action(event);
         },
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnterOrSpace(e) ? action() : null;
+        },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
         inMobileMenu: isInMobileMenu,
@@ -120,7 +133,6 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         onKeyPress: onKeyPress,
         hidden: hidden,
         style: style,
-        invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           children: children
@@ -139,6 +151,9 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           event.stopPropagation();
           action(event);
         },
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnterOrSpace(e) ? action() : null;
+        },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
         inMobileMenu: isInMobileMenu,
@@ -151,7 +166,6 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         onKeyPress: onKeyPress,
         hidden: hidden,
         style: style,
-        invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           children: children
@@ -176,8 +190,7 @@ IconButton.propTypes = {
   onKeyPress: _propTypes.default.func,
   focusBackgroundColor: _propTypes.default.string,
   children: _propTypes.default.node,
-  hidden: _propTypes.default.bool,
-  invertFocus: _propTypes.default.bool
+  hidden: _propTypes.default.bool
 };
 var _default = IconButton;
 exports.default = _default;

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n\n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  style?: CSSProperties | undefined;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden,\n  style,\n  invertFocus\n}: IconButtonProps, ref) => {\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); action(event);}}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","focusBackgroundColor","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","style","isPressingEnterOrSpace","e","key","stopPropagation","event","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n\n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || COLORS.primary_700} !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || 'transparent'};\n      box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  style?: CSSProperties | undefined;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden,\n  style\n}: IconButtonProps, ref) => {\n\n  const isPressingEnterOrSpace = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => isPressingEnterOrSpace(e) ? action() : null}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          style={style}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => isPressingEnterOrSpace(e) ? action() : null}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          style={style}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}

package/dist/Button/Iconbutton.d.ts

@@ -10,7 +10,6 @@ interface HeaderItemProps {
     shape?: string;
     flatEdge?: string;
     focusBackgroundColor?: string;
-    invertFocus?: boolean;
 }
 export declare const StyledPrimaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export declare const StyledSecondaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
@@ -34,7 +33,6 @@ export interface IconButtonProps {
     children?: React.ReactNode;
     hidden?: boolean;
     style?: CSSProperties | undefined;
-    invertFocus?: boolean;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/Button/Iconbutton.js

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3;
 
 import React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';
+import { BREAKPOINTS, COLORS } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -29,7 +29,7 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
   }
 };
 
-var StyledIconButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  div {\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) {
+var StyledIconButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  div {\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  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n"])), function (props) {
   return props.hideOnLowWidth ? 'none' : 'block';
 }, BREAKPOINTS.MEDIUM, function (props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
@@ -37,23 +37,25 @@ var StyledIconButton = styled.button(_templateObject || (_templateObject = _tagg
   return props.unsetIconSize ? 'unset' : '24px';
 }, function (props) {
   return props.unsetIconSize ? 'unset' : '24px';
-}, function (props) {
-  return props.invertFocus ? invertedFocusStyles : focusStyles;
 });
-export var StyledPrimaryIconButton = styled(StyledIconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), function (props) {
+export var StyledPrimaryIconButton = styled(StyledIconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ", " !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), function (props) {
   return props.useTransparentBackground ? 'transparent' : COLORS.primary_500;
 }, function (props) {
   return props.iconColor || COLORS.white;
 }, function (props) {
   return props.iconColor || COLORS.white;
-}, COLORS.primary_700, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.neutral_200, COLORS.white, COLORS.white);
-export var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), function (props) {
+}, function (props) {
+  return props.focusBackgroundColor || COLORS.primary_700;
+}, COLORS.white, COLORS.primary_700, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.neutral_200, COLORS.white, COLORS.white);
+export var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ", ";\n      box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), function (props) {
   return props.useTransparentBackground ? 'transparent' : COLORS.white;
 }, function (props) {
   return props.iconColor || COLORS.neutral_600;
 }, function (props) {
   return props.iconColor || COLORS.neutral_600;
-}, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, function (props) {
+}, function (props) {
+  return props.focusBackgroundColor || 'transparent';
+}, COLORS.primary_500, COLORS.neutral_600, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, function (props) {
   return props.useTransparentBackground ? 'transparent' : COLORS.white;
 }, COLORS.neutral_300, COLORS.neutral_300);
 var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -75,10 +77,18 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       focusBackgroundColor = _ref.focusBackgroundColor,
       type = _ref.type,
       hidden = _ref.hidden,
-      style = _ref.style,
-      invertFocus = _ref.invertFocus;
+      style = _ref.style;
+
+  var isPressingEnterOrSpace = function isPressingEnterOrSpace(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  }; // Let's render button
+
 
-  // Let's render button
   switch (variant) {
     case 'secondary':
       return /*#__PURE__*/_jsx(StyledSecondaryIconButton, {
@@ -90,6 +100,9 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           event.stopPropagation();
           action(event);
         },
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnterOrSpace(e) ? action() : null;
+        },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
         inMobileMenu: isInMobileMenu,
@@ -102,7 +115,6 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onKeyPress: onKeyPress,
         hidden: hidden,
         style: style,
-        invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor,
         children: /*#__PURE__*/_jsx("div", {
           children: children
@@ -121,6 +133,9 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           event.stopPropagation();
           action(event);
         },
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnterOrSpace(e) ? action() : null;
+        },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
         inMobileMenu: isInMobileMenu,
@@ -133,7 +148,6 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onKeyPress: onKeyPress,
         hidden: hidden,
         style: style,
-        invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor,
         children: /*#__PURE__*/_jsx("div", {
           children: children
@@ -157,8 +171,7 @@ IconButton.propTypes = {
   onKeyPress: _pt.func,
   focusBackgroundColor: _pt.string,
   children: _pt.node,
-  hidden: _pt.bool,
-  invertFocus: _pt.bool
+  hidden: _pt.bool
 };
 export default IconButton;
 //# sourceMappingURL=Iconbutton.js.map

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n\n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  style?: CSSProperties | undefined;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden,\n  style,\n  invertFocus\n}: IconButtonProps, ref) => {\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); action(event);}}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","focusBackgroundColor","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","style","isPressingEnterOrSpace","e","key","stopPropagation","event"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n\n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || COLORS.primary_700} !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || 'transparent'};\n      box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  style?: CSSProperties | undefined;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden,\n  style\n}: IconButtonProps, ref) => {\n\n  const isPressingEnterOrSpace = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => isPressingEnterOrSpace(e) ? action() : null}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          style={style}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => isPressingEnterOrSpace(e) ? action() : null}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          style={style}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/Card/Card.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Wrapper = exports.CardTopLevelContainer = void 0;
+exports.default = exports.InteractionType = exports.CardTopLevelContainer = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -29,7 +29,7 @@ var _ = require("..");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -39,45 +39,61 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n"])), _.COLORS.white);
+var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), _.COLORS.white, function (props) {
+  return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ".concat(_.COLORS.neutral_200, ";\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ").concat(_.COLORS.neutral_200, ";\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ").concat(_.COLORS.neutral_200, ";\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #2E7FA1;\n    }") : "";
+});
 
 exports.CardTopLevelContainer = CardTopLevelContainer;
+var InteractionType;
+exports.InteractionType = InteractionType;
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    ", " {\n      &:active, &.active-state {\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n        border: 1px solid ", ";\n      }\n\n      &:hover {\n        overflow: visible;\n        border: 1px solid ", ";\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), _.focusStyles, CardTopLevelContainer, _.COLORS.neutral_200, _.COLORS.neutral_200);
-
-exports.Wrapper = Wrapper;
+(function (InteractionType) {
+  InteractionType[InteractionType["None"] = 0] = "None";
+  InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
+  InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
+})(InteractionType || (exports.InteractionType = InteractionType = {}));
 
 var Card = function Card(_ref) {
-  var onCardClicked = _ref.onCardClicked,
+  var _ref$interactionType = _ref.interactionType,
+      interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
+      onCardClicked = _ref.onCardClicked,
       topSectionProps = _ref.topSectionProps,
       middleSectionProps = _ref.middleSectionProps,
       bottomSectionProps = _ref.bottomSectionProps,
       disabled = _ref.disabled;
-  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-    className: cls,
-    tabIndex: !!onCardClicked && !disabled ? 0 : -1,
-    onMouseDown: _.defaultOnMouseDownHandler,
-    onKeyDown: function onKeyDown(a) {
-      return a.key === 'Enter' && !disabled && onCardClicked && onCardClicked();
-    },
-    onClick: function onClick(e) {
-      return !disabled && onCardClicked && onCardClicked();
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
-      children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
-        disabled: disabled
-      })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
-        disabled: disabled
-      })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
-        disabled: disabled
-      }))]
-    })
+  var rootRef = React.useRef(null);
+
+  var onCardClick = function onCardClick() {
+    if (interactionType == InteractionType.Clickable) {
+      var _rootRef$current;
+
+      if (onCardClicked) onCardClicked();
+      (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
+    disabled: disabled,
+    ref: rootRef,
+    tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
+    interactionType: interactionType,
+    onClick: onCardClick,
+    children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    }))]
   });
 };
 
 Card.propTypes = {
-  onCardClicked: _propTypes.default.func,
+  interactionType: _propTypes.default.oneOf([0, 1, 2]).isRequired,
+  onCardClicked: _propTypes.default.func.isRequired,
   disabled: _propTypes.default.bool.isRequired
 };
 var _default = Card;

package/dist/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","Wrapper","focusStyles","neutral_200","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","cls","defaultOnMouseDownHandler","a","key","e"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,0UACZC,SAAOC,KADK,CAA3B;;;;AAeA,IAAMC,OAAO,GAAGJ,0BAAOC,GAAV,ilBAKdI,aALc,EAWdN,qBAXc,EAcQG,SAAOI,WAdf,EAmBQJ,SAAOI,WAnBf,CAAb;;;;AAuCP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAMkB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfC,QACe,QADfA,QACe;AAGjE,MAAMC,GAAG,aAAM,CAAC,CAACL,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEC,GAApB;AACS,IAAA,QAAQ,EAAE,CAAC,CAACL,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CADvD;AAES,IAAA,WAAW,EAAEE,2BAFtB;AAGS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACJ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAHrB;AAIS,IAAA,OAAO,EAAE,iBAAAS,CAAC;AAAA,aAAI,CAACL,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KAJnB;AAAA,2BAKE,sBAAC,qBAAD;AAAA,iBACGC,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,QAAA,QAAQ,EAAEG;AAA/C,SADtB,EAEGF,kBAAkB,iBACjB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SAHJ,EAIGD,kBAAkB,iBACjB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEC;AAArD,SALJ;AAAA;AALF,IAFF;AAiBD,CA5BD;;;AAPEJ,EAAAA,a;AACAI,EAAAA,Q;;eAoCaL,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {COLORS, defaultOnMouseDownHandler, focusStyles} from '..';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    ${CardTopLevelContainer} {\n      &:active, &.active-state {\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n        border: 1px solid ${COLORS.neutral_200};\n      }\n\n      &:hover {\n        overflow: visible;\n        border: 1px solid ${COLORS.neutral_200};\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled\n                                                  }: CardProps) => {\n\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n\n    <Wrapper className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}>\n      <CardTopLevelContainer>\n        {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled}/>}\n        {middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>}\n        {bottomSectionProps &&\n          <CardBottomSection {...bottomSectionProps} disabled={disabled}/>}\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","props","interactionType","InteractionType","Clickable","disabled","neutral_200","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","React","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,iVACZC,SAAOC,KADK,EAY9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,kIAKsBN,SAAOO,WAL7B,yJAYsBP,SAAOO,WAZ7B,sKAkBsBP,SAAOO,WAlB7B,wJADK;AAAA,CAZyB,CAA3B;;;IAuCKH,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMI,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfL,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACK,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfP,QACe,QADfA,QACe;AACf,MAAMQ,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAId,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGK,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEb,QAAjC;AAA2C,IAAA,GAAG,EAAEQ,OAAhD;AAAyD,IAAA,QAAQ,EAAEX,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEc,WAAlL;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEL,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGU,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEP,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAO,EAAAA,a;AACAJ,EAAAA,Q;;eAgCaE,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable && !props.disabled\n      ? `\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ${COLORS.neutral_200};\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #2E7FA1;\n    }`\n      : ``}\n`;\n\nexport enum InteractionType {\n  None,\n  Clickable,\n  Selectable,\n}\n\nexport interface CardProps {\n  interactionType: InteractionType;\n  onCardClicked: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n  interactionType = InteractionType.None,\n  onCardClicked,\n  topSectionProps,\n  middleSectionProps,\n  bottomSectionProps,\n  disabled\n}: CardProps) => {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const onCardClick = () => {\n    if (interactionType == InteractionType.Clickable) {\n      if(onCardClicked) onCardClicked();\n      rootRef.current?.blur();\n    }\n  };\n\n  return (\n    <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n      {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n    </CardTopLevelContainer>\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}

package/dist/Card/Card.d.ts

@@ -2,10 +2,18 @@ import * as React from 'react';
 import { CardTopSectionProps } from './CardTopSection';
 import { CardMiddleSectionProps } from './CardMiddleSection';
 import { CardBottomSectionProps } from './CardBottomSection';
-export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {
+    interactionType: InteractionType;
+    disabled: boolean;
+}, never>;
+export declare enum InteractionType {
+    None = 0,
+    Clickable = 1,
+    Selectable = 2
+}
 export interface CardProps {
-    onCardClicked?: () => {};
+    interactionType: InteractionType;
+    onCardClicked: () => {};
     disabled: boolean;
     topSectionProps?: CardTopSectionProps;
     middleSectionProps?: CardMiddleSectionProps;