@citygross/components 0.7.131 → 0.7.133
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/Button/Button.d.ts +1 -1
- package/build/@types/components/Button/Button.styles.d.ts +2 -0
- package/build/cjs/components/src/components/Button/Button.js +2 -2
- package/build/cjs/components/src/components/Button/Button.styles.js +34 -28
- package/build/cjs/components/src/components/Button/Button.styles.js.map +1 -1
- package/build/cjs/components/src/components/Nav/Nav.styles.js +1 -1
- package/build/es/components/src/components/Button/Button.js +2 -2
- package/build/es/components/src/components/Button/Button.styles.js +34 -28
- package/build/es/components/src/components/Button/Button.styles.js.map +1 -1
- package/build/es/components/src/components/Nav/Nav.styles.js +1 -1
- package/package.json +2 -2
|
@@ -23,4 +23,4 @@ export declare type TBaseButton = styles.TButton & {
|
|
|
23
23
|
color?: TButtonColor;
|
|
24
24
|
buttonBadge?: string;
|
|
25
25
|
};
|
|
26
|
-
export declare function Button({ center, color, fullWidth, flexReverse, icon, selected, isDisabled, loading, noWrap, onClick, size, xsSize, borderRadius, childGap, buttonBadge, children }: TBaseButton): JSX.Element;
|
|
26
|
+
export declare function Button({ center, color, fullWidth, flexReverse, icon, selected, isDisabled, loading, noWrap, onClick, size, xsSize, borderRadius, childGap, buttonBadge, noShadow, hoverBackground, children }: TBaseButton): JSX.Element;
|
|
@@ -12,6 +12,8 @@ export declare type TButton = {
|
|
|
12
12
|
borderRadius?: number;
|
|
13
13
|
childGap?: number;
|
|
14
14
|
onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
15
|
+
noShadow?: boolean;
|
|
16
|
+
hoverBackground?: string;
|
|
15
17
|
};
|
|
16
18
|
declare type TButtonSize = keyof typeof ButtonSize;
|
|
17
19
|
declare type TBasePrimaryButton = TButton & {
|
|
@@ -29,12 +29,12 @@ exports.ButtonColor = void 0;
|
|
|
29
29
|
})(exports.ButtonColor || (exports.ButtonColor = {}));
|
|
30
30
|
function Button(_a) {
|
|
31
31
|
var _b;
|
|
32
|
-
var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, borderRadius = _a.borderRadius, _f = _a.childGap, childGap = _f === void 0 ? 4 : _f, buttonBadge = _a.buttonBadge, children = _a.children;
|
|
32
|
+
var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, borderRadius = _a.borderRadius, _f = _a.childGap, childGap = _f === void 0 ? 4 : _f, buttonBadge = _a.buttonBadge, noShadow = _a.noShadow, hoverBackground = _a.hoverBackground, children = _a.children;
|
|
33
33
|
return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { center: center, color: designTokens.theme && designTokens.theme.palette
|
|
34
34
|
? selected
|
|
35
35
|
? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
36
36
|
: designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color]
|
|
37
|
-
: 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); }, borderRadius: borderRadius, childGap: childGap },
|
|
37
|
+
: 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); }, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow },
|
|
38
38
|
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
39
39
|
React__default["default"].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
|
|
40
40
|
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
@@ -62,7 +62,7 @@ var SpinnerSize = function (size) {
|
|
|
62
62
|
return '26px';
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
|
-
var BaseButton = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity:
|
|
65
|
+
var BaseButton = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: ", ";\n }\n ", ";\n }\n &:active {\n ::before {\n opacity: ", ";\n }\n ::after {\n opacity: 0;\n }\n }\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"], ["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: ", ";\n }\n ", ";\n }\n &:active {\n ::before {\n opacity: ", ";\n }\n ::after {\n opacity: 0;\n }\n }\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"])), function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_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 : props.color; }, function (props) {
|
|
66
66
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
67
67
|
return props.color === ((_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.secondary) ||
|
|
68
68
|
props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.darkest) ||
|
|
@@ -71,45 +71,51 @@ var BaseButton = styled__default["default"].button(templateObject_1 || (template
|
|
|
71
71
|
props.isDisabled
|
|
72
72
|
? (_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.white
|
|
73
73
|
: (_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.darkest;
|
|
74
|
-
}, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) {
|
|
75
|
-
|
|
74
|
+
}, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { return ((props === null || props === void 0 ? void 0 : props.noShadow) ? 0 : 1); }, function (props) {
|
|
75
|
+
return !props.isDisabled &&
|
|
76
|
+
props.hoverBackground &&
|
|
77
|
+
"background: ".concat(props.hoverBackground);
|
|
78
|
+
}, function (props) { return ((props === null || props === void 0 ? void 0 : props.noShadow) ? 0 : 1); }, 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) { return (props.center ? 'center' : 'initial'); });
|
|
79
|
+
var BasePrimaryButton = styled__default["default"](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n /* TypoGraphy */\n\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n ", ";\n }\n"], ["\n /* TypoGraphy */\n\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n ", ";\n }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
|
|
76
80
|
var _a, _b;
|
|
77
81
|
return props.size === 'small'
|
|
78
82
|
? "".concat((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2, "px")
|
|
79
83
|
: "".concat((_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight.m1, "px");
|
|
80
84
|
}, function (props) {
|
|
81
85
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
82
|
-
return props.
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
(props.
|
|
87
|
-
props.color === ((
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
props.color === ((
|
|
93
|
-
|
|
94
|
-
|
|
86
|
+
return !(props === null || props === void 0 ? void 0 : props.noShadow) &&
|
|
87
|
+
"\n box-shadow: \n ".concat(props.selected
|
|
88
|
+
? "inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium, ",\n ").concat((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
|
|
89
|
+
: props.xsSize ||
|
|
90
|
+
(props.size &&
|
|
91
|
+
(props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.primary) ||
|
|
92
|
+
props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary) ||
|
|
93
|
+
props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.buttonGray) ||
|
|
94
|
+
props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.brandPurple)))
|
|
95
|
+
? ButtonShadow(props.xsSize || props.size)
|
|
96
|
+
: props.color === ((_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.white) ||
|
|
97
|
+
props.color === ((_p = (_o = props === null || props === void 0 ? void 0 : props.theme) === null || _o === void 0 ? void 0 : _o.palette) === null || _p === void 0 ? void 0 : _p.lightest)
|
|
98
|
+
? "inset 0px 0px 0px 1px ".concat((_q = props.theme.palette) === null || _q === void 0 ? void 0 : _q.medium)
|
|
99
|
+
: 'none', "\n ");
|
|
95
100
|
}, function (props) {
|
|
96
101
|
return ButtonPadding(props.xsSize || props.size, props.icon, props.flexReverse);
|
|
97
102
|
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return ButtonFontSize(props.size); }, function (props) {
|
|
98
103
|
return ButtonPadding(props.size, props.icon, props.flexReverse);
|
|
99
104
|
}, function (props) {
|
|
100
105
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
101
|
-
return props.
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
props.color === ((
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
props.color === ((
|
|
111
|
-
|
|
112
|
-
|
|
106
|
+
return !(props === null || props === void 0 ? void 0 : props.noShadow) &&
|
|
107
|
+
"\n box-shadow: \n ".concat(props.selected
|
|
108
|
+
? "inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium, ",\n ").concat((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
|
|
109
|
+
: props.size &&
|
|
110
|
+
(props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.primary) ||
|
|
111
|
+
props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary) ||
|
|
112
|
+
props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.buttonGray) ||
|
|
113
|
+
props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.brandPurple))
|
|
114
|
+
? ButtonShadow(props.size)
|
|
115
|
+
: props.color === ((_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.white) ||
|
|
116
|
+
props.color === ((_p = (_o = props === null || props === void 0 ? void 0 : props.theme) === null || _o === void 0 ? void 0 : _o.palette) === null || _p === void 0 ? void 0 : _p.lightest)
|
|
117
|
+
? "inset 0px 0px 0px 1px ".concat((_q = props.theme.palette) === null || _q === void 0 ? void 0 : _q.medium)
|
|
118
|
+
: 'none', "\n ");
|
|
113
119
|
});
|
|
114
120
|
var ButtonChildContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n width: 100%;\n gap: ", "px;\n align-items: center;\n justify-content: center;\n flex-wrap: ", ";\n"], ["\n display: flex;\n flex-direction: ", ";\n width: 100%;\n gap: ", "px;\n align-items: center;\n justify-content: center;\n flex-wrap: ", ";\n"])), function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) {
|
|
115
121
|
var _a, _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
13
|
-
var Nav = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n background: ", ";\n
|
|
13
|
+
var Nav = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n background: ", ";\n\n height: ", "px;\n width: 100%;\n align-items: center;\n\n /* @media (min-width: ", "px) {\n height: ", "px;\n } */\n"], ["\n display: flex;\n background: ", ";\n\n height: ", "px;\n width: 100%;\n align-items: center;\n\n /* @media (min-width: ", "px) {\n height: ", "px;\n } */\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
|
|
14
14
|
var NavContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n margin: 0 auto;\n max-width: ", "px;\n width: 100%;\n display: flex;\n padding: ", "px;\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"], ["\n margin: 0 auto;\n max-width: ", "px;\n width: 100%;\n display: flex;\n padding: ", "px;\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"])), function (props) { return props.maxWidth; }, 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.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b, _c; return "".concat((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, "px"); });
|
|
15
15
|
var NavChildContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n justify-content: flex-end;\n display: flex;\n flex: 1;\n align-items: center;\n z-index: 20;\n"], ["\n justify-content: flex-end;\n display: flex;\n flex: 1;\n align-items: center;\n z-index: 20;\n"])));
|
|
16
16
|
var NavMainLinks = styled__default["default"](framerMotion.motion.div)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: none;\n @media (min-width: ", "px) {\n height: 100%;\n display: flex;\n gap: ", "px;\n align-items: center;\n width: auto;\n margin-left: ", "px;\n }\n"], ["\n display: none;\n @media (min-width: ", "px) {\n height: 100%;\n display: flex;\n gap: ", "px;\n align-items: center;\n width: auto;\n margin-left: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
@@ -21,12 +21,12 @@ var ButtonColor;
|
|
|
21
21
|
})(ButtonColor || (ButtonColor = {}));
|
|
22
22
|
function Button(_a) {
|
|
23
23
|
var _b;
|
|
24
|
-
var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, borderRadius = _a.borderRadius, _f = _a.childGap, childGap = _f === void 0 ? 4 : _f, buttonBadge = _a.buttonBadge, children = _a.children;
|
|
24
|
+
var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, borderRadius = _a.borderRadius, _f = _a.childGap, childGap = _f === void 0 ? 4 : _f, buttonBadge = _a.buttonBadge, noShadow = _a.noShadow, hoverBackground = _a.hoverBackground, children = _a.children;
|
|
25
25
|
return (React.createElement(BasePrimaryButton, { center: center, color: theme && theme.palette
|
|
26
26
|
? selected
|
|
27
27
|
? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
28
28
|
: theme === null || theme === void 0 ? void 0 : theme.palette[color]
|
|
29
|
-
: 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); }, borderRadius: borderRadius, childGap: childGap },
|
|
29
|
+
: 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); }, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow },
|
|
30
30
|
loading && (React.createElement(Loading, null,
|
|
31
31
|
React.createElement(LoadingContainer, { xsSize: xsSize, size: size },
|
|
32
32
|
React.createElement(LoadingSpinner, null)))),
|
|
@@ -54,7 +54,7 @@ var SpinnerSize = function (size) {
|
|
|
54
54
|
return '26px';
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
|
-
var BaseButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity:
|
|
57
|
+
var BaseButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: ", ";\n }\n ", ";\n }\n &:active {\n ::before {\n opacity: ", ";\n }\n ::after {\n opacity: 0;\n }\n }\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"], ["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: ", ";\n }\n ", ";\n }\n &:active {\n ::before {\n opacity: ", ";\n }\n ::after {\n opacity: 0;\n }\n }\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"])), function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_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 : props.color; }, function (props) {
|
|
58
58
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
59
59
|
return props.color === ((_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.secondary) ||
|
|
60
60
|
props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.darkest) ||
|
|
@@ -63,45 +63,51 @@ var BaseButton = styled.button(templateObject_1 || (templateObject_1 = __makeTem
|
|
|
63
63
|
props.isDisabled
|
|
64
64
|
? (_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.white
|
|
65
65
|
: (_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.darkest;
|
|
66
|
-
}, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) {
|
|
67
|
-
|
|
66
|
+
}, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { return ((props === null || props === void 0 ? void 0 : props.noShadow) ? 0 : 1); }, function (props) {
|
|
67
|
+
return !props.isDisabled &&
|
|
68
|
+
props.hoverBackground &&
|
|
69
|
+
"background: ".concat(props.hoverBackground);
|
|
70
|
+
}, function (props) { return ((props === null || props === void 0 ? void 0 : props.noShadow) ? 0 : 1); }, 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) { return (props.center ? 'center' : 'initial'); });
|
|
71
|
+
var BasePrimaryButton = styled(BaseButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* TypoGraphy */\n\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n ", ";\n }\n"], ["\n /* TypoGraphy */\n\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n ", ";\n }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
|
|
68
72
|
var _a, _b;
|
|
69
73
|
return props.size === 'small'
|
|
70
74
|
? "".concat((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2, "px")
|
|
71
75
|
: "".concat((_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight.m1, "px");
|
|
72
76
|
}, function (props) {
|
|
73
77
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
74
|
-
return props.
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
(props.
|
|
79
|
-
props.color === ((
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
props.color === ((
|
|
85
|
-
|
|
86
|
-
|
|
78
|
+
return !(props === null || props === void 0 ? void 0 : props.noShadow) &&
|
|
79
|
+
"\n box-shadow: \n ".concat(props.selected
|
|
80
|
+
? "inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium, ",\n ").concat((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
|
|
81
|
+
: props.xsSize ||
|
|
82
|
+
(props.size &&
|
|
83
|
+
(props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.primary) ||
|
|
84
|
+
props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary) ||
|
|
85
|
+
props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.buttonGray) ||
|
|
86
|
+
props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.brandPurple)))
|
|
87
|
+
? ButtonShadow(props.xsSize || props.size)
|
|
88
|
+
: props.color === ((_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.white) ||
|
|
89
|
+
props.color === ((_p = (_o = props === null || props === void 0 ? void 0 : props.theme) === null || _o === void 0 ? void 0 : _o.palette) === null || _p === void 0 ? void 0 : _p.lightest)
|
|
90
|
+
? "inset 0px 0px 0px 1px ".concat((_q = props.theme.palette) === null || _q === void 0 ? void 0 : _q.medium)
|
|
91
|
+
: 'none', "\n ");
|
|
87
92
|
}, function (props) {
|
|
88
93
|
return ButtonPadding(props.xsSize || props.size, props.icon, props.flexReverse);
|
|
89
94
|
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return ButtonFontSize(props.size); }, function (props) {
|
|
90
95
|
return ButtonPadding(props.size, props.icon, props.flexReverse);
|
|
91
96
|
}, function (props) {
|
|
92
97
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
93
|
-
return props.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
props.color === ((
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
props.color === ((
|
|
103
|
-
|
|
104
|
-
|
|
98
|
+
return !(props === null || props === void 0 ? void 0 : props.noShadow) &&
|
|
99
|
+
"\n box-shadow: \n ".concat(props.selected
|
|
100
|
+
? "inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium, ",\n ").concat((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
|
|
101
|
+
: props.size &&
|
|
102
|
+
(props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.primary) ||
|
|
103
|
+
props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary) ||
|
|
104
|
+
props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.buttonGray) ||
|
|
105
|
+
props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.brandPurple))
|
|
106
|
+
? ButtonShadow(props.size)
|
|
107
|
+
: props.color === ((_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.white) ||
|
|
108
|
+
props.color === ((_p = (_o = props === null || props === void 0 ? void 0 : props.theme) === null || _o === void 0 ? void 0 : _o.palette) === null || _p === void 0 ? void 0 : _p.lightest)
|
|
109
|
+
? "inset 0px 0px 0px 1px ".concat((_q = props.theme.palette) === null || _q === void 0 ? void 0 : _q.medium)
|
|
110
|
+
: 'none', "\n ");
|
|
105
111
|
});
|
|
106
112
|
var ButtonChildContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n width: 100%;\n gap: ", "px;\n align-items: center;\n justify-content: center;\n flex-wrap: ", ";\n"], ["\n display: flex;\n flex-direction: ", ";\n width: 100%;\n gap: ", "px;\n align-items: center;\n justify-content: center;\n flex-wrap: ", ";\n"])), function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) {
|
|
107
113
|
var _a, _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import { motion } from 'framer-motion';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
|
|
5
|
-
var Nav = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n background: ", ";\n
|
|
5
|
+
var Nav = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n background: ", ";\n\n height: ", "px;\n width: 100%;\n align-items: center;\n\n /* @media (min-width: ", "px) {\n height: ", "px;\n } */\n"], ["\n display: flex;\n background: ", ";\n\n height: ", "px;\n width: 100%;\n align-items: center;\n\n /* @media (min-width: ", "px) {\n height: ", "px;\n } */\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
|
|
6
6
|
var NavContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0 auto;\n max-width: ", "px;\n width: 100%;\n display: flex;\n padding: ", "px;\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"], ["\n margin: 0 auto;\n max-width: ", "px;\n width: 100%;\n display: flex;\n padding: ", "px;\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"])), function (props) { return props.maxWidth; }, 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.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b, _c; return "".concat((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, "px"); });
|
|
7
7
|
var NavChildContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n justify-content: flex-end;\n display: flex;\n flex: 1;\n align-items: center;\n z-index: 20;\n"], ["\n justify-content: flex-end;\n display: flex;\n flex: 1;\n align-items: center;\n z-index: 20;\n"])));
|
|
8
8
|
var NavMainLinks = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: none;\n @media (min-width: ", "px) {\n height: 100%;\n display: flex;\n gap: ", "px;\n align-items: center;\n width: auto;\n margin-left: ", "px;\n }\n"], ["\n display: none;\n @media (min-width: ", "px) {\n height: 100%;\n display: flex;\n gap: ", "px;\n align-items: center;\n width: auto;\n margin-left: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.133",
|
|
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": "
|
|
74
|
+
"gitHead": "704c1a944785465f09e9bcff549689def87b0c9b"
|
|
75
75
|
}
|