@laerdal/life-react-components 3.0.1-dev.9 → 3.1.0

package/dist/Card/CardBottomSection.cjs

@@ -1,142 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CardProgressContainer = exports.CardNotesContainer = exports.CardNoteRight = exports.CardNoteLeft = exports.CardButtonRowContainer = exports.CardBottomSectionContainer = exports.CardBottomDivider = exports.CardAuthorContainer = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _ = require("..");
-
-var _Button = require("../Button");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var CardProgressContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n"])));
-
-exports.CardProgressContainer = CardProgressContainer;
-
-var CardNotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), _.COLORS.neutral_500);
-
-exports.CardNotesContainer = CardNotesContainer;
-
-var CardAuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
-  return props.disabled ? "\n    color: ".concat(_.COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
-});
-
-exports.CardAuthorContainer = CardAuthorContainer;
-
-var CardBottomDivider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), _.COLORS.neutral_100);
-
-exports.CardBottomDivider = CardBottomDivider;
-
-var CardNoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-
-exports.CardNoteLeft = CardNoteLeft;
-
-var CardNoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-
-exports.CardNoteRight = CardNoteRight;
-
-var CardButtonRowContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
-
-exports.CardButtonRowContainer = CardButtonRowContainer;
-
-var CardBottomSectionContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-
-exports.CardBottomSectionContainer = CardBottomSectionContainer;
-
-var CardBottomSection = function CardBottomSection(_ref) {
-  var progressLevel = _ref.progressLevel,
-      progressMax = _ref.progressMax,
-      _ref$progressType = _ref.progressType,
-      progressType = _ref$progressType === void 0 ? _.LinearProgressType.Line : _ref$progressType,
-      noteLeft = _ref.noteLeft,
-      noteLeftIcon = _ref.noteLeftIcon,
-      noteRight = _ref.noteRight,
-      noteRightIcon = _ref.noteRightIcon,
-      authorName = _ref.authorName,
-      logo = _ref.logo,
-      actions = _ref.actions,
-      disabled = _ref.disabled;
-  var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
-    children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardProgressContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgress, {
-        size: _.Size.Small,
-        type: progressType,
-        variant: _.LinearProgressVariant.Normal,
-        value: progressLevel,
-        max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
-      })
-    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNotesContainer, {
-      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNoteLeft, {
-        children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
-          color: _.COLORS.neutral_500,
-          textStyle: _.ComponentTextStyle.Bold,
-          children: noteLeft
-        })]
-      }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNoteRight, {
-        children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
-          color: _.COLORS.neutral_500,
-          textStyle: _.ComponentTextStyle.Bold,
-          children: noteRight
-        })]
-      })]
-    }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardAuthorContainer, {
-      disabled: disabled,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
-        children: authorName
-      }), logo]
-    }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardButtonRowContainer, {
-      children: actions.map(function (x) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          disabled: disabled,
-          variant: "secondary",
-          shape: "circular",
-          action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            x.onClick();
-          },
-          children: x.icon
-        });
-      })
-    })]
-  });
-};
-
-CardBottomSection.propTypes = {
-  progressLevel: _propTypes.default.number,
-  progressMax: _propTypes.default.number,
-  noteLeft: _propTypes.default.string,
-  noteLeftIcon: _propTypes.default.node,
-  noteRight: _propTypes.default.string,
-  noteRightIcon: _propTypes.default.node,
-  authorName: _propTypes.default.string,
-  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
-    icon: _propTypes.default.node.isRequired,
-    onClick: _propTypes.default.func.isRequired
-  })),
-  logo: _propTypes.default.node,
-  disabled: _propTypes.default.bool.isRequired
-};
-var _default = CardBottomSection;
-exports.default = _default;
-//# sourceMappingURL=CardBottomSection.cjs.map

package/dist/Card/CardBottomSection.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\r\nimport { IconButton } from '../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  progressLevel?: number;\r\n  progressMax?: number;\r\n  progressType?: LinearProgressType;\r\n\r\n  noteLeft?: string;\r\n  noteLeftIcon?: React.ReactNode;\r\n  noteRight?: string;\r\n  noteRightIcon?: React.ReactNode;\r\n  \r\n  authorName?: string;\r\n  actions?: ActionItem[];\r\n  logo?: React.ReactNode;\r\n  disabled: boolean;\r\n}\r\n\r\nexport const CardProgressContainer = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardNotesContainer = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${COLORS.neutral_500};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardAuthorContainer = styled.div<{disabled: boolean}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.disabled ? `\r\n    color: ${COLORS.neutral_300};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardNoteLeft = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardNoteRight = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardButtonRowContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n\r\n  button:last-child{\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\r\n  progressLevel,\r\n  progressMax,\r\n  progressType = LinearProgressType.Line,\r\n  noteLeft,\r\n  noteLeftIcon,\r\n  noteRight,\r\n  noteRightIcon,\r\n  authorName,\r\n  logo,\r\n  actions,\r\n  disabled\r\n}: CardBottomSectionProps) => {\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n  return (\r\n    <CardBottomSectionContainer>\r\n      {haveAtLeastSomething && <CardBottomDivider />}\r\n      {progressLevel != undefined && <CardProgressContainer>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel} />\r\n        </CardProgressContainer>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardNoteLeft>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardNoteLeft>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardNoteRight>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardNoteRight>\r\n        )}\r\n      </CardNotesContainer>}\r\n\r\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardAuthorContainer>}\r\n\r\n      {actions && <CardButtonRowContainer>\r\n        {actions.map(x => (\r\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardButtonRowContainer>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardBottomSection;\r\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/CardBottomSection.d.ts

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { LinearProgressType } from '..';
-export interface ActionItem {
-    icon: React.ReactNode;
-    onClick: () => void;
-}
-export interface CardBottomSectionProps {
-    progressLevel?: number;
-    progressMax?: number;
-    progressType?: LinearProgressType;
-    noteLeft?: string;
-    noteLeftIcon?: React.ReactNode;
-    noteRight?: string;
-    noteRightIcon?: React.ReactNode;
-    authorName?: string;
-    actions?: ActionItem[];
-    logo?: React.ReactNode;
-    disabled: boolean;
-}
-export declare const CardProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNotesContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardAuthorContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled: boolean;
-}, never>;
-export declare const CardBottomDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNoteLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNoteRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardButtonRowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
-export default CardBottomSection;

package/dist/Card/CardBottomSection.js

@@ -1,98 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';
-import { IconButton } from '../Button';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardProgressContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
-export var CardNotesContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), COLORS.neutral_500);
-export var CardAuthorContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
-  return props.disabled ? "\n    color: ".concat(COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
-});
-export var CardBottomDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
-export var CardNoteLeft = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardNoteRight = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardButtonRowContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600);
-export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-
-var CardBottomSection = function CardBottomSection(_ref) {
-  var progressLevel = _ref.progressLevel,
-      progressMax = _ref.progressMax,
-      _ref$progressType = _ref.progressType,
-      progressType = _ref$progressType === void 0 ? LinearProgressType.Line : _ref$progressType,
-      noteLeft = _ref.noteLeft,
-      noteLeftIcon = _ref.noteLeftIcon,
-      noteRight = _ref.noteRight,
-      noteRightIcon = _ref.noteRightIcon,
-      authorName = _ref.authorName,
-      logo = _ref.logo,
-      actions = _ref.actions,
-      disabled = _ref.disabled;
-  var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
-  return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
-    children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardProgressContainer, {
-      children: /*#__PURE__*/_jsx(LinearProgress, {
-        size: Size.Small,
-        type: progressType,
-        variant: LinearProgressVariant.Normal,
-        value: progressLevel,
-        max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
-      })
-    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardNotesContainer, {
-      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardNoteLeft, {
-        children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
-          color: COLORS.neutral_500,
-          textStyle: ComponentTextStyle.Bold,
-          children: noteLeft
-        })]
-      }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardNoteRight, {
-        children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
-          color: COLORS.neutral_500,
-          textStyle: ComponentTextStyle.Bold,
-          children: noteRight
-        })]
-      })]
-    }), (authorName || logo) && /*#__PURE__*/_jsxs(CardAuthorContainer, {
-      disabled: disabled,
-      children: [/*#__PURE__*/_jsx(ComponentXXS, {
-        children: authorName
-      }), logo]
-    }), actions && /*#__PURE__*/_jsx(CardButtonRowContainer, {
-      children: actions.map(function (x) {
-        return /*#__PURE__*/_jsx(IconButton, {
-          disabled: disabled,
-          variant: "secondary",
-          shape: "circular",
-          action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            x.onClick();
-          },
-          children: x.icon
-        });
-      })
-    })]
-  });
-};
-
-CardBottomSection.propTypes = {
-  progressLevel: _pt.number,
-  progressMax: _pt.number,
-  noteLeft: _pt.string,
-  noteLeftIcon: _pt.node,
-  noteRight: _pt.string,
-  noteRightIcon: _pt.node,
-  authorName: _pt.string,
-  actions: _pt.arrayOf(_pt.shape({
-    icon: _pt.node.isRequired,
-    onClick: _pt.func.isRequired
-  })),
-  logo: _pt.node,
-  disabled: _pt.bool.isRequired
-};
-export default CardBottomSection;
-//# sourceMappingURL=CardBottomSection.js.map

package/dist/Card/CardBottomSection.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\r\nimport { IconButton } from '../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  progressLevel?: number;\r\n  progressMax?: number;\r\n  progressType?: LinearProgressType;\r\n\r\n  noteLeft?: string;\r\n  noteLeftIcon?: React.ReactNode;\r\n  noteRight?: string;\r\n  noteRightIcon?: React.ReactNode;\r\n  \r\n  authorName?: string;\r\n  actions?: ActionItem[];\r\n  logo?: React.ReactNode;\r\n  disabled: boolean;\r\n}\r\n\r\nexport const CardProgressContainer = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardNotesContainer = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${COLORS.neutral_500};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardAuthorContainer = styled.div<{disabled: boolean}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.disabled ? `\r\n    color: ${COLORS.neutral_300};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardNoteLeft = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardNoteRight = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardButtonRowContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n\r\n  button:last-child{\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\r\n  progressLevel,\r\n  progressMax,\r\n  progressType = LinearProgressType.Line,\r\n  noteLeft,\r\n  noteLeftIcon,\r\n  noteRight,\r\n  noteRightIcon,\r\n  authorName,\r\n  logo,\r\n  actions,\r\n  disabled\r\n}: CardBottomSectionProps) => {\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n  return (\r\n    <CardBottomSectionContainer>\r\n      {haveAtLeastSomething && <CardBottomDivider />}\r\n      {progressLevel != undefined && <CardProgressContainer>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel} />\r\n        </CardProgressContainer>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardNoteLeft>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardNoteLeft>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardNoteRight>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardNoteRight>\r\n        )}\r\n      </CardNotesContainer>}\r\n\r\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardAuthorContainer>}\r\n\r\n      {actions && <CardButtonRowContainer>\r\n        {actions.map(x => (\r\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardButtonRowContainer>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardBottomSection;\r\n"],"file":"CardBottomSection.js"}

package/dist/Card/CardMiddleSection.cjs

@@ -1,115 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CardTagsContainer = exports.CardMiddleSectionContainer = exports.CardColorBand = exports.CardCategoryContainer = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var CardMiddleSectionContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
-
-exports.CardMiddleSectionContainer = CardMiddleSectionContainer;
-
-var CardColorBand = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) {
-  return props.$color;
-});
-
-exports.CardColorBand = CardColorBand;
-
-var CardTagsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
-
-exports.CardTagsContainer = CardTagsContainer;
-
-var CardCategoryContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n  \n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), _.COLORS.neutral_500);
-
-exports.CardCategoryContainer = CardCategoryContainer;
-
-var CardMiddleSection = function CardMiddleSection(_ref) {
-  var colorBandColor = _ref.colorBandColor,
-      categoryIcon = _ref.categoryIcon,
-      categoryLabel = _ref.categoryLabel,
-      title = _ref.title,
-      description = _ref.description,
-      tags = _ref.tags,
-      row2Tags = _ref.row2Tags,
-      disabled = _ref.disabled;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardMiddleSectionContainer, {
-    children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardColorBand, {
-      $color: colorBandColor
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardCategoryContainer, {
-      extraTopMargin: Boolean(colorBandColor),
-      bottomMargin: Boolean(categoryIcon || categoryLabel),
-      children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
-        textStyle: _.ComponentTextStyle.Bold,
-        color: _.COLORS.neutral_500,
-        children: categoryLabel
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXL, {
-      className: "titleBlock",
-      textStyle: _.ComponentTextStyle.Bold,
-      color: disabled ? _.COLORS.neutral_500 : _.COLORS.black,
-      children: title
-    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
-      className: "descriptionBlock",
-      color: _.COLORS.neutral_600,
-      children: description
-    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTagsContainer, {
-      children: tags.map(function (x) {
-        var _x$variant;
-
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
-          label: x.label,
-          variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
-        });
-      })
-    }), row2Tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTagsContainer, {
-      children: row2Tags.map(function (x) {
-        var _x$variant2;
-
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
-          label: x.label,
-          variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
-        });
-      })
-    })]
-  });
-};
-
-CardMiddleSection.propTypes = {
-  colorBandColor: _propTypes.default.string,
-  categoryIcon: _propTypes.default.node,
-  categoryLabel: _propTypes.default.string,
-  title: _propTypes.default.string.isRequired,
-  description: _propTypes.default.string,
-  tags: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string.isRequired
-  })),
-  row2Tags: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string.isRequired
-  })),
-  disabled: _propTypes.default.bool.isRequired
-};
-var _default = CardMiddleSection;
-exports.default = _default;
-//# sourceMappingURL=CardMiddleSection.cjs.map

package/dist/Card/CardMiddleSection.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","label","variant"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,0BAAOC,GAAV,qMAMJ,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAV;AAAA,CAND,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,0BAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,0BAAOC,GAAV,qQAQrBM,SAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,0BAAD;AAAA,eACGP,cAAc,iBAAI,qBAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,sBAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEQ,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,SAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,SAAOC,WAAV,GAAwBD,SAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,SAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAAAC,CAAC;AAAA;;AAAA,4BACT,qBAAC,KAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,gBAAED,CAAC,CAACE,OAAJ,mDAAe;AAA3C,UADS;AAAA,OAAV;AADH,MAjBJ,EAuBGV,QAAQ,iBACP,qBAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACO,GAAT,CAAa,UAAAC,CAAC;AAAA;;AAAA,4BACb,qBAAC,KAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,iBAAED,CAAC,CAACE,OAAJ,qDAAe;AAA3C,UADa;AAAA,OAAd;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEhB,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAU,IAAAA,K;;AALAT,EAAAA,Q;AAKAS,IAAAA,K;;AAJAR,EAAAA,Q;;eAsGaR,iB","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL,  Tag, TagVariants } from '..';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  colorBandColor?: string;\r\n  categoryIcon?: React.ReactNode;\r\n  categoryLabel?: string;\r\n  title: string;\r\n  description?: string;\r\n  tags?: CardTag[];\r\n  row2Tags?: CardTag[];\r\n  disabled: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardColorBand = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${props => props.$color};\r\n`;\r\n\r\nexport const CardTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n  \r\n  svg {\r\n    color: ${COLORS.neutral_500};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled\r\n}: CardMiddleSectionProps) => {\r\n  return (\r\n    <CardMiddleSectionContainer>\r\n      {colorBandColor && <CardColorBand $color={colorBandColor} />}\r\n      <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n        {categoryIcon}\r\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\r\n          {categoryLabel}\r\n        </ComponentS>\r\n      </CardCategoryContainer>\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardTagsContainer>\r\n          {tags.map(x => (\r\n            <Tag label={x.label} variant={x.variant ?? 'neutral'} />\r\n          ))}\r\n        </CardTagsContainer>\r\n      )}\r\n      {row2Tags && (\r\n        <CardTagsContainer>\r\n          {row2Tags.map(x => (\r\n            <Tag label={x.label} variant={x.variant ?? 'neutral'} />\r\n          ))}\r\n        </CardTagsContainer>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"file":"CardMiddleSection.cjs"}

package/dist/Card/CardMiddleSection.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { TagVariants } from '..';
-export interface CardMiddleSectionProps {
-    colorBandColor?: string;
-    categoryIcon?: React.ReactNode;
-    categoryLabel?: string;
-    title: string;
-    description?: string;
-    tags?: CardTag[];
-    row2Tags?: CardTag[];
-    disabled: boolean;
-}
-export interface CardTag {
-    label: string;
-    variant?: TagVariants;
-}
-export declare const CardMiddleSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardColorBand: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-}, never>;
-export declare const CardTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardCategoryContainer: import("styled-components").StyledComponent<"div", any, {
-    extraTopMargin: boolean;
-    bottomMargin: boolean;
-}, never>;
-declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
-export default CardMiddleSection;

package/dist/Card/CardMiddleSection.js

@@ -1,84 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '..';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardMiddleSectionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
-export var CardColorBand = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) {
-  return props.$color;
-});
-export var CardTagsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
-export var CardCategoryContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n  \n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), COLORS.neutral_500);
-
-var CardMiddleSection = function CardMiddleSection(_ref) {
-  var colorBandColor = _ref.colorBandColor,
-      categoryIcon = _ref.categoryIcon,
-      categoryLabel = _ref.categoryLabel,
-      title = _ref.title,
-      description = _ref.description,
-      tags = _ref.tags,
-      row2Tags = _ref.row2Tags,
-      disabled = _ref.disabled;
-  return /*#__PURE__*/_jsxs(CardMiddleSectionContainer, {
-    children: [colorBandColor && /*#__PURE__*/_jsx(CardColorBand, {
-      $color: colorBandColor
-    }), /*#__PURE__*/_jsxs(CardCategoryContainer, {
-      extraTopMargin: Boolean(colorBandColor),
-      bottomMargin: Boolean(categoryIcon || categoryLabel),
-      children: [categoryIcon, /*#__PURE__*/_jsx(ComponentS, {
-        textStyle: ComponentTextStyle.Bold,
-        color: COLORS.neutral_500,
-        children: categoryLabel
-      })]
-    }), /*#__PURE__*/_jsx(ComponentXL, {
-      className: "titleBlock",
-      textStyle: ComponentTextStyle.Bold,
-      color: disabled ? COLORS.neutral_500 : COLORS.black,
-      children: title
-    }), description && /*#__PURE__*/_jsx(ComponentS, {
-      className: "descriptionBlock",
-      color: COLORS.neutral_600,
-      children: description
-    }), tags && /*#__PURE__*/_jsx(CardTagsContainer, {
-      children: tags.map(function (x) {
-        var _x$variant;
-
-        return /*#__PURE__*/_jsx(Tag, {
-          label: x.label,
-          variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
-        });
-      })
-    }), row2Tags && /*#__PURE__*/_jsx(CardTagsContainer, {
-      children: row2Tags.map(function (x) {
-        var _x$variant2;
-
-        return /*#__PURE__*/_jsx(Tag, {
-          label: x.label,
-          variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
-        });
-      })
-    })]
-  });
-};
-
-CardMiddleSection.propTypes = {
-  colorBandColor: _pt.string,
-  categoryIcon: _pt.node,
-  categoryLabel: _pt.string,
-  title: _pt.string.isRequired,
-  description: _pt.string,
-  tags: _pt.arrayOf(_pt.shape({
-    label: _pt.string.isRequired
-  })),
-  row2Tags: _pt.arrayOf(_pt.shape({
-    label: _pt.string.isRequired
-  })),
-  disabled: _pt.bool.isRequired
-};
-export default CardMiddleSection;
-//# sourceMappingURL=CardMiddleSection.js.map

package/dist/Card/CardMiddleSection.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","black","neutral_600","map","x","label","variant"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA+DC,GAA/D,QAAuF,IAAvF;;;AAkBA,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAV,wTAAhC;AAkBP,OAAO,IAAMC,aAAa,GAAGR,MAAM,CAACO,GAAV,uLAMJ,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAV;AAAA,CAND,CAAnB;AASP,OAAO,IAAMC,iBAAiB,GAAGX,MAAM,CAACO,GAAV,uKAAvB;AAQP,OAAO,IAAMK,qBAAqB,GAAGZ,MAAM,CAACO,GAAV,uPAQrBN,MAAM,CAACY,WARc,CAA3B;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,MAAC,0BAAD;AAAA,eACGP,cAAc,iBAAI,KAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,MAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,KAAC,UAAD;AAAY,QAAA,SAAS,EAAEb,kBAAkB,CAACqB,IAA1C;AAAgD,QAAA,KAAK,EAAEvB,MAAM,CAACY,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,KAAC,WAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEd,kBAAkB,CAACqB,IAAlE;AAAwE,MAAA,KAAK,EAAEF,QAAQ,GAAGrB,MAAM,CAACY,WAAV,GAAwBZ,MAAM,CAACwB,KAAtH;AAAA,gBACGP;AADH,MARF,EAWGC,WAAW,iBACV,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAElB,MAAM,CAACyB,WAAvD;AAAA,gBACGP;AADH,MAZJ,EAgBGC,IAAI,iBACH,KAAC,iBAAD;AAAA,gBACGA,IAAI,CAACO,GAAL,CAAS,UAAAC,CAAC;AAAA;;AAAA,4BACT,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,gBAAED,CAAC,CAACE,OAAJ,mDAAe;AAA3C,UADS;AAAA,OAAV;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,KAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACM,GAAT,CAAa,UAAAC,CAAC;AAAA;;AAAA,4BACb,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,iBAAED,CAAC,CAACE,OAAJ,qDAAe;AAA3C,UADa;AAAA,OAAd;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAS,IAAAA,K;;AALAR,EAAAA,Q;AAKAQ,IAAAA,K;;AAJAP,EAAAA,Q;;AAsGF,eAAeR,iBAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL,  Tag, TagVariants } from '..';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  colorBandColor?: string;\r\n  categoryIcon?: React.ReactNode;\r\n  categoryLabel?: string;\r\n  title: string;\r\n  description?: string;\r\n  tags?: CardTag[];\r\n  row2Tags?: CardTag[];\r\n  disabled: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardColorBand = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${props => props.$color};\r\n`;\r\n\r\nexport const CardTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n  \r\n  svg {\r\n    color: ${COLORS.neutral_500};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled\r\n}: CardMiddleSectionProps) => {\r\n  return (\r\n    <CardMiddleSectionContainer>\r\n      {colorBandColor && <CardColorBand $color={colorBandColor} />}\r\n      <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n        {categoryIcon}\r\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\r\n          {categoryLabel}\r\n        </ComponentS>\r\n      </CardCategoryContainer>\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardTagsContainer>\r\n          {tags.map(x => (\r\n            <Tag label={x.label} variant={x.variant ?? 'neutral'} />\r\n          ))}\r\n        </CardTagsContainer>\r\n      )}\r\n      {row2Tags && (\r\n        <CardTagsContainer>\r\n          {row2Tags.map(x => (\r\n            <Tag label={x.label} variant={x.variant ?? 'neutral'} />\r\n          ))}\r\n        </CardTagsContainer>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"file":"CardMiddleSection.js"}