@citygross/components 0.7.77 → 0.7.79

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

@@ -62,15 +62,15 @@ var SpinnerSize = function (size) {
             return '26px';
     }
 };
-var BaseButton = styled__default['default'].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  /* reset */\n  outline: none;\n  border: none;\n\n  backface-visibility: hidden;\n  cursor: pointer;\n  border-radius: ", "px;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"], ["\n  /* reset */\n  outline: none;\n  border: none;\n\n  backface-visibility: hidden;\n  cursor: pointer;\n  border-radius: ", "px;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium : props.color; }, function (props) {
+var BaseButton = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  /* reset */\n  outline: none;\n  border: none;\n\n  backface-visibility: hidden;\n  cursor: pointer;\n  border-radius: ", "px;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"], ["\n  /* reset */\n  outline: none;\n  border: none;\n\n  backface-visibility: hidden;\n  cursor: pointer;\n  border-radius: ", "px;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"])), function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium : props.color; }, function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return props.color === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.secondary) ||
         props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.darkest) ||
         props.isDisabled
         ? (_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.white
         : (_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.darkest;
-}, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, 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.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, 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.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
-var BasePrimaryButton = styled__default['default'](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n\n  /* children */\n\n  > div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"], ["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n\n  /* children */\n\n  > div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
+}, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
+var BasePrimaryButton = styled__default["default"](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n"], ["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
     var _a, _b;
     return props.size === 'small'
         ? ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2) + "px"
@@ -104,11 +104,19 @@ var BasePrimaryButton = styled__default['default'](BaseButton)(templateObject_2
                 props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.lightest)
                 ? "inset 0px 0px 0px 1px " + ((_l = props.theme.palette) === null || _l === void 0 ? void 0 : _l.medium)
                 : 'none';
-}, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return (props.size === 'small' ? '8px' : '12px'); }, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
-var Loading = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var LoadingContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
-var LoadingSpinner = styled__default['default'](Spinner.Spinner)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
-var BaseIconButton = styled__default['default'](BaseButton)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"], ["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { return props.height || 32; }, function (props) { return props.width || 32; }, function (props) { return props.width || 32; }, function (props) {
+});
+var ButtonChildContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  width: 100%;\n  gap: ", "px;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  width: 100%;\n  gap: ", "px;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: ", ";\n"])), function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) {
+    var _a, _b;
+    return props.childGap
+        ? props.childGap
+        : props.size === 'small'
+            ? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonChildSmallGap
+            : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonChildGap;
+}, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
+var Loading = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var LoadingContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
+var LoadingSpinner = styled__default["default"](Spinner.Spinner)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var BaseIconButton = styled__default["default"](BaseButton)(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"], ["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { return props.height || 32; }, function (props) { return props.width || 32; }, function (props) { return props.width || 32; }, function (props) {
     var _a;
     return props.shadow && props.border
         ? "box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15), inset 0px 0px 0px 1px " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium)
@@ -118,18 +126,21 @@ var BaseIconButton = styled__default['default'](BaseButton)(templateObject_6 ||
                 ? "box-shadow: inset 0px 0px 0px 1px " + props.border
                 : '';
 }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.iconButtonHover; });
-var BasePaginationButton = styled__default['default'](BaseButton)(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
+var BasePaginationButton = styled__default["default"](BaseButton)(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
     var _a, _b, _c;
     return props.color !== ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white)
         ? 'box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15)'
         : "box-shadow: inset 0px 0px 0px 1px " + ((_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.medium);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var ButtonBadge = styled__default["default"].div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  right: ", "px;\n  padding: 0 7px;\n  background: black;\n  color: white;\n  width: fit-content;\n  border-radius: 100px;\n  font-size: ", "px;\n  line-height: ", "px;\n"], ["\n  position: absolute;\n  top: ", "px;\n  right: ", "px;\n  padding: 0 7px;\n  background: black;\n  color: white;\n  width: fit-content;\n  border-radius: 100px;\n  font-size: ", "px;\n  line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeTopPosition; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeRightPosition; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.xs; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
 exports.BaseButton = BaseButton;
 exports.BaseIconButton = BaseIconButton;
 exports.BasePaginationButton = BasePaginationButton;
 exports.BasePrimaryButton = BasePrimaryButton;
+exports.ButtonBadge = ButtonBadge;
+exports.ButtonChildContainer = ButtonChildContainer;
 exports.Loading = Loading;
 exports.LoadingContainer = LoadingContainer;
 exports.LoadingSpinner = LoadingSpinner;

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

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

package/build/cjs/components/src/components/Button/IconButton.js

@@ -12,12 +12,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function IconButton(_a) {
     var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width;
-    return (React__default['default'].createElement(Button_styles.BaseIconButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow },
-        loading && (React__default['default'].createElement(Button_styles.Loading, null,
-            React__default['default'].createElement(Button_styles.LoadingContainer, null,
-                React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),
+    return (React__default["default"].createElement(Button_styles.BaseIconButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow },
+        loading && (React__default["default"].createElement(Button_styles.Loading, null,
+            React__default["default"].createElement(Button_styles.LoadingContainer, null,
+                React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
         icon,
-        React__default['default'].createElement("span", { className: "ripple" })));
+        React__default["default"].createElement("span", { className: "ripple" })));
 }
 
 exports.IconButton = IconButton;

package/build/cjs/components/src/components/Button/PaginationButton.js

@@ -12,12 +12,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function PaginationButton(_a) {
     var _b = _a.color, color = _b === void 0 ? 'primary' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, width = _a.width, children = _a.children;
-    return (React__default['default'].createElement(Button_styles.BasePaginationButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
-        loading && (React__default['default'].createElement(Button_styles.Loading, null,
-            React__default['default'].createElement(Button_styles.LoadingContainer, null,
-                React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),
+    return (React__default["default"].createElement(Button_styles.BasePaginationButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
+        loading && (React__default["default"].createElement(Button_styles.Loading, null,
+            React__default["default"].createElement(Button_styles.LoadingContainer, null,
+                React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
         icon || children,
-        React__default['default'].createElement("span", { className: "ripple" })));
+        React__default["default"].createElement("span", { className: "ripple" })));
 }
 
 exports.PaginationButton = PaginationButton;

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

@@ -15,16 +15,16 @@ var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 
 function CartItemSummary(_a) {
     var product = _a.product, withParenthesis = _a.withParenthesis, _b = _a.unit, unit = _b === void 0 ? "st" : _b;
-    return (React__default['default'].createElement(CartItemSummary_styles.CartItemSummaryWrapper, null,
+    return (React__default["default"].createElement(CartItemSummary_styles.CartItemSummaryWrapper, null,
         product &&
             (product.amount === 0 || product.amount) &&
             (product === null || product === void 0 ? void 0 : product.cancelledQuantity) !== 0 &&
-            (product === null || product === void 0 ? void 0 : product.cancelledQuantity) && (React__default['default'].createElement(CartItemSummary_styles.CancelledWrapper, null,
-            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, lineThrough: true }, (product === null || product === void 0 ? void 0 : product.cancelledQuantity) ? (product.cancelledQuantity + " st") : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))),
-            React__default['default'].createElement(CartItemSummary_styles.AmountText, { lineThrough: true, fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.cancelledAmount, withParenthesis)) : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))))),
-        React__default['default'].createElement(CartItemSummary_styles.ItemInformationContainer, null,
-            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity) || (product === null || product === void 0 ? void 0 : product.quantity) === 0 ? (product.quantity + " " + unit) : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))),
-            React__default['default'].createElement(CartItemSummary_styles.AmountText, { fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.amount, withParenthesis)) : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))))));
+            (product === null || product === void 0 ? void 0 : product.cancelledQuantity) && (React__default["default"].createElement(CartItemSummary_styles.CancelledWrapper, null,
+            React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, lineThrough: true }, (product === null || product === void 0 ? void 0 : product.cancelledQuantity) ? (product.cancelledQuantity + " st") : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))),
+            React__default["default"].createElement(CartItemSummary_styles.AmountText, { lineThrough: true, fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.cancelledAmount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))),
+        React__default["default"].createElement(CartItemSummary_styles.ItemInformationContainer, null,
+            React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity) || (product === null || product === void 0 ? void 0 : product.quantity) === 0 ? (product.quantity + " " + unit) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))),
+            React__default["default"].createElement(CartItemSummary_styles.AmountText, { fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.amount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))));
 }
 
 exports.CartItemSummary = CartItemSummary;

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

@@ -10,10 +10,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CartItemSummaryWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
-var CancelledWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
-var ItemInformationContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
-var AmountText = styled__default['default'](typography.H3)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  white-space: nowrap;\n"], ["\n  white-space: nowrap;\n"])));
+var CartItemSummaryWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
+var CancelledWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var ItemInformationContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var AmountText = styled__default["default"](typography.H3)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  white-space: nowrap;\n"], ["\n  white-space: nowrap;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.AmountText = AmountText;

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

@@ -39,51 +39,51 @@ function CartSummary(_a) {
     var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
     var sumOfBags = calculateSummaryLine(bags);
     var sumOfGroceries = calculateSummaryLine(groceries);
-    return (React__default['default'].createElement(CartSummary_styles.CartSummaryContainer, null,
-        React__default['default'].createElement(CartSummary_styles.CartPaymentContainer, null,
-            cartSummary.title && (React__default['default'].createElement(CartSummary_styles.CartSummaryTitle, null,
-                React__default['default'].createElement(typography.H3, null, cartSummary.title),
-                React__default['default'].createElement(typography.BodyText, null, cartSummary.subTitle))),
-            React__default['default'].createElement(CartSummary_styles.CartSummaryHeader, { title: cartSummary.title },
-                bags.length > 0 && (React__default['default'].createElement(CartSummary_styles.CartLine, null,
-                    React__default['default'].createElement(typography.BodyText, null,
+    return (React__default["default"].createElement(CartSummary_styles.CartSummaryContainer, null,
+        React__default["default"].createElement(CartSummary_styles.CartPaymentContainer, null,
+            cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
+                React__default["default"].createElement(typography.H3, null, cartSummary.title),
+                React__default["default"].createElement(typography.BodyText, null, cartSummary.subTitle))),
+            React__default["default"].createElement(CartSummary_styles.CartSummaryHeader, { title: cartSummary.title },
+                bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, null,
                         "matkassar ",
                         sumOfBags.quantity,
                         " st"),
-                    React__default['default'].createElement(CartSummary_styles.AmountWrapper, null,
-                        sumOfBags.cancelledAmount > 0 && (React__default['default'].createElement(typography.BodyText, { lineThrough: true, color: (_e = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, utils.formatPrice(sumOfBags.cancelledAmount))),
-                        React__default['default'].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfBags.amount))))),
-                groceries.length > 0 && (React__default['default'].createElement(CartSummary_styles.CartLine, null,
-                    React__default['default'].createElement(typography.BodyText, null,
+                    React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
+                        sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_e = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, utils.formatPrice(sumOfBags.cancelledAmount))),
+                        React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfBags.amount))))),
+                groceries.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, null,
                         "matvaror ",
                         sumOfGroceries.quantity,
                         " st"),
-                    React__default['default'].createElement(CartSummary_styles.AmountWrapper, null,
-                        sumOfGroceries.cancelledAmount > 0 && (React__default['default'].createElement(typography.BodyText, { lineThrough: true, color: (_f = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _f === void 0 ? void 0 : _f.dark }, utils.formatPrice(sumOfGroceries.cancelledAmount))),
-                        React__default['default'].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfGroceries.amount))))),
-                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default['default'].createElement(Divider.Divider, { xsSpacing: (_g = index.theme.spacings) === null || _g === void 0 ? void 0 : _g.xs, lgSpacing: (_h = index.theme.spacings) === null || _h === void 0 ? void 0 : _h.xs })), charges === null || charges === void 0 ? void 0 :
+                    React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
+                        sumOfGroceries.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_f = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _f === void 0 ? void 0 : _f.dark }, utils.formatPrice(sumOfGroceries.cancelledAmount))),
+                        React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfGroceries.amount))))),
+                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default["default"].createElement(Divider.Divider, { xsSpacing: (_g = index.theme.spacings) === null || _g === void 0 ? void 0 : _g.xs, lgSpacing: (_h = index.theme.spacings) === null || _h === void 0 ? void 0 : _h.xs })), charges === null || charges === void 0 ? void 0 :
                 charges.map(function (charge) {
                     var _a, _b;
-                    return (React__default['default'].createElement(CartSummary_styles.CartLine, { key: charge.name },
-                        React__default['default'].createElement(typography.BodyText, null, (_a = charge === null || charge === void 0 ? void 0 : charge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()),
-                        React__default['default'].createElement(CartSummary_styles.AmountWrapper, null,
-                            charge.cancelledAmount > 0 && (React__default['default'].createElement(typography.BodyText, { lineThrough: true, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, utils.formatPrice(charge.cancelledAmount))),
-                            React__default['default'].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))));
+                    return (React__default["default"].createElement(CartSummary_styles.CartLine, { key: charge.name },
+                        React__default["default"].createElement(typography.BodyText, null, (_a = charge === null || charge === void 0 ? void 0 : charge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()),
+                        React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
+                            charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, utils.formatPrice(charge.cancelledAmount))),
+                            React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))));
                 }),
-                cartSummary.totalDiscount > 0 && (React__default['default'].createElement(CartSummary_styles.CartLine, null,
-                    React__default['default'].createElement(typography.BodyText, { color: (_j = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _j === void 0 ? void 0 : _j.alertRed }, saveLabel),
-                    React__default['default'].createElement(typography.BodyText, { color: (_k = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _k === void 0 ? void 0 : _k.alertRed }, utils.formatPrice(cartSummary.totalDiscount))))),
-            React__default['default'].createElement(CartSummary_styles.CartSummaryFooter, null,
+                cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, { color: (_j = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _j === void 0 ? void 0 : _j.alertRed }, saveLabel),
+                    React__default["default"].createElement(typography.BodyText, { color: (_k = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _k === void 0 ? void 0 : _k.alertRed }, utils.formatPrice(cartSummary.totalDiscount))))),
+            React__default["default"].createElement(CartSummary_styles.CartSummaryFooter, null,
                 ((_l = cartSummary.deliveryFee) === null || _l === void 0 ? void 0 : _l.amount) &&
-                    cartSummary.deliveryFee.amount > 0 && (React__default['default'].createElement(CartSummary_styles.CartLine, null,
-                    React__default['default'].createElement(typography.BodyText, null, shippingLabel),
-                    React__default['default'].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.deliveryFee.amount)))),
-                React__default['default'].createElement(CartSummary_styles.CartLine, null,
-                    React__default['default'].createElement(typography.H3, { fontWeight: 'semiBold' }, totalLabel),
-                    React__default['default'].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(cartSummary.totalAmount))),
-                React__default['default'].createElement(CartSummary_styles.CartLine, null,
-                    React__default['default'].createElement(typography.BodyText, null, taxLabel),
-                    React__default['default'].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.totalTaxAmount)))))));
+                    cartSummary.deliveryFee.amount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, null, shippingLabel),
+                    React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.deliveryFee.amount)))),
+                React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, totalLabel),
+                    React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(cartSummary.totalAmount))),
+                React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, null, taxLabel),
+                    React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.totalTaxAmount)))))));
 }
 
 exports.CartSummary = CartSummary;

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

@@ -9,13 +9,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CartSummaryContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject([""], [""])));
-var CartPaymentContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLighter; });
-var CartSummaryHeader = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return props.title && "padding-top: " + ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm) + "px"; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var CartSummaryFooter = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLight; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var CartLine = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
-var AmountWrapper = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var CartSummaryTitle = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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.light; });
+var CartSummaryContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject([""], [""])));
+var CartPaymentContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLighter; });
+var CartSummaryHeader = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return props.title && "padding-top: " + ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm) + "px"; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartSummaryFooter = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLight; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartLine = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
+var AmountWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartSummaryTitle = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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.light; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 exports.AmountWrapper = AmountWrapper;

package/build/cjs/components/src/components/Chips/Chip.js

@@ -16,10 +16,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function Chip(_a) {
     var _b, _c, _d;
     var label = _a.label, checked = _a.checked, onClick = _a.onClick, _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _e, _f = _a.activeBackground, activeBackground = _f === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white : _f, loading = _a.loading;
-    return (React__default['default'].createElement(Chip_styles.BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, loading: loading },
-        loading ? (React__default['default'].createElement(Spinner.Spinner, { size: 12 })) : (React__default['default'].createElement(React__default['default'].Fragment, null, checked ? (React__default['default'].createElement(Chip_styles.ChipCheckbox, null,
-            React__default['default'].createElement(Icon.Icons.CheckMark, { color: (_d = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))) : (React__default['default'].createElement(Chip_styles.ChipCheckbox, null)))),
-        React__default['default'].createElement(Chip_styles.ChipLabel, { forwardedAs: 'label', size: typography.TextTypes.TextSize.SMALL }, label)));
+    return (React__default["default"].createElement(Chip_styles.BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, loading: loading },
+        loading ? (React__default["default"].createElement(Spinner.Spinner, { size: 12 })) : (React__default["default"].createElement(React__default["default"].Fragment, null, checked ? (React__default["default"].createElement(Chip_styles.ChipCheckbox, null,
+            React__default["default"].createElement(Icon.Icons.CheckMark, { color: (_d = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))) : (React__default["default"].createElement(Chip_styles.ChipCheckbox, null)))),
+        React__default["default"].createElement(Chip_styles.ChipLabel, { forwardedAs: 'label', size: typography.TextTypes.TextSize.SMALL }, label)));
 }
 
 exports.Chip = Chip;

package/build/cjs/components/src/components/Chips/Chip.styles.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseChip = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
+var BaseChip = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
     return props.checked
         ? props.activeBackground && props.activeBackground
         : props.background && props.background;
@@ -19,8 +19,8 @@ var BaseChip = styled__default['default'].div(templateObject_1 || (templateObjec
     return props.checked &&
         "box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen);
 });
-var ChipCheckbox = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"], ["\n  display: flex;\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
-var ChipLabel = styled__default['default'](typography.BodyText)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
+var ChipCheckbox = styled__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"], ["\n  display: flex;\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
+var ChipLabel = styled__default["default"](typography.BodyText)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;
 
 exports.BaseChip = BaseChip;

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

@@ -15,13 +15,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Collapsable = function (_a) {
     var heading = _a.heading, backgroundColor = _a.backgroundColor, children = _a.children;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
-    return (React__default['default'].createElement(Collapsable_styles.Collapsable, { backgroundColor: backgroundColor },
-        React__default['default'].createElement(Collapsable_styles.PreviewContainer, { onClick: function () { return setOpen(!open); } },
-            React__default['default'].createElement(Box.Box, null,
-                React__default['default'].createElement(Collapsable_styles.PreviewInner, null,
-                    React__default['default'].createElement(typography.H2, null, heading),
-                    open ? React__default['default'].createElement(Icon.Icons.ChevronUp, null) : React__default['default'].createElement(Icon.Icons.ChevronDown, null)))),
-        React__default['default'].createElement(Collapsable_styles.CollapsedContainer, { open: open }, children)));
+    return (React__default["default"].createElement(Collapsable_styles.Collapsable, { backgroundColor: backgroundColor },
+        React__default["default"].createElement(Collapsable_styles.PreviewContainer, { onClick: function () { return setOpen(!open); } },
+            React__default["default"].createElement(Box.Box, null,
+                React__default["default"].createElement(Collapsable_styles.PreviewInner, null,
+                    React__default["default"].createElement(typography.H2, null, heading),
+                    open ? React__default["default"].createElement(Icon.Icons.ChevronUp, null) : React__default["default"].createElement(Icon.Icons.ChevronDown, null)))),
+        React__default["default"].createElement(Collapsable_styles.CollapsedContainer, { open: open }, children)));
 };
 
 exports.Collapsable = Collapsable;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Collapsable = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { return props.backgroundColor && "background: " + props.backgroundColor; });
-var PreviewContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  border-bottom: 1px solid ", ";\n"], ["\n  cursor: pointer;\n  border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
-var PreviewInner = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-var CollapsedContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: ", ";\n"], ["\n  display: ", ";\n"])), function (props) { return (props.open ? 'block' : 'none'); });
+var Collapsable = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { return props.backgroundColor && "background: " + props.backgroundColor; });
+var PreviewContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  border-bottom: 1px solid ", ";\n"], ["\n  cursor: pointer;\n  border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
+var PreviewInner = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CollapsedContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: ", ";\n"], ["\n  display: ", ";\n"])), function (props) { return (props.open ? 'block' : 'none'); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.Collapsable = Collapsable;

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

@@ -12,8 +12,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function CustomerInfoBlock(_a) {
     var _b = _a.title, title = _b === void 0 ? 'Dina Uppgifter' : _b, _c = _a.boldTitle, boldTitle = _c === void 0 ? true : _c, children = _a.children;
-    return (React__default['default'].createElement(CustomerInfoBlock_styles.CustomerInfoBlock, null,
-        React__default['default'].createElement(typography.H3, { fontWeight: boldTitle ? 'semiBold' : 'regular' }, title),
+    return (React__default["default"].createElement(CustomerInfoBlock_styles.CustomerInfoBlock, null,
+        React__default["default"].createElement(typography.H3, { fontWeight: boldTitle ? 'semiBold' : 'regular' }, title),
         children));
 }
 

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CustomerInfoBlock = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var CustomerInfoBlock = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
 var templateObject_1;
 
 exports.CustomerInfoBlock = CustomerInfoBlock;

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

@@ -11,10 +11,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function DateBox(_a) {
     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, { labelBackground: labelBackground },
-            React__default['default'].createElement(DateBox_styles.DateHeader, null, dateHeader)),
-        React__default['default'].createElement(DateBox_styles.WeekNumber, null, children)));
+    return (React__default["default"].createElement(DateBox_styles.StyledDateBox, null,
+        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.styles.js

@@ -9,10 +9,10 @@ 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 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 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 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;

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

@@ -80,14 +80,14 @@ function DeliverySlotItem(_a) {
         };
     }, [slotRef, options]);
     var removeLeadingZero = function (day) { return day.replace(/^0+/, ''); };
-    return (React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { onClick: !disabled ? onSelect : function () { return null; }, disabled: disabled, isVisible: isVisible, ref: slotRef, selected: selected },
-        React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotHeaderContainer, { disabled: disabled, selected: selected },
-            React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotHeaderText, { disabled: disabled },
-                React__default['default'].createElement(typography.BodyText, { color: selected ? 'white' : 'black' }, utils.capitalizeFirstLetter(weekDay)))),
-        React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotContainer, { selected: selected, disabled: disabled },
-            React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotBody, { disabled: disabled },
-                React__default['default'].createElement(typography.H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
-                React__default['default'].createElement(typography.BodyText, { color: 'darker' }, utils.capitalizeFirstLetter(month))),
+    return (React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { onClick: !disabled ? onSelect : function () { return null; }, disabled: disabled, isVisible: isVisible, ref: slotRef, selected: selected },
+        React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotHeaderContainer, { disabled: disabled, selected: selected },
+            React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotHeaderText, { disabled: disabled },
+                React__default["default"].createElement(typography.BodyText, { color: selected ? 'white' : 'black' }, utils.capitalizeFirstLetter(weekDay)))),
+        React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotContainer, { selected: selected, disabled: disabled },
+            React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotBody, { disabled: disabled },
+                React__default["default"].createElement(typography.H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
+                React__default["default"].createElement(typography.BodyText, { color: 'darker' }, utils.capitalizeFirstLetter(month))),
             children)));
 }
 

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

@@ -9,26 +9,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var DeliverySlotItemContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) {
+var DeliverySlotItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
         : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
 }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidthDesktop; }, function (props) { return (props.disabled ? 'default' : 'pointer'); });
-var DeliverySlotHeaderContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"], ["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"])), function (props) {
+var DeliverySlotHeaderContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"], ["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"])), function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
         : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
 });
-var DeliverySlotHeaderText = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n"], ["\n  padding: ", "px;\n  ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.disabled && 'opacity: 0.4'; });
-var DeliverySlotContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n"], ["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
+var DeliverySlotHeaderText = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n"], ["\n  padding: ", "px;\n  ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.disabled && 'opacity: 0.4'; });
+var DeliverySlotContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n"], ["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight
         : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
 });
-var DeliverySlotBody = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
+var DeliverySlotBody = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.DeliverySlotBody = DeliverySlotBody;