@citygross/components 0.8.5 → 0.8.6

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

@@ -7,4 +7,5 @@ declare type TQuanityInput = {
 export declare const QuantitySelectorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const QuantityButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TQuantityButton, never>;
 export declare const QuantityInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TQuanityInput, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -15,7 +15,8 @@ function QuantitySelector(_a) {
     var _b = React.useState(false), customFocus = _b[0], setCustomFocus = _b[1];
     return (React__default["default"].createElement(QuantitySelector_styles.QuantitySelectorContainer, null,
         React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
-            React__default["default"].createElement(icons.Icons.Minus, { width: 16, height: 16 })),
+            React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
+                React__default["default"].createElement(icons.Icons.Minus, { width: 16, height: 16 }))),
         React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
                 setCustomFocus(true);
             }, onKeyDown: function (event) {
@@ -27,7 +28,8 @@ function QuantitySelector(_a) {
                 setCustomFocus(false);
             }, onChange: function (e) { return onChange(e); } }),
         React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "right", disabled: value >= maxValue, onClick: onAdd, tabIndex: -1 },
-            React__default["default"].createElement(icons.Icons.Plus, { width: 16, height: 16 }))));
+            React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
+                React__default["default"].createElement(icons.Icons.Plus, { width: 16, height: 16 })))));
 }
 
 exports.QuantitySelector = QuantitySelector;

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

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

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

@@ -18,9 +18,11 @@ var QuantitySelectorContainer = styled__default["default"].div(templateObject_5
 var QuantityButton = styled__default["default"].button(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, quantityButton, border, function (props) {
     return props.direction === 'left' ? borderRadiusLeft : borderRadiusRight;
 });
-var QuantityInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"], ["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; }, function (props) { return !props.customFocus && global_styles.focusVisible; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var QuantityInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  border-radius: 0;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"], ["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  border-radius: 0;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; }, function (props) { return !props.customFocus && global_styles.focusVisible; });
+var IconContainer = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  display: grid;\n  place-content: center;\n"], ["\n  display: grid;\n  place-content: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 
+exports.IconContainer = IconContainer;
 exports.QuantityButton = QuantityButton;
 exports.QuantityInput = QuantityInput;
 exports.QuantitySelectorContainer = QuantitySelectorContainer;

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

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

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

@@ -14,7 +14,7 @@ var SideModalOverlay = styled__default["default"](framerMotion.motion.div)(templ
     return props.maxHeight &&
         "\n    max-height: ".concat(props.maxHeight, ";\n  ");
 }, 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 SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100dvh;\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"], ["\n  height: 100dvh;\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
     var maxWidth = _a.maxWidth;
     return maxWidth && "max-width:".concat(maxWidth);
 }, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) {

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { QuantitySelectorContainer, QuantityButton, QuantityInput } from './QuantitySelector.styles.js';
+import { QuantitySelectorContainer, QuantityButton, IconContainer, QuantityInput } from './QuantitySelector.styles.js';
 import { Icons } from '@citygross/icons';
 
 function QuantitySelector(_a) {
@@ -7,7 +7,8 @@ function QuantitySelector(_a) {
     var _b = useState(false), customFocus = _b[0], setCustomFocus = _b[1];
     return (React.createElement(QuantitySelectorContainer, null,
         React.createElement(QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
-            React.createElement(Icons.Minus, { width: 16, height: 16 })),
+            React.createElement(IconContainer, null,
+                React.createElement(Icons.Minus, { width: 16, height: 16 }))),
         React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
                 setCustomFocus(true);
             }, onKeyDown: function (event) {
@@ -19,7 +20,8 @@ function QuantitySelector(_a) {
                 setCustomFocus(false);
             }, onChange: function (e) { return onChange(e); } }),
         React.createElement(QuantityButton, { direction: "right", disabled: value >= maxValue, onClick: onAdd, tabIndex: -1 },
-            React.createElement(Icons.Plus, { width: 16, height: 16 }))));
+            React.createElement(IconContainer, null,
+                React.createElement(Icons.Plus, { width: 16, height: 16 })))));
 }
 
 export { QuantitySelector };

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

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

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

@@ -10,8 +10,9 @@ var QuantitySelectorContainer = styled.div(templateObject_5 || (templateObject_5
 var QuantityButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, quantityButton, border, function (props) {
     return props.direction === 'left' ? borderRadiusLeft : borderRadiusRight;
 });
-var QuantityInput = styled.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"], ["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; }, function (props) { return !props.customFocus && focusVisible; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var QuantityInput = styled.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  border-radius: 0;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"], ["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  border-radius: 0;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; }, function (props) { return !props.customFocus && focusVisible; });
+var IconContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: grid;\n  place-content: center;\n"], ["\n  display: grid;\n  place-content: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 
-export { QuantityButton, QuantityInput, QuantitySelectorContainer };
+export { IconContainer, QuantityButton, QuantityInput, QuantitySelectorContainer };
 //# sourceMappingURL=QuantitySelector.styles.js.map

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

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

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

@@ -6,7 +6,7 @@ var SideModalOverlay = styled(motion.div)(templateObject_1 || (templateObject_1
     return props.maxHeight &&
         "\n    max-height: ".concat(props.maxHeight, ";\n  ");
 }, 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 SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100dvh;\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"], ["\n  height: 100dvh;\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
     var maxWidth = _a.maxWidth;
     return maxWidth && "max-width:".concat(maxWidth);
 }, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "6596580388476813cf16b117eed842a89cafdcfe"
+  "gitHead": "e710329dd85f906fb92d8b5fb094f02454fc55d9"
 }