@citygross/components 0.7.77 → 0.7.79

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

@@ -19,18 +19,18 @@ function DeliveryTimeBlock(_a) {
     var date = momentDeliveryDate.format('D');
     var month = momentDeliveryDate.format('MMMM');
     month = month.slice(0, 1).toLocaleUpperCase() + month.slice(1);
-    return (React__default['default'].createElement(DeliveryTimeBlock_styles.DeliveryTimeBlock, null,
-        React__default['default'].createElement(DeliveryTimeBlock_styles.DeliverOption, null,
+    return (React__default["default"].createElement(DeliveryTimeBlock_styles.DeliveryTimeBlock, null,
+        React__default["default"].createElement(DeliveryTimeBlock_styles.DeliverOption, null,
             icon && icon,
-            deliverOption && React__default['default'].createElement(typography.H3, null, deliverOption)),
-        React__default['default'].createElement(typography.BodyText, null,
+            deliverOption && React__default["default"].createElement(typography.H3, null, deliverOption)),
+        React__default["default"].createElement(typography.BodyText, null,
             day,
             " ",
             date,
             " ",
             month,
             ' ',
-            deliveryFromTime && deliveryToTime && (React__default['default'].createElement("span", { style: { whiteSpace: 'nowrap' } }, localTimeVar + " " + deliveryFromTime + " - " + deliveryToTime))),
+            deliveryFromTime && deliveryToTime && (React__default["default"].createElement("span", { style: { whiteSpace: 'nowrap' } }, localTimeVar + " " + deliveryFromTime + " - " + deliveryToTime))),
         children));
 }
 

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var DeliverOption = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var DeliveryTimeBlock = styled__default['default'].div(templateObject_2 || (templateObject_2 = _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.xs; });
+var DeliverOption = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var DeliveryTimeBlock = styled__default["default"].div(templateObject_2 || (templateObject_2 = _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.xs; });
 var templateObject_1, templateObject_2;
 
 exports.DeliverOption = DeliverOption;

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

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Divider = function (_a) {
     var xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;
-    return React__default['default'].createElement(Divider_styles.Divider, { xsSpacing: xsSpacing, lgSpacing: lgSpacing });
+    return React__default["default"].createElement(Divider_styles.Divider, { xsSpacing: xsSpacing, lgSpacing: lgSpacing });
 };
 
 exports.Divider = Divider;

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

@@ -15,7 +15,7 @@ var SpacingSize = function (defaultSize, size) {
     }
     return defaultSize;
 };
-var Divider = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  margin: ", "px\n    0;\n  background: ", ";\n\n  @media (min-width: ", "px) {\n    margin: ", "px\n      0;\n  }\n"], ["\n  width: 100%;\n  height: 1px;\n  margin: ", "px\n    0;\n  background: ", ";\n\n  @media (min-width: ", "px) {\n    margin: ", "px\n      0;\n  }\n"])), function (props) { var _a; return SpacingSize((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, props.xsSpacing); }, function (props) { var _a, _b; return (_b = (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light) !== null && _b !== void 0 ? _b : '#ccc'; }, 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 SpacingSize((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, props.lgSpacing); });
+var Divider = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  margin: ", "px\n    0;\n  background: ", ";\n\n  @media (min-width: ", "px) {\n    margin: ", "px\n      0;\n  }\n"], ["\n  width: 100%;\n  height: 1px;\n  margin: ", "px\n    0;\n  background: ", ";\n\n  @media (min-width: ", "px) {\n    margin: ", "px\n      0;\n  }\n"])), function (props) { var _a; return SpacingSize((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, props.xsSpacing); }, function (props) { var _a, _b; return (_b = (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light) !== null && _b !== void 0 ? _b : '#ccc'; }, 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 SpacingSize((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, props.lgSpacing); });
 var templateObject_1;
 
 exports.Divider = Divider;

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

@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function Dot(_a) {
     var _b;
     var _c = _a.color, color = _c === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _c, shadow = _a.shadow;
-    return React__default['default'].createElement(DotIndicator_styles.Dot, { color: color, shadow: shadow });
+    return React__default["default"].createElement(DotIndicator_styles.Dot, { color: color, shadow: shadow });
 }
 
 exports.Dot = Dot;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Dot = styled__default['default'].span(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  display: inline-block;\n  border-radius: 50%;\n  background: ", ";\n  ", ";\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  display: inline-block;\n  border-radius: 50%;\n  background: ", ";\n  ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return props.color; }, function (props) { return props.shadow && "box-shadow: 0 0 0 2px " + props.shadow + " "; });
+var Dot = styled__default["default"].span(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  display: inline-block;\n  border-radius: 50%;\n  background: ", ";\n  ", ";\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  display: inline-block;\n  border-radius: 50%;\n  background: ", ";\n  ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return props.color; }, function (props) { return props.shadow && "box-shadow: 0 0 0 2px " + props.shadow + " "; });
 var templateObject_1;
 
 exports.Dot = Dot;

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

@@ -11,8 +11,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Form(_a) {
     var title = _a.title, icon = _a.icon, children = _a.children, onSubmit = _a.onSubmit, background = _a.background;
-    return (React__default['default'].createElement(Form_styles.FormWrapper, { onSubmit: function (e) { return onSubmit && onSubmit(e); }, background: background },
-        React__default['default'].createElement(Form_styles.FormHeader, null,
+    return (React__default["default"].createElement(Form_styles.FormWrapper, { onSubmit: function (e) { return onSubmit && onSubmit(e); }, background: background },
+        React__default["default"].createElement(Form_styles.FormHeader, null,
             icon && icon,
             title),
         children));

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

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

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

@@ -19,10 +19,10 @@ exports.TScreenWidth = void 0;
 // eslint-disable-next-line no-empty-pattern
 function FormControl(_a) {
     var title = _a.title, children = _a.children, errorMessage = _a.errorMessage, _b = _a.isValid, isValid = _b === void 0 ? true : _b, screenWidth = _a.screenWidth;
-    return (React__default['default'].createElement(FormControl_styles.FormControlWrapper, null,
-        React__default['default'].createElement(FormControl_styles.FormControlElementWrapper, null,
-            React__default['default'].createElement(typography.H3, null, title)),
-        React__default['default'].createElement(FormControl_styles.FormControlElementWrapper, { screenWidth: screenWidth }, children),
+    return (React__default["default"].createElement(FormControl_styles.FormControlWrapper, null,
+        React__default["default"].createElement(FormControl_styles.FormControlElementWrapper, null,
+            React__default["default"].createElement(typography.H3, null, title)),
+        React__default["default"].createElement(FormControl_styles.FormControlElementWrapper, { screenWidth: screenWidth }, children),
         errorMessage && !isValid && errorMessage));
 }
 

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

@@ -9,8 +9,8 @@ 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  flex: 1;\n  max-width: 100%;\n"], ["\n  flex: 1;\n  max-width: 100%;\n"])));
-var FormControlElementWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  padding-bottom: 8px;\n  display: flex;\n\n  @media (min-width: ", "px) {\n    ", ";\n  }\n"], ["\n  position: relative;\n  padding-bottom: 8px;\n  display: flex;\n\n  @media (min-width: ", "px) {\n    ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.screenWidth && "max-width: " + props.screenWidth; });
+var FormControlWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  flex: 1;\n  max-width: 100%;\n"], ["\n  flex: 1;\n  max-width: 100%;\n"])));
+var FormControlElementWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  padding-bottom: 8px;\n  display: flex;\n\n  @media (min-width: ", "px) {\n    ", ";\n  }\n"], ["\n  position: relative;\n  padding-bottom: 8px;\n  display: flex;\n\n  @media (min-width: ", "px) {\n    ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.screenWidth && "max-width: " + props.screenWidth; });
 var templateObject_1, templateObject_2;
 
 exports.FormControlElementWrapper = FormControlElementWrapper;

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

@@ -14,10 +14,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Checkbox(_a) {
     var onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 16 : _c, inputProps = _tslib.__rest(_a, ["onChange", "size", "iconSize"]);
-    return (React__default['default'].createElement(Checkbox_styles.CheckboxWrapper, { size: size, whileTap: { scale: 0.9 }, whileHover: { scale: 1.1 } },
-        React__default['default'].createElement(Checkbox_styles.Checkbox, _tslib.__assign({ type: "checkbox", onChange: onChange, size: size }, inputProps)),
-        React__default['default'].createElement(Checkbox_styles.CheckIcon, null,
-            React__default['default'].createElement(Icon.Icons.CheckMark, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette.alertGreen : 'white', width: iconSize }))));
+    return (React__default["default"].createElement(Checkbox_styles.CheckboxWrapper, { size: size, whileTap: { scale: 0.9 }, whileHover: { scale: 1.1 } },
+        React__default["default"].createElement(Checkbox_styles.Checkbox, _tslib.__assign({ type: "checkbox", onChange: onChange, size: size }, inputProps)),
+        React__default["default"].createElement(Checkbox_styles.CheckIcon, null,
+            React__default["default"].createElement(Icon.Icons.CheckMark, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette.alertGreen : 'white', width: iconSize }))));
 }
 
 exports.Checkbox = Checkbox;

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

@@ -10,9 +10,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CheckboxWrapper = styled__default['default'](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: 2px;\n  box-shadow: 0 0 0 1px ", " inset;\n  box-sizing: border-box;\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  z-index: 1;\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: 2px;\n  box-shadow: 0 0 0 1px ", " inset;\n  box-sizing: border-box;\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  z-index: 1;\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; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; });
-var CheckIcon = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  display: none;\n  height: 100%;\n  width: 100%;\n  border: 1px solid ", ";\n  background: #f2fdf2;\n  border-radius: 2px;\n  z-index: 2;\n"], ["\n  position: absolute;\n  display: none;\n  height: 100%;\n  width: 100%;\n  border: 1px solid ", ";\n  background: #f2fdf2;\n  border-radius: 2px;\n  z-index: 2;\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 Checkbox = styled__default['default'].input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  cursor: pointer;\n  opacity: 0;\n  z-index: 3;\n\n  &:checked + ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid ", ";\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  cursor: pointer;\n  opacity: 0;\n  z-index: 3;\n\n  &:checked + ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid ", ";\n  }\n"])), function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, CheckIcon, 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 CheckboxWrapper = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: 2px;\n  box-shadow: 0 0 0 1px ", " inset;\n  box-sizing: border-box;\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  z-index: 1;\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: 2px;\n  box-shadow: 0 0 0 1px ", " inset;\n  box-sizing: border-box;\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  z-index: 1;\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; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; });
+var CheckIcon = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  display: none;\n  height: 100%;\n  width: 100%;\n  border: 1px solid ", ";\n  background: #f2fdf2;\n  border-radius: 2px;\n  z-index: 2;\n"], ["\n  position: absolute;\n  display: none;\n  height: 100%;\n  width: 100%;\n  border: 1px solid ", ";\n  background: #f2fdf2;\n  border-radius: 2px;\n  z-index: 2;\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 Checkbox = styled__default["default"].input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  cursor: pointer;\n  opacity: 0;\n  z-index: 3;\n\n  &:checked + ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid ", ";\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  cursor: pointer;\n  opacity: 0;\n  z-index: 3;\n\n  &:checked + ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid ", ";\n  }\n"])), function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, CheckIcon, 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;
 
 exports.CheckIcon = CheckIcon;

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

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Input(_a) {
     var flexGrow = _a.flexGrow, isValid = _a.isValid, fontSize = _a.fontSize, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, props = _tslib.__rest(_a, ["flexGrow", "isValid", "fontSize", "inputSize"]);
-    return (React__default['default'].createElement(Input_styles.Input, _tslib.__assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid, inputSize: inputSize }, props)));
+    return (React__default["default"].createElement(Input_styles.Input, _tslib.__assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid, inputSize: inputSize }, props)));
 }
 
 exports.Input = Input;

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;