@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/Button/Iconbutton.js

@@ -1,70 +1,127 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-import TooltipWrapper from "../Tooltips/TooltipWrapper";
-var getBorderRadius = function (props) { return (props.borderRadius ? "".concat(props.borderRadius, "px") : '4px'); };
-var getBorderRadiusStyle = function (props) {
-    var radius = getBorderRadius(props);
-    switch (props.flatEdge) {
-        case 'left':
-            return "0px ".concat(radius, " ").concat(radius, " 0px");
-        case 'right':
-            return "".concat(radius, " 0px 0px ").concat(radius);
-        case 'none':
-        default:
-            return "".concat(radius);
-    }
-};
-export var IconButtonContentStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var IconButtonStyled = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) { return (props.borderRadius ? "".concat(props.borderRadius, "px") : '4px'); }, IconButtonContentStyles, getBorderRadiusStyle, function (props) { return (props.unsetIconSize ? 'unset' : '24px'); }, function (props) { return (props.unsetIconSize ? 'unset' : '24px'); }, function (props) { return (props.invertFocus ? invertedFocusStyles : focusStyles); });
-export var IconButtonStyledPrimary = styled(IconButtonStyled)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.primary_500); }, function (props) { return props.iconColor || COLORS.white; }, function (props) { return props.iconColor || COLORS.white; }, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.neutral_200, COLORS.white, COLORS.white);
-export var IconButtonStyledSecondary = styled(IconButtonStyled)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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"], ["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.white); }, function (props) { return props.iconColor || COLORS.neutral_600; }, function (props) { return props.iconColor || COLORS.neutral_600; }, IconButtonContentStyles, COLORS.primary_20, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, COLORS.primary_100, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.white); }, COLORS.neutral_300, COLORS.neutral_300);
-export var IconButton = React.forwardRef(function (_a, ref) {
-    var id = _a.id, variant = _a.variant, shape = _a.shape, action = _a.action, children = _a.children, useTransparentBackground = _a.useTransparentBackground, disabled = _a.disabled, iconColor = _a.iconColor, unsetIconSize = _a.unsetIconSize, tabIndex = _a.tabIndex, flatEdge = _a.flatEdge, borderRadius = _a.borderRadius, type = _a.type, hidden = _a.hidden, invertFocus = _a.invertFocus, dataTestId = _a.dataTestId, focusOnClick = _a.focusOnClick, tooltip = _a.tooltip, rest = __rest(_a, ["id", "variant", "shape", "action", "children", "useTransparentBackground", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick", "tooltip"]);
-    var render = function () {
-        // Let's render button
-        var ButtonVariant = IconButtonStyledPrimary;
-        switch (variant) {
-            case 'secondary':
-                ButtonVariant = IconButtonStyledSecondary;
-                break;
-        }
-        return React.createElement(ButtonVariant, __assign({ id: id, type: type !== null && type !== void 0 ? type : 'button', "data-testid": dataTestId, flatEdge: flatEdge, ref: ref, onClick: function (event) {
-                event.stopPropagation();
-                action(event);
-            }, disabled: disabled, useTransparentBackground: useTransparentBackground, iconColor: iconColor, unsetIconSize: unsetIconSize, tabIndex: tabIndex, borderRadius: borderRadius || shape === 'circular' ? 18 : 0, onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined, hidden: hidden, invertFocus: invertFocus }, rest),
-            React.createElement(IconButtonContentStyles, null, children));
-    };
-    return !tooltip
-        ? render()
-        : (React.createElement(TooltipWrapper, __assign({}, tooltip), render()));
-});
-export default IconButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+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";
+var _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';
+import styled from 'styled-components';
+import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+import TooltipWrapper from "../Tooltips/TooltipWrapper";
+import { jsx as _jsx } from "react/jsx-runtime";
+var getBorderRadius = function getBorderRadius(props) {
+  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
+};
+var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
+  var radius = getBorderRadius(props);
+  switch (props.flatEdge) {
+    case 'left':
+      return "0px ".concat(radius, " ").concat(radius, " 0px");
+    case 'right':
+      return "".concat(radius, " 0px 0px ").concat(radius);
+    case 'none':
+    default:
+      return "".concat(radius);
+  }
+};
+export var IconButtonContentStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+export var IconButtonStyled = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
+  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
+}, IconButtonContentStyles, getBorderRadiusStyle, function (props) {
+  return props.unsetIconSize ? 'unset' : '24px';
+}, function (props) {
+  return props.unsetIconSize ? 'unset' : '24px';
+}, function (props) {
+  return props.invertFocus ? invertedFocusStyles : focusStyles;
+});
+export var IconButtonStyledPrimary = styled(IconButtonStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.primary_500;
+}, function (props) {
+  return props.iconColor || COLORS.white;
+}, function (props) {
+  return props.iconColor || COLORS.white;
+}, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.neutral_200, COLORS.white, COLORS.white);
+export var IconButtonStyledSecondary = styled(IconButtonStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.white;
+}, function (props) {
+  return props.iconColor || COLORS.neutral_600;
+}, function (props) {
+  return props.iconColor || COLORS.neutral_600;
+}, IconButtonContentStyles, COLORS.primary_20, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, COLORS.primary_100, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.white;
+}, COLORS.neutral_300, COLORS.neutral_300);
+export var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    variant = _ref.variant,
+    shape = _ref.shape,
+    action = _ref.action,
+    children = _ref.children,
+    useTransparentBackground = _ref.useTransparentBackground,
+    disabled = _ref.disabled,
+    iconColor = _ref.iconColor,
+    unsetIconSize = _ref.unsetIconSize,
+    tabIndex = _ref.tabIndex,
+    flatEdge = _ref.flatEdge,
+    borderRadius = _ref.borderRadius,
+    type = _ref.type,
+    hidden = _ref.hidden,
+    invertFocus = _ref.invertFocus,
+    dataTestId = _ref.dataTestId,
+    focusOnClick = _ref.focusOnClick,
+    tooltip = _ref.tooltip,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var render = function render() {
+    // Let's render button
+
+    var ButtonVariant = IconButtonStyledPrimary;
+    switch (variant) {
+      case 'secondary':
+        ButtonVariant = IconButtonStyledSecondary;
+        break;
+    }
+    return /*#__PURE__*/_jsx(ButtonVariant, _objectSpread(_objectSpread({
+      id: id,
+      type: type !== null && type !== void 0 ? type : 'button',
+      "data-testid": dataTestId,
+      flatEdge: flatEdge,
+      ref: ref,
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        action(event);
+      },
+      disabled: disabled,
+      useTransparentBackground: useTransparentBackground,
+      iconColor: iconColor,
+      unsetIconSize: unsetIconSize,
+      tabIndex: tabIndex,
+      borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
+      onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined,
+      hidden: hidden,
+      invertFocus: invertFocus
+    }, rest), {}, {
+      children: /*#__PURE__*/_jsx(IconButtonContentStyles, {
+        children: children
+      })
+    }));
+  };
+  return !tooltip ? render() : /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltip), {}, {
+    children: render()
+  }));
+});
+IconButton.propTypes = {
+  variant: _pt.oneOf(['primary', 'secondary']),
+  shape: _pt.oneOf(['square', 'circular']),
+  action: _pt.func.isRequired,
+  useTransparentBackground: _pt.bool,
+  iconColor: _pt.string,
+  unsetIconSize: _pt.bool,
+  borderRadius: _pt.number,
+  children: _pt.node,
+  invertFocus: _pt.bool,
+  focusOnClick: _pt.bool
+};
+export default IconButton;
+//# sourceMappingURL=Iconbutton.js.map

package/dist/Button/index.js

@@ -1,8 +1,9 @@
-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';
+//# sourceMappingURL=index.js.map

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -1,55 +1,78 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { BOXSHADOWS, COLORS, focusStyles } from '../../styles';
-import { HorizontalCardThumbnail } from './HorizontalCardThumbnail';
-import { HorizontalCardBody } from './HorizontalCardBody';
-import { HorizontalCardActions } from './HorizontalCardActions';
-import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
-export var HorizontalCardContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), COLORS.white);
-export var HorizontalCardContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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, COLORS.neutral_200, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.primary_20, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, COLORS.primary_100, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.neutral_100);
-export var HorizontalCard = function (_a) {
-    var title = _a.title, description = _a.description, tags = _a.tags, progress = _a.progress, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'outline' : _b, image = _a.image, action = _a.action, actions = _a.actions, disabled = _a.disabled, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className", "dataTestId"]);
-    var _c = React.useState([]), actionsRefs = _c[0], setActionsRefs = _c[1];
-    var containerRef = React.useRef(null);
-    useActionWithin(containerRef, actionsRefs);
-    var cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className || '');
-    var handleClick = function () {
-        !disabled && action && action();
-    };
-    var handleButtonPress = function (e) {
-        e.key === 'Enter' && handleClick();
-    };
-    return (React.createElement(HorizontalCardContainer, { ref: containerRef, tabIndex: action && !disabled ? 0 : -1, className: cls, onKeyDown: handleButtonPress, onClick: handleClick, onMouseDown: defaultOnMouseDownHandler },
-        React.createElement(HorizontalCardContentContainer, __assign({ onMouseDown: defaultOnMouseDownHandler, "data-testid": dataTestId }, rest),
-            React.createElement(HorizontalCardThumbnail, { image: image, icon: icon }),
-            React.createElement(HorizontalCardBody, { title: title, description: description, tags: tags, progress: progress }),
-            React.createElement(HorizontalCardActions, { ref: function (instance) { return setActionsRefs(instance !== null && instance !== void 0 ? instance : []); }, actions: actions, disabled: disabled }))));
-};
-export default HorizontalCard;
-var templateObject_1, templateObject_2;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _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';
+import styled from 'styled-components';
+import { BOXSHADOWS, COLORS, focusStyles } from '../../styles';
+import { HorizontalCardThumbnail } from './HorizontalCardThumbnail';
+import { HorizontalCardBody } from './HorizontalCardBody';
+import { HorizontalCardActions } from './HorizontalCardActions';
+import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var 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"])), COLORS.white);
+export var 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, COLORS.neutral_200, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.primary_20, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, COLORS.primary_100, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.neutral_100);
+export var HorizontalCard = function HorizontalCard(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    tags = _ref.tags,
+    progress = _ref.progress,
+    icon = _ref.icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
+    image = _ref.image,
+    action = _ref.action,
+    actions = _ref.actions,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    dataTestId = _ref.dataTestId,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    actionsRefs = _React$useState2[0],
+    setActionsRefs = _React$useState2[1];
+  var containerRef = React.useRef(null);
+  useActionWithin(containerRef, actionsRefs);
+  var cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className || '');
+  var handleClick = function handleClick() {
+    !disabled && action && action();
+  };
+  var handleButtonPress = function handleButtonPress(e) {
+    e.key === 'Enter' && handleClick();
+  };
+  return /*#__PURE__*/_jsx(HorizontalCardContainer, {
+    ref: containerRef,
+    tabIndex: action && !disabled ? 0 : -1,
+    className: cls,
+    onKeyDown: handleButtonPress,
+    onClick: handleClick,
+    onMouseDown: defaultOnMouseDownHandler,
+    children: /*#__PURE__*/_jsxs(HorizontalCardContentContainer, _objectSpread(_objectSpread({
+      onMouseDown: defaultOnMouseDownHandler,
+      "data-testid": dataTestId
+    }, rest), {}, {
+      children: [/*#__PURE__*/_jsx(HorizontalCardThumbnail, {
+        image: image,
+        icon: icon
+      }), /*#__PURE__*/_jsx(HorizontalCardBody, {
+        title: title,
+        description: description,
+        tags: tags,
+        progress: progress
+      }), /*#__PURE__*/_jsx(HorizontalCardActions, {
+        ref: function ref(instance) {
+          return setActionsRefs(instance !== null && instance !== void 0 ? instance : []);
+        },
+        actions: actions,
+        disabled: disabled
+      })]
+    }))
+  });
+};
+export default HorizontalCard;
+//# sourceMappingURL=HorizontalCard.js.map

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
-declare type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
+type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
 export declare const HorizontalCardActions: React.ForwardRefExoticComponent<Props & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
 export {};

package/dist/Card/HorizontalCard/HorizontalCardActions.js

@@ -1,39 +1,92 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import { IconButton } from '../../Button';
-import { ToggleButton } from '../../Toggles';
-import { DropdownButton } from '../../Dropdown';
-import styled from 'styled-components';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var HorizontalCardActions = React.forwardRef(function (_a, ref) {
-    var actions = _a.actions, disabled = _a.disabled;
-    var _b = React.useState([]), elRefs = _b[0], setElRefs = _b[1];
-    var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
-    React.useEffect(function () {
-        setElRefs(Array(length || 0).fill(null).map(function () { return React.createRef(); }));
-    }, [length]);
-    React.useImperativeHandle(ref, function () { return elRefs; }, [elRefs]);
-    var renderAction = function (item, index) {
-        var _a, _b, _c;
-        switch (item.componentType) {
-            case 'custom': {
-                return item.content;
-            }
-            case 'icon': {
-                return React.createElement(IconButton, { ref: elRefs[index], key: index, variant: 'secondary', useTransparentBackground: true, shape: 'circular', action: item.action, tooltip: item.tooltip, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : disabled }, item.icon);
-            }
-            case 'toggle': {
-                return React.createElement(ToggleButton, { ref: elRefs[index], key: index, active: item.active, onChange: item.onChange, defaultState: item.defaultState, activeState: item.activeState, disabled: (_b = item.disabled) !== null && _b !== void 0 ? _b : disabled });
-            }
-            case 'dropdown': {
-                return React.createElement(DropdownButton, { ref: elRefs[index], key: index, type: 'icon', items: item.items, itemsType: item.itemsType, onClick: item.onClick, icon: item.icon, action: item.action, actionIcon: item.actionIcon, actionLabel: item.actionLabel, actionVariant: item.actionVariant, actionLoading: item.actionLoading, multiSelect: item.multiSelect, scrollable: item.scrollable, pinTopItem: item.pinTopItem, maxHeight: item.maxHeight, disabled: (_c = item.disabled) !== null && _c !== void 0 ? _c : disabled });
-            }
-        }
-    };
-    return (React.createElement(React.Fragment, null, (actions === null || actions === void 0 ? void 0 : actions.length) &&
-        React.createElement(Container, null, actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) { return renderAction(item, index); }))));
-});
-var templateObject_1;
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import React from 'react';
+import { IconButton } from '../../Button';
+import { ToggleButton } from '../../Toggles';
+import { DropdownButton } from '../../Dropdown';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var actions = _ref.actions,
+    disabled = _ref.disabled;
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    elRefs = _React$useState2[0],
+    setElRefs = _React$useState2[1];
+  var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  React.useEffect(function () {
+    setElRefs(Array(length || 0).fill(null).map(function () {
+      return /*#__PURE__*/React.createRef();
+    }));
+  }, [length]);
+  React.useImperativeHandle(ref, function () {
+    return elRefs;
+  }, [elRefs]);
+  var renderAction = function renderAction(item, index) {
+    switch (item.componentType) {
+      case 'custom':
+        {
+          return item.content;
+        }
+      case 'icon':
+        {
+          var _item$disabled;
+          return /*#__PURE__*/_jsx(IconButton, {
+            ref: elRefs[index],
+            variant: 'secondary',
+            useTransparentBackground: true,
+            shape: 'circular',
+            action: item.action,
+            tooltip: item.tooltip,
+            disabled: (_item$disabled = item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : disabled,
+            children: item.icon
+          }, index);
+        }
+      case 'toggle':
+        {
+          var _item$disabled2;
+          return /*#__PURE__*/_jsx(ToggleButton, {
+            ref: elRefs[index],
+            active: item.active,
+            onChange: item.onChange,
+            defaultState: item.defaultState,
+            activeState: item.activeState,
+            disabled: (_item$disabled2 = item.disabled) !== null && _item$disabled2 !== void 0 ? _item$disabled2 : disabled
+          }, index);
+        }
+      case 'dropdown':
+        {
+          var _item$disabled3;
+          return /*#__PURE__*/_jsx(DropdownButton, {
+            ref: elRefs[index],
+            type: 'icon',
+            items: item.items,
+            itemsType: item.itemsType,
+            onClick: item.onClick,
+            icon: item.icon,
+            action: item.action,
+            actionIcon: item.actionIcon,
+            actionLabel: item.actionLabel,
+            actionVariant: item.actionVariant,
+            actionLoading: item.actionLoading,
+            multiSelect: item.multiSelect,
+            scrollable: item.scrollable,
+            pinTopItem: item.pinTopItem,
+            maxHeight: item.maxHeight,
+            disabled: (_item$disabled3 = item.disabled) !== null && _item$disabled3 !== void 0 ? _item$disabled3 : disabled
+          }, index);
+        }
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: (actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx(Container, {
+      children: actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) {
+        return renderAction(item, index);
+      })
+    })
+  });
+});
+//# sourceMappingURL=HorizontalCardActions.js.map

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

@@ -4,6 +4,6 @@ export declare const HorizontalCardBodyContainer: import("styled-components").St
 export declare const HorizontalCardBodyTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HorizontalCardBodyDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HorizontalCardBodyTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
+type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
 export declare const HorizontalCardBody: React.FunctionComponent<Props>;
 export {};

package/dist/Card/HorizontalCard/HorizontalCardBody.js

@@ -1,23 +1,38 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
-import { LinearProgress } from '../../LinearProgress';
-import { Tag } from '../../Tag';
-export var HorizontalCardBodyContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
-export var HorizontalCardBodyTitle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"], ["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
-export var HorizontalCardBodyDescription = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-export var HorizontalCardBodyTagsContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
-export var HorizontalCardBody = function (_a) {
-    var title = _a.title, description = _a.description, progress = _a.progress, tags = _a.tags;
-    return (React.createElement(HorizontalCardBodyContainer, null,
-        React.createElement(HorizontalCardBodyTitle, null, title),
-        description && React.createElement(HorizontalCardBodyDescription, null, description),
-        tags &&
-            React.createElement(HorizontalCardBodyTagsContainer, null, tags.map(function (tag, index) { return (React.createElement(Tag, { key: index, label: tag.label, variant: tag.variant, icon: tag.icon })); })),
-        progress && React.createElement(LinearProgress, { value: progress.value, max: progress.max })));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
+import { LinearProgress } from '../../LinearProgress';
+import { Tag } from '../../Tag';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var HorizontalCardBodyContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
+export var HorizontalCardBodyTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
+export var HorizontalCardBodyDescription = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+export var HorizontalCardBodyTagsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
+export var HorizontalCardBody = function HorizontalCardBody(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    progress = _ref.progress,
+    tags = _ref.tags;
+  return /*#__PURE__*/_jsxs(HorizontalCardBodyContainer, {
+    children: [/*#__PURE__*/_jsx(HorizontalCardBodyTitle, {
+      children: title
+    }), description && /*#__PURE__*/_jsx(HorizontalCardBodyDescription, {
+      children: description
+    }), tags && /*#__PURE__*/_jsx(HorizontalCardBodyTagsContainer, {
+      children: tags.map(function (tag, index) {
+        return /*#__PURE__*/_jsx(Tag, {
+          label: tag.label,
+          variant: tag.variant,
+          icon: tag.icon
+        }, index);
+      })
+    }), progress && /*#__PURE__*/_jsx(LinearProgress, {
+      value: progress.value,
+      max: progress.max
+    })]
+  });
+};
+//# sourceMappingURL=HorizontalCardBody.js.map