@laerdal/life-react-components 1.5.1-dev.8.full → 1.6.0

package/dist/Button/Iconbutton.cjs

@@ -53,27 +53,27 @@ var StyledIconButton = _styledComponents.default.button(_templateObject || (_tem
   return props.unsetIconSize ? 'unset' : '24px';
 });
 
-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  &: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"])), 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) {
+}, function (props) {
   return props.focusBackgroundColor || _styles.COLORS.primary_700;
-}, _styles.COLORS.white);
+}, _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  &: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  &: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"])), 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) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
-}, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, function (props) {
+}, function (props) {
   return props.focusBackgroundColor || 'transparent';
-}, _styles.COLORS.primary_500, _styles.COLORS.neutral_600);
+}, _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;
 
 var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
@@ -96,9 +96,8 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       type = _ref.type,
       hidden = _ref.hidden;
 
-  var isPressingEnter = function isPressingEnter(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
+  var isPressingEnterOrSpace = function isPressingEnterOrSpace(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
       e.stopPropagation();
       return true;
     }
@@ -119,7 +118,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           action(event);
         },
         onKeyDown: function onKeyDown(e) {
-          return isPressingEnter(e) ? action() : null;
+          return isPressingEnterOrSpace(e) ? action() : null;
         },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
@@ -151,7 +150,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           action(event);
         },
         onKeyDown: function onKeyDown(e) {
-          return isPressingEnter(e) ? action() : null;
+          return isPressingEnterOrSpace(e) ? action() : null;
         },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,

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","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","focusBackgroundColor","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","isPressingEnter","e","key","preventDefault","stopPropagation","event","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } 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  &: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  &: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`;\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  &: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  &: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\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}\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}: IconButtonProps, ref) => {\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\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) => (isPressingEnter(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          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) => (isPressingEnter(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          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","isPressingEnterOrSpace","e","key","stopPropagation","event","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } 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}\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}: 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          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          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}

package/dist/Button/Iconbutton.js

@@ -38,26 +38,26 @@ var StyledIconButton = styled.button(_templateObject || (_templateObject = _tagg
 }, function (props) {
   return props.unsetIconSize ? 'unset' : '24px';
 });
-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  &: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"])), 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, function (props) {
+}, function (props) {
   return props.focusBackgroundColor || COLORS.primary_700;
-}, 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  &: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  &: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"])), function (props) {
+}, 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) {
-  return props.useTransparentBackground ? 'transparent' : COLORS.white;
-}, COLORS.neutral_300, COLORS.neutral_300, function (props) {
+}, function (props) {
   return props.focusBackgroundColor || 'transparent';
-}, COLORS.primary_500, COLORS.neutral_600);
+}, 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) {
   var id = _ref.id,
       variant = _ref.variant,
@@ -78,9 +78,8 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       type = _ref.type,
       hidden = _ref.hidden;
 
-  var isPressingEnter = function isPressingEnter(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
+  var isPressingEnterOrSpace = function isPressingEnterOrSpace(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
       e.stopPropagation();
       return true;
     }
@@ -101,7 +100,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           action(event);
         },
         onKeyDown: function onKeyDown(e) {
-          return isPressingEnter(e) ? action() : null;
+          return isPressingEnterOrSpace(e) ? action() : null;
         },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
@@ -133,7 +132,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           action(event);
         },
         onKeyDown: function onKeyDown(e) {
-          return isPressingEnter(e) ? action() : null;
+          return isPressingEnterOrSpace(e) ? action() : null;
         },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"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","primary_700","primary_800","neutral_200","focusBackgroundColor","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","isPressingEnter","e","key","preventDefault","stopPropagation","event"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } 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  &: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  &: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`;\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  &: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  &: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\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}\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}: IconButtonProps, ref) => {\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\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) => (isPressingEnter(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          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) => (isPressingEnter(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          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","isPressingEnterOrSpace","e","key","stopPropagation","event"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } 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}\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}: 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          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          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/Card/Card.cjs

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InteractionType = exports.CardTopLevelContainer = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
+
+var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
+
+var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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  ", "\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;
+
+(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 _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 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 = {
+  interactionType: _propTypes.default.oneOf([0, 1, 2]).isRequired,
+  onCardClicked: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool.isRequired
+};
+var _default = Card;
+exports.default = _default;
+//# sourceMappingURL=Card.cjs.map

package/dist/Card/Card.cjs.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,23 @@
+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, {
+    interactionType: InteractionType;
+    disabled: boolean;
+}, never>;
+export declare enum InteractionType {
+    None = 0,
+    Clickable = 1,
+    Selectable = 2
+}
+export interface CardProps {
+    interactionType: InteractionType;
+    onCardClicked: () => {};
+    disabled: boolean;
+    topSectionProps?: CardTopSectionProps;
+    middleSectionProps?: CardMiddleSectionProps;
+    bottomSectionProps?: CardBottomSectionProps;
+}
+declare const Card: React.FunctionComponent<CardProps>;
+export default Card;

package/dist/Card/Card.js

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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) { _defineProperty(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; }
+
+import * as React from 'react';
+import styled from 'styled-components';
+import CardTopSection from './CardTopSection';
+import CardMiddleSection from './CardMiddleSection';
+import CardBottomSection from './CardBottomSection';
+import { COLORS } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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    }") : "";
+});
+export var InteractionType;
+
+(function (InteractionType) {
+  InteractionType[InteractionType["None"] = 0] = "None";
+  InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
+  InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
+})(InteractionType || (InteractionType = {}));
+
+var Card = function Card(_ref) {
+  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 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__*/_jsxs(CardTopLevelContainer, {
+    disabled: disabled,
+    ref: rootRef,
+    tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
+    interactionType: interactionType,
+    onClick: onCardClick,
+    children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    }))]
+  });
+};
+
+Card.propTypes = {
+  interactionType: _pt.oneOf([0, 1, 2]).isRequired,
+  onCardClicked: _pt.func.isRequired,
+  disabled: _pt.bool.isRequired
+};
+export default Card;
+//# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","props","interactionType","InteractionType","Clickable","disabled","neutral_200","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAoD,kBAApD;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,SAASC,MAAT,QAAiD,IAAjD;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACM,GAAV,mUACZF,MAAM,CAACG,KADK,EAY9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,kIAKsBR,MAAM,CAACS,WAL7B,yJAYsBT,MAAM,CAACS,WAZ7B,sKAkBsBT,MAAM,CAACS,WAlB7B,wJADK;AAAA,CAZyB,CAA3B;AAuCP,WAAYH,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,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,GAAGrB,KAAK,CAACsB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGK,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,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,EAAEa,WAAlL;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEL,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGU,kBAAkB,iBAAI,KAAC,iBAAD,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;;AAgCF,eAAeE,IAAf","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.js"}