@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/Button/Iconbutton.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["id", "variant", "shape", "action", "children", "useTransparentBackground", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick", "tooltip"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -12,23 +10,142 @@ import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 import TooltipWrapper from "../Tooltips/TooltipWrapper";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getBorderRadius = borderRadius => borderRadius ? "".concat(borderRadius, "px") : '4px';
+const getBorderRadius = borderRadius => borderRadius ? `${borderRadius}px` : '4px';
 const getBorderRadiusStyle = (flatEdge, borderRadius) => {
   const radius = getBorderRadius(borderRadius);
   switch (flatEdge) {
     case 'left':
-      return "0px ".concat(radius, " ").concat(radius, " 0px");
+      return `0px ${radius} ${radius} 0px`;
     case 'right':
-      return "".concat(radius, " 0px 0px ").concat(radius);
+      return `${radius} 0px 0px ${radius}`;
     case 'none':
     default:
-      return "".concat(radius);
+      return `${radius}`;
   }
 };
-export const IconButtonContentStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-export const IconButtonStyled = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), props => props.$borderRadius ? "".concat(props.$borderRadius, "px") : '4px', IconButtonContentStyles, props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius), props => props.$unsetIconSize ? 'unset' : '24px', props => props.$unsetIconSize ? 'unset' : '24px', props => props.$invertFocus ? invertedFocusStyles : focusStyles);
-export const IconButtonStyledPrimary = styled(IconButtonStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme), props => props.$iconColor || COLORS.getColor('white', props.theme), props => props.$iconColor || COLORS.getColor('white', props.theme), IconButtonContentStyles, props => COLORS.getColor('primary_700', props.theme), IconButtonContentStyles, IconButtonContentStyles, props => COLORS.getColor('white', props.theme), IconButtonContentStyles, props => COLORS.getColor('primary_800', props.theme), IconButtonContentStyles, IconButtonContentStyles, props => COLORS.getColor('white', props.theme), IconButtonContentStyles, props => COLORS.getColor('neutral_200', props.theme), props => COLORS.getColor('white', props.theme), props => COLORS.getColor('white', props.theme));
-export const IconButtonStyledSecondary = styled(IconButtonStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme), props => props.$iconColor || COLORS.getColor('neutral_600', props.theme), props => props.$iconColor || COLORS.getColor('neutral_600', props.theme), IconButtonContentStyles, props => COLORS.getColor('primary_20', props.theme), IconButtonContentStyles, IconButtonContentStyles, props => COLORS.getColor('primary_700', props.theme), IconButtonContentStyles, props => COLORS.getColor('primary_100', props.theme), IconButtonContentStyles, IconButtonContentStyles, props => COLORS.getColor('primary_800', props.theme), IconButtonContentStyles, props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+export const IconButtonContentStyles = styled.div``;
+export const IconButtonStyled = styled.button`
+  border-width: 0;
+  cursor: pointer;
+  height: 48px;
+  width: 48px;
+  background: transparent;
+  position: relative;
+  display: block;
+
+  border-radius: ${props => props.$borderRadius ? `${props.$borderRadius}px` : '4px'};
+  ${IconButtonContentStyles} {
+    height: 36px;
+    width: 36px;
+    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      height: ${props => props.$unsetIconSize ? 'unset' : '24px'};
+      width: ${props => props.$unsetIconSize ? 'unset' : '24px'};
+      padding: 0;
+    }
+  }
+  &:only-child {
+    margin: 0;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    ${props => props.$invertFocus ? invertedFocusStyles : focusStyles}
+  }
+`;
+export const IconButtonStyledPrimary = styled(IconButtonStyled)`
+  ${IconButtonContentStyles} {
+    background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme)};
+
+    svg {
+      fill: ${props => props.$iconColor || COLORS.getColor('white', props.theme)};
+      path {
+        fill: ${props => props.$iconColor || COLORS.getColor('white', props.theme)};
+      }
+    }
+  }
+  &:hover:not(:disabled),
+  &.hover-state {
+    ${IconButtonContentStyles} {
+      background-color: ${props => COLORS.getColor('primary_700', props.theme)};
+    }
+    ${IconButtonContentStyles} svg path,
+    ${IconButtonContentStyles} svg {
+      fill: ${props => COLORS.getColor('white', props.theme)};
+    }
+  }
+  &:active:not(:disabled),
+  &.active-state {
+    ${IconButtonContentStyles} {
+      background: ${props => COLORS.getColor('primary_800', props.theme)};
+    }
+    ${IconButtonContentStyles} svg path,
+    ${IconButtonContentStyles} svg {
+      fill: ${props => COLORS.getColor('white', props.theme)};
+    }
+  }
+  &:disabled {
+    ${IconButtonContentStyles} {
+      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};
+    }
+    svg {
+      path {
+        fill: ${props => COLORS.getColor('white', props.theme)};
+      }
+      fill: ${props => COLORS.getColor('white', props.theme)};
+    }
+  }
+`;
+export const IconButtonStyledSecondary = styled(IconButtonStyled)`
+  ${IconButtonContentStyles} {
+    background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme)};
+
+    svg {
+      fill: ${props => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};
+      path {
+        fill: ${props => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};
+      }
+    }
+  }
+
+
+  &:hover:not(:disabled) {
+    ${IconButtonContentStyles} {
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    }
+    ${IconButtonContentStyles} svg path,
+    ${IconButtonContentStyles} svg {
+      fill: ${props => COLORS.getColor('primary_700', props.theme)};
+    }
+  }
+  &:active:not(:disabled),
+  &.active-state {
+    ${IconButtonContentStyles} {
+      background: ${props => COLORS.getColor('primary_100', props.theme)};
+    }
+    ${IconButtonContentStyles} svg path,
+    ${IconButtonContentStyles} svg {
+      fill: ${props => COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+
+  &:disabled {
+    ${IconButtonContentStyles} {
+      background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme)};
+    }
+    svg {
+      path {
+        fill: ${props => COLORS.getColor('neutral_300', props.theme)};
+      }
+      fill: ${props => COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+`;
 export const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       id,
@@ -62,7 +179,7 @@ export const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     return /*#__PURE__*/_jsx(ButtonVariant, _objectSpread(_objectSpread({
       id: id,
-      type: type !== null && type !== void 0 ? type : 'button',
+      type: type ?? 'button',
       "data-testid": dataTestId,
       $flatEdge: flatEdge,
       ref: ref,

package/dist/Button/Iconbutton.js.map

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

package/dist/Button/index.d.ts

@@ -1,8 +1,8 @@
-export { default as IconButton } from './Iconbutton';
-export * from './Iconbutton';
-export { default as Button } from './Button';
-export * from './Button';
-export { default as BackButton } from './BackButton';
-export * from './BackButton';
-export { default as DualFunctionButton } from './DualFunctionButton';
-export * from './DualFunctionButton';
+export { default as IconButton } from './Iconbutton';
+export * from './Iconbutton';
+export { default as Button } from './Button';
+export * from './Button';
+export { default as BackButton } from './BackButton';
+export * from './BackButton';
+export { default as DualFunctionButton } from './DualFunctionButton';
+export * from './DualFunctionButton';

package/dist/Card/HorizontalCard/HorizontalCard.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.HorizontalCardContentContainer = exports.HorizontalCardContainer = exports.HorizontalCard = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../../styles");
@@ -17,11 +16,85 @@ var _HorizontalCardActions = require("./HorizontalCardActions");
 var _common = require("../../common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className", "dataTestId"];
-var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const HorizontalCardContentContainer = exports.HorizontalCardContentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), props => _styles.COLORS.getColor('white', props.theme));
-const HorizontalCardContainer = exports.HorizontalCardContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, props => _styles.COLORS.getColor('neutral_200', props.theme), HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, props => _styles.COLORS.getColor('primary_20', props.theme), HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, props => _styles.COLORS.getColor('primary_100', props.theme), HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L2, _styles.focusStyles, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, props => _styles.COLORS.getColor('neutral_100', props.theme));
+const HorizontalCardContentContainer = exports.HorizontalCardContentContainer = _styledComponents.default.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  border-radius: 8px;
+`;
+const HorizontalCardContainer = exports.HorizontalCardContainer = _styledComponents.default.div`
+  display: flex;
+  flex: 1;
+
+  &.outline {
+    ${HorizontalCardContentContainer} {
+      box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+    }
+  }
+
+  &.elevated {
+    ${HorizontalCardContentContainer} {
+      box-shadow: ${_styles.BOXSHADOWS.BOXSHADOW_L1};
+    }
+  }
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover:not(.action-within):not(.disabled) {
+      &.outline {
+        ${HorizontalCardContentContainer} {
+          background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+        }
+      }
+
+      &.elevated {
+        ${HorizontalCardContentContainer} {
+          box-shadow: ${_styles.BOXSHADOWS.BOXSHADOW_L3};
+        }
+      }
+    }
+
+    &:active:not(.action-within):not(.disabled) {
+      &.outline {
+        ${HorizontalCardContentContainer} {
+          background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+        }
+      }
+
+      &.elevated {
+        ${HorizontalCardContentContainer} {
+          box-shadow: ${_styles.BOXSHADOWS.BOXSHADOW_L2};
+        }
+      }
+    }
+
+    &:focus {
+      ${_styles.focusStyles}
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    &.elevated {
+      ${HorizontalCardContentContainer} {
+        box-shadow: ${_styles.BOXSHADOWS.BOXSHADOW_L1};
+      }
+    }
+
+    &.outline {
+      ${HorizontalCardContentContainer} {
+        box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+      }
+    }
+  }
+`;
 const HorizontalCard = _ref => {
   let {
       title,
@@ -41,7 +114,7 @@ const HorizontalCard = _ref => {
   const [actionsRefs, setActionsRefs] = _react.default.useState([]);
   const containerRef = _react.default.useRef(null);
   (0, _common.useActionWithin)(containerRef, actionsRefs);
-  const cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className || '');
+  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;
   const handleClick = () => {
     !disabled && action && action();
   };
@@ -68,7 +141,9 @@ const HorizontalCard = _ref => {
         tags: tags,
         progress: progress
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalCardActions.HorizontalCardActions, {
-        ref: instance => setActionsRefs(instance !== null && instance !== void 0 ? instance : []),
+        ref: instance => {
+          setActionsRefs(instance ?? []);
+        },
         actions: actions,
         disabled: disabled
       })]

package/dist/Card/HorizontalCard/HorizontalCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_HorizontalCardThumbnail","_HorizontalCardBody","_HorizontalCardActions","_common","_jsxRuntime","_excluded","_templateObject","_templateObject2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","HorizontalCardContentContainer","exports","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","HorizontalCardContainer","BOXSHADOWS","BOXSHADOW_L1","BOXSHADOW_L3","BOXSHADOW_L2","focusStyles","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","React","useState","containerRef","useRef","useActionWithin","cls","concat","handleClick","handleButtonPress","key","jsx","ref","tabIndex","onKeyDown","onClick","onMouseDown","defaultOnMouseDownHandler","children","jsxs","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","instance","_default"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  )\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalCard.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_HorizontalCardThumbnail","_HorizontalCardBody","_HorizontalCardActions","_common","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","HorizontalCardContentContainer","exports","styled","div","props","COLORS","getColor","theme","HorizontalCardContainer","BOXSHADOWS","BOXSHADOW_L1","BOXSHADOW_L3","BOXSHADOW_L2","focusStyles","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","React","useState","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","key","jsx","ref","tabIndex","onKeyDown","onClick","onMouseDown","defaultOnMouseDownHandler","children","jsxs","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","instance","_default"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCard.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-export declare const HorizontalCardContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HorizontalCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
-export default HorizontalCard;
+import React from 'react';
+import { HorizontalCardProps } from './types';
+export declare const HorizontalCardContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HorizontalCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
+export default HorizontalCard;

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 const _excluded = ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className", "dataTestId"];
-var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -13,8 +11,83 @@ import { HorizontalCardBody } from './HorizontalCardBody';
 import { HorizontalCardActions } from './HorizontalCardActions';
 import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const HorizontalCardContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), props => COLORS.getColor('white', props.theme));
-export const HorizontalCardContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, props => COLORS.getColor('neutral_200', props.theme), HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, props => COLORS.getColor('primary_20', props.theme), HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, props => COLORS.getColor('primary_100', props.theme), HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, props => COLORS.getColor('neutral_100', props.theme));
+export const HorizontalCardContentContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${props => COLORS.getColor('white', props.theme)};
+  border-radius: 8px;
+`;
+export const HorizontalCardContainer = styled.div`
+  display: flex;
+  flex: 1;
+
+  &.outline {
+    ${HorizontalCardContentContainer} {
+      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};
+    }
+  }
+
+  &.elevated {
+    ${HorizontalCardContentContainer} {
+      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};
+    }
+  }
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover:not(.action-within):not(.disabled) {
+      &.outline {
+        ${HorizontalCardContentContainer} {
+          background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+        }
+      }
+
+      &.elevated {
+        ${HorizontalCardContentContainer} {
+          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};
+        }
+      }
+    }
+
+    &:active:not(.action-within):not(.disabled) {
+      &.outline {
+        ${HorizontalCardContentContainer} {
+          background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+        }
+      }
+
+      &.elevated {
+        ${HorizontalCardContentContainer} {
+          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};
+        }
+      }
+    }
+
+    &:focus {
+      ${focusStyles}
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    &.elevated {
+      ${HorizontalCardContentContainer} {
+        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};
+      }
+    }
+
+    &.outline {
+      ${HorizontalCardContentContainer} {
+        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};
+      }
+    }
+  }
+`;
 export const HorizontalCard = _ref => {
   let {
       title,
@@ -34,7 +107,7 @@ export const HorizontalCard = _ref => {
   const [actionsRefs, setActionsRefs] = React.useState([]);
   const containerRef = React.useRef(null);
   useActionWithin(containerRef, actionsRefs);
-  const cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className || '');
+  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;
   const handleClick = () => {
     !disabled && action && action();
   };
@@ -61,7 +134,9 @@ export const HorizontalCard = _ref => {
         tags: tags,
         progress: progress
       }), /*#__PURE__*/_jsx(HorizontalCardActions, {
-        ref: instance => setActionsRefs(instance !== null && instance !== void 0 ? instance : []),
+        ref: instance => {
+          setActionsRefs(instance ?? []);
+        },
         actions: actions,
         disabled: disabled
       })]