@citygross/components 0.7.16 → 0.7.20

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

@@ -4,21 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var Form_styles = require('./Form.styles.js');
-var Divider_styles = require('../Divider/Divider.styles.js');
-var designTokens = require('@citygross/design-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Form(_a) {
-    var _b, _c;
-    var title = _a.title, icon = _a.icon, children = _a.children, onSubmit = _a.onSubmit;
-    return (React__default['default'].createElement(Form_styles.FormWrapper, { onSubmit: function (e) { return onSubmit && onSubmit(e); } },
+    var title = _a.title, icon = _a.icon, children = _a.children, onSubmit = _a.onSubmit, background = _a.background;
+    return (React__default['default'].createElement(Form_styles.FormWrapper, { onSubmit: function (e) { return onSubmit && onSubmit(e); }, background: background },
         React__default['default'].createElement(Form_styles.FormHeader, null,
-            icon,
-            React__default['default'].createElement(Form_styles.HeaderTitle, null, title)),
-        React__default['default'].createElement(Divider_styles.Divider, { xsSpacing: (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, lgSpacing: (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs }),
+            icon && icon,
+            title),
         children));
 }
 

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

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

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

@@ -9,12 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var FormWrapper = styled__default['default'].form(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
-var FormHeader = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var HeaderTitle = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var templateObject_1, templateObject_2, templateObject_3;
+var FormWrapper = styled__default['default'].form(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return props.background || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var FormHeader = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n  gap: ", "px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var templateObject_1, templateObject_2;
 
 exports.FormHeader = FormHeader;
 exports.FormWrapper = FormWrapper;
-exports.HeaderTitle = HeaderTitle;
 //# sourceMappingURL=Form.styles.js.map

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

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

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

@@ -13,7 +13,7 @@ var ItemInformationContainer = styled__default['default'].div(templateObject_1 |
 var ListItemContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"])));
 var ListLeft = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: 20px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
 var ListRight = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"])));
-var ListImageContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
+var ListImageContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
 var ListImage = styled__default['default'].img(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: 50px;\n"], ["\n  max-width: 100%;\n  max-height: 50px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 

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

@@ -18,25 +18,24 @@ function ListItemWithRadio(_a) {
     var _b, _c;
     var item = _a.item, loading = _a.loading, rightChildren = _a.rightChildren, radioChildren = _a.radioChildren;
     return (React__default['default'].createElement(ListItemWithRadio_styles.ListItemContainer, null,
-        React__default['default'].createElement(ListItemWithRadio_styles.ListLeft, null,
-            React__default['default'].createElement(ListItemWithRadio_styles.ListImageContainer, null,
-                React__default['default'].createElement(ListItemWithRadio_styles.ListImage, { src: (item === null || item === void 0 ? void 0 : item.image) || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name })),
-            loading ? (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement(ListItemWithRadio_styles.ListItemHeader, null,
-                    React__default['default'].createElement(Skeleton__default['default'], { width: 180 })),
-                React__default['default'].createElement(ListItemWithRadio_styles.RadioWrapper, null,
-                    React__default['default'].createElement(Skeleton__default['default'], { width: 140, count: 2, style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            marginBottom: ((_b = index.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"
-                        } })))) : (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement(ListItemWithRadio_styles.ListItemHeader, null,
-                    React__default['default'].createElement(typography.BodyText, { fontWeight: 'semiBold' }, item === null || item === void 0 ? void 0 :
-                        item.name,
-                        " "),
-                    React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark }, item === null || item === void 0 ? void 0 : item.description)),
-                React__default['default'].createElement(ListItemWithRadio_styles.RadioWrapper, null, radioChildren && radioChildren)))),
-        rightChildren && rightChildren));
+        React__default['default'].createElement(ListItemWithRadio_styles.ListImageContainer, null,
+            React__default['default'].createElement(ListItemWithRadio_styles.ListImage, { src: (item === null || item === void 0 ? void 0 : item.image) || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name })),
+        loading ? (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(ListItemWithRadio_styles.ListItemHeader, null,
+                React__default['default'].createElement(Skeleton__default['default'], { width: 180 })),
+            React__default['default'].createElement(ListItemWithRadio_styles.RadioWrapper, null,
+                React__default['default'].createElement(Skeleton__default['default'], { width: 140, count: 2, style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        marginBottom: ((_b = index.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"
+                    } })))) : (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(ListItemWithRadio_styles.ListItemHeader, null,
+                React__default['default'].createElement(typography.BodyText, { fontWeight: 'semiBold' }, item === null || item === void 0 ? void 0 :
+                    item.name,
+                    " "),
+                React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark }, item === null || item === void 0 ? void 0 : item.description)),
+            React__default['default'].createElement(ListItemWithRadio_styles.RadioWrapper, null, radioChildren && radioChildren))),
+        rightChildren && (React__default['default'].createElement(ListItemWithRadio_styles.RightChildWrapper, null, rightChildren))));
 }
 
 exports.ListItemWithRadio = ListItemWithRadio;

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

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

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

@@ -11,17 +11,17 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var ListImageContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  grid-area: img;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  grid-area: img;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
 var ListImage = styled__default['default'].img(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var ListItemContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var ListLeft = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header'\n    'radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header'\n      '. radio';\n  }\n"], ["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header'\n    'radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header'\n      '. radio';\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.m1; });
-var ListItemHeader = styled__default['default'](ListItemContainer)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"], ["\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var RadioWrapper = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"], ["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var ListItemContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header rightChild'\n    'radio radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header rightChild'\n      '. radio .';\n  }\n"], ["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header rightChild'\n    'radio radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header rightChild'\n      '. radio .';\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.m1; });
+var ListItemHeader = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var RadioWrapper = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"], ["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var RightChildWrapper = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  grid-area: rightChild;\n"], ["\n  grid-area: rightChild;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 exports.ListImage = ListImage;
 exports.ListImageContainer = ListImageContainer;
 exports.ListItemContainer = ListItemContainer;
 exports.ListItemHeader = ListItemHeader;
-exports.ListLeft = ListLeft;
 exports.RadioWrapper = RadioWrapper;
+exports.RightChildWrapper = RightChildWrapper;
 //# sourceMappingURL=ListItemWithRadio.styles.js.map

package/build/cjs/components/src/components/RadioGroup/RadioListItem.styles.js

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var BaseRadioListItemContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  display: flex;\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
+var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
 var ExtraTextContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  flex-basis: 100%;\n  margin-left: ", "px;\n  text-align: start;\n"], ["\n  flex-basis: 100%;\n  margin-left: ", "px;\n  text-align: start;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
 var StyledH3 = styled__default['default'](typography.H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -13,7 +13,7 @@ var Container = styled__default['default'].div(templateObject_1 || (templateObje
 var SliderContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
 var LeftIconButtonContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
 var RightIconButtonContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var ItemsContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.itemGap; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var ItemsContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.Container = Container;

package/build/cjs/components/src/containers/PageContainer/PageContainer.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var PageContainer = function (_a) {
-    var children = _a.children, containerBackground = _a.containerBackground, maxWidth = _a.maxWidth, _b = _a.shadow, shadow = _b === void 0 ? true : _b, background = _a.background;
+    var children = _a.children, containerBackground = _a.containerBackground, maxWidth = _a.maxWidth, shadow = _a.shadow, background = _a.background;
     return (React__default['default'].createElement(PageContainer_styles.CommonPageWrapper, { background: background },
         React__default['default'].createElement(PageContainer_styles.CommonPage, { shadow: shadow, background: containerBackground, maxWidth: maxWidth }, children)));
 };

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var AddressBlock = require('./components/AddressBlock/AddressBlock.js');
+var AlertBox = require('./components/AlertBox/AlertBox.js');
 var Button = require('./components/Button/Button.js');
 var Header = require('./components/Header/Header.js');
 var Badge = require('./components/Badge/Badge.js');
@@ -51,6 +52,7 @@ var TwoColumnsPageContainer = require('./containers/TwoColumnsContainer/TwoColum
 
 
 exports.AddressBlock = AddressBlock.AddressBlock;
+exports.AlertBox = AlertBox.AlertBox;
 exports.Button = Button.Button;
 Object.defineProperty(exports, 'ButtonColor', {
 	enumerable: true,

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/AlertBox/AlertBox.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
+import { AlertBox as AlertBox$1 } from './AlertBox.styles.js';
+
+function AlertBox(_a) {
+    var _b, _c;
+    var _d = _a.background, background = _d === void 0 ? (_b = theme_1.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _d, _e = _a.borderColor, borderColor = _e === void 0 ? (_c = theme_1.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, icon = _a.icon, children = _a.children;
+    return (React.createElement(AlertBox$1, { background: background, borderColor: borderColor },
+        icon,
+        children));
+}
+
+export { AlertBox };
+//# sourceMappingURL=AlertBox.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var AlertBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return props.background || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight); }, function (props) { var _a; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockBorderWidth) + "px solid " + props.borderColor; }, function (props) { var _a, _b; return ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall) + "px 0 0 " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall) + "px"; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var templateObject_1;
+
+export { AlertBox };
+//# sourceMappingURL=AlertBox.styles.js.map

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

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

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

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import 'react';
 import '@citygross/typography';
 import '../AddressBlock/AddressBlock.styles.js';
+import '../../../../design-tokens/build/index.js';
+import '../AlertBox/AlertBox.styles.js';
 import './Button.js';
 import '@citygross/utils';
 import '@citygross/design-tokens';
@@ -16,7 +18,6 @@ import 'react-loading-skeleton';
 import '../CartItemSummary/CartItemSummary.styles.js';
 import '../Divider/Divider.styles.js';
 import '../CartSummary/CartSummary.styles.js';
-import '../../../../design-tokens/build/index.js';
 import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
 import '../Collapsable/Collapsable.styles.js';
 import '../DeliverySlotItem/DeliverySlotItem.styles.js';

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

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

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

@@ -1,9 +1,9 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var CartItemSummaryWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var CancelledWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 10px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 10px;\n"])));
-var ItemInformationContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 10px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 10px;\n"])));
+var CartItemSummaryWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 20px;\n"], ["\n  display: flex;\n  gap: 20px;\n"])));
+var CancelledWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var ItemInformationContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;
 
 export { CancelledWrapper, CartItemSummaryWrapper, ItemInformationContainer };

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

@@ -1,3 +1,4 @@
+import { __rest } from '../../../../_virtual/_tslib.js';
 import { formatPrice } from '@citygross/utils';
 import React from 'react';
 import { Divider } from '../Divider/Divider.js';
@@ -22,11 +23,12 @@ var calculateSummaryLine = function (items) {
     });
     return sumOfItems;
 };
-function CartSummary(cartSummary) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var charges = (_a = cartSummary.charges) !== null && _a !== void 0 ? _a : [];
-    var bags = (_b = cartSummary.bags) !== null && _b !== void 0 ? _b : [];
-    var groceries = (_c = cartSummary.groceries) !== null && _c !== void 0 ? _c : [];
+function CartSummary(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _m = _a.saveLabel, saveLabel = _m === void 0 ? 'sparat via erbjudanden' : _m, _o = _a.shippingLabel, shippingLabel = _o === void 0 ? 'frakt' : _o, _p = _a.totalLabel, totalLabel = _p === void 0 ? 'totalt' : _p, _q = _a.taxLabel, taxLabel = _q === void 0 ? 'varav moms' : _q, cartSummary = __rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel"]);
+    var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
+    var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
+    var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
     var sumOfBags = calculateSummaryLine(bags);
     var sumOfGroceries = calculateSummaryLine(groceries);
     return (React.createElement(CartSummaryContainer, null,
@@ -37,42 +39,42 @@ function CartSummary(cartSummary) {
             React.createElement(CartSummaryHeader, { title: cartSummary.title },
                 bags.length > 0 && (React.createElement(CartLine, null,
                     React.createElement(BodyText, null,
-                        "Matkassar ",
+                        "matkassar ",
                         sumOfBags.quantity,
                         " st"),
                     React.createElement(AmountWrapper, null,
-                        sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_d = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _d === void 0 ? void 0 : _d.dark }, formatPrice(sumOfBags.cancelledAmount))),
+                        sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_e = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _e === void 0 ? void 0 : _e.dark }, formatPrice(sumOfBags.cancelledAmount))),
                         React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(sumOfBags.amount))))),
                 groceries.length > 0 && (React.createElement(CartLine, null,
                     React.createElement(BodyText, null,
-                        "Matvaror ",
+                        "matvaror ",
                         sumOfGroceries.quantity,
                         " st"),
                     React.createElement(AmountWrapper, null,
-                        sumOfGroceries.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_e = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _e === void 0 ? void 0 : _e.dark }, formatPrice(sumOfGroceries.cancelledAmount))),
+                        sumOfGroceries.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_f = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _f === void 0 ? void 0 : _f.dark }, formatPrice(sumOfGroceries.cancelledAmount))),
                         React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(sumOfGroceries.amount))))),
-                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React.createElement(Divider, { xsSpacing: (_f = theme_1.spacings) === null || _f === void 0 ? void 0 : _f.xs, lgSpacing: (_g = theme_1.spacings) === null || _g === void 0 ? void 0 : _g.xs })), charges === null || charges === void 0 ? void 0 :
+                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React.createElement(Divider, { xsSpacing: (_g = theme_1.spacings) === null || _g === void 0 ? void 0 : _g.xs, lgSpacing: (_h = theme_1.spacings) === null || _h === void 0 ? void 0 : _h.xs })), charges === null || charges === void 0 ? void 0 :
                 charges.map(function (charge) {
-                    var _a;
+                    var _a, _b;
                     return (React.createElement(CartLine, { key: charge.name },
-                        React.createElement(BodyText, null, charge.name),
+                        React.createElement(BodyText, null, (_a = charge === null || charge === void 0 ? void 0 : charge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()),
                         React.createElement(AmountWrapper, null,
-                            charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_a = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _a === void 0 ? void 0 : _a.dark }, formatPrice(charge.cancelledAmount))),
+                            charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_b = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _b === void 0 ? void 0 : _b.dark }, formatPrice(charge.cancelledAmount))),
                             React.createElement(BodyText, null, formatPrice(charge.amount)))));
                 }),
                 cartSummary.totalDiscount > 0 && (React.createElement(CartLine, null,
-                    React.createElement(BodyText, { color: (_h = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _h === void 0 ? void 0 : _h.alertRed }, "Sparat via erbjudanden"),
-                    React.createElement(BodyText, { color: (_j = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _j === void 0 ? void 0 : _j.alertRed }, formatPrice(cartSummary.totalDiscount))))),
+                    React.createElement(BodyText, { color: (_j = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _j === void 0 ? void 0 : _j.alertRed }, saveLabel),
+                    React.createElement(BodyText, { color: (_k = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _k === void 0 ? void 0 : _k.alertRed }, formatPrice(cartSummary.totalDiscount))))),
             React.createElement(CartSummaryFooter, null,
-                ((_k = cartSummary.deliveryFee) === null || _k === void 0 ? void 0 : _k.amount) &&
+                ((_l = cartSummary.deliveryFee) === null || _l === void 0 ? void 0 : _l.amount) &&
                     cartSummary.deliveryFee.amount > 0 && (React.createElement(CartLine, null,
-                    React.createElement(BodyText, null, "Frakt:"),
+                    React.createElement(BodyText, null, shippingLabel),
                     React.createElement(BodyText, null, formatPrice(cartSummary.deliveryFee.amount)))),
                 React.createElement(CartLine, null,
-                    React.createElement(H3, { fontWeight: 'semiBold' }, "Totalt:"),
+                    React.createElement(H3, { fontWeight: 'semiBold' }, totalLabel),
                     React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(cartSummary.totalAmount))),
                 React.createElement(CartLine, null,
-                    React.createElement(BodyText, null, "Varav moms:"),
+                    React.createElement(BodyText, null, taxLabel),
                     React.createElement(BodyText, null, formatPrice(cartSummary.totalTaxAmount)))))));
 }
 

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

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

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

@@ -23,10 +23,13 @@ function DeliverySlotItem(_a) {
             .toLocaleLowerCase());
     }, [width]);
     var slotRef = useRef(null);
-    var _e = useState(false), isVisible = _e[0], setIsVisible = _e[1];
+    var _e = useState(true), isVisible = _e[0], setIsVisible = _e[1];
     var callbackFn = function (entries) {
         var entry = entries[0];
-        setIsVisible(entry.isIntersecting);
+        if (!entry) {
+            return setIsVisible(true);
+        }
+        setIsVisible(!entry.isIntersecting);
     };
     var options = {
         root: null,
@@ -35,6 +38,8 @@ function DeliverySlotItem(_a) {
     };
     useEffect(function () {
         var observer = new IntersectionObserver(callbackFn, options);
+        if (!observer)
+            return;
         if (slotRef.current)
             observer.observe(slotRef === null || slotRef === void 0 ? void 0 : slotRef.current);
         return function () {
@@ -46,7 +51,7 @@ function DeliverySlotItem(_a) {
         return string.charAt(0).toUpperCase() + string.slice(1);
     }
     var removeLeadingZero = function (day) { return day.replace(/^0+/, ''); };
-    return (React.createElement(DeliverySlotItemContainer, { onClick: !disabled ? onSelect : function () { return null; }, disabled: disabled, isVisible: isVisible, ref: slotRef },
+    return (React.createElement(DeliverySlotItemContainer, { onClick: !disabled ? onSelect : function () { return null; }, disabled: disabled, isVisible: !isVisible, ref: slotRef, selected: selected },
         React.createElement(DeliverySlotHeaderContainer, { disabled: disabled, selected: selected },
             React.createElement(DeliverySlotHeaderText, { disabled: disabled },
                 React.createElement(BodyText, { color: selected ? 'white' : 'black' }, capitalizeFirstLetter(weekDay)))),

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

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

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

@@ -1,30 +1,29 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var styledDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: solid 1px\n    ", ";\n"], ["\n  border: solid 1px\n    ", ";\n"])), function (props) {
+var DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
-        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter;
-});
-var DeliverySlotItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidthDesktop; }, function (props) { return (props.disabled ? 'default' : 'pointer'); });
-var DeliverySlotHeaderContainer = styled(styledDiv)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  width: stretch;\n  border-radius: 5px 5px 0 0;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"], ["\n  display: flex;\n  width: stretch;\n  border-radius: 5px 5px 0 0;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"])), function (props) {
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
+}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidthDesktop; }, function (props) { return (props.disabled ? 'default' : 'pointer'); });
+var DeliverySlotHeaderContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"], ["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"])), function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
-        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter;
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
 });
-var DeliverySlotHeaderText = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n"], ["\n  padding: ", "px;\n  ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.disabled && 'opacity: 0.4'; });
-var DeliverySlotContainer = styled(styledDiv)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  border-radius: 0 0 5px 5px;\n  background: ", ";\n"], ["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  border-radius: 0 0 5px 5px;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
+var DeliverySlotHeaderText = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n"], ["\n  padding: ", "px;\n  ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.disabled && 'opacity: 0.4'; });
+var DeliverySlotContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n"], ["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight
         : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
 });
-var DeliverySlotBody = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
-var DisabledLabel = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", "px 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
-var DotContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: center;\n  display: flex;\n  padding: ", "px 0;\n"], ["\n  justify-content: center;\n  display: flex;\n  padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var DeliverySlotBody = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
+var DisabledLabel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", "px 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var DotContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  justify-content: center;\n  display: flex;\n  padding: ", "px 0;\n"], ["\n  justify-content: center;\n  display: flex;\n  padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotItemContainer, DisabledLabel, DotContainer };
 //# sourceMappingURL=DeliverySlotItem.styles.js.map

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

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

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

@@ -1,16 +1,12 @@
 import React from 'react';
-import { FormWrapper, FormHeader, HeaderTitle } from './Form.styles.js';
-import { Divider } from '../Divider/Divider.styles.js';
-import { theme } from '@citygross/design-tokens';
+import { FormWrapper, FormHeader } from './Form.styles.js';
 
 function Form(_a) {
-    var _b, _c;
-    var title = _a.title, icon = _a.icon, children = _a.children, onSubmit = _a.onSubmit;
-    return (React.createElement(FormWrapper, { onSubmit: function (e) { return onSubmit && onSubmit(e); } },
+    var title = _a.title, icon = _a.icon, children = _a.children, onSubmit = _a.onSubmit, background = _a.background;
+    return (React.createElement(FormWrapper, { onSubmit: function (e) { return onSubmit && onSubmit(e); }, background: background },
         React.createElement(FormHeader, null,
-            icon,
-            React.createElement(HeaderTitle, null, title)),
-        React.createElement(Divider, { xsSpacing: (_b = theme === null || theme === void 0 ? void 0 : theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, lgSpacing: (_c = theme === null || theme === void 0 ? void 0 : theme.spacings) === null || _c === void 0 ? void 0 : _c.xs }),
+            icon && icon,
+            title),
         children));
 }
 

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

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

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

@@ -1,10 +1,9 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var FormWrapper = styled.form(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
-var FormHeader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var HeaderTitle = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var templateObject_1, templateObject_2, templateObject_3;
+var FormWrapper = styled.form(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return props.background || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var FormHeader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n  gap: ", "px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var templateObject_1, templateObject_2;
 
-export { FormHeader, FormWrapper, HeaderTitle };
+export { FormHeader, FormWrapper };
 //# sourceMappingURL=Form.styles.js.map

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

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

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

@@ -5,7 +5,7 @@ var ItemInformationContainer = styled.div(templateObject_1 || (templateObject_1
 var ListItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"])));
 var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: 20px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
 var ListRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"])));
-var ListImageContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
+var ListImageContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
 var ListImage = styled.img(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-width: 100%;\n  max-height: 50px;\n"], ["\n  max-width: 100%;\n  max-height: 50px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;