npm - @laerdal/life-react-components - Versions diffs - 1.9.8-dev.8 → 1.9.8-dev.9.full - Mend

@laerdal/life-react-components 1.9.8-dev.8 → 1.9.8-dev.9.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/dist/Card/HorizontalCard/HorizontalCard.cjs ADDED Viewed

@@ -0,0 +1,97 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HorizontalCard = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("../../styles");
+var _HorizontalCardThumbnail = require("./HorizontalCardThumbnail");
+var _HorizontalCardBody = require("./HorizontalCardBody");
+var _HorizontalCardActions = require("./HorizontalCardActions");
+var _common = require("../../common");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+var ContentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), _styles.COLORS.white);
+var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      box-shadow: none;\n    }\n  }\n\n"])), ContentContainer, _styles.COLORS.neutral_200, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, ContentContainer, _styles.COLORS.primary_20, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L3, ContentContainer, _styles.COLORS.primary_100, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L2, _styles.focusStyles, ContentContainer);
+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;
+  var _React$useState = _react.default.useState([]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      actionsRefs = _React$useState2[0],
+      setActionsRefs = _React$useState2[1];
+  var containerRef = _react.default.useRef(null);
+  (0, _common.useActionWithin)(containerRef, actionsRefs);
+  var cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '');
+  var handleClick = function handleClick() {
+    !disabled && action && action();
+  };
+  var handleButtonPress = function handleButtonPress(e) {
+    e.key === 'Enter' && handleClick();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    ref: containerRef,
+    tabIndex: action && !disabled ? 0 : -1,
+    className: cls,
+    onKeyDown: handleButtonPress,
+    onClick: handleClick,
+    onMouseDown: _common.defaultOnMouseDownHandler,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalCardThumbnail.HorizontalCardThumbnail, {
+        image: image,
+        icon: icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalCardBody.HorizontalCardBody, {
+        title: title,
+        description: description,
+        tags: tags,
+        progress: progress
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalCardActions.HorizontalCardActions, {
+        ref: function ref(instance) {
+          return setActionsRefs(instance !== null && instance !== void 0 ? instance : []);
+        },
+        actions: actions,
+        disabled: disabled
+      })]
+    })
+  });
+};
+exports.HorizontalCard = HorizontalCard;
+var _default = HorizontalCard;
+exports.default = _default;
+//# sourceMappingURL=HorizontalCard.cjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"names":["ContentContainer","styled","div","COLORS","white","Container","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV,6OAMAC,eAAOC,KANP,CAAtB;;AAUA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,u5BAKTF,gBALS,EAMqBG,eAAOG,WAN5B,EAWTN,gBAXS,EAYKO,mBAAWC,YAZhB,EAqBLR,gBArBK,EAsBeG,eAAOM,UAtBtB,EA2BLT,gBA3BK,EA4BSO,mBAAWG,YA5BpB,EAmCLV,gBAnCK,EAoCeG,eAAOQ,WApCtB,EAyCLX,gBAzCK,EA0CSO,mBAAWK,YA1CpB,EAgDPC,mBAhDO,EAuDTb,gBAvDS,CAAf;;AA8DO,IAAMc,cAA4D,GAAG,SAA/DA,cAA+D,OAWO;AAAA,MAVJC,KAUI,QAVJA,KAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,IAQI,QARJA,IAQI;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,SAKN;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,QACI,QADJA,QACI;;AAEjF,wBAAsCC,eAAMC,QAAN,CAAqD,EAArD,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,YAAY,GAAGJ,eAAMK,MAAN,CAA6B,IAA7B,CAArB;;AAEA,+BAAgBD,YAAhB,EAA8BF,WAA9B;AAEA,MAAMI,GAAG,aAAMX,OAAN,cAAiBE,MAAM,GAAG,WAAH,GAAiB,EAAxC,cAA8CE,QAAQ,GAAG,UAAH,GAAgB,EAAtE,CAAT;;AAEA,MAAMQ,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,KAACR,QAAD,IAAaF,MAAb,IAAuBA,MAAM,EAA7B;AACD,GAFD;;AAIA,MAAMW,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAA4B;AACpDA,IAAAA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBH,WAAW,EAAhC;AACD,GAFD;;AAIA,sBACE,qBAAC,SAAD;AAAW,IAAA,GAAG,EAAEH,YAAhB;AACW,IAAA,QAAQ,EAAEP,MAAM,IAAI,CAACE,QAAX,GAAsB,CAAtB,GAA0B,CAAC,CADhD;AAEW,IAAA,SAAS,EAAEO,GAFtB;AAGW,IAAA,SAAS,EAAEE,iBAHtB;AAIW,IAAA,OAAO,EAAED,WAJpB;AAKW,IAAA,WAAW,EAAEI,iCALxB;AAAA,2BAME,sBAAC,gBAAD;AAAA,8BAEE,qBAAC,gDAAD;AAAyB,QAAA,KAAK,EAAEf,KAAhC;AACyB,QAAA,IAAI,EAAEF;AAD/B,QAFF,eAKE,qBAAC,sCAAD;AAAoB,QAAA,KAAK,EAAEJ,KAA3B;AACoB,QAAA,WAAW,EAAEC,WADjC;AAEoB,QAAA,IAAI,EAAEC,IAF1B;AAGoB,QAAA,QAAQ,EAAEC;AAH9B,QALF,eAUE,qBAAC,4CAAD;AAAuB,QAAA,GAAG,EAAE,aAAAmB,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA,SAApC;AACuB,QAAA,OAAO,EAAEd,OADhC;AAEuB,QAAA,QAAQ,EAAEC;AAFjC,QAVF;AAAA;AANF,IADF;AAwBD,CApDM;;;eAsDQV,c","sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.white};\n border-radius: 8px;\n`;\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n\n &.outline {\n ${ContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover:not(.action-within):not(.disabled) {\n &.outline {\n ${ContentContainer} {\n background-color: ${COLORS.primary_20};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n }\n }\n\n &:active:not(.action-within):not(.disabled) {\n &.outline {\n ${ContentContainer} {\n background-color: ${COLORS.primary_100};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${ContentContainer} {\n box-shadow: none;\n }\n }\n\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n title,\n description,\n tags,\n progress,\n icon,\n variant = 'outline',\n image,\n action,\n actions,\n disabled\n }) => {\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, actionsRefs);\n\n const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''}`;\n\n const handleClick = () => {\n !disabled && action && action();\n }\n\n const handleButtonPress = (e: React.KeyboardEvent) => {\n e.key === 'Enter' && handleClick();\n };\n\n return (\n <Container ref={containerRef}\n tabIndex={action && !disabled ? 0 : -1}\n className={cls}\n onKeyDown={handleButtonPress}\n onClick={handleClick}\n onMouseDown={defaultOnMouseDownHandler}>\n <ContentContainer>\n\n <HorizontalCardThumbnail image={image}\n icon={icon}/>\n\n <HorizontalCardBody title={title}\n description={description}\n tags={tags}\n progress={progress}/>\n\n <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n actions={actions}\n disabled={disabled}/>\n\n </ContentContainer>\n </Container>\n )\n};\n\nexport default HorizontalCard;\n"],"file":"HorizontalCard.cjs"}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HorizontalCardProps } from './types';
+export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
+export default HorizontalCard;

package/dist/Card/HorizontalCard/HorizontalCard.js ADDED Viewed

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+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";
+var ContentContainer = 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);
+var Container = 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    ", " {\n      box-shadow: none;\n    }\n  }\n\n"])), ContentContainer, COLORS.neutral_200, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.primary_20, ContentContainer, BOXSHADOWS.BOXSHADOW_L3, ContentContainer, COLORS.primary_100, ContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, ContentContainer);
+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;
+  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' : '');
+  var handleClick = function handleClick() {
+    !disabled && action && action();
+  };
+  var handleButtonPress = function handleButtonPress(e) {
+    e.key === 'Enter' && handleClick();
+  };
+  return /*#__PURE__*/_jsx(Container, {
+    ref: containerRef,
+    tabIndex: action && !disabled ? 0 : -1,
+    className: cls,
+    onKeyDown: handleButtonPress,
+    onClick: handleClick,
+    onMouseDown: defaultOnMouseDownHandler,
+    children: /*#__PURE__*/_jsxs(ContentContainer, {
+      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/HorizontalCard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","ContentContainer","div","white","Container","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"mappings":"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","sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.white};\n border-radius: 8px;\n`;\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n\n &.outline {\n ${ContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover:not(.action-within):not(.disabled) {\n &.outline {\n ${ContentContainer} {\n background-color: ${COLORS.primary_20};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n }\n }\n\n &:active:not(.action-within):not(.disabled) {\n &.outline {\n ${ContentContainer} {\n background-color: ${COLORS.primary_100};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${ContentContainer} {\n box-shadow: none;\n }\n }\n\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n title,\n description,\n tags,\n progress,\n icon,\n variant = 'outline',\n image,\n action,\n actions,\n disabled\n }) => {\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, actionsRefs);\n\n const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''}`;\n\n const handleClick = () => {\n !disabled && action && action();\n }\n\n const handleButtonPress = (e: React.KeyboardEvent) => {\n e.key === 'Enter' && handleClick();\n };\n\n return (\n <Container ref={containerRef}\n tabIndex={action && !disabled ? 0 : -1}\n className={cls}\n onKeyDown={handleButtonPress}\n onClick={handleClick}\n onMouseDown={defaultOnMouseDownHandler}>\n <ContentContainer>\n\n <HorizontalCardThumbnail image={image}\n icon={icon}/>\n\n <HorizontalCardBody title={title}\n description={description}\n tags={tags}\n progress={progress}/>\n\n <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n actions={actions}\n disabled={disabled}/>\n\n </ContentContainer>\n </Container>\n )\n};\n\nexport default HorizontalCard;\n"],"file":"HorizontalCard.js"}

package/dist/Card/HorizontalCard/HorizontalCardActions.cjs ADDED Viewed

@@ -0,0 +1,124 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HorizontalCardActions = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _Button = require("../../Button");
+var _Toggles = require("../../Toggles");
+var _Dropdown = require("../../Dropdown");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var actions = _ref.actions,
+      disabled = _ref.disabled;
+  var _React$useState = _react.default.useState([]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      elRefs = _React$useState2[0],
+      setElRefs = _React$useState2[1];
+  var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  _react.default.useEffect(function () {
+    setElRefs(Array(length || 0).fill(null).map(function () {
+      return /*#__PURE__*/_react.default.createRef();
+    }));
+  }, [length]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return elRefs;
+  }, [elRefs]);
+  var renderAction = function renderAction(item, index) {
+    switch (item.componentType) {
+      case 'icon':
+        {
+          var _item$disabled;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            ref: elRefs[index],
+            variant: 'secondary',
+            useTransparentBackground: true,
+            shape: 'circular',
+            action: item.action,
+            disabled: (_item$disabled = item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : disabled,
+            children: item.icon
+          }, index);
+        }
+      case 'toggle':
+        {
+          var _item$disabled2;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggles.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__*/(0, _jsxRuntime.jsx)(_Dropdown.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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+      children: actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) {
+        return renderAction(item, index);
+      })
+    })
+  });
+});
+exports.HorizontalCardActions = HorizontalCardActions;
+//# sourceMappingURL=HorizontalCardActions.cjs.map

package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n index: number) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"file":"HorizontalCardActions.cjs"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HorizontalCardProps } from './types';
+declare 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 ADDED Viewed

@@ -0,0 +1,98 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import React, { useImperativeHandle } 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]);
+  useImperativeHandle(ref, function () {
+    return elRefs;
+  }, [elRefs]);
+  var renderAction = function renderAction(item, index) {
+    switch (item.componentType) {
+      case 'icon':
+        {
+          var _item$disabled;
+          return /*#__PURE__*/_jsx(IconButton, {
+            ref: elRefs[index],
+            variant: 'secondary',
+            useTransparentBackground: true,
+            shape: 'circular',
+            action: item.action,
+            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/HorizontalCardActions.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["React","useImperativeHandle","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n index: number) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"file":"HorizontalCardActions.js"}

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs ADDED Viewed

@@ -0,0 +1,60 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HorizontalCardBody = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("../../styles");
+var _LinearProgress = require("../../LinearProgress");
+var _Tag = require("../../Tag");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
+var Title = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), _styles.COLORS.neutral_500);
+var Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+var TagsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
+var HorizontalCardBody = function HorizontalCardBody(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      progress = _ref.progress,
+      tags = _ref.tags;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+      children: title
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Description, {
+      children: description
+    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagsContainer, {
+      children: tags.map(function (tag, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
+          label: tag.label,
+          variant: tag.variant,
+          icon: tag.icon
+        }, index);
+      })
+    }), progress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.LinearProgress, {
+      value: progress.value,
+      max: progress.max
+    })]
+  });
+};
+exports.HorizontalCardBody = HorizontalCardBody;
+//# sourceMappingURL=HorizontalCardBody.cjs.map

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"names":["Container","styled","div","Title","ComponentTextStyle","Bold","COLORS","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,6KAAf;;AAQA,IAAMC,KAAK,GAAGF,0BAAOC,GAAV,wIACP,+BAAkBE,2BAAmBC,IAArC,EAA2CC,eAAOC,KAAlD,CADO,EAGED,eAAOE,WAHT,CAAX;;AAOA,IAAMC,WAAW,GAAGR,0BAAOC,GAAV,gGACb,gCAAmBE,2BAAmBM,OAAtC,EAA+CJ,eAAOK,WAAtD,CADa,CAAjB;;AAIA,IAAMC,aAAa,GAAGX,0BAAOC,GAAV,qLAAnB;;AAUO,IAAMW,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AAEvE,sBACE,sBAAC,SAAD;AAAA,4BACE,qBAAC,KAAD;AAAA,gBAAQH;AAAR,MADF,EAEGC,WAAW,iBAAI,qBAAC,WAAD;AAAA,gBAAcA;AAAd,MAFlB,EAIIE,IAAI,iBACJ,qBAAC,aAAD;AAAA,gBAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;AAAA,4BACvB,qBAAC,QAAD;AAAiB,UAAA,KAAK,EAAED,GAAG,CAACE,KAA5B;AAAmC,UAAA,OAAO,EAAEF,GAAG,CAACG,OAAhD;AAAyD,UAAA,IAAI,EAAEH,GAAG,CAACI;AAAnE,WAAUH,KAAV,CADuB;AAAA,OAAT;AAAhB,MALJ,EASGJ,QAAQ,iBAAI,qBAAC,8BAAD;AAAgB,MAAA,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;AAAuC,MAAA,GAAG,EAAER,QAAQ,CAACS;AAArD,MATf;AAAA,IADF;AAaD,CApBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n`;\n\nconst Title = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\nconst Description = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n title,\n description,\n progress,\n tags,\n }) => {\n\n return (\n <Container>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n {\n tags &&\n <TagsContainer>{tags.map((tag, index) => (\n <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n </TagsContainer>\n }\n {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n </Container>\n )\n};\n"],"file":"HorizontalCardBody.cjs"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HorizontalCardProps } from './types';
+declare type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
+export declare const HorizontalCardBody: React.FunctionComponent<Props>;
+export {};

package/dist/Card/HorizontalCard/HorizontalCardBody.js ADDED Viewed

@@ -0,0 +1,40 @@
+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";
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
+var Title = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
+var Description = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var TagsContainer = 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(Container, {
+    children: [/*#__PURE__*/_jsx(Title, {
+      children: title
+    }), description && /*#__PURE__*/_jsx(Description, {
+      children: description
+    }), tags && /*#__PURE__*/_jsx(TagsContainer, {
+      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

package/dist/Card/HorizontalCard/HorizontalCardBody.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","Container","div","Title","Bold","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,kBAAnC,EAAuDC,kBAAvD,QAAgF,cAAhF;AACA,SAAQC,cAAR,QAA6B,sBAA7B;AACA,SAAQC,GAAR,QAAkB,WAAlB;;;AAEA,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAV,+JAAf;AAQA,IAAMC,KAAK,GAAGT,MAAM,CAACQ,GAAV,0HACPN,iBAAiB,CAACC,kBAAkB,CAACO,IAApB,EAA0BT,MAAM,CAACU,KAAjC,CADV,EAGEV,MAAM,CAACW,WAHT,CAAX;AAOA,IAAMC,WAAW,GAAGb,MAAM,CAACQ,GAAV,kFACbJ,kBAAkB,CAACD,kBAAkB,CAACW,OAApB,EAA6Bb,MAAM,CAACc,WAApC,CADL,CAAjB;AAIA,IAAMC,aAAa,GAAGhB,MAAM,CAACQ,GAAV,uKAAnB;AAUA,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AAEvE,sBACE,MAAC,SAAD;AAAA,4BACE,KAAC,KAAD;AAAA,gBAAQH;AAAR,MADF,EAEGC,WAAW,iBAAI,KAAC,WAAD;AAAA,gBAAcA;AAAd,MAFlB,EAIIE,IAAI,iBACJ,KAAC,aAAD;AAAA,gBAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;AAAA,4BACvB,KAAC,GAAD;AAAiB,UAAA,KAAK,EAAED,GAAG,CAACE,KAA5B;AAAmC,UAAA,OAAO,EAAEF,GAAG,CAACG,OAAhD;AAAyD,UAAA,IAAI,EAAEH,GAAG,CAACI;AAAnE,WAAUH,KAAV,CADuB;AAAA,OAAT;AAAhB,MALJ,EASGJ,QAAQ,iBAAI,KAAC,cAAD;AAAgB,MAAA,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;AAAuC,MAAA,GAAG,EAAER,QAAQ,CAACS;AAArD,MATf;AAAA,IADF;AAaD,CApBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n`;\n\nconst Title = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\nconst Description = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n title,\n description,\n progress,\n tags,\n }) => {\n\n return (\n <Container>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n {\n tags &&\n <TagsContainer>{tags.map((tag, index) => (\n <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n </TagsContainer>\n }\n {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n </Container>\n )\n};\n"],"file":"HorizontalCardBody.js"}