@citygross/components 0.8.5 → 0.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/@types/components/QuantitySelector/QuantitySelector.styles.d.ts +1 -0
- package/build/cjs/components/src/components/CouponCode/CouponCode.styles.js +1 -1
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js +4 -2
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js.map +1 -1
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.styles.js +4 -2
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.styles.js.map +1 -1
- package/build/cjs/components/src/components/SideModal/SideModal.styles.js +1 -1
- package/build/es/components/src/components/CouponCode/CouponCode.styles.js +1 -1
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.js +5 -3
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.js.map +1 -1
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.styles.js +4 -3
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.styles.js.map +1 -1
- package/build/es/components/src/components/SideModal/SideModal.styles.js +1 -1
- package/package.json +2 -2
|
@@ -7,4 +7,5 @@ declare type TQuanityInput = {
|
|
|
7
7
|
export declare const QuantitySelectorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
8
|
export declare const QuantityButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TQuantityButton, never>;
|
|
9
9
|
export declare const QuantityInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TQuanityInput, never>;
|
|
10
|
+
export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
11
|
export {};
|
|
@@ -13,7 +13,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
|
|
14
14
|
var CouponContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n width: 100%;\n"], ["\n display: flex;\n gap: ", "px;\n width: 100%;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; });
|
|
15
15
|
var CouponInput = styled__default["default"].input(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n border-radius: ", "px;\n border: 1px solid ", ";\n background: ", ";\n padding: ", ";\n outline: none;\n background: white;\n font-size: ", "px;\n width: 100%;\n ::placeholder {\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n ::-ms-input-placeholder {\n color: ", ";\n }\n ", "\n &:focus-visible {\n border: 1px solid ", ";\n }\n"], ["\n border-radius: ", "px;\n border: 1px solid ", ";\n background: ", ";\n padding: ", ";\n outline: none;\n background: white;\n font-size: ", "px;\n width: 100%;\n ::placeholder {\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n ::-ms-input-placeholder {\n color: ", ";\n }\n ", "\n &:focus-visible {\n border: 1px solid ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a, _b; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2, "px"); }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s3; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { return !props.customFocus && global_styles.focusVisible; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; });
|
|
16
|
-
var CouponResultContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n padding: ", ";\n background: ", ";\n display: flex;\n min-height: ", "px;\n border-radius: ", "px;\n justify-content: space-between;\n"], ["\n font-size: ", "px;\n padding: ", ";\n background: ", ";\n display: flex;\n min-height: ", "px;\n border-radius: ", "px;\n justify-content: space-between;\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s2; }, function (props) { var _a, _b; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.couponContainerPadding, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px"); }, function (props) {
|
|
16
|
+
var CouponResultContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n padding: ", ";\n background: ", ";\n display: flex;\n min-height: ", "px;\n border-radius: ", "px;\n justify-content: space-between;\n align-items: center;\n > a {\n white-space: nowrap;\n }\n"], ["\n font-size: ", "px;\n padding: ", ";\n background: ", ";\n display: flex;\n min-height: ", "px;\n border-radius: ", "px;\n justify-content: space-between;\n align-items: center;\n > a {\n white-space: nowrap;\n }\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s2; }, function (props) { var _a, _b; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.couponContainerPadding, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px"); }, function (props) {
|
|
17
17
|
var _a, _b;
|
|
18
18
|
return props.status === CouponCode.ECouponCodeStatus.Success
|
|
19
19
|
? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.greenLight
|
|
@@ -15,7 +15,8 @@ function QuantitySelector(_a) {
|
|
|
15
15
|
var _b = React.useState(false), customFocus = _b[0], setCustomFocus = _b[1];
|
|
16
16
|
return (React__default["default"].createElement(QuantitySelector_styles.QuantitySelectorContainer, null,
|
|
17
17
|
React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
|
|
18
|
-
React__default["default"].createElement(
|
|
18
|
+
React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
|
|
19
|
+
React__default["default"].createElement(icons.Icons.Minus, { width: 16, height: 16 }))),
|
|
19
20
|
React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
|
|
20
21
|
setCustomFocus(true);
|
|
21
22
|
}, onKeyDown: function (event) {
|
|
@@ -27,7 +28,8 @@ function QuantitySelector(_a) {
|
|
|
27
28
|
setCustomFocus(false);
|
|
28
29
|
}, onChange: function (e) { return onChange(e); } }),
|
|
29
30
|
React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "right", disabled: value >= maxValue, onClick: onAdd, tabIndex: -1 },
|
|
30
|
-
React__default["default"].createElement(
|
|
31
|
+
React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
|
|
32
|
+
React__default["default"].createElement(icons.Icons.Plus, { width: 16, height: 16 })))));
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
exports.QuantitySelector = QuantitySelector;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -18,9 +18,11 @@ var QuantitySelectorContainer = styled__default["default"].div(templateObject_5
|
|
|
18
18
|
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) {
|
|
19
19
|
return props.direction === 'left' ? borderRadiusLeft : borderRadiusRight;
|
|
20
20
|
});
|
|
21
|
-
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; });
|
|
22
|
-
var
|
|
21
|
+
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; });
|
|
22
|
+
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"])));
|
|
23
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
23
24
|
|
|
25
|
+
exports.IconContainer = IconContainer;
|
|
24
26
|
exports.QuantityButton = QuantityButton;
|
|
25
27
|
exports.QuantityInput = QuantityInput;
|
|
26
28
|
exports.QuantitySelectorContainer = QuantitySelectorContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"QuantitySelector.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -14,7 +14,7 @@ var SideModalOverlay = styled__default["default"](framerMotion.motion.div)(templ
|
|
|
14
14
|
return props.maxHeight &&
|
|
15
15
|
"\n max-height: ".concat(props.maxHeight, ";\n ");
|
|
16
16
|
}, 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; });
|
|
17
|
-
var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n height:
|
|
17
|
+
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) {
|
|
18
18
|
var maxWidth = _a.maxWidth;
|
|
19
19
|
return maxWidth && "max-width:".concat(maxWidth);
|
|
20
20
|
}, 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) {
|
|
@@ -5,7 +5,7 @@ import { ECouponCodeStatus } from './CouponCode.js';
|
|
|
5
5
|
|
|
6
6
|
var CouponContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n width: 100%;\n"], ["\n display: flex;\n gap: ", "px;\n width: 100%;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; });
|
|
7
7
|
var CouponInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: ", "px;\n border: 1px solid ", ";\n background: ", ";\n padding: ", ";\n outline: none;\n background: white;\n font-size: ", "px;\n width: 100%;\n ::placeholder {\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n ::-ms-input-placeholder {\n color: ", ";\n }\n ", "\n &:focus-visible {\n border: 1px solid ", ";\n }\n"], ["\n border-radius: ", "px;\n border: 1px solid ", ";\n background: ", ";\n padding: ", ";\n outline: none;\n background: white;\n font-size: ", "px;\n width: 100%;\n ::placeholder {\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n ::-ms-input-placeholder {\n color: ", ";\n }\n ", "\n &:focus-visible {\n border: 1px solid ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a, _b; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2, "px"); }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s3; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { return !props.customFocus && focusVisible; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; });
|
|
8
|
-
var CouponResultContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: ", "px;\n padding: ", ";\n background: ", ";\n display: flex;\n min-height: ", "px;\n border-radius: ", "px;\n justify-content: space-between;\n"], ["\n font-size: ", "px;\n padding: ", ";\n background: ", ";\n display: flex;\n min-height: ", "px;\n border-radius: ", "px;\n justify-content: space-between;\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s2; }, function (props) { var _a, _b; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.couponContainerPadding, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px"); }, function (props) {
|
|
8
|
+
var CouponResultContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: ", "px;\n padding: ", ";\n background: ", ";\n display: flex;\n min-height: ", "px;\n border-radius: ", "px;\n justify-content: space-between;\n align-items: center;\n > a {\n white-space: nowrap;\n }\n"], ["\n font-size: ", "px;\n padding: ", ";\n background: ", ";\n display: flex;\n min-height: ", "px;\n border-radius: ", "px;\n justify-content: space-between;\n align-items: center;\n > a {\n white-space: nowrap;\n }\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s2; }, function (props) { var _a, _b; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.couponContainerPadding, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px"); }, function (props) {
|
|
9
9
|
var _a, _b;
|
|
10
10
|
return props.status === ECouponCodeStatus.Success
|
|
11
11
|
? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.greenLight
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import { QuantitySelectorContainer, QuantityButton, QuantityInput } from './QuantitySelector.styles.js';
|
|
2
|
+
import { QuantitySelectorContainer, QuantityButton, IconContainer, QuantityInput } from './QuantitySelector.styles.js';
|
|
3
3
|
import { Icons } from '@citygross/icons';
|
|
4
4
|
|
|
5
5
|
function QuantitySelector(_a) {
|
|
@@ -7,7 +7,8 @@ function QuantitySelector(_a) {
|
|
|
7
7
|
var _b = useState(false), customFocus = _b[0], setCustomFocus = _b[1];
|
|
8
8
|
return (React.createElement(QuantitySelectorContainer, null,
|
|
9
9
|
React.createElement(QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
|
|
10
|
-
React.createElement(
|
|
10
|
+
React.createElement(IconContainer, null,
|
|
11
|
+
React.createElement(Icons.Minus, { width: 16, height: 16 }))),
|
|
11
12
|
React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
|
|
12
13
|
setCustomFocus(true);
|
|
13
14
|
}, onKeyDown: function (event) {
|
|
@@ -19,7 +20,8 @@ function QuantitySelector(_a) {
|
|
|
19
20
|
setCustomFocus(false);
|
|
20
21
|
}, onChange: function (e) { return onChange(e); } }),
|
|
21
22
|
React.createElement(QuantityButton, { direction: "right", disabled: value >= maxValue, onClick: onAdd, tabIndex: -1 },
|
|
22
|
-
React.createElement(
|
|
23
|
+
React.createElement(IconContainer, null,
|
|
24
|
+
React.createElement(Icons.Plus, { width: 16, height: 16 })))));
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
export { QuantitySelector };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -10,8 +10,9 @@ var QuantitySelectorContainer = styled.div(templateObject_5 || (templateObject_5
|
|
|
10
10
|
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) {
|
|
11
11
|
return props.direction === 'left' ? borderRadiusLeft : borderRadiusRight;
|
|
12
12
|
});
|
|
13
|
-
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; });
|
|
14
|
-
var
|
|
13
|
+
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; });
|
|
14
|
+
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"])));
|
|
15
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
15
16
|
|
|
16
|
-
export { QuantityButton, QuantityInput, QuantitySelectorContainer };
|
|
17
|
+
export { IconContainer, QuantityButton, QuantityInput, QuantitySelectorContainer };
|
|
17
18
|
//# sourceMappingURL=QuantitySelector.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"QuantitySelector.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,7 +6,7 @@ var SideModalOverlay = styled(motion.div)(templateObject_1 || (templateObject_1
|
|
|
6
6
|
return props.maxHeight &&
|
|
7
7
|
"\n max-height: ".concat(props.maxHeight, ";\n ");
|
|
8
8
|
}, 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; });
|
|
9
|
-
var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height:
|
|
9
|
+
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) {
|
|
10
10
|
var maxWidth = _a.maxWidth;
|
|
11
11
|
return maxWidth && "max-width:".concat(maxWidth);
|
|
12
12
|
}, 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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.7",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"react-slick": "^0.30.1",
|
|
77
77
|
"slick-carousel": "^1.8.1"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "f1542342615b27f22393eba69206438a45904321"
|
|
80
80
|
}
|