@citygross/components 0.7.76 → 0.7.78

package/build/cjs/components/src/components/FormElements/Input/Input.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Input = styled__default['default'].input(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", ";\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", ";\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
+var Input = styled__default["default"].input(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", ";\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", ";\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
     var _a, _b, _c, _d;
     return props.disabled
         ? (_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

package/build/cjs/components/src/components/FormElements/Radio/Radio.js

@@ -13,9 +13,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Radio(_a) {
     var onChange = _a.onChange, _b = _a.customColor, customColor = _b === void 0 ? 'alertGreen' : _b, inputProps = _tslib.__rest(_a, ["onChange", "customColor"]);
-    return (React__default['default'].createElement(Radio_styles.RadioWrapper, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 } },
-        React__default['default'].createElement(Radio_styles.RadioInput, _tslib.__assign({ type: "radio", onChange: onChange, customColor: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[customColor] : 'white' }, inputProps)),
-        React__default['default'].createElement(Radio_styles.CustomRadio, { customColor: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[customColor] : 'white' })));
+    return (React__default["default"].createElement(Radio_styles.RadioWrapper, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 } },
+        React__default["default"].createElement(Radio_styles.RadioInput, _tslib.__assign({ type: "radio", onChange: onChange, customColor: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[customColor] : 'white' }, inputProps)),
+        React__default["default"].createElement(Radio_styles.CustomRadio, { customColor: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[customColor] : 'white' })));
 }
 
 exports.Radio = Radio;

package/build/cjs/components/src/components/FormElements/Radio/Radio.styles.js

@@ -10,9 +10,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var RadioWrapper = styled__default['default'](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n"], ["\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n"])));
-var CustomRadio = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  border-radius: 50%;\n  z-index: 2;\n  border: 1px solid ", ";\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  border-radius: 50%;\n  z-index: 2;\n  border: 1px solid ", ";\n"])), function (props) { var _a, _b; return (_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; });
-var RadioInput = styled__default['default'].input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  z-index: 3;\n\n  &:checked + ", " {\n    display: inline-block;\n    ", ";\n    animation-fill-mode: forwards;\n\n    &::after {\n      z-index: 1;\n      content: '';\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      top: 3px;\n      left: 3px;\n      position: absolute;\n      ", ";\n      animation-fill-mode: forwards;\n\n      @keyframes backgroundAnimation {\n        from {background: none;}\n        to {background:", ";}\n      }\n\n      @keyframes borderAntmation {\n        from {border: 2px solid ", ";}\n        to {border: 2px solid ", ";}\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  z-index: 3;\n\n  &:checked + ", " {\n    display: inline-block;\n    ", ";\n    animation-fill-mode: forwards;\n\n    &::after {\n      z-index: 1;\n      content: '';\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      top: 3px;\n      left: 3px;\n      position: absolute;\n      ", ";\n      animation-fill-mode: forwards;\n\n      @keyframes backgroundAnimation {\n        from {background: none;}\n        to {background:", ";}\n      }\n\n      @keyframes borderAntmation {\n        from {border: 2px solid ", ";}\n        to {border: 2px solid ", ";}\n      }\n    }\n  }\n"])), CustomRadio, function (props) { return props.customColor && 'animation: borderAntmation 500ms'; }, function (props) { return props.customColor && 'animation: backgroundAnimation 500ms'; }, function (props) { return props.customColor && "" + props.customColor; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { return props.customColor; });
+var RadioWrapper = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n"], ["\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n"])));
+var CustomRadio = styled__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  border-radius: 50%;\n  z-index: 2;\n  border: 1px solid ", ";\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  border-radius: 50%;\n  z-index: 2;\n  border: 1px solid ", ";\n"])), function (props) { var _a, _b; return (_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; });
+var RadioInput = styled__default["default"].input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  z-index: 3;\n\n  &:checked + ", " {\n    display: inline-block;\n    ", ";\n    animation-fill-mode: forwards;\n\n    &::after {\n      z-index: 1;\n      content: '';\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      top: 3px;\n      left: 3px;\n      position: absolute;\n      ", ";\n      animation-fill-mode: forwards;\n\n      @keyframes backgroundAnimation {\n        from {background: none;}\n        to {background:", ";}\n      }\n\n      @keyframes borderAntmation {\n        from {border: 2px solid ", ";}\n        to {border: 2px solid ", ";}\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  z-index: 3;\n\n  &:checked + ", " {\n    display: inline-block;\n    ", ";\n    animation-fill-mode: forwards;\n\n    &::after {\n      z-index: 1;\n      content: '';\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      top: 3px;\n      left: 3px;\n      position: absolute;\n      ", ";\n      animation-fill-mode: forwards;\n\n      @keyframes backgroundAnimation {\n        from {background: none;}\n        to {background:", ";}\n      }\n\n      @keyframes borderAntmation {\n        from {border: 2px solid ", ";}\n        to {border: 2px solid ", ";}\n      }\n    }\n  }\n"])), CustomRadio, function (props) { return props.customColor && 'animation: borderAntmation 500ms'; }, function (props) { return props.customColor && 'animation: backgroundAnimation 500ms'; }, function (props) { return props.customColor && "" + props.customColor; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { return props.customColor; });
 var templateObject_1, templateObject_2, templateObject_3;
 
 exports.CustomRadio = CustomRadio;

package/build/cjs/components/src/components/FormElements/Switch/Switch.js

@@ -12,10 +12,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Switch(_a) {
     var onChange = _a.onChange, inputProps = _tslib.__rest(_a, ["onChange"]);
-    return (React__default['default'].createElement(Switch_styles.SwitchWrapper, { whileHover: { scale: 1.1 } },
-        React__default['default'].createElement(Switch_styles.SwitchInput, _tslib.__assign({ type: "checkbox", onChange: onChange }, inputProps)),
-        React__default['default'].createElement(Switch_styles.CustomSwitch, null,
-            React__default['default'].createElement(Switch_styles.Switch, null))));
+    return (React__default["default"].createElement(Switch_styles.SwitchWrapper, { whileHover: { scale: 1.1 } },
+        React__default["default"].createElement(Switch_styles.SwitchInput, _tslib.__assign({ type: "checkbox", onChange: onChange }, inputProps)),
+        React__default["default"].createElement(Switch_styles.CustomSwitch, null,
+            React__default["default"].createElement(Switch_styles.Switch, null))));
 }
 
 exports.Switch = Switch;

package/build/cjs/components/src/components/FormElements/Switch/Switch.styles.js

@@ -10,10 +10,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var SwitchWrapper = styled__default['default'](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"], ["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"])));
-var Switch = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  width: 20px;\n  height: 20px;\n  border-radius: 100px;\n  display: inline-block;\n"], ["\n  background: ", ";\n  width: 20px;\n  height: 20px;\n  border-radius: 100px;\n  display: inline-block;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
-var CustomSwitch = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 100px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  z-index: 1;\n  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 100px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  z-index: 1;\n  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; });
-var SwitchInput = styled__default['default'].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  cursor: pointer;\n\n  &:checked + ", " {\n    justify-content: flex-end;\n    background: ", ";\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  cursor: pointer;\n\n  &:checked + ", " {\n    justify-content: flex-end;\n    background: ", ";\n  }\n"])), CustomSwitch, function (props) { var _a, _b; return (_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.alertGreen; });
+var SwitchWrapper = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"], ["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"])));
+var Switch = styled__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  width: 20px;\n  height: 20px;\n  border-radius: 100px;\n  display: inline-block;\n"], ["\n  background: ", ";\n  width: 20px;\n  height: 20px;\n  border-radius: 100px;\n  display: inline-block;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
+var CustomSwitch = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 100px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  z-index: 1;\n  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 100px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  z-index: 1;\n  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; });
+var SwitchInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  cursor: pointer;\n\n  &:checked + ", " {\n    justify-content: flex-end;\n    background: ", ";\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  cursor: pointer;\n\n  &:checked + ", " {\n    justify-content: flex-end;\n    background: ", ";\n  }\n"])), CustomSwitch, function (props) { var _a, _b; return (_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.alertGreen; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.CustomSwitch = CustomSwitch;

package/build/cjs/components/src/components/FormElements/TextArea/TextArea.js

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function TextArea(_a) {
     var flexGrow = _a.flexGrow, fontSize = _a.fontSize, props = _tslib.__rest(_a, ["flexGrow", "fontSize"]);
-    return React__default['default'].createElement(TextArea_styles.TextArea, _tslib.__assign({}, props, { flexGrow: flexGrow, fontSize: fontSize }));
+    return React__default["default"].createElement(TextArea_styles.TextArea, _tslib.__assign({}, props, { flexGrow: flexGrow, fontSize: fontSize }));
 }
 
 exports.TextArea = TextArea;

package/build/cjs/components/src/components/FormElements/TextArea/TextArea.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var TextArea = styled__default['default'].textarea(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", "px;\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  resize: vertical;\n  width: 100%;\n  ", ";\n\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"], ["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", "px;\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  resize: vertical;\n  width: 100%;\n  ", ";\n\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"])), function (props) {
+var TextArea = styled__default["default"].textarea(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", "px;\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  resize: vertical;\n  width: 100%;\n  ", ";\n\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"], ["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", "px;\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  resize: vertical;\n  width: 100%;\n  ", ";\n\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"])), function (props) {
     var _a, _b, _c, _d;
     return props.disabled
         ? (_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

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

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 // eslint-disable-next-line no-empty-pattern
 function FormGroup(_a) {
     var children = _a.children, justifyContent = _a.justifyContent;
-    return (React__default['default'].createElement(FormGroup_styles.FormControlWrapper, { justifyContent: justifyContent }, children));
+    return (React__default["default"].createElement(FormGroup_styles.FormControlWrapper, { justifyContent: justifyContent }, children));
 }
 
 exports.FormGroup = FormGroup;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var FormControlWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  ", ";\n\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  ", ";\n\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"])), function (props) {
+var FormControlWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  ", ";\n\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  ", ";\n\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"])), function (props) {
     return props.justifyContent && "justify-content: " + props.justifyContent;
 }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, 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) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
 var templateObject_1;

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

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function GridContainer(_a) {
     var alignItems = _a.alignItems, gap = _a.gap, _b = _a.columns, columns = _b === void 0 ? 2 : _b, columnWidth = _a.columnWidth, children = _a.children;
-    return (React__default['default'].createElement(GridContainer_styles.Grid, { alignItems: alignItems, gap: gap, columnWidth: columnWidth, columns: columns }, children));
+    return (React__default["default"].createElement(GridContainer_styles.Grid, { alignItems: alignItems, gap: gap, columnWidth: columnWidth, columns: columns }, children));
 }
 
 exports.GridContainer = GridContainer;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Grid = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: ", ";\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    grid-template-columns: repeat(\n      ", ",\n      ", "\n    );\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: ", ";\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    grid-template-columns: repeat(\n      ", ",\n      ", "\n    );\n  }\n"])), function (props) { return props.alignItems || 'start'; }, function (props) { var _a, _b; return props.gap || ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.sm); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { return props.columns; }, function (props) { return (props.columnWidth ? props.columnWidth + "px" : '1fr'); });
+var Grid = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: ", ";\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    grid-template-columns: repeat(\n      ", ",\n      ", "\n    );\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: ", ";\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    grid-template-columns: repeat(\n      ", ",\n      ", "\n    );\n  }\n"])), function (props) { return props.alignItems || 'start'; }, function (props) { var _a, _b; return props.gap || ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.sm); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { return props.columns; }, function (props) { return (props.columnWidth ? props.columnWidth + "px" : '1fr'); });
 var templateObject_1;
 
 exports.Grid = Grid;

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

@@ -19,13 +19,13 @@ function Header(_a) {
     var _b, _c;
     var logOut = _a.logOut, logOutLabel = _a.logOutLabel, _d = _a.topLinkHref, topLinkHref = _d === void 0 ? '/' : _d, topLinkLabel = _a.topLinkLabel, logoImage = _a.logoImage, _e = _a.lowerContainerMaxWidth, lowerContainerMaxWidth = _e === void 0 ? (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth : _e, children = _a.children;
     var device = utils.useDetectDevice();
-    return (React__default['default'].createElement(Header_styles.Wrapper, null,
-        topLinkLabel && topLinkHref && (React__default['default'].createElement(HeaderLink.HeaderLink, { linkHref: topLinkHref, icon: React__default['default'].createElement(Icon.Icons.ChevronLeft, { width: 20, height: 20, color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white }), linkLabel: topLinkLabel })),
-        (logoImage || logOutLabel) && (React__default['default'].createElement(Header_styles.HeaderWrapper, null,
-            React__default['default'].createElement(Header_styles.HeaderContainer, { maxWidth: lowerContainerMaxWidth },
-                logoImage && React__default['default'].createElement(Logo.Logo, { logoImage: logoImage }),
-                logOut && (React__default['default'].createElement(Button.Button, { onClick: function () { return logOut && logOut(); }, color: 'white', size: device.isMobile ? 'medium' : 'large' }, logOutLabel))))),
-        children && React__default['default'].createElement(Header_styles.MenuContainer, null, children)));
+    return (React__default["default"].createElement(Header_styles.Wrapper, null,
+        topLinkLabel && topLinkHref && (React__default["default"].createElement(HeaderLink.HeaderLink, { linkHref: topLinkHref, icon: React__default["default"].createElement(Icon.Icons.ChevronLeft, { width: 20, height: 20, color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white }), linkLabel: topLinkLabel })),
+        (logoImage || logOutLabel) && (React__default["default"].createElement(Header_styles.HeaderWrapper, null,
+            React__default["default"].createElement(Header_styles.HeaderContainer, { maxWidth: lowerContainerMaxWidth },
+                logoImage && React__default["default"].createElement(Logo.Logo, { logoImage: logoImage }),
+                logOut && (React__default["default"].createElement(Button.Button, { onClick: function () { return logOut && logOut(); }, color: 'white', size: device.isMobile ? 'medium' : 'large' }, logOutLabel))))),
+        children && React__default["default"].createElement(Header_styles.MenuContainer, null, children)));
 }
 
 exports.Header = Header;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Wrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"], ["\n  position: relative;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"])));
-var HeaderWrapper = styled__default['default'].header(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: ", "px\n      ", "px;\n  }\n"], ["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: ", "px\n      ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.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.headerWrapperVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
-var HeaderContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n"])), function (props) { return props.maxWidth; });
-var MenuContainer = styled__default['default'].nav(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: relative;\n  max-width: ", "px;\n  padding-left: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n  @media (min-width: ", "px) {\n    padding-left: 0;\n  }\n"], ["\n  position: relative;\n  max-width: ", "px;\n  padding-left: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n  @media (min-width: ", "px) {\n    padding-left: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxl; });
+var Wrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"], ["\n  position: relative;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"])));
+var HeaderWrapper = styled__default["default"].header(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: ", "px\n      ", "px;\n  }\n"], ["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: ", "px\n      ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.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.headerWrapperVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
+var HeaderContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n"])), function (props) { return props.maxWidth; });
+var MenuContainer = styled__default["default"].nav(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: relative;\n  max-width: ", "px;\n  padding-left: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n  @media (min-width: ", "px) {\n    padding-left: 0;\n  }\n"], ["\n  position: relative;\n  max-width: ", "px;\n  padding-left: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n  @media (min-width: ", "px) {\n    padding-left: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxl; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.HeaderContainer = HeaderContainer;

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

@@ -11,9 +11,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function HeaderLink(_a) {
     var linkHref = _a.linkHref, icon = _a.icon, linkLabel = _a.linkLabel;
-    return (React__default['default'].createElement(HeaderLink_styles.HeaderLinkContainer, { href: linkHref },
-        React__default['default'].createElement(HeaderLink_styles.TextContainer, null,
-            React__default['default'].createElement(HeaderLink_styles.ArrowLeft, null, icon),
+    return (React__default["default"].createElement(HeaderLink_styles.HeaderLinkContainer, { href: linkHref },
+        React__default["default"].createElement(HeaderLink_styles.TextContainer, null,
+            React__default["default"].createElement(HeaderLink_styles.ArrowLeft, null, icon),
             linkLabel)));
 }
 

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

@@ -9,9 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var HeaderLinkContainer = styled__default['default'].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: block;\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  text-decoration: none;\n  line-height: ", "px;\n"], ["\n  display: block;\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  text-decoration: none;\n  line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darker; }, 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.xs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md) + "px"; }, 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.lineHeight.s2; });
-var TextContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var ArrowLeft = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  margin-right: ", "px;\n  align-self: center;\n"], ["\n  display: flex;\n  margin-right: ", "px;\n  align-self: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var HeaderLinkContainer = styled__default["default"].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: block;\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  text-decoration: none;\n  line-height: ", "px;\n"], ["\n  display: block;\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  text-decoration: none;\n  line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darker; }, 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.xs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md) + "px"; }, 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.lineHeight.s2; });
+var TextContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var ArrowLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  margin-right: ", "px;\n  align-self: center;\n"], ["\n  display: flex;\n  margin-right: ", "px;\n  align-self: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var templateObject_1, templateObject_2, templateObject_3;
 
 exports.ArrowLeft = ArrowLeft;

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

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function HighlightBox(_a) {
     var cancelled = _a.cancelled, children = _a.children;
-    return (React__default['default'].createElement(HighlightBox_styles.HighlightBoxContainer, { cancelled: cancelled }, 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  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 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

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

@@ -14,18 +14,18 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function IconToolTip(_a) {
     var _b, _c;
-    var _d = _a.icon, icon = _d === void 0 ? React__default['default'].createElement(Icon.Icons.Info, { width: 17, height: 17, color: (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }) : _d, header = _a.header, right = _a.right, left = _a.left, children = _a.children;
+    var _d = _a.icon, icon = _d === void 0 ? React__default["default"].createElement(Icon.Icons.Info, { width: 17, height: 17, color: (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }) : _d, header = _a.header, right = _a.right, left = _a.left, children = _a.children;
     var _e = React.useState(false), open = _e[0], setOpen = _e[1];
-    return (React__default['default'].createElement(IconToolTip_styles.IconToolTipContainer, null,
-        React__default['default'].createElement("div", { onClick: function () { return setOpen(!open); } }, icon),
-        open && (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(IconToolTip_styles.ArrowUp, null),
-            React__default['default'].createElement(IconToolTip_styles.ToolTipBox, { left: left, right: right },
-                React__default['default'].createElement(IconToolTip_styles.ToolTipheader, null,
+    return (React__default["default"].createElement(IconToolTip_styles.IconToolTipContainer, null,
+        React__default["default"].createElement("div", { onClick: function () { return setOpen(!open); } }, icon),
+        open && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(IconToolTip_styles.ArrowUp, null),
+            React__default["default"].createElement(IconToolTip_styles.ToolTipBox, { left: left, right: right },
+                React__default["default"].createElement(IconToolTip_styles.ToolTipheader, null,
                     header,
-                    React__default['default'].createElement(IconToolTip_styles.ToolTipIconContainer, { onClick: function () { return setOpen(false); } },
-                        React__default['default'].createElement(Icon.Icons.Cross, { color: (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.white }))),
-                React__default['default'].createElement(Spacer.Spacer, null),
+                    React__default["default"].createElement(IconToolTip_styles.ToolTipIconContainer, { onClick: function () { return setOpen(false); } },
+                        React__default["default"].createElement(Icon.Icons.Cross, { color: (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.white }))),
+                React__default["default"].createElement(Spacer.Spacer, null),
                 children)))));
 }
 

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

@@ -9,17 +9,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var IconToolTipContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n"], ["\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n"])));
-var ArrowUp = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  width: 0;\n  left: ", "px;\n  height: 0;\n  border-left: ", "px solid\n    transparent;\n  border-right: ", "px solid\n    transparent;\n  border-bottom: ", "px solid\n    ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  width: 0;\n  left: ", "px;\n  height: 0;\n  border-left: ", "px solid\n    transparent;\n  border-right: ", "px solid\n    transparent;\n  border-bottom: ", "px solid\n    ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowLeft; }, 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 _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 _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 _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
-var ToolTipBox = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  ", ";\n  width: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  padding: ", "px;\n  z-index: 99;\n"], ["\n  position: absolute;\n  top: ", "px;\n  ", ";\n  width: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  padding: ", "px;\n  z-index: 99;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
+var IconToolTipContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n"], ["\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n"])));
+var ArrowUp = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  width: 0;\n  left: ", "px;\n  height: 0;\n  border-left: ", "px solid\n    transparent;\n  border-right: ", "px solid\n    transparent;\n  border-bottom: ", "px solid\n    ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  width: 0;\n  left: ", "px;\n  height: 0;\n  border-left: ", "px solid\n    transparent;\n  border-right: ", "px solid\n    transparent;\n  border-bottom: ", "px solid\n    ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowLeft; }, 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 _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 _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 _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
+var ToolTipBox = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  ", ";\n  width: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  padding: ", "px;\n  z-index: 99;\n"], ["\n  position: absolute;\n  top: ", "px;\n  ", ";\n  width: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  padding: ", "px;\n  z-index: 99;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
     return props.right
         ? "right: " + props.right + "px"
         : props.left
             ? "left:" + props.left + "px"
             : null;
 }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipBoxWidth; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, 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 _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var ToolTipheader = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var ToolTipIconContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var ToolTipheader = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var ToolTipIconContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.ArrowUp = ArrowUp;

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

@@ -16,13 +16,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function InfoWithButtonBlock(_a) {
     var _b;
     var _c = _a.background, background = _c === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _c, image = _a.image, buttonText = _a.buttonText, buttonColor = _a.buttonColor, imageHeight = _a.imageHeight, imageWidth = _a.imageWidth, handleClick = _a.handleClick, children = _a.children;
-    return (React__default['default'].createElement(InfoTextBlock_styles.InfoBlock, { background: background, hasImage: Boolean(image) },
-        React__default['default'].createElement(InfoTextBlock_styles.InfoTextWrapper, null,
-            image && (React__default['default'].createElement(InfoTextBlock_styles.ImageContainer, { width: imageWidth, height: imageHeight },
-                React__default['default'].createElement(InfoTextBlock_styles.Image, { src: (image === null || image === void 0 ? void 0 : image.url) || fallback_grocery, alt: image === null || image === void 0 ? void 0 : image.altText }))),
+    return (React__default["default"].createElement(InfoTextBlock_styles.InfoBlock, { background: background, hasImage: Boolean(image) },
+        React__default["default"].createElement(InfoTextBlock_styles.InfoTextWrapper, null,
+            image && (React__default["default"].createElement(InfoTextBlock_styles.ImageContainer, { width: imageWidth, height: imageHeight },
+                React__default["default"].createElement(InfoTextBlock_styles.Image, { src: (image === null || image === void 0 ? void 0 : image.url) || fallback_grocery, alt: image === null || image === void 0 ? void 0 : image.altText }))),
             children),
-        buttonText && (React__default['default'].createElement(InfoTextBlock_styles.ButtonContainer, null,
-            React__default['default'].createElement(Button.Button, { color: buttonColor, fullWidth: true, onClick: handleClick }, buttonText)))));
+        buttonText && (React__default["default"].createElement(InfoTextBlock_styles.ButtonContainer, null,
+            React__default["default"].createElement(Button.Button, { color: buttonColor, fullWidth: true, onClick: handleClick }, buttonText)))));
 }
 
 exports.InfoWithButtonBlock = InfoWithButtonBlock;

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

@@ -9,16 +9,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var InfoBlock = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: ", "px;\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  @media (min-width: ", "px) {\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n  } ;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: ", "px;\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  @media (min-width: ", "px) {\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n  } ;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.background; }, function (props) {
+var InfoBlock = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: ", "px;\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  @media (min-width: ", "px) {\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n  } ;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: ", "px;\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  @media (min-width: ", "px) {\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n  } ;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.background; }, function (props) {
     var _a, _b, _c;
     return props.hasImage
         ? ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px"
         : ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px " + ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.md) + "px";
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
-var ImageContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  max-width: ", "px;\n  height: ", ";\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  max-width: ", "px;\n  height: ", ";\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"])), function (props) { return (props.width ? props.width + "px" : '100%'); }, function (props) { var _a; return props.width || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth); }, function (props) { return (props.height ? props.height + "px" : 'auto'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return props.width || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockImageMaxWidthDesktop); });
-var Image = styled__default['default'].img(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"])));
-var InfoTextWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\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.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var ButtonContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
+var ImageContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  max-width: ", "px;\n  height: ", ";\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  max-width: ", "px;\n  height: ", ";\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"])), function (props) { return (props.width ? props.width + "px" : '100%'); }, function (props) { var _a; return props.width || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth); }, function (props) { return (props.height ? props.height + "px" : 'auto'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return props.width || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockImageMaxWidthDesktop); });
+var Image = styled__default["default"].img(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"])));
+var InfoTextWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\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.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var ButtonContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.ButtonContainer = ButtonContainer;

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

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var LayoutBox = function (_a) {
     var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, showOverflow = _a.showOverflow, children = _a.children;
-    return (React__default['default'].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff', showOverflow: showOverflow }, children));
+    return (React__default["default"].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff', showOverflow: showOverflow }, children));
 };
 
 exports.LayoutBox = LayoutBox;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
+var LayoutBoxContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
     var _a, _b, _c, _d;
     return props.shadowInset
         ? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset

package/build/cjs/components/src/components/Links/Link.js

@@ -23,9 +23,9 @@ exports.LinkColors = void 0;
 })(exports.LinkColors || (exports.LinkColors = {}));
 function Link(_a) {
     var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'link' : _c, isDisabled = _a.isDisabled, noWrap = _a.noWrap, onClick = _a.onClick, hrefPath = _a.hrefPath, icon = _a.icon, _d = _a.textDecoration, textDecoration = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? typography.TextTypes.TextSize.REGULAR : _e, children = _a.children;
-    return (React__default['default'].createElement(Link_styles.BaseLink, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'black', href: hrefPath, isDisabled: isDisabled, textDecoration: textDecoration, noWrap: noWrap, onClick: onClick, size: size, icon: icon },
-        React__default['default'].createElement(typography.LinkText, { size: size }, children),
-        icon && React__default['default'].createElement(Link_styles.IconWrapper, null, icon)));
+    return (React__default["default"].createElement(Link_styles.BaseLink, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'black', href: hrefPath, isDisabled: isDisabled, textDecoration: textDecoration, noWrap: noWrap, onClick: onClick, size: size, icon: icon },
+        React__default["default"].createElement(typography.LinkText, { size: size }, children),
+        icon && React__default["default"].createElement(Link_styles.IconWrapper, null, icon)));
 }
 
 exports.Link = Link;

package/build/cjs/components/src/components/Links/Link.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseLink = styled__default['default'].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"], ["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"])), function (props) { return props.isDisabled && 'none'; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.textDecoration; }, function (props) { var _a; return props.isDisabled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium : props.color; }, function (props) {
+var BaseLink = styled__default["default"].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"], ["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"])), function (props) { return props.isDisabled && 'none'; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.textDecoration; }, function (props) { var _a; return props.isDisabled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium : props.color; }, function (props) {
     var _a, _b;
     return props.size === 'small'
         ? ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2) + 'px'
@@ -18,7 +18,7 @@ var BaseLink = styled__default['default'].a(templateObject_1 || (templateObject_
     return props.icon &&
         "\n      display:flex;\n      align-items: center;\n    ";
 });
-var IconWrapper = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"])));
+var IconWrapper = styled__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"])));
 var templateObject_1, templateObject_2;
 
 exports.BaseLink = BaseLink;

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

@@ -17,18 +17,18 @@ var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 function ListItem(_a) {
     var _b;
     var item = _a.item, loading = _a.loading, isSmall = _a.isSmall, 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, { isSmall: isSmall },
-                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, isSmall: isSmall })),
-            React__default['default'].createElement(ListItem_styles.ItemInformationContainer, null,
-                React__default['default'].createElement(typography.BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular', size: isSmall
+    return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
+        React__default["default"].createElement(ListItem_styles.ListLeft, null,
+            React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
+                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, isSmall: isSmall })),
+            React__default["default"].createElement(ListItem_styles.ItemInformationContainer, null,
+                React__default["default"].createElement(typography.BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular', size: isSmall
                         ? typography.TextTypes.TextSize.EXTRASMALL
-                        : typography.TextTypes.TextSize.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: smallSkeleton ? 150 : 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React__default['default'].createElement(typography.BodyText, { size: isSmall ? typography.TextTypes.TextSize.TINY : 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,
+                        : typography.TextTypes.TextSize.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: smallSkeleton ? 150 : 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React__default["default"].createElement(typography.BodyText, { size: isSmall ? typography.TextTypes.TextSize.TINY : 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)));
+        children && React__default["default"].createElement(ListItem_styles.ListRight, null, children)));
 }
 
 exports.ListItem = ListItem;

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

@@ -9,11 +9,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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: ", "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 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: ", "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, _b;
     return (props === null || props === void 0 ? void 0 : props.isSmall)
         ? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidthSmall
@@ -24,7 +24,7 @@ var ListImageContainer = styled__default['default'].div(templateObject_5 || (tem
         ? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxHeightSmall
         : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.listImageMaxWidth;
 });
-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 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, _b;
     return props.autoHeight
         ? '100%'