@citygross/components 0.7.159 → 0.7.161

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.
Files changed (16) hide show
  1. package/build/@types/components/Button/Button.styles.d.ts +2 -0
  2. package/build/@types/components/Button/NavButton.d.ts +3 -1
  3. package/build/@types/components/SideModal/SideModal.d.ts +3 -1
  4. package/build/@types/components/SideModal/SideModal.stories.d.ts +1 -1
  5. package/build/@types/components/SideModal/SideModal.styles.d.ts +1 -0
  6. package/build/cjs/components/src/components/Button/Button.styles.js +3 -3
  7. package/build/cjs/components/src/components/Button/NavButton.js +3 -3
  8. package/build/cjs/components/src/components/SideModal/SideModal.js +2 -2
  9. package/build/cjs/components/src/components/SideModal/SideModal.styles.js +5 -2
  10. package/build/cjs/components/src/components/SideModal/SideModal.styles.js.map +1 -1
  11. package/build/es/components/src/components/Button/Button.styles.js +3 -3
  12. package/build/es/components/src/components/Button/NavButton.js +3 -3
  13. package/build/es/components/src/components/SideModal/SideModal.js +2 -2
  14. package/build/es/components/src/components/SideModal/SideModal.styles.js +5 -2
  15. package/build/es/components/src/components/SideModal/SideModal.styles.js.map +1 -1
  16. package/package.json +2 -2
package/build/@types/components/Button/Button.styles.d.ts CHANGED
@@ -23,6 +23,7 @@ declare type TBasePrimaryButton = TButton & {
23
23
  };
24
24
  declare type TNavButton = {
25
25
  keepLabel?: boolean;
26
+ minWidth?: number;
26
27
  };
27
28
  export declare type TBaseSmallButton = Omit<TButton, 'size' | 'flexReverse' | 'fullWidth' | 'center'> & {
28
29
  width?: number;
@@ -39,6 +40,7 @@ export declare type TButtonChildContainer = Pick<TBasePrimaryButton, 'childGap'
39
40
  export declare type TButtonBadge = {
40
41
  background?: string;
41
42
  smallBadge?: boolean;
43
+ minWidth?: number;
42
44
  };
43
45
  export declare const BaseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TButton, never>;
44
46
  export declare const BasePrimaryCSS: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<TBasePrimaryButton, import("styled-components").DefaultTheme>>;
package/build/@types/components/Button/NavButton.d.ts CHANGED
@@ -12,5 +12,7 @@ export declare type TNavButton = styles.TButton & styles.TBaseSmallButton & {
12
12
  href?: string;
13
13
  tabIndex?: number;
14
14
  keepLabel?: boolean;
15
+ minWidth?: number;
16
+ badgeMinWidth?: number;
15
17
  };
16
- export declare function NavButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, size, flexReverse, childGap, children, center, fullWidth, xsSize, borderRadius, hoverBackground, noShadow, tabIndex, keepLabel, ...props }: TNavButton): JSX.Element;
18
+ export declare function NavButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, size, flexReverse, childGap, children, center, fullWidth, xsSize, borderRadius, hoverBackground, noShadow, tabIndex, keepLabel, minWidth, badgeMinWidth, ...props }: TNavButton): JSX.Element;
package/build/@types/components/SideModal/SideModal.d.ts CHANGED
@@ -9,5 +9,7 @@ export declare type TSideModal = {
9
9
  slideFrom?: 'left' | 'right';
10
10
  overlayBackground?: string;
11
11
  maxWidth?: string;
12
+ maxHeight?: string;
13
+ fullViewportHeight?: boolean;
12
14
  };
13
- export declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, children }: TSideModal) => React.ReactPortal | null;
15
+ export declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, maxHeight, children }: TSideModal) => React.ReactPortal | null;
package/build/@types/components/SideModal/SideModal.stories.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { Story } from '@storybook/react';
3
3
  declare const _default: {
4
- component: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, children }: import("./SideModal").TSideModal) => React.ReactPortal | null;
4
+ component: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, maxHeight, children }: import("./SideModal").TSideModal) => React.ReactPortal | null;
5
5
  title: string;
6
6
  };
7
7
  export default _default;
package/build/@types/components/SideModal/SideModal.styles.d.ts CHANGED
@@ -3,6 +3,7 @@ declare type TSideModalContainer = {
3
3
  background?: string;
4
4
  slideFrom?: 'left' | 'right';
5
5
  maxWidth?: string;
6
+ maxHeight?: string;
6
7
  };
7
8
  declare type TSideMoodalOverlay = {
8
9
  overlayBackground: string;
package/build/cjs/components/src/components/Button/Button.styles.js CHANGED
@@ -151,13 +151,13 @@ var BasePaginationButton = styled__default["default"](BaseButton)(templateObject
151
151
  ? 'box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15)'
152
152
  : "box-shadow: inset 0px 0px 0px 1px ".concat((_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.medium);
153
153
  });
154
- var ButtonBadge = styled__default["default"].div(templateObject_14 || (templateObject_14 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: ", ";\n background: ", ";\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: ", ";\n background: ", ";\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n"])), function (props) { var _a; return (props === null || props === void 0 ? void 0 : props.smallBadge) ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeTopPosition; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeRightPosition; }, function (props) {
154
+ var ButtonBadge = styled__default["default"].div(templateObject_14 || (templateObject_14 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: ", ";\n background: ", ";\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n ", ";\n"], ["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: ", ";\n background: ", ";\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (props === null || props === void 0 ? void 0 : props.smallBadge) ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeTopPosition; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeRightPosition; }, function (props) {
155
155
  var _a, _b, _c, _d;
156
156
  return props.smallBadge
157
157
  ? "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgePaddingSmall, "px ").concat((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonBadgePadding, "px")
158
158
  : "".concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs, "px ").concat((_d = props.theme.constants) === null || _d === void 0 ? void 0 : _d.buttonBadgePadding, "px");
159
- }, function (props) { var _a; return (_a = props.background) !== null && _a !== void 0 ? _a : 'black'; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.xs; });
160
- var NavButton = styled__default["default"](BaseButton)(templateObject_15 || (templateObject_15 = _tslib.__makeTemplateObject(["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { return (props.keepLabel ? BasePrimaryCSS : BaseIconButtonCSS); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BasePrimaryCSS);
159
+ }, function (props) { var _a; return (_a = props.background) !== null && _a !== void 0 ? _a : 'black'; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return props.minWidth && "min-width: ".concat(props.minWidth, "px"); });
160
+ var NavButton = styled__default["default"](BaseButton)(templateObject_15 || (templateObject_15 = _tslib.__makeTemplateObject(["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n ", ";\n"], ["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { return (props.keepLabel ? BasePrimaryCSS : BaseIconButtonCSS); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BasePrimaryCSS, function (props) { return props.minWidth && "min-width: ".concat(props.minWidth, "px"); });
161
161
  var NavButtonIcon = styled__default["default"].div(templateObject_16 || (templateObject_16 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; });
162
162
  var NavButtonChild = styled__default["default"].div(templateObject_17 || (templateObject_17 = _tslib.__makeTemplateObject(["\n ", "\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n ", "\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) {
163
163
  return props.keepLabel
package/build/cjs/components/src/components/Button/NavButton.js CHANGED
@@ -12,8 +12,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
14
  function NavButton(_a) {
15
- var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel"]);
16
- return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
15
+ var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, minWidth = _a.minWidth, badgeMinWidth = _a.badgeMinWidth, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel", "minWidth", "badgeMinWidth"]);
16
+ return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth }, props),
17
17
  loading && (React__default["default"].createElement(Button_styles.Loading, null,
18
18
  React__default["default"].createElement(Button_styles.LoadingContainer, null,
19
19
  React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
@@ -21,7 +21,7 @@ function NavButton(_a) {
21
21
  icon ? (React__default["default"].createElement(Button_styles.NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, keepLabel: keepLabel, childGap: childGap },
22
22
  icon,
23
23
  children)) : (children),
24
- buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null));
24
+ buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, { background: badgeBackground, smallBadge: true, minWidth: badgeMinWidth }, buttonBadge)) : null));
25
25
  }
26
26
 
27
27
  exports.NavButton = NavButton;
package/build/cjs/components/src/components/SideModal/SideModal.js CHANGED
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
15
15
  var SideModal = function (_a) {
16
16
  var _b, _c;
17
- var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
17
+ var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, children = _a.children;
18
18
  var ref = React.useRef(null);
19
19
  var domSafe = typeof document !== 'undefined';
20
20
  return domSafe
@@ -25,7 +25,7 @@ var SideModal = function (_a) {
25
25
  }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
26
26
  type: 'just'
27
27
  } },
28
- React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
28
+ React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxHeight: maxHeight, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
29
29
  : null;
30
30
  };
31
31
 
package/build/cjs/components/src/components/SideModal/SideModal.styles.js CHANGED
@@ -11,10 +11,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  var SideModalOverlay = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n z-index: ", ";\n background: ", ";\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n justify-content: center;\n align-items: center;\n\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n"], ["\n display: flex;\n z-index: ", ";\n background: ", ";\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n justify-content: center;\n align-items: center;\n\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, 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; });
14
- var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n height: 100vh;\n background: ", ";\n width: 100%;\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 width: ", "px;\n }\n"], ["\n height: 100vh;\n background: ", ";\n width: 100%;\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 width: ", "px;\n }\n"])), function (props) { return props.background; }, function (_a) {
14
+ var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n height: 100vh;\n background: ", ";\n width: 100%;\n\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\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) {
15
15
  var maxWidth = _a.maxWidth;
16
16
  return maxWidth && "max-width:".concat(maxWidth);
17
- }, 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) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
17
+ }, 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) {
18
+ return props.maxHeight &&
19
+ "\n max-height: ".concat(props.maxHeight, ";\n ");
20
+ }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
18
21
  var templateObject_1, templateObject_2;
19
22
 
20
23
  exports.SideModalContainer = SideModalContainer;
package/build/cjs/components/src/components/SideModal/SideModal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SideModal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SideModal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Button/Button.styles.js CHANGED
@@ -143,13 +143,13 @@ var BasePaginationButton = styled(BaseButton)(templateObject_13 || (templateObje
143
143
  ? 'box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15)'
144
144
  : "box-shadow: inset 0px 0px 0px 1px ".concat((_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.medium);
145
145
  });
146
- var ButtonBadge = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: ", ";\n background: ", ";\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: ", ";\n background: ", ";\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n"])), function (props) { var _a; return (props === null || props === void 0 ? void 0 : props.smallBadge) ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeTopPosition; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeRightPosition; }, function (props) {
146
+ var ButtonBadge = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: ", ";\n background: ", ";\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n ", ";\n"], ["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: ", ";\n background: ", ";\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (props === null || props === void 0 ? void 0 : props.smallBadge) ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeTopPosition; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeRightPosition; }, function (props) {
147
147
  var _a, _b, _c, _d;
148
148
  return props.smallBadge
149
149
  ? "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgePaddingSmall, "px ").concat((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonBadgePadding, "px")
150
150
  : "".concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs, "px ").concat((_d = props.theme.constants) === null || _d === void 0 ? void 0 : _d.buttonBadgePadding, "px");
151
- }, function (props) { var _a; return (_a = props.background) !== null && _a !== void 0 ? _a : 'black'; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.xs; });
152
- var NavButton = styled(BaseButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { return (props.keepLabel ? BasePrimaryCSS : BaseIconButtonCSS); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BasePrimaryCSS);
151
+ }, function (props) { var _a; return (_a = props.background) !== null && _a !== void 0 ? _a : 'black'; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return props.minWidth && "min-width: ".concat(props.minWidth, "px"); });
152
+ var NavButton = styled(BaseButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n ", ";\n"], ["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { return (props.keepLabel ? BasePrimaryCSS : BaseIconButtonCSS); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BasePrimaryCSS, function (props) { return props.minWidth && "min-width: ".concat(props.minWidth, "px"); });
153
153
  var NavButtonIcon = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; });
154
154
  var NavButtonChild = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n ", "\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) {
155
155
  return props.keepLabel
package/build/es/components/src/components/Button/NavButton.js CHANGED
@@ -4,8 +4,8 @@ import { NavButton as NavButton$1, Loading, LoadingContainer, LoadingSpinner, Na
4
4
  import { theme } from '@citygross/design-tokens';
5
5
 
6
6
  function NavButton(_a) {
7
- var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel"]);
8
- return (React.createElement(NavButton$1, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
7
+ var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, minWidth = _a.minWidth, badgeMinWidth = _a.badgeMinWidth, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel", "minWidth", "badgeMinWidth"]);
8
+ return (React.createElement(NavButton$1, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth }, props),
9
9
  loading && (React.createElement(Loading, null,
10
10
  React.createElement(LoadingContainer, null,
11
11
  React.createElement(LoadingSpinner, null)))),
@@ -13,7 +13,7 @@ function NavButton(_a) {
13
13
  icon ? (React.createElement(NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, keepLabel: keepLabel, childGap: childGap },
14
14
  icon,
15
15
  children)) : (children),
16
- buttonBadge ? (React.createElement(ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null));
16
+ buttonBadge ? (React.createElement(ButtonBadge, { background: badgeBackground, smallBadge: true, minWidth: badgeMinWidth }, buttonBadge)) : null));
17
17
  }
18
18
 
19
19
  export { NavButton };
package/build/es/components/src/components/SideModal/SideModal.js CHANGED
@@ -6,7 +6,7 @@ import { theme } from '@citygross/design-tokens';
6
6
 
7
7
  var SideModal = function (_a) {
8
8
  var _b, _c;
9
- var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
9
+ var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, children = _a.children;
10
10
  var ref = useRef(null);
11
11
  var domSafe = typeof document !== 'undefined';
12
12
  return domSafe
@@ -17,7 +17,7 @@ var SideModal = function (_a) {
17
17
  }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
18
18
  type: 'just'
19
19
  } },
20
- React.createElement(SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
20
+ React.createElement(SideModalContainer, { slideFrom: slideFrom, maxHeight: maxHeight, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
21
21
  : null;
22
22
  };
23
23
 
package/build/es/components/src/components/SideModal/SideModal.styles.js CHANGED
@@ -3,10 +3,13 @@ import styled from 'styled-components';
3
3
  import { motion } from 'framer-motion';
4
4
 
5
5
  var SideModalOverlay = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n z-index: ", ";\n background: ", ";\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n justify-content: center;\n align-items: center;\n\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n"], ["\n display: flex;\n z-index: ", ";\n background: ", ";\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n justify-content: center;\n align-items: center;\n\n @media (min-width: ", "px) {\n padding: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, 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; });
6
- var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100vh;\n background: ", ";\n width: 100%;\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 width: ", "px;\n }\n"], ["\n height: 100vh;\n background: ", ";\n width: 100%;\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 width: ", "px;\n }\n"])), function (props) { return props.background; }, function (_a) {
6
+ var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100vh;\n background: ", ";\n width: 100%;\n\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\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) {
7
7
  var maxWidth = _a.maxWidth;
8
8
  return maxWidth && "max-width:".concat(maxWidth);
9
- }, 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) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
9
+ }, 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) {
10
+ return props.maxHeight &&
11
+ "\n max-height: ".concat(props.maxHeight, ";\n ");
12
+ }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
10
13
  var templateObject_1, templateObject_2;
11
14
 
12
15
  export { SideModalContainer, SideModalOverlay };
package/build/es/components/src/components/SideModal/SideModal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SideModal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SideModal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.159",
3
+ "version": "0.7.161",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
71
71
  "moment": "^2.29.1",
72
72
  "react-loading-skeleton": "^2.2.0"
73
73
  },
74
- "gitHead": "c1a37d9d5da6fb0afe59c6ce5bd2d7900683519b"
74
+ "gitHead": "e306cf645de0216b9133915cce06c1fca5816d60"
75
75
  }