@citygross/components 0.7.245 → 0.7.246

package/build/@types/index.d.ts

@@ -77,3 +77,4 @@ export * from './components/ToolTipDialog/ToolTipDialog';
 export * from './components/CartSubTotal/CartSubTotal';
 export * from './components/CgButton/CgButton';
 export * from './components/CartCardLabel/CartCardLabel';
+export * from './components/CartCard/CartCard';

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js

@@ -93,6 +93,7 @@ require('../ToolTipDialog/ToolTipDialog.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
 require('../CgButton/CgButton.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
+require('../CartCard/CartCard.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/CartCard/CartCard.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var fallback_grocery = require('./assets/fallback_grocery.svg.js');
+var CartCard_styles = require('./CartCard.styles.js');
+var typography = require('@citygross/typography');
+var icons = require('@citygross/icons');
+var CgButton = require('../CgButton/CgButton.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CartCard = function (_a) {
+    var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, quanitytSelector = _a.quanitytSelector;
+    return (React__default["default"].createElement(CartCard_styles.CartCardContainer, null,
+        React__default["default"].createElement(CartCard_styles.CartCardImage, { src: image || fallback_grocery }),
+        React__default["default"].createElement(CartCard_styles.CartCardInner, null,
+            React__default["default"].createElement(CartCard_styles.CartCardInnerTop, null,
+                React__default["default"].createElement(CartCard_styles.CartCardInfo, null,
+                    markings && (React__default["default"].createElement(CartCard_styles.MarkingsContainer, null, markings)),
+                    title && React__default["default"].createElement(typography.H3, null, title),
+                    description && description),
+                showDelete && (React__default["default"].createElement("div", null,
+                    React__default["default"].createElement(CgButton.CgButton, { onClick: onDelete, variant: CgButton.EButtonVariant.secondary, icon: React__default["default"].createElement(icons.Icons.Trash, { width: 16, height: 16 }) })))),
+            React__default["default"].createElement(CartCard_styles.CartCardPriceContainer, null,
+                React__default["default"].createElement(CartCard_styles.PriceContainer, null,
+                    price,
+                    value === maxValue && maxReachedWarning && (React__default["default"].createElement(CartCard_styles.MaxWarning, null, maxReachedWarning))),
+                !showDelete && quanitytSelector))));
+};
+
+exports.CartCard = CartCard;
+//# sourceMappingURL=CartCard.js.map

package/build/cjs/components/src/components/CartCard/CartCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCard.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/CartCard/CartCard.styles.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+var global_styles = require('../../shared/global.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var CartCardImage = styled__default["default"].img(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n"], ["\n  width: 48px;\n  height: 48px;\n"])));
+var CartCardContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  width: 100%;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var CartCardInfo = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var CartCardInnerTop = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CartCardInner = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var CartCardPriceContainer = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: ", "px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  ", "\n  width: ", "px;\n  height: ", "px;\n  display: grid;\n  place-content: center;\n\n  border-radius: ", "px;\n"], ["\n  ", "\n  width: ", "px;\n  height: ", "px;\n  display: grid;\n  place-content: center;\n\n  border-radius: ", "px;\n"])), global_styles.focusVisible, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var MaxWarningAnimate = styled.keyframes(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n0% { display: block }\n100% { display: none }\n"], ["\n0% { display: block }\n100% { display: none }\n"])));
+var PriceContainer = styled__default["default"].div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  position: relative;\n  flex: 1;\n"], ["\n  position: relative;\n  flex: 1;\n"])));
+var MaxWarning = styled__default["default"].div(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  animation: ", " 2s forwards;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  animation: ", " 2s forwards;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: ", ";\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed; }, MaxWarningAnimate, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
+var MarkingsContainer = styled__default["default"].div(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n  margin-bottom: ", "px;\n"], ["\n  margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+
+exports.CartCardContainer = CartCardContainer;
+exports.CartCardImage = CartCardImage;
+exports.CartCardInfo = CartCardInfo;
+exports.CartCardInner = CartCardInner;
+exports.CartCardInnerTop = CartCardInnerTop;
+exports.CartCardPriceContainer = CartCardPriceContainer;
+exports.MarkingsContainer = MarkingsContainer;
+exports.MaxWarning = MaxWarning;
+exports.PriceContainer = PriceContainer;
+//# sourceMappingURL=CartCard.styles.js.map

package/build/cjs/components/src/components/CartCard/CartCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCard.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/CartCard/assets/fallback_grocery.svg.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\n    <title>shopping_cart_loaded</title>\n    <desc>Created with Sketch.</desc>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\n                </g>\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                </g>\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                </g>\n            </g>\n        </g>\n    </g>\n</svg>";
+
+module.exports = FallbackIcon;
+//# sourceMappingURL=fallback_grocery.svg.js.map

package/build/cjs/components/src/components/CartCard/assets/fallback_grocery.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallback_grocery.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js

@@ -93,6 +93,7 @@ require('../ToolTipDialog/ToolTipDialog.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
 require('../CgButton/CgButton.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
+require('../CartCard/CartCard.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/index.js

@@ -84,6 +84,7 @@ var ToolTipDialog = require('./components/ToolTipDialog/ToolTipDialog.js');
 var CartSubTotal = require('./components/CartSubTotal/CartSubTotal.js');
 var CgButton = require('./components/CgButton/CgButton.js');
 var CartCardLabel = require('./components/CartCardLabel/CartCardLabel.js');
+var CartCard = require('./components/CartCard/CartCard.js');
 
 
 
@@ -212,4 +213,5 @@ Object.defineProperty(exports, 'ECgButtonSize', {
 	get: function () { return CgButton.ECgButtonSize; }
 });
 exports.CartCardLabel = CartCardLabel.CartCardLabel;
+exports.CartCard = CartCard.CartCard;
 //# sourceMappingURL=index.js.map

package/build/cjs/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/AddressBlock/AddressBlock.js

@@ -89,6 +89,7 @@ import '../ToolTipDialog/ToolTipDialog.styles.js';
 import '../CartSubTotal/CartSubTotal.js';
 import '../CgButton/CgButton.js';
 import '../CartCardLabel/CartCardLabel.styles.js';
+import '../CartCard/CartCard.styles.js';
 
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;

package/build/es/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/CartCard/CartCard.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import FallbackIcon from './assets/fallback_grocery.svg.js';
+import { CartCardContainer, CartCardImage, CartCardInner, CartCardInnerTop, CartCardInfo, MarkingsContainer, CartCardPriceContainer, PriceContainer, MaxWarning } from './CartCard.styles.js';
+import { H3 } from '@citygross/typography';
+import { Icons } from '@citygross/icons';
+import { CgButton, EButtonVariant } from '../CgButton/CgButton.js';
+
+var CartCard = function (_a) {
+    var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, quanitytSelector = _a.quanitytSelector;
+    return (React.createElement(CartCardContainer, null,
+        React.createElement(CartCardImage, { src: image || FallbackIcon }),
+        React.createElement(CartCardInner, null,
+            React.createElement(CartCardInnerTop, null,
+                React.createElement(CartCardInfo, null,
+                    markings && (React.createElement(MarkingsContainer, null, markings)),
+                    title && React.createElement(H3, null, title),
+                    description && description),
+                showDelete && (React.createElement("div", null,
+                    React.createElement(CgButton, { onClick: onDelete, variant: EButtonVariant.secondary, icon: React.createElement(Icons.Trash, { width: 16, height: 16 }) })))),
+            React.createElement(CartCardPriceContainer, null,
+                React.createElement(PriceContainer, null,
+                    price,
+                    value === maxValue && maxReachedWarning && (React.createElement(MaxWarning, null, maxReachedWarning))),
+                !showDelete && quanitytSelector))));
+};
+
+export { CartCard };
+//# sourceMappingURL=CartCard.js.map

package/build/es/components/src/components/CartCard/CartCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCard.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/CartCard/CartCard.styles.js

@@ -0,0 +1,19 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled, { keyframes } from 'styled-components';
+import { focusVisible } from '../../shared/global.styles.js';
+
+var CartCardImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n"], ["\n  width: 48px;\n  height: 48px;\n"])));
+var CartCardContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  width: 100%;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var CartCardInfo = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var CartCardInnerTop = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CartCardInner = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var CartCardPriceContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: ", "px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  width: ", "px;\n  height: ", "px;\n  display: grid;\n  place-content: center;\n\n  border-radius: ", "px;\n"], ["\n  ", "\n  width: ", "px;\n  height: ", "px;\n  display: grid;\n  place-content: center;\n\n  border-radius: ", "px;\n"])), focusVisible, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var MaxWarningAnimate = keyframes(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n0% { display: block }\n100% { display: none }\n"], ["\n0% { display: block }\n100% { display: none }\n"])));
+var PriceContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  flex: 1;\n"], ["\n  position: relative;\n  flex: 1;\n"])));
+var MaxWarning = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  animation: ", " 2s forwards;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  animation: ", " 2s forwards;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: ", ";\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed; }, MaxWarningAnimate, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
+var MarkingsContainer = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin-bottom: ", "px;\n"], ["\n  margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+
+export { CartCardContainer, CartCardImage, CartCardInfo, CartCardInner, CartCardInnerTop, CartCardPriceContainer, MarkingsContainer, MaxWarning, PriceContainer };
+//# sourceMappingURL=CartCard.styles.js.map

package/build/es/components/src/components/CartCard/CartCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCard.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/CartCard/assets/fallback_grocery.svg.js

@@ -0,0 +1,4 @@
+var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\n    <title>shopping_cart_loaded</title>\n    <desc>Created with Sketch.</desc>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\n                </g>\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                </g>\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                </g>\n            </g>\n        </g>\n    </g>\n</svg>";
+
+export { FallbackIcon as default };
+//# sourceMappingURL=fallback_grocery.svg.js.map

package/build/es/components/src/components/CartCard/assets/fallback_grocery.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallback_grocery.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/build/es/components/src/components/WarningLabel/WarningLabel.js

@@ -89,6 +89,7 @@ import '../ToolTipDialog/ToolTipDialog.styles.js';
 import '../CartSubTotal/CartSubTotal.js';
 import '../CgButton/CgButton.js';
 import '../CartCardLabel/CartCardLabel.styles.js';
+import '../CartCard/CartCard.styles.js';
 
 function WarningLabel(_a) {
     var children = _a.children, background = _a.background, toolTip = _a.toolTip;

package/build/es/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/index.js

@@ -80,4 +80,5 @@ export { ToolTipDialog } from './components/ToolTipDialog/ToolTipDialog.js';
 export { CartSubTotal, ECartSubTotalTypes } from './components/CartSubTotal/CartSubTotal.js';
 export { CgButton, EButtonVariant, ECgButtonSize } from './components/CgButton/CgButton.js';
 export { CartCardLabel } from './components/CartCardLabel/CartCardLabel.js';
+export { CartCard } from './components/CartCard/CartCard.js';
 //# sourceMappingURL=index.js.map

package/build/es/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.245",
+  "version": "0.7.246",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "8206040a0275542fde284e4c10bdf89568be6ab8"
+  "gitHead": "112f85370c5e9d36da51f8282a09209088934d99"
 }