@citygross/components 0.7.46 → 0.7.50

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

@@ -2,4 +2,4 @@ import * as styles from './HighlightBox.styles';
 export declare type THighlightBox = styles.THighlightBoxContainer & {
     children: JSX.Element;
 };
-export declare function HighlightBox({ cancelled, size, isLastChild, children }: THighlightBox): JSX.Element;
+export declare function HighlightBox({ cancelled, children }: THighlightBox): JSX.Element;

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

@@ -1,6 +1,4 @@
 export declare type THighlightBoxContainer = {
-    size?: 'small' | 'large';
-    isLastChild?: boolean;
     cancelled?: boolean;
 };
 export declare const HighlightBoxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, THighlightBoxContainer, never>;

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

@@ -3,10 +3,15 @@ export declare type TItem = {
     name?: string;
     image?: string;
     description?: string;
+    secondaryDescription?: React.ReactNode;
 };
 export declare type TListItem = {
     item?: TItem;
     loading?: boolean;
     children?: React.ReactNode;
+    fallBackImage?: string;
+    imageAutoHeight?: boolean;
+    boldHeader?: boolean;
+    smallSkeleton?: boolean;
 };
-export declare function ListItem({ item, loading, children }: TListItem): JSX.Element;
+export declare function ListItem({ item, loading, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children }: TListItem): JSX.Element;

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

@@ -3,4 +3,7 @@ export declare const ListItemContainer: import("styled-components").StyledCompon
 export declare const ListLeft: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ListRight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ListImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ListImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare type TListImage = {
+    autoHeight?: boolean;
+};
+export declare const ListImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, TListImage, never>;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type TSelect = {
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    children?: React.ReactNode;
+};
+export declare function Select({ onChange, children }: TSelect): JSX.Element;

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

@@ -0,0 +1,8 @@
+import { Story } from '@storybook/react';
+import { Select } from './Select';
+declare const _default: {
+    component: typeof Select;
+    title: string;
+};
+export default _default;
+export declare const Default: Story;

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

@@ -0,0 +1,2 @@
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectElement: import("styled-components").StyledComponent<"select", import("styled-components").DefaultTheme, {}, never>;

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

@@ -41,6 +41,7 @@ export * from './components/RadioBox';
 export * from './components/RadioGroup';
 export * from './components/RadioListItem/RadioListItem';
 export * from './components/RippleContainer/RippleContainer';
+export * from './components/Select/Select';
 export * from './components/Spacer/Spacer';
 export * from './components/Spinner/Spinner';
 export * from './components/Stepper';

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

@@ -10,8 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function HighlightBox(_a) {
-    var cancelled = _a.cancelled, _b = _a.size, size = _b === void 0 ? 'small' : _b, isLastChild = _a.isLastChild, children = _a.children;
-    return (React__default['default'].createElement(HighlightBox_styles.HighlightBoxContainer, { cancelled: cancelled, size: size, isLastChild: isLastChild }, children));
+    var cancelled = _a.cancelled, children = _a.children;
+    return (React__default['default'].createElement(HighlightBox_styles.HighlightBoxContainer, { cancelled: cancelled }, children));
 }
 
 exports.HighlightBox = HighlightBox;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var HighlightBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-wrap: ", ";\n  width: ", "px;\n  margin-right: ", "px;\n  align-items: center;\n  padding: ", "px;\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    margin-right: 0;\n  }\n"], ["\n  display: flex;\n  flex-wrap: ", ";\n  width: ", "px;\n  margin-right: ", "px;\n  align-items: center;\n  padding: ", "px;\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    margin-right: 0;\n  }\n"])), function (props) { return (props.size === 'small' ? 'unset' : 'wrap'); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.highlightBoxWidth; }, function (props) { var _a; return props.isLastChild ? 0 : (_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 props.cancelled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest : 'inherit'; }, function (props) {
+var HighlightBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n"], ["\n  padding: ", "px;\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return props.cancelled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest : 'inherit'; }, function (props) {
     var _a, _b;
     return props.cancelled
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light
@@ -19,11 +19,6 @@ var HighlightBoxContainer = styled__default['default'].div(templateObject_1 || (
     return props.cancelled
         ? ''
         : (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.highlightBoxShadow;
-}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
-    var _a;
-    return props.size === 'small'
-        ? ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.highlightBoxWidth) + "px"
-        : 'auto';
 });
 var templateObject_1;
 

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

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

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

@@ -16,15 +16,16 @@ var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 
 function ListItem(_a) {
     var _b;
-    var item = _a.item, loading = _a.loading, children = _a.children;
+    var item = _a.item, loading = _a.loading, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, boldHeader = _a.boldHeader, smallSkeleton = _a.smallSkeleton, children = _a.children;
     return (React__default['default'].createElement(ListItem_styles.ListItemContainer, null,
         React__default['default'].createElement(ListItem_styles.ListLeft, null,
             React__default['default'].createElement(ListItem_styles.ListImageContainer, null,
-                React__default['default'].createElement(ListItem_styles.ListImage, { src: (item === null || item === void 0 ? void 0 : item.image) || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name })),
+                React__default['default'].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: (item === null || item === void 0 ? void 0 : item.image) || fallBackImage || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name })),
             React__default['default'].createElement(ListItem_styles.ItemInformationContainer, null,
-                React__default['default'].createElement(typography.BodyText, null, (item === null || item === void 0 ? void 0 : item.name) || React__default['default'].createElement(Skeleton__default['default'], { width: 250 })),
+                React__default['default'].createElement(typography.BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular' }, (item === null || item === void 0 ? void 0 : item.name) || React__default['default'].createElement(Skeleton__default['default'], { width: smallSkeleton ? 150 : 250 })),
                 loading ? (React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL },
-                    React__default['default'].createElement(Skeleton__default['default'], { width: 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, item === null || item === void 0 ? void 0 : item.description)) : null)),
+                    React__default['default'].createElement(Skeleton__default['default'], { width: smallSkeleton ? 150 : 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, item === null || item === void 0 ? void 0 : item.description)) : null,
+                (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
         children && React__default['default'].createElement(ListItem_styles.ListRight, null, children)));
 }
 

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

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

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

@@ -11,10 +11,15 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var ItemInformationContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 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 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: ", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "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.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListItemFlexGap; });
 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  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 ListImage = styled__default['default'].img(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: ", ";\n"], ["\n  max-width: 100%;\n  max-height: ", ";\n"])), function (props) {
+    var _a;
+    return props.autoHeight
+        ? '100%'
+        : ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxHeight) + "px";
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
 exports.ItemInformationContainer = ItemInformationContainer;

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Select_styles = require('./Select.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Select(_a) {
+    var onChange = _a.onChange, children = _a.children;
+    return (React__default['default'].createElement(Select_styles.SelectWrapper, null,
+        React__default['default'].createElement(Select_styles.SelectElement, { onChange: onChange }, children)));
+}
+
+exports.Select = Select;
+//# sourceMappingURL=Select.js.map

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

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

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

@@ -0,0 +1,21 @@
+'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 SelectWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n\n  border-radius: ", "px;\n  border: 1px ", " solid;\n  padding: ", "px;\n  width: ", "px;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ", "px;\n    content: '';\n    width: 0px;\n    height: 0px;\n    /* static to make a triangle */\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  border-radius: ", "px;\n  border: 1px ", " solid;\n  padding: ", "px;\n  width: ", "px;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ", "px;\n    content: '';\n    width: 0px;\n    height: 0px;\n    /* static to make a triangle */\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectPadding; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectMobileWidth; }, 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.constants) === null || _a === void 0 ? void 0 : _a.selectWidth; }, 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.palette) === null || _a === void 0 ? void 0 : _a.medium; });
+var SelectElement = styled__default['default'].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  appearance: none;\n  outline: none;\n  border: none;\n  padding: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  background: none;\n  font-size: ", "px;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  option {\n    font-family: ", ";\n    color: ", ";\n    line-height: ", "px;\n    font-size: ", "px;\n  }\n"], ["\n  appearance: none;\n  outline: none;\n  border: none;\n  padding: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  background: none;\n  font-size: ", "px;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  option {\n    font-family: ", ";\n    color: ", ";\n    line-height: ", "px;\n    font-size: ", "px;\n  }\n"])), function (props) {
+    var _a, _b, _c, _d;
+    return "\n    " + ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px\n    " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.lg) + "px\n    " + ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs) + "px\n    " + ((_d = props.theme.spacings) === null || _d === void 0 ? void 0 : _d.xs) + "px\n  ";
+}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.primary; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.primary; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
+var templateObject_1, templateObject_2;
+
+exports.SelectElement = SelectElement;
+exports.SelectWrapper = SelectWrapper;
+//# sourceMappingURL=Select.styles.js.map

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

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

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

@@ -45,6 +45,7 @@ var RadioBoxList = require('./components/RadioBox/RadioBoxList.js');
 var RadioGroup = require('./components/RadioGroup/RadioGroup.js');
 var RadioListItem = require('./components/RadioListItem/RadioListItem.js');
 var RippleContainer = require('./components/RippleContainer/RippleContainer.js');
+var Select = require('./components/Select/Select.js');
 var Spacer = require('./components/Spacer/Spacer.js');
 var Spinner = require('./components/Spinner/Spinner.js');
 var StepperList = require('./components/Stepper/StepperList.js');
@@ -135,6 +136,7 @@ exports.RadioBoxList = RadioBoxList.RadioBoxList;
 exports.RadioGroup = RadioGroup.RadioGroup;
 exports.RadioListItem = RadioListItem.RadioListItem;
 exports.RippleContainer = RippleContainer.RippleContainer;
+exports.Select = Select.Select;
 exports.Spacer = Spacer.Spacer;
 exports.Spinner = Spinner.Spinner;
 exports.StepperList = StepperList.StepperList;

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

@@ -57,6 +57,8 @@ var constants = {
     deliverySlotItemWidthDesktop: 120,
     itemGap: 2,
     ListImageMaxWidth: 64,
+    ListImageMaxHeight: 50,
+    ListItemFlexGap: 20,
     infoBlockImageMaxWidthDesktop: 100,
     chipCheckBox: 12,
     pageContentMaxWidth: 1232,
@@ -70,7 +72,9 @@ var constants = {
     iconToolTipArrowTop: 32,
     iconToolTipBoxWidth: 300,
     iconToolTipTop: 36,
-    highlightBoxWidth: 270
+    selectWidth: 225,
+    selectMobileWidth: 175,
+    selectPadding: 2
 };
 
 var palette = {
@@ -140,7 +144,9 @@ var typography = {
         bold: '700'
     },
     size: {
-        // s all from 0-20
+        // xs all from 0-10
+        xs: 10,
+        // s all from 11-20
         s1: 12,
         s2: 13,
         s3: 15,
@@ -152,7 +158,9 @@ var typography = {
         code: 90
     },
     lineHeight: {
-        // s all from 0-20
+        // xs all from 0-15
+        xs: 15,
+        // s all from 16-20
         s1: 18,
         s2: 19,
         // m all from 21-40

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    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    highlightBoxWidth: 270\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        // s all from 0-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        // s all from 0-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    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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"}

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { HighlightBoxContainer } from './HighlightBox.styles.js';
 
 function HighlightBox(_a) {
-    var cancelled = _a.cancelled, _b = _a.size, size = _b === void 0 ? 'small' : _b, isLastChild = _a.isLastChild, children = _a.children;
-    return (React.createElement(HighlightBoxContainer, { cancelled: cancelled, size: size, isLastChild: isLastChild }, children));
+    var cancelled = _a.cancelled, children = _a.children;
+    return (React.createElement(HighlightBoxContainer, { cancelled: cancelled }, children));
 }
 
 export { HighlightBox };

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

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var HighlightBoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: ", ";\n  width: ", "px;\n  margin-right: ", "px;\n  align-items: center;\n  padding: ", "px;\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    margin-right: 0;\n  }\n"], ["\n  display: flex;\n  flex-wrap: ", ";\n  width: ", "px;\n  margin-right: ", "px;\n  align-items: center;\n  padding: ", "px;\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    margin-right: 0;\n  }\n"])), function (props) { return (props.size === 'small' ? 'unset' : 'wrap'); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.highlightBoxWidth; }, function (props) { var _a; return props.isLastChild ? 0 : (_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 props.cancelled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest : 'inherit'; }, function (props) {
+var HighlightBoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", "px;\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n"], ["\n  padding: ", "px;\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return props.cancelled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest : 'inherit'; }, function (props) {
     var _a, _b;
     return props.cancelled
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light
@@ -11,11 +11,6 @@ var HighlightBoxContainer = styled.div(templateObject_1 || (templateObject_1 = _
     return props.cancelled
         ? ''
         : (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.highlightBoxShadow;
-}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
-    var _a;
-    return props.size === 'small'
-        ? ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.highlightBoxWidth) + "px"
-        : 'auto';
 });
 var templateObject_1;
 

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

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

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

@@ -7,15 +7,16 @@ import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
 
 function ListItem(_a) {
     var _b;
-    var item = _a.item, loading = _a.loading, children = _a.children;
+    var item = _a.item, loading = _a.loading, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, boldHeader = _a.boldHeader, smallSkeleton = _a.smallSkeleton, children = _a.children;
     return (React.createElement(ListItemContainer, null,
         React.createElement(ListLeft, null,
             React.createElement(ListImageContainer, null,
-                React.createElement(ListImage, { src: (item === null || item === void 0 ? void 0 : item.image) || FallbackIcon, alt: item === null || item === void 0 ? void 0 : item.name })),
+                React.createElement(ListImage, { autoHeight: imageAutoHeight, src: (item === null || item === void 0 ? void 0 : item.image) || fallBackImage || FallbackIcon, alt: item === null || item === void 0 ? void 0 : item.name })),
             React.createElement(ItemInformationContainer, null,
-                React.createElement(BodyText, null, (item === null || item === void 0 ? void 0 : item.name) || React.createElement(Skeleton, { width: 250 })),
+                React.createElement(BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular' }, (item === null || item === void 0 ? void 0 : item.name) || React.createElement(Skeleton, { width: smallSkeleton ? 150 : 250 })),
                 loading ? (React.createElement(BodyText, { size: TextTypes.TextSize.SMALL },
-                    React.createElement(Skeleton, { width: 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_b = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _b === void 0 ? void 0 : _b.dark }, item === null || item === void 0 ? void 0 : item.description)) : null)),
+                    React.createElement(Skeleton, { width: smallSkeleton ? 150 : 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_b = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _b === void 0 ? void 0 : _b.dark }, item === null || item === void 0 ? void 0 : item.description)) : null,
+                (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
         children && React.createElement(ListRight, null, children)));
 }
 

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

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

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

@@ -3,10 +3,15 @@ import styled from 'styled-components';
 
 var ItemInformationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 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 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: ", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "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.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListItemFlexGap; });
 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  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 ListImage = styled.img(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-width: 100%;\n  max-height: ", ";\n"], ["\n  max-width: 100%;\n  max-height: ", ";\n"])), function (props) {
+    var _a;
+    return props.autoHeight
+        ? '100%'
+        : ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxHeight) + "px";
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
 export { ItemInformationContainer, ListImage, ListImageContainer, ListItemContainer, ListLeft, ListRight };

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SelectWrapper, SelectElement } from './Select.styles.js';
+
+function Select(_a) {
+    var onChange = _a.onChange, children = _a.children;
+    return (React.createElement(SelectWrapper, null,
+        React.createElement(SelectElement, { onChange: onChange }, children)));
+}
+
+export { Select };
+//# sourceMappingURL=Select.js.map

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

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

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

@@ -0,0 +1,12 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var SelectWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  border-radius: ", "px;\n  border: 1px ", " solid;\n  padding: ", "px;\n  width: ", "px;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ", "px;\n    content: '';\n    width: 0px;\n    height: 0px;\n    /* static to make a triangle */\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  border-radius: ", "px;\n  border: 1px ", " solid;\n  padding: ", "px;\n  width: ", "px;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ", "px;\n    content: '';\n    width: 0px;\n    height: 0px;\n    /* static to make a triangle */\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectPadding; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectMobileWidth; }, 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.constants) === null || _a === void 0 ? void 0 : _a.selectWidth; }, 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.palette) === null || _a === void 0 ? void 0 : _a.medium; });
+var SelectElement = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  appearance: none;\n  outline: none;\n  border: none;\n  padding: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  background: none;\n  font-size: ", "px;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  option {\n    font-family: ", ";\n    color: ", ";\n    line-height: ", "px;\n    font-size: ", "px;\n  }\n"], ["\n  appearance: none;\n  outline: none;\n  border: none;\n  padding: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  background: none;\n  font-size: ", "px;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  option {\n    font-family: ", ";\n    color: ", ";\n    line-height: ", "px;\n    font-size: ", "px;\n  }\n"])), function (props) {
+    var _a, _b, _c, _d;
+    return "\n    " + ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px\n    " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.lg) + "px\n    " + ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs) + "px\n    " + ((_d = props.theme.spacings) === null || _d === void 0 ? void 0 : _d.xs) + "px\n  ";
+}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.primary; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.primary; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
+var templateObject_1, templateObject_2;
+
+export { SelectElement, SelectWrapper };
+//# sourceMappingURL=Select.styles.js.map

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

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

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

@@ -41,6 +41,7 @@ export { RadioBoxList } from './components/RadioBox/RadioBoxList.js';
 export { RadioGroup } from './components/RadioGroup/RadioGroup.js';
 export { RadioListItem } from './components/RadioListItem/RadioListItem.js';
 export { RippleContainer } from './components/RippleContainer/RippleContainer.js';
+export { Select } from './components/Select/Select.js';
 export { Spacer } from './components/Spacer/Spacer.js';
 export { Spinner } from './components/Spinner/Spinner.js';
 export { StepperList } from './components/Stepper/StepperList.js';

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

@@ -54,6 +54,8 @@ var constants = {
     deliverySlotItemWidthDesktop: 120,
     itemGap: 2,
     ListImageMaxWidth: 64,
+    ListImageMaxHeight: 50,
+    ListItemFlexGap: 20,
     infoBlockImageMaxWidthDesktop: 100,
     chipCheckBox: 12,
     pageContentMaxWidth: 1232,
@@ -67,7 +69,9 @@ var constants = {
     iconToolTipArrowTop: 32,
     iconToolTipBoxWidth: 300,
     iconToolTipTop: 36,
-    highlightBoxWidth: 270
+    selectWidth: 225,
+    selectMobileWidth: 175,
+    selectPadding: 2
 };
 
 var palette = {
@@ -137,7 +141,9 @@ var typography = {
         bold: '700'
     },
     size: {
-        // s all from 0-20
+        // xs all from 0-10
+        xs: 10,
+        // s all from 11-20
         s1: 12,
         s2: 13,
         s3: 15,
@@ -149,7 +155,9 @@ var typography = {
         code: 90
     },
     lineHeight: {
-        // s all from 0-20
+        // xs all from 0-15
+        xs: 15,
+        // s all from 16-20
         s1: 18,
         s2: 19,
         // m all from 21-40

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    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    highlightBoxWidth: 270\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        // s all from 0-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        // s all from 0-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    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.46",
+  "version": "0.7.50",
   "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.17",
+    "@citygross/design-tokens": "^0.2.20",
     "@citygross/icons": "^0.1.3",
     "@citygross/react-use-bg-wizard": "^0.0.8",
-    "@citygross/typography": "^0.0.44",
+    "@citygross/typography": "^0.0.47",
     "@citygross/utils": "^0.0.19",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "6eacd614e6a2c5f243ec4d2445718c9146261d88"
+  "gitHead": "1d160f8ea3a891f076db34d8b728aa2469289b6b"
 }