@laerdal/life-react-components 1.4.1-dev.9.full → 1.5.1-dev.10

package/dist/LoadingIndicator/LoadingIndicator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["LoadingWrapper","styled","div","LoadingIndicator","size","Size","Medium","color","COLORS","primary","Small"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,gdAApB;;AA4BA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2E;AAAA,uBAAxEC,IAAwE;AAAA,MAAxEA,IAAwE,0BAAjEC,YAAKC,MAA4D;AAAA,wBAApDC,KAAoD;AAAA,MAApDA,KAAoD,2BAA5CC,eAAOC,OAAqC;;AAClG,UAAQL,IAAR;AACE,SAAKC,YAAKC,MAAV;AACE,0BACE,qBAAC,cAAD;AAAA,+BACE,qBAAC,0BAAD;AAAe,UAAA,KAAK,EAAEC;AAAtB;AADF,QADF;;AAKF,SAAKF,YAAKK,KAAV;AACE,0BACE,qBAAC,cAAD;AAAA,+BACE,qBAAC,yBAAD;AAAc,UAAA,KAAK,EAAEH;AAArB;AADF,QADF;;AAKF;AACE,0BACE,qBAAC,cAAD;AAAA,+BACE,qBAAC,0BAAD;AAAe,UAAA,KAAK,EAAEA;AAAtB;AADF,QADF;AAdJ;AAoBD,CArBD;;;AAHEA,EAAAA,K;;eA0BaJ,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  size?: Size.Small | Size.Medium;\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary }: LoadingIndicatorProps) => {\n  switch (size) {\n    case Size.Medium:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case Size.Small:\n      return (\n        <LoadingWrapper>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"file":"LoadingIndicator.cjs"}

package/dist/LoadingIndicator/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoadingIndicator", {
+  enumerable: true,
+  get: function get() {
+    return _LoadingIndicator.default;
+  }
+});
+
+var _LoadingIndicator = _interopRequireDefault(require("./LoadingIndicator"));
+//# sourceMappingURL=index.cjs.map

package/dist/LoadingIndicator/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LoadingIndicator/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as LoadingIndicator } from './LoadingIndicator';\n"],"file":"index.cjs"}

package/dist/LoadingPage/GlobalLoadingPage.cjs

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _assets = require("../assets");
+
+var _LoadingIndicator = _interopRequireDefault(require("../LoadingIndicator/LoadingIndicator"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+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 LoadingMain = _styledComponents.default.main(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ", ";\n  height: 100%;\n"])), _styles.COLORS.primary_20);
+
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 64px;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n"])), _styles.COLORS.white, _styles.COLORS.neutral_200);
+
+var LogoAndMessage = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    width: 320px;\n    text-align: center;\n    \n    ", "\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+
+var LoadingIndicatorContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+
+var LoadingPage = function LoadingPage(_ref) {
+  var optionalMessage = _ref.optionalMessage,
+      includeHeader = _ref.includeHeader;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LoadingMain, {
+    "data-testid": "TestLoadingMain",
+    children: [includeHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(Header, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingIndicatorContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.default, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(LogoAndMessage, {
+      "data-testid": "TestLoadingLogoAndMessage",
+      children: [optionalMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: optionalMessage
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLoadingLogo, {})]
+    })]
+  });
+};
+
+LoadingPage.propTypes = {
+  optionalMessage: _propTypes.default.string,
+  includeHeader: _propTypes.default.bool
+};
+var _default = LoadingPage;
+exports.default = _default;
+//# sourceMappingURL=GlobalLoadingPage.cjs.map

package/dist/LoadingPage/GlobalLoadingPage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LoadingPage/GlobalLoadingPage.tsx"],"names":["LoadingMain","styled","main","COLORS","primary_20","Header","div","white","neutral_200","LogoAndMessage","ComponentTextStyle","Regular","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,WAAW,GAAGC,0BAAOC,IAAV,2LAIKC,eAAOC,UAJZ,CAAjB;;AAQA,IAAMC,MAAM,GAAGJ,0BAAOK,GAAV,sKAEUH,eAAOI,KAFjB,EAGiBJ,eAAOK,WAHxB,CAAZ;;AAMA,IAAMC,cAAc,GAAGR,0BAAOK,GAAV,mXAed,mCAAkBI,2BAAmBC,OAArC,EAA8CR,eAAOS,WAArD,CAfc,CAApB;;AAmBA,IAAMC,yBAAyB,GAAGZ,0BAAOK,GAAV,8KAA/B;;AAYA,IAAMQ,WAAiD,GAAG,SAApDA,WAAoD,OAAqD;AAAA,MAAlDC,eAAkD,QAAlDA,eAAkD;AAAA,MAAjCC,aAAiC,QAAjCA,aAAiC;AAC7G,sBACE,sBAAC,WAAD;AAAa,mBAAY,iBAAzB;AAAA,eACGA,aAAa,iBAAI,qBAAC,MAAD,KADpB,eAEE,qBAAC,yBAAD;AAAA,6BACE,qBAAC,yBAAD;AADF,MAFF,eAKE,sBAAC,cAAD;AAAgB,qBAAY,2BAA5B;AAAA,iBACGD,eAAe,iBAAI;AAAA,kBAAOA;AAAP,QADtB,eAEE,qBAAC,0BAAD,KAFF;AAAA,MALF;AAAA,IADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;eAkBaF,W","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {LaerdalLoadingLogo} from '../assets';\n\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst LoadingMain = styled.main`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ${COLORS.primary_20};\n  height: 100%;\n`;\n\nconst Header = styled.div<LoaderProps>`\n  height: 64px;\n  background-color: ${COLORS.white};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nconst LogoAndMessage = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    width: 320px;\n    text-align: center;\n    \n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst LoadingIndicatorContainer = styled.div`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\ninterface LoaderProps {\n  optionalMessage?: string;\n  includeHeader?: boolean;\n}\n\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\n  return (\n    <LoadingMain data-testid=\"TestLoadingMain\">\n      {includeHeader && <Header />}\n      <LoadingIndicatorContainer>\n        <LoadingIndicator />\n      </LoadingIndicatorContainer>\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\n        {optionalMessage && <span>{optionalMessage}</span>}\n        <LaerdalLoadingLogo />\n      </LogoAndMessage>\n    </LoadingMain>\n  );\n};\n\nexport default LoadingPage;\n"],"file":"GlobalLoadingPage.cjs"}

package/dist/LoadingPage/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GlobalLoadingPage", {
+  enumerable: true,
+  get: function get() {
+    return _GlobalLoadingPage.default;
+  }
+});
+
+var _GlobalLoadingPage = _interopRequireDefault(require("./GlobalLoadingPage"));
+//# sourceMappingURL=index.cjs.map

package/dist/LoadingPage/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LoadingPage/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as GlobalLoadingPage } from './GlobalLoadingPage';\n"],"file":"index.cjs"}

package/dist/MenuItem/MenuItem.cjs

@@ -0,0 +1,119 @@
+"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.LockedIconContainer = exports.ItemLabel = exports.ItemIcon = exports.ItemContent = exports.DropdownButtonCSS = exports.DropdownButton = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _types = require("../types");
+
+var _typography = require("../styles/typography");
+
+var _common = require("../common");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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 DropdownButton = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
+  return DropdownButtonCSS(props.size);
+});
+
+exports.DropdownButton = DropdownButton;
+
+var ItemLabel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.ItemLabel = ItemLabel;
+
+var ItemIcon = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.ItemIcon = ItemIcon;
+
+var LockedIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+exports.LockedIconContainer = LockedIconContainer;
+
+var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, LockedIconContainer);
+
+exports.ItemContent = ItemContent;
+
+var DropdownButtonCSS = function DropdownButtonCSS(size) {
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+};
+
+exports.DropdownButtonCSS = DropdownButtonCSS;
+var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _item$displayLabel;
+
+  var active = _ref.active,
+      item = _ref.item,
+      onClickHandler = _ref.onClickHandler,
+      key = _ref.key,
+      size = _ref.size,
+      className = _ref.className,
+      id = _ref.id;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownButton, {
+    type: "button",
+    size: size,
+    disabled: item.disabled || item.locked,
+    ref: ref,
+    onClick: onClickHandler,
+    className: className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
+    id: id,
+    children: [item.showDividerAbove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "divider"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemContent, {
+      children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIcon, {
+        children: item.icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemLabel, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value
+          }), item.noteLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              fontSize: '12px',
+              lineHeight: '16px'
+            },
+            children: item.noteLabel
+          })]
+        }), item.locked && /*#__PURE__*/(0, _jsxRuntime.jsx)(LockedIconContainer, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.LockedOn, {
+            color: _styles.COLORS.neutral_400,
+            className: "extraMargin",
+            size: "24px"
+          })
+        })]
+      })]
+    })]
+  }, key);
+});
+MenuItem.propTypes = {
+  onClickHandler: _propTypes.default.func.isRequired,
+  active: _propTypes.default.bool.isRequired,
+  id: _propTypes.default.string.isRequired,
+  key: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string
+};
+var _default = MenuItem;
+exports.default = _default;
+//# sourceMappingURL=MenuItem.cjs.map

package/dist/MenuItem/MenuItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_200","neutral_500","primary_20","primary_600","primary_100","primary_800","MenuItem","React","forwardRef","ref","active","item","onClickHandler","key","className","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}

package/dist/MenuItem/MenuItem.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Size } from '../types';
+import { DropdownItem } from '../Dropdown/DropdownContent';
+export interface MenuItemProps {
+    item: DropdownItem;
+    onClickHandler: (e: any) => void;
+    active: boolean;
+    id: string;
+    key: string;
+    size?: Size;
+    className?: string;
+}
+export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
+    size?: Size | undefined;
+}, never>;
+export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LockedIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default MenuItem;

package/dist/MenuItem/MenuItem.js

@@ -0,0 +1,78 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { LockedOn } from '../icons/systemicons/SystemIcons';
+import { Size } from '../types';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
+import { CommonInteractionStyling } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DropdownButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return DropdownButtonCSS(props.size);
+});
+export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+export var LockedIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\n"])));
+export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, LockedIconContainer);
+export var DropdownButtonCSS = function DropdownButtonCSS(size) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_200, COLORS.neutral_500, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500);
+};
+var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _item$displayLabel;
+
+  var active = _ref.active,
+      item = _ref.item,
+      onClickHandler = _ref.onClickHandler,
+      key = _ref.key,
+      size = _ref.size,
+      className = _ref.className,
+      id = _ref.id;
+  return /*#__PURE__*/_jsxs(DropdownButton, {
+    type: "button",
+    size: size,
+    disabled: item.disabled || item.locked,
+    ref: ref,
+    onClick: onClickHandler,
+    className: className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
+    id: id,
+    children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
+      className: "divider"
+    }), /*#__PURE__*/_jsxs(ItemContent, {
+      children: [item.icon && /*#__PURE__*/_jsx(ItemIcon, {
+        children: item.icon
+      }), /*#__PURE__*/_jsxs(ItemLabel, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("div", {
+            children: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value
+          }), item.noteLabel && /*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: '12px',
+              lineHeight: '16px'
+            },
+            children: item.noteLabel
+          })]
+        }), item.locked && /*#__PURE__*/_jsx(LockedIconContainer, {
+          children: /*#__PURE__*/_jsx(LockedOn, {
+            color: COLORS.neutral_400,
+            className: "extraMargin",
+            size: "24px"
+          })
+        })]
+      })]
+    })]
+  }, key);
+});
+MenuItem.propTypes = {
+  onClickHandler: _pt.func.isRequired,
+  active: _pt.bool.isRequired,
+  id: _pt.string.isRequired,
+  key: _pt.string.isRequired,
+  className: _pt.string
+};
+export default MenuItem;
+//# sourceMappingURL=MenuItem.js.map

package/dist/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_200","neutral_500","primary_20","primary_600","primary_100","primary_800","MenuItem","forwardRef","ref","active","item","onClickHandler","key","className","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}

package/dist/MenuItem/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _MenuItem.default;
+  }
+});
+
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+//# sourceMappingURL=index.cjs.map

package/dist/MenuItem/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export {default as MenuItem} from './MenuItem';"],"file":"index.cjs"}

package/dist/MenuItem/index.d.ts

@@ -0,0 +1 @@
+export { default as MenuItem } from './MenuItem';

package/dist/MenuItem/index.js

@@ -0,0 +1,2 @@
+export { default as MenuItem } from './MenuItem';
+//# sourceMappingURL=index.js.map

package/dist/MenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":["default","MenuItem"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,QAAnB,QAAkC,YAAlC","sourcesContent":["export {default as MenuItem} from './MenuItem';"],"file":"index.js"}

package/dist/MiniProductCard/MiniProductCard.cjs

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+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 ProductLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ", ";\n  text-decoration: none;\n\n  ", " {\n    width: 305px;\n  }\n"])), _styles.COLORS.black, _styles.BREAKPOINTS.MEDIUM);
+
+var ProductThing = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ", ";\n\n    .product-chevron-right-path {\n      fill: ", ";\n    }\n  }\n  &:active {\n    background: ", ";\n\n    .product-chevron-right-path {\n      fill: ", ";\n    }\n  }\n"])), _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_600);
+
+var ProductImage = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n"])));
+
+var ProductName = _styledComponents.default.h2(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin: 0;\n  margin-top: 3px;\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black));
+
+var ProductType = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin: 0;\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black));
+
+var ProductInnerWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n"])));
+
+var RightIconWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n"])));
+
+var MiniProductCard = function MiniProductCard(_ref) {
+  var url = _ref.url,
+      product = _ref.product;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductLink, {
+    to: url !== null && url !== void 0 ? url : '',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProductThing, {
+      children: [product.image && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductImage, {
+        src: product.image
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProductInnerWrapper, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ProductName, {
+          children: product.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductType, {
+          children: product.type
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RightIconWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ChevronRight, {
+          color: _styles.COLORS.primary,
+          className: 'product-chevron-right',
+          size: '24px'
+        })
+      })]
+    })
+  });
+};
+
+MiniProductCard.propTypes = {
+  url: _propTypes.default.string
+};
+var _default = MiniProductCard;
+exports.default = _default;
+//# sourceMappingURL=MiniProductCard.cjs.map

package/dist/MiniProductCard/MiniProductCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"names":["ProductLink","Link","COLORS","black","BREAKPOINTS","MEDIUM","ProductThing","styled","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","ComponentTextStyle","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAMA,IAAMA,WAAW,GAAG,+BAAOC,oBAAP,CAAH,uNAINC,eAAOC,KAJD,EAObC,oBAAYC,MAPC,CAAjB;;AAYA,IAAMC,YAAY,GAAGC,0BAAOC,GAAV,waAQAN,eAAOO,UARP,EAWJP,eAAOQ,WAXH,EAeAR,eAAOS,WAfP,EAkBJT,eAAOQ,WAlBH,CAAlB;;AAuBA,IAAME,YAAY,GAAGL,0BAAOM,GAAV,oKAAlB;;AAOA,IAAMC,WAAW,GAAGP,0BAAOQ,EAAV,kIACb,mCAAkBC,2BAAmBC,OAArC,EAA8Cf,eAAOC,KAArD,CADa,CAAjB;;AAMA,IAAMe,WAAW,GAAGX,0BAAOY,IAAV,8GACb,mCAAkBH,2BAAmBC,OAArC,EAA8Cf,eAAOC,KAArD,CADa,CAAjB;;AAKA,IAAMiB,mBAAmB,GAAGb,0BAAOC,GAAV,uKAAzB;;AAOA,IAAMa,gBAAgB,GAAGd,0BAAOC,GAAV,sLAAtB;;AAOA,IAAMc,eAAe,GAAG,SAAlBA,eAAkB,OAAiC;AAAA,MAA9BC,GAA8B,QAA9BA,GAA8B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AACvD,sBACE,qBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAF,aAAEA,GAAF,cAAEA,GAAF,GAAS,EAAxB;AAAA,2BACE,sBAAC,YAAD;AAAA,iBACGC,OAAO,CAACC,KAAR,iBAAiB,qBAAC,YAAD;AAAc,QAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,QADpB,eAEE,sBAAC,mBAAD;AAAA,gCACE,qBAAC,WAAD;AAAA,oBAAcD,OAAO,CAACE;AAAtB,UADF,eAEE,qBAAC,WAAD;AAAA,oBAAcF,OAAO,CAACG;AAAtB,UAFF;AAAA,QAFF,eAME,qBAAC,gBAAD;AAAA,+BACE,qBAAC,yBAAD;AAAc,UAAA,KAAK,EAAEzB,eAAO0B,OAA5B;AAAqC,UAAA,SAAS,EAAE,uBAAhD;AAAyE,UAAA,IAAI,EAAE;AAA/E;AADF,QANF;AAAA;AADF,IADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;eAsFaD,e","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product} from '../types';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\ntype CardProps = {\n  product: Product;\n  url?: string;\n};\nconst ProductLink = styled(Link)`\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ${COLORS.black};\n  text-decoration: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 305px;\n  }\n`;\n\nconst ProductThing = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ${COLORS.primary_20};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n`;\n\nconst ProductImage = styled.img`\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n`;\n\nconst ProductName = styled.h2`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n  margin-top: 3px;\n`;\n\nconst ProductType = styled.span`\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n`;\n\nconst ProductInnerWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n`;\n\nconst RightIconWrapper = styled.div`\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n`;\n\nconst MiniProductCard = ({ url, product }: CardProps) => {\n  return (\n    <ProductLink to={url ?? ''}>\n      <ProductThing>\n        {product.image && <ProductImage src={product.image} />}\n        <ProductInnerWrapper>\n          <ProductName>{product.name}</ProductName>\n          <ProductType>{product.type}</ProductType>\n        </ProductInnerWrapper>\n        <RightIconWrapper>\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\n        </RightIconWrapper>\n      </ProductThing>\n    </ProductLink>\n  );\n};\n\nexport default MiniProductCard;\n"],"file":"MiniProductCard.cjs"}

package/dist/MiniProductCard/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MiniProductCard", {
+  enumerable: true,
+  get: function get() {
+    return _MiniProductCard.default;
+  }
+});
+
+var _MiniProductCard = _interopRequireDefault(require("./MiniProductCard"));
+//# sourceMappingURL=index.cjs.map

package/dist/MiniProductCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MiniProductCard/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as MiniProductCard } from './MiniProductCard';\n"],"file":"index.cjs"}