@citygross/components 0.7.50 → 0.7.54

package/build/@types/components/BackgroundImage/BackgroundImage.d.ts

@@ -3,6 +3,7 @@ export declare type TBackgroundImage = {
     children?: JSX.Element;
     height?: number;
     width?: number;
+    showBackdrop?: boolean;
     onClick?: () => void;
 };
-export declare function BackgroundImage({ image, height, width, onClick, children }: TBackgroundImage): JSX.Element;
+export declare function BackgroundImage({ image, height, width, onClick, showBackdrop, children }: TBackgroundImage): JSX.Element;

package/build/@types/components/BackgroundImage/BackgroundImage.styles.d.ts

@@ -5,3 +5,6 @@ export declare type TBackgroundContainer = {
 };
 export declare const BackgroundContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBackgroundContainer, never>;
 export declare const BackgroundImgContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const BackgroundGradient: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const NextImagecontainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/DateBox/DateBox.d.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 export declare type TDateBox = {
-    dateHeader?: string;
-    dateText?: string;
+    dateHeader?: React.ReactNode;
+    children?: React.ReactNode;
+    labelBackground?: string;
 };
-export declare function DateBox({ dateHeader, dateText }: TDateBox): JSX.Element;
+export declare function DateBox({ dateHeader, labelBackground, children }: TDateBox): JSX.Element;

package/build/@types/components/DateBox/DateBox.stories.d.ts

@@ -3,6 +3,18 @@ import { DateBox, TDateBox } from './DateBox';
 declare const _default: {
     component: typeof DateBox;
     title: string;
+    argTypes: {
+        labelBackground: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+    };
+    args: {
+        labelBackground: string | undefined;
+    };
 };
 export default _default;
 export declare const Default: Story<TDateBox>;

package/build/@types/components/DateBox/DateBox.styles.d.ts

@@ -1,3 +1,8 @@
 export declare const StyledDateBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const WeekBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const WeekNumber: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+declare type TWeekBox = {
+    labelBackground?: string;
+};
+export declare const WeekBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWeekBox, never>;
+export declare const WeekNumber: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DateHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/build/@types/components/WarningLabel/WarningLabel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type TWarningLabel = {
+    children: React.ReactNode;
+    background: string;
+    toolTip?: React.ReactNode;
+};
+export declare function WarningLabel({ children, background, toolTip }: TWarningLabel): JSX.Element;

package/build/@types/components/WarningLabel/WarningLabel.stories.d.ts

@@ -0,0 +1,18 @@
+import { Story } from '@storybook/react';
+import { WarningLabel, TWarningLabel } from './WarningLabel';
+declare const _default: {
+    component: typeof WarningLabel;
+    title: string;
+    argTypes: {
+        background: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: Story<TWarningLabel>;
+export declare const withIcon: Story<TWarningLabel>;

package/build/@types/components/WarningLabel/WarningLabel.styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type TWarningIndicator = {
+    background?: string;
+    toolTip?: React.ReactNode;
+};
+export declare const WarningIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWarningIndicator, never>;

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

@@ -55,3 +55,4 @@ export * from './components/Pagination/Pagination';
 export * from './containers/PageContainer/PageContainer';
 export * from './containers/TwoColumnsContainer/TwoColumnsPageContainer';
 export * from './components/UnorderedList';
+export * from './components/WarningLabel/WarningLabel';

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

@@ -10,10 +10,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function BackgroundImage(_a) {
-    var image = _a.image, height = _a.height, width = _a.width, onClick = _a.onClick, children = _a.children;
+    var image = _a.image, height = _a.height, width = _a.width, onClick = _a.onClick, _b = _a.showBackdrop, showBackdrop = _b === void 0 ? true : _b, children = _a.children;
     return (React__default['default'].createElement(BackgroundImage_styles.BackgroundContainer, { height: height, width: width, onClick: onClick },
-        React__default['default'].createElement(BackgroundImage_styles.BackgroundImgContainer, null, image),
-        children));
+        React__default['default'].createElement(BackgroundImage_styles.BackgroundImgContainer, null,
+            React__default['default'].createElement(BackgroundImage_styles.NextImagecontainer, null, image),
+            showBackdrop && React__default['default'].createElement(BackgroundImage_styles.BackgroundGradient, null)),
+        React__default['default'].createElement(BackgroundImage_styles.ChildrenWrapper, null, children)));
 }
 
 exports.BackgroundImage = BackgroundImage;

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

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

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

@@ -14,9 +14,15 @@ var BackgroundContainer = styled__default['default'].div(templateObject_1 || (te
     return props.onClick &&
         " \n    cursor: pointer;\n    &:hover {\n        box-shadow: " + ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover) + ";\n        }";
 });
-var BackgroundImgContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: -1;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: -1;\n"])));
-var templateObject_1, templateObject_2;
+var BackgroundImgContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
+var BackgroundGradient = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"], ["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.BackgroundOverlayOpacity; });
+var ChildrenWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n"])));
+var NextImagecontainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.BackgroundContainer = BackgroundContainer;
+exports.BackgroundGradient = BackgroundGradient;
 exports.BackgroundImgContainer = BackgroundImgContainer;
+exports.ChildrenWrapper = ChildrenWrapper;
+exports.NextImagecontainer = NextImagecontainer;
 //# sourceMappingURL=BackgroundImage.styles.js.map

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

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

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

@@ -3,21 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var typography = require('@citygross/typography');
 var DateBox_styles = require('./DateBox.styles.js');
-var index = require('../../../../design-tokens/build/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function DateBox(_a) {
-    var _b;
-    var _c = _a.dateHeader, dateHeader = _c === void 0 ? 'vecka' : _c, dateText = _a.dateText;
+    var dateHeader = _a.dateHeader, labelBackground = _a.labelBackground, children = _a.children;
     return (React__default['default'].createElement(DateBox_styles.StyledDateBox, null,
-        React__default['default'].createElement(DateBox_styles.WeekBox, null,
-            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.EXTRASMALL, color: (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.white, fontWeight: 'semiBold' }, dateHeader)),
-        React__default['default'].createElement(DateBox_styles.WeekNumber, null, dateText)));
+        React__default['default'].createElement(DateBox_styles.WeekBox, { labelBackground: labelBackground },
+            React__default['default'].createElement(DateBox_styles.DateHeader, null, dateHeader)),
+        React__default['default'].createElement(DateBox_styles.WeekNumber, null, children)));
 }
 
 exports.DateBox = DateBox;

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

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

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

@@ -10,10 +10,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var StyledDateBox = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-block;\n  background-color: ", ";\n"], ["\n  display: inline-block;\n  background-color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
-var WeekBox = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: center;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: center;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"; });
-var WeekNumber = styled__default['default'].p(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  text-align: center;\n  font-size: ", "px;\n  font-weight: ", ";\n  font-family: 'Poppins';\n"], ["\n  padding: ", "px 0;\n  text-align: center;\n  font-size: ", "px;\n  font-weight: ", ";\n  font-family: 'Poppins';\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.typography) === null || _a === void 0 ? void 0 : _a.size.s4; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; });
-var templateObject_1, templateObject_2, templateObject_3;
+var WeekBox = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: center;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: center;\n"])), function (props) { var _a; return props.labelBackground || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px " + ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.dateBoxHorizontalPadding) + "px"; });
+var WeekNumber = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  text-align: center;\n"], ["\n  padding: ", "px 0;\n  text-align: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var DateHeader = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  text-align: center;\n"], ["\n  text-align: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
+exports.DateHeader = DateHeader;
 exports.StyledDateBox = StyledDateBox;
 exports.WeekBox = WeekBox;
 exports.WeekNumber = WeekNumber;

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

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

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var MenuContainer = styled__default['default'].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    width: calc(100% - 40px);\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    width: calc(100% - 40px);\n  }\n"])), 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.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
-var MenuItem = styled__default['default'].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"], ["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, 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; }, 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.palette) === null || _a === void 0 ? void 0 : _a.primary; });
+var MenuItem = styled__default['default'].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"], ["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, 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; }, 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.palette) === null || _a === void 0 ? void 0 : _a.primary; });
 var Fade = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"], ["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
 var templateObject_1, templateObject_2, templateObject_3;
 

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

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('@citygross/typography');
+require('../AddressBlock/AddressBlock.styles.js');
+require('../../../../design-tokens/build/index.js');
+require('../AlertBox/AlertBox.styles.js');
+require('../Button/Button.js');
+require('@citygross/utils');
+require('@citygross/design-tokens');
+require('@citygross/icons');
+require('../Logo/Logo.styles.js');
+require('../Header/Header.styles.js');
+require('../HeaderLink/HeaderLink.styles.js');
+require('../BackgroundImage/BackgroundImage.styles.js');
+require('../Badge/Badge.styles.js');
+require('../Box/Box.styles.js');
+require('../Button/Button.styles.js');
+require('../BackButton/BackButton.styles.js');
+require('react-loading-skeleton');
+require('../CartItemSummary/CartItemSummary.styles.js');
+require('../Divider/Divider.styles.js');
+require('../CartSummary/CartSummary.styles.js');
+require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
+require('../Collapsable/Collapsable.styles.js');
+require('../DeliverySlotItem/DeliverySlotItem.styles.js');
+require('../Slider/Slider.styles.js');
+require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
+require('../Menu/Menu.styles.js');
+require('../DateBox/DateBox.styles.js');
+require('../DotIndicator/DotIndicator.styles.js');
+require('../Form/Form.styles.js');
+require('../FormControl/FormControl.js');
+require('../FormElements/Checkbox/Checkbox.styles.js');
+require('../FormElements/Input/Input.styles.js');
+require('../FormElements/Radio/Radio.styles.js');
+require('../FormElements/Switch/Switch.styles.js');
+require('../FormGroup/FormGroup.styles.js');
+require('../GridContainer/GridContainer.styles.js');
+require('../HighlightBox/HighlightBox.styles.js');
+require('../IconToolTip/IconToolTip.styles.js');
+require('../Spacer/Spacer.styles.js');
+require('../InfoTextBlock/InfoTextBlock.styles.js');
+require('../LayoutBox/LayoutBox.styles.js');
+require('../ListItem/ListItem.styles.js');
+require('../ListItemWithRadio/ListItemWithRadio.styles.js');
+require('../Links/Link.js');
+require('react-dom');
+require('../Modal/Modal.styles.js');
+require('../RadioBox/RadioBoxItem.styles.js');
+require('../RadioBox/RadioBoxList.styles.js');
+require('../RadioGroup/RadioGroup.styles.js');
+require('../RadioListItem/RadioListItem.styles.js');
+require('../RippleContainer/RippleContainer.styles.js');
+require('../Select/Select.styles.js');
+require('../Spinner/Spinner.styles.js');
+require('../Stepper/Stepper.styles.js');
+var ToolTip = require('../ToolTip/ToolTip.js');
+require('../StepperMobile/StepperMobile.styles.js');
+require('../FormElements/TextArea/TextArea.styles.js');
+require('../Table/Table.styles.js');
+require('../Timeline/Timeline.styles.js');
+require('../QuantitySelector/QuantitySelector.styles.js');
+require('../Pagination/Pagination.styles.js');
+require('../../containers/PageContainer/PageContainer.styles.js');
+require('../../../../utils/build/index.js');
+require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js');
+require('../UnorderedList/UnorderedList.styles.js');
+var WarningLabel_styles = require('./WarningLabel.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function WarningLabel(_a) {
+    var children = _a.children, background = _a.background, toolTip = _a.toolTip;
+    return (React__default['default'].createElement(WarningLabel_styles.WarningIndicator, { background: background, toolTip: toolTip },
+        toolTip && React__default['default'].createElement(ToolTip.ToolTip, null, toolTip),
+        children));
+}
+
+exports.WarningLabel = WarningLabel;
+//# sourceMappingURL=WarningLabel.js.map

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var WarningIndicator = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px\n    ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  position: relative;\n  ", ";\n"], ["\n  padding: ", "px\n    ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  position: relative;\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.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) {
+    return props.toolTip &&
+        "\n    > {\n      &:first-child {\n        display: none;\n      }\n    }\n\n    &:hover {\n      > {\n        &:first-child {\n          display: block;\n        }\n      }\n    }\n        ";
+});
+var templateObject_1;
+
+exports.WarningIndicator = WarningIndicator;
+//# sourceMappingURL=WarningLabel.styles.js.map

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

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

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

@@ -60,6 +60,7 @@ var Pagination = require('./components/Pagination/Pagination.js');
 var PageContainer = require('./containers/PageContainer/PageContainer.js');
 var TwoColumnsPageContainer = require('./containers/TwoColumnsContainer/TwoColumnsPageContainer.js');
 var UnorderedList_styles = require('./components/UnorderedList/UnorderedList.styles.js');
+var WarningLabel = require('./components/WarningLabel/WarningLabel.js');
 
 
 
@@ -156,4 +157,5 @@ exports.PageContainer = PageContainer.PageContainer;
 exports.TwoColumnsPageContainer = TwoColumnsPageContainer.TwoColumnsPageContainer;
 exports.UnorderedList = UnorderedList_styles.UnorderedList;
 exports.UnorderedListItem = UnorderedList_styles.UnorderedListItem;
+exports.WarningLabel = WarningLabel.WarningLabel;
 //# 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/cjs/design-tokens/build/index.js

@@ -72,6 +72,8 @@ var constants = {
     iconToolTipArrowTop: 32,
     iconToolTipBoxWidth: 300,
     iconToolTipTop: 36,
+    dateBoxHorizontalPadding: 12,
+    BackgroundOverlayOpacity: 0.3,
     selectWidth: 225,
     selectMobileWidth: 175,
     selectPadding: 2

package/build/cjs/design-tokens/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',\n        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    ListImageMaxWidth: 64,\n    ListImageMaxHeight: 50,\n    ListItemFlexGap: 20,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    menuHorizontalMargin: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36,\n    selectWidth: 225,\n    selectMobileWidth: 175,\n    selectPadding: 2\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    redLight: '#FCE9E9',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // xs all from 0-10\n        xs: 10,\n        // s all from 11-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        code: 90\n    },\n    lineHeight: {\n        // xs all from 0-15\n        xs: 15,\n        // s all from 16-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',\n        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    ListImageMaxWidth: 64,\n    ListImageMaxHeight: 50,\n    ListItemFlexGap: 20,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    menuHorizontalMargin: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36,\n    dateBoxHorizontalPadding: 12,\n    BackgroundOverlayOpacity: 0.3,\n    selectWidth: 225,\n    selectMobileWidth: 175,\n    selectPadding: 2\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    redLight: '#FCE9E9',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // xs all from 0-10\n        xs: 10,\n        // s all from 11-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        code: 90\n    },\n    lineHeight: {\n        // xs all from 0-15\n        xs: 15,\n        // s all from 16-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":";;;;;;AAEA,MAAM,CAAC,cAAc,CAACA,eAAO,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D;AACA,IAAI,UAAU,GAAG;AACjB,IAAI,YAAY,EAAE;AAClB,QAAQ,UAAU,EAAE,CAAC;AACrB,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,OAAO,EAAE,EAAE;AACnB,QAAQ,GAAG,EAAE,EAAE;AACf,KAAK;AACL,IAAI,SAAS,EAAE;AACf,QAAQ,KAAK,EAAE,gCAAgC;AAC/C,QAAQ,KAAK,EAAE,gCAAgC;AAC/C,QAAQ,WAAW,EAAE,+BAA+B;AACpD,QAAQ,YAAY,EAAE,qCAAqC;AAC3D,QAAQ,eAAe,EAAE,+BAA+B;AACxD,QAAQ,iBAAiB,EAAE,oCAAoC;AAC/D,QAAQ,YAAY,EAAE,6BAA6B;AACnD,QAAQ,aAAa,EAAE,sGAAsG;AAC7H,QAAQ,kBAAkB,EAAE,gCAAgC;AAC5D,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,MAAM,EAAE,CAAC;AACjB,QAAQ,IAAI,EAAE,CAAC;AACf,QAAQ,MAAM,EAAE,CAAC;AACjB,QAAQ,GAAG,EAAE,CAAC;AACd,KAAK;AACL,IAAI,UAAU,EAAE;AAChB,QAAQ,EAAE,EAAE,sCAAsC;AAClD,QAAQ,eAAe,EAAE,uBAAuB;AAChD,KAAK;AACL,CAAC,CAAC;AACF;AACA,IAAI,WAAW,GAAG;AAClB,IAAI,EAAE,EAAE,GAAG;AACX,IAAI,EAAE,EAAE,GAAG;AACX,IAAI,EAAE,EAAE,GAAG;AACX,IAAI,EAAE,EAAE,GAAG;AACX,IAAI,EAAE,EAAE,IAAI;AACZ,IAAI,GAAG,EAAE,IAAI;AACb,IAAI,IAAI,EAAE,IAAI;AACd,CAAC,CAAC;AACF;AACA,IAAI,SAAS,GAAG;AAChB,IAAI,qBAAqB,EAAE,EAAE;AAC7B,IAAI,sBAAsB,EAAE,GAAG;AAC/B,IAAI,oBAAoB,EAAE,GAAG;AAC7B,IAAI,qBAAqB,EAAE,GAAG;AAC9B,IAAI,2BAA2B,EAAE,IAAI;AACrC,IAAI,qBAAqB,EAAE,EAAE;AAC7B,IAAI,4BAA4B,EAAE,GAAG;AACrC,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,iBAAiB,EAAE,EAAE;AACzB,IAAI,kBAAkB,EAAE,EAAE;AAC1B,IAAI,eAAe,EAAE,EAAE;AACvB,IAAI,6BAA6B,EAAE,GAAG;AACtC,IAAI,YAAY,EAAE,EAAE;AACpB,IAAI,mBAAmB,EAAE,IAAI;AAC7B,IAAI,oBAAoB,EAAE,CAAC;AAC3B,IAAI,uBAAuB,EAAE,EAAE;AAC/B,IAAI,yBAAyB,EAAE,EAAE;AACjC,IAAI,0BAA0B,EAAE,EAAE;AAClC,IAAI,oBAAoB,EAAE,EAAE;AAC5B,IAAI,4BAA4B,EAAE,EAAE;AACpC,IAAI,oBAAoB,EAAE,GAAG;AAC7B,IAAI,mBAAmB,EAAE,EAAE;AAC3B,IAAI,mBAAmB,EAAE,GAAG;AAC5B,IAAI,cAAc,EAAE,EAAE;AACtB,IAAI,wBAAwB,EAAE,EAAE;AAChC,IAAI,wBAAwB,EAAE,GAAG;AACjC,IAAI,WAAW,EAAE,GAAG;AACpB,IAAI,iBAAiB,EAAE,GAAG;AAC1B,IAAI,aAAa,EAAE,CAAC;AACpB,CAAC,CAAC;AACF;AACA,IAAI,OAAO,GAAG;AACd;AACA,IAAI,OAAO,EAAE,SAAS;AACtB,IAAI,SAAS,EAAE,SAAS;AACxB;AACA,IAAI,WAAW,EAAE,SAAS;AAC1B,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,WAAW,EAAE,SAAS;AAC1B;AACA,IAAI,aAAa,EAAE,SAAS;AAC5B,IAAI,WAAW,EAAE,SAAS;AAC1B,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,UAAU,EAAE,SAAS;AACzB,IAAI,UAAU,EAAE,SAAS;AACzB,IAAI,WAAW,EAAE,SAAS;AAC1B,IAAI,QAAQ,EAAE,SAAS;AACvB;AACA,IAAI,IAAI,EAAE,SAAS;AACnB;AACA,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,KAAK,EAAE,SAAS;AACpB;AACA,IAAI,QAAQ,EAAE,SAAS;AACvB,IAAI,OAAO,EAAE,SAAS;AACtB,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,IAAI,EAAE,SAAS;AACnB,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,OAAO,EAAE,SAAS;AACtB,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,eAAe,EAAE,uBAAuB;AAC5C;AACA,IAAI,QAAQ,EAAE,SAAS;AACvB,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,UAAU,EAAE,SAAS;AACzB;AACA,IAAI,WAAW,EAAE,oBAAoB;AACrC;AACA,IAAI,WAAW,EAAE,WAAW;AAC5B,IAAI,IAAI,EAAE,MAAM;AAChB,CAAC,CAAC;AACF;AACA,IAAI,QAAQ,GAAG;AACf,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,EAAE,EAAE,CAAC;AACT,IAAI,EAAE,EAAE,EAAE;AACV,IAAI,EAAE,EAAE,EAAE;AACV,IAAI,EAAE,EAAE,EAAE;AACV,IAAI,EAAE,EAAE,EAAE;AACV,IAAI,GAAG,EAAE,EAAE;AACX;AACA;AACA,CAAC,CAAC;AACF;AACA,IAAI,UAAU,GAAG;AACjB,IAAI,IAAI,EAAE;AACV,QAAQ,OAAO,EAAE,2DAA2D;AAC5E,QAAQ,IAAI,EAAE,0EAA0E;AACxF,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,OAAO,EAAE,KAAK;AACtB,QAAQ,MAAM,EAAE,KAAK;AACrB,QAAQ,QAAQ,EAAE,KAAK;AACvB,QAAQ,IAAI,EAAE,KAAK;AACnB,KAAK;AACL,IAAI,IAAI,EAAE;AACV;AACA,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,IAAI,EAAE,EAAE;AAChB,KAAK;AACL,IAAI,UAAU,EAAE;AAChB;AACA,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,KAAK;AACL,CAAC,CAAC;AACF;AACA,IAAI,UAAU,GAAG;AACjB,IAAI,QAAQ,EAAE,GAAG;AACjB,IAAI,UAAU,EAAE,GAAG;AACnB,IAAI,gBAAgB,EAAE,8CAA8C;AACpE,IAAI,gBAAgB,EAAE,sCAAsC;AAC5D,CAAC,CAAC;AACF;AACA,IAAI,WAAW,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;AACjM,IAAI,QAAQ;AACZ,QAAQ,OAAO,EAAE,OAAO;AACxB,QAAQ,UAAU,EAAE,UAAU;AAC9B,QAAQ,UAAU,EAAE,UAAU;AAC9B,QAAQ,WAAW,EAAE,WAAW;AAChC,QAAQ,QAAQ,EAAE,QAAQ;AAC1B,QAAQ,SAAS,EAAE,SAAS;AAC5B,QAAQ,UAAU,EAAE,UAAU;AAC9B,KAAK,EAAE;AACP,CAAC,CAAC;AACF,IAAI,KAAK,GAAG,WAAW,CAAC;AACxB,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,UAAU,EAAE,UAAU;AAC1B,IAAI,UAAU,EAAE,UAAU;AAC1B,IAAI,WAAW,EAAE,WAAW;AAC5B,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,UAAU,EAAE,UAAU;AAC1B,CAAC,CAAC,CAAC;AACH;0BACkB,GAAG,WAAW;0BACd,GAAG,WAAW;2BACb,GAAG,YAAY;yBACjB,GAAG,UAAU;uBACf,GAAG,QAAQ;wBACV,GAAG,SAAS;mCACf,GAAG,MAAM;0BACJ,GAAG;;;;;"}

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

@@ -1,11 +1,13 @@
 import React from 'react';
-import { BackgroundContainer, BackgroundImgContainer } from './BackgroundImage.styles.js';
+import { BackgroundContainer, BackgroundImgContainer, NextImagecontainer, BackgroundGradient, ChildrenWrapper } from './BackgroundImage.styles.js';
 
 function BackgroundImage(_a) {
-    var image = _a.image, height = _a.height, width = _a.width, onClick = _a.onClick, children = _a.children;
+    var image = _a.image, height = _a.height, width = _a.width, onClick = _a.onClick, _b = _a.showBackdrop, showBackdrop = _b === void 0 ? true : _b, children = _a.children;
     return (React.createElement(BackgroundContainer, { height: height, width: width, onClick: onClick },
-        React.createElement(BackgroundImgContainer, null, image),
-        children));
+        React.createElement(BackgroundImgContainer, null,
+            React.createElement(NextImagecontainer, null, image),
+            showBackdrop && React.createElement(BackgroundGradient, null)),
+        React.createElement(ChildrenWrapper, null, children)));
 }
 
 export { BackgroundImage };

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

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

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

@@ -6,8 +6,11 @@ var BackgroundContainer = styled.div(templateObject_1 || (templateObject_1 = __m
     return props.onClick &&
         " \n    cursor: pointer;\n    &:hover {\n        box-shadow: " + ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover) + ";\n        }";
 });
-var BackgroundImgContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: -1;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: -1;\n"])));
-var templateObject_1, templateObject_2;
+var BackgroundImgContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
+var BackgroundGradient = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"], ["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.BackgroundOverlayOpacity; });
+var ChildrenWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n"])));
+var NextImagecontainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
-export { BackgroundContainer, BackgroundImgContainer };
+export { BackgroundContainer, BackgroundGradient, BackgroundImgContainer, ChildrenWrapper, NextImagecontainer };
 //# sourceMappingURL=BackgroundImage.styles.js.map

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

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

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

@@ -1,15 +1,12 @@
 import React from 'react';
-import { BodyText, TextTypes } from '@citygross/typography';
-import { StyledDateBox, WeekBox, WeekNumber } from './DateBox.styles.js';
-import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
+import { StyledDateBox, WeekBox, DateHeader, WeekNumber } from './DateBox.styles.js';
 
 function DateBox(_a) {
-    var _b;
-    var _c = _a.dateHeader, dateHeader = _c === void 0 ? 'vecka' : _c, dateText = _a.dateText;
+    var dateHeader = _a.dateHeader, labelBackground = _a.labelBackground, children = _a.children;
     return (React.createElement(StyledDateBox, null,
-        React.createElement(WeekBox, null,
-            React.createElement(BodyText, { size: TextTypes.TextSize.EXTRASMALL, color: (_b = theme_1.palette) === null || _b === void 0 ? void 0 : _b.white, fontWeight: 'semiBold' }, dateHeader)),
-        React.createElement(WeekNumber, null, dateText)));
+        React.createElement(WeekBox, { labelBackground: labelBackground },
+            React.createElement(DateHeader, null, dateHeader)),
+        React.createElement(WeekNumber, null, children)));
 }
 
 export { DateBox };

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

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

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

@@ -2,9 +2,10 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
 var StyledDateBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  background-color: ", ";\n"], ["\n  display: inline-block;\n  background-color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
-var WeekBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: center;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: center;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"; });
-var WeekNumber = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", "px 0;\n  text-align: center;\n  font-size: ", "px;\n  font-weight: ", ";\n  font-family: 'Poppins';\n"], ["\n  padding: ", "px 0;\n  text-align: center;\n  font-size: ", "px;\n  font-weight: ", ";\n  font-family: 'Poppins';\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.typography) === null || _a === void 0 ? void 0 : _a.size.s4; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; });
-var templateObject_1, templateObject_2, templateObject_3;
+var WeekBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: center;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: center;\n"])), function (props) { var _a; return props.labelBackground || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px " + ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.dateBoxHorizontalPadding) + "px"; });
+var WeekNumber = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", "px 0;\n  text-align: center;\n"], ["\n  padding: ", "px 0;\n  text-align: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var DateHeader = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-align: center;\n"], ["\n  text-align: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-export { StyledDateBox, WeekBox, WeekNumber };
+export { DateHeader, StyledDateBox, WeekBox, WeekNumber };
 //# sourceMappingURL=DateBox.styles.js.map

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

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

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

@@ -2,7 +2,7 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
 var MenuContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    width: calc(100% - 40px);\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    width: calc(100% - 40px);\n  }\n"])), 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.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
-var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"], ["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, 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; }, 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.palette) === null || _a === void 0 ? void 0 : _a.primary; });
+var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"], ["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, 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; }, 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.palette) === null || _a === void 0 ? void 0 : _a.primary; });
 var Fade = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"], ["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
 var templateObject_1, templateObject_2, templateObject_3;
 

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import '@citygross/typography';
+import '../AddressBlock/AddressBlock.styles.js';
+import '../../../../design-tokens/build/index.js';
+import '../AlertBox/AlertBox.styles.js';
+import '../Button/Button.js';
+import '@citygross/utils';
+import '@citygross/design-tokens';
+import '@citygross/icons';
+import '../Logo/Logo.styles.js';
+import '../Header/Header.styles.js';
+import '../HeaderLink/HeaderLink.styles.js';
+import '../BackgroundImage/BackgroundImage.styles.js';
+import '../Badge/Badge.styles.js';
+import '../Box/Box.styles.js';
+import '../Button/Button.styles.js';
+import '../BackButton/BackButton.styles.js';
+import 'react-loading-skeleton';
+import '../CartItemSummary/CartItemSummary.styles.js';
+import '../Divider/Divider.styles.js';
+import '../CartSummary/CartSummary.styles.js';
+import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
+import '../Collapsable/Collapsable.styles.js';
+import '../DeliverySlotItem/DeliverySlotItem.styles.js';
+import '../Slider/Slider.styles.js';
+import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
+import '../Menu/Menu.styles.js';
+import '../DateBox/DateBox.styles.js';
+import '../DotIndicator/DotIndicator.styles.js';
+import '../Form/Form.styles.js';
+import '../FormControl/FormControl.js';
+import '../FormElements/Checkbox/Checkbox.styles.js';
+import '../FormElements/Input/Input.styles.js';
+import '../FormElements/Radio/Radio.styles.js';
+import '../FormElements/Switch/Switch.styles.js';
+import '../FormGroup/FormGroup.styles.js';
+import '../GridContainer/GridContainer.styles.js';
+import '../HighlightBox/HighlightBox.styles.js';
+import '../IconToolTip/IconToolTip.styles.js';
+import '../Spacer/Spacer.styles.js';
+import '../InfoTextBlock/InfoTextBlock.styles.js';
+import '../LayoutBox/LayoutBox.styles.js';
+import '../ListItem/ListItem.styles.js';
+import '../ListItemWithRadio/ListItemWithRadio.styles.js';
+import '../Links/Link.js';
+import 'react-dom';
+import '../Modal/Modal.styles.js';
+import '../RadioBox/RadioBoxItem.styles.js';
+import '../RadioBox/RadioBoxList.styles.js';
+import '../RadioGroup/RadioGroup.styles.js';
+import '../RadioListItem/RadioListItem.styles.js';
+import '../RippleContainer/RippleContainer.styles.js';
+import '../Select/Select.styles.js';
+import '../Spinner/Spinner.styles.js';
+import '../Stepper/Stepper.styles.js';
+import { ToolTip } from '../ToolTip/ToolTip.js';
+import '../StepperMobile/StepperMobile.styles.js';
+import '../FormElements/TextArea/TextArea.styles.js';
+import '../Table/Table.styles.js';
+import '../Timeline/Timeline.styles.js';
+import '../QuantitySelector/QuantitySelector.styles.js';
+import '../Pagination/Pagination.styles.js';
+import '../../containers/PageContainer/PageContainer.styles.js';
+import '../../../../utils/build/index.js';
+import '../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js';
+import '../UnorderedList/UnorderedList.styles.js';
+import { WarningIndicator } from './WarningLabel.styles.js';
+
+function WarningLabel(_a) {
+    var children = _a.children, background = _a.background, toolTip = _a.toolTip;
+    return (React.createElement(WarningIndicator, { background: background, toolTip: toolTip },
+        toolTip && React.createElement(ToolTip, null, toolTip),
+        children));
+}
+
+export { WarningLabel };
+//# sourceMappingURL=WarningLabel.js.map

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

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

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

@@ -0,0 +1,11 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var WarningIndicator = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", "px\n    ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  position: relative;\n  ", ";\n"], ["\n  padding: ", "px\n    ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  position: relative;\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.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) {
+    return props.toolTip &&
+        "\n    > {\n      &:first-child {\n        display: none;\n      }\n    }\n\n    &:hover {\n      > {\n        &:first-child {\n          display: block;\n        }\n      }\n    }\n        ";
+});
+var templateObject_1;
+
+export { WarningIndicator };
+//# sourceMappingURL=WarningLabel.styles.js.map

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

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

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

@@ -56,4 +56,5 @@ export { Pagination } from './components/Pagination/Pagination.js';
 export { PageContainer } from './containers/PageContainer/PageContainer.js';
 export { TwoColumnsPageContainer } from './containers/TwoColumnsContainer/TwoColumnsPageContainer.js';
 export { UnorderedList, UnorderedListItem } from './components/UnorderedList/UnorderedList.styles.js';
+export { WarningLabel } from './components/WarningLabel/WarningLabel.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/build/es/design-tokens/build/index.js

@@ -69,6 +69,8 @@ var constants = {
     iconToolTipArrowTop: 32,
     iconToolTipBoxWidth: 300,
     iconToolTipTop: 36,
+    dateBoxHorizontalPadding: 12,
+    BackgroundOverlayOpacity: 0.3,
     selectWidth: 225,
     selectMobileWidth: 175,
     selectPadding: 2

package/build/es/design-tokens/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',\n        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    ListImageMaxWidth: 64,\n    ListImageMaxHeight: 50,\n    ListItemFlexGap: 20,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    menuHorizontalMargin: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36,\n    selectWidth: 225,\n    selectMobileWidth: 175,\n    selectPadding: 2\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    redLight: '#FCE9E9',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // xs all from 0-10\n        xs: 10,\n        // s all from 11-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        code: 90\n    },\n    lineHeight: {\n        // xs all from 0-15\n        xs: 15,\n        // s all from 16-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',\n        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    ListImageMaxWidth: 64,\n    ListImageMaxHeight: 50,\n    ListItemFlexGap: 20,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    menuHorizontalMargin: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36,\n    dateBoxHorizontalPadding: 12,\n    BackgroundOverlayOpacity: 0.3,\n    selectWidth: 225,\n    selectMobileWidth: 175,\n    selectPadding: 2\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    redLight: '#FCE9E9',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // xs all from 0-10\n        xs: 10,\n        // s all from 11-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        code: 90\n    },\n    lineHeight: {\n        // xs all from 0-15\n        xs: 15,\n        // s all from 16-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.50",
+  "version": "0.7.54",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -62,14 +62,14 @@
     "styled-components": "^5.2.1"
   },
   "dependencies": {
-    "@citygross/design-tokens": "^0.2.20",
+    "@citygross/design-tokens": "^0.2.21",
     "@citygross/icons": "^0.1.3",
     "@citygross/react-use-bg-wizard": "^0.0.8",
-    "@citygross/typography": "^0.0.47",
+    "@citygross/typography": "^0.0.49",
     "@citygross/utils": "^0.0.19",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "1d160f8ea3a891f076db34d8b728aa2469289b6b"
+  "gitHead": "d9b56c5dbdefab620ee1a8984faa2f775f2ca9b6"
 }