@citygross/components 0.8.30 → 0.8.32
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/SearchBar/SearchBar.d.ts +2 -1
- package/build/cjs/components/src/components/SearchBar/SearchBar.js +4 -4
- package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js +3 -3
- package/build/es/components/src/components/SearchBar/SearchBar.js +4 -4
- package/build/es/components/src/components/SearchBar/SearchBar.styles.js +3 -3
- package/package.json +2 -2
|
@@ -3,6 +3,7 @@ import * as styles from './SearchBar.styles';
|
|
|
3
3
|
export declare type TSearchBar = styles.SearchInputProps & {
|
|
4
4
|
cancelLabel?: React.ReactNode;
|
|
5
5
|
icon?: React.ReactNode;
|
|
6
|
+
inputIcon?: React.ReactNode;
|
|
6
7
|
resultBoxTopPosition?: string;
|
|
7
8
|
inputRef?: React.RefObject<HTMLInputElement>;
|
|
8
9
|
searchInputMobileRef?: React.RefObject<HTMLInputElement>;
|
|
@@ -11,4 +12,4 @@ export declare type TSearchBar = styles.SearchInputProps & {
|
|
|
11
12
|
children?: React.ReactNode;
|
|
12
13
|
mobileTopPosition?: number;
|
|
13
14
|
};
|
|
14
|
-
export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, searchOnSubmit, searchInputMobileRef, mobileTopPosition, ...props }: TSearchBar) => JSX.Element;
|
|
15
|
+
export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, inputIcon, icon, value, resultBoxTopPosition, children, inputRef, isOpen, searchOnSubmit, searchInputMobileRef, mobileTopPosition, ...props }: TSearchBar) => JSX.Element;
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
|
-
var utils = require('@citygross/utils');
|
|
7
6
|
var React = require('react');
|
|
7
|
+
var utils = require('@citygross/utils');
|
|
8
8
|
var styled = require('styled-components');
|
|
9
9
|
var SearchBar_styles = require('./SearchBar.styles.js');
|
|
10
10
|
|
|
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
14
14
|
|
|
15
15
|
var SearchBar = function (_a) {
|
|
16
16
|
var _b, _c, _d;
|
|
17
|
-
var flexGrow = _a.flexGrow, isValid = _a.isValid, _e = _a.inputSize, inputSize = _e === void 0 ? 'medium' : _e, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, mobileTopPosition = _a.mobileTopPosition, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef", "mobileTopPosition"]);
|
|
17
|
+
var flexGrow = _a.flexGrow, isValid = _a.isValid, _e = _a.inputSize, inputSize = _e === void 0 ? 'medium' : _e, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, inputIcon = _a.inputIcon, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, mobileTopPosition = _a.mobileTopPosition, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "inputIcon", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef", "mobileTopPosition"]);
|
|
18
18
|
var width = utils.useWindowSize().width;
|
|
19
19
|
var theme = styled.useTheme();
|
|
20
20
|
var resultVariants = {
|
|
@@ -55,7 +55,7 @@ var SearchBar = function (_a) {
|
|
|
55
55
|
e.preventDefault();
|
|
56
56
|
searchOnSubmit && searchOnSubmit();
|
|
57
57
|
} },
|
|
58
|
-
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null,
|
|
58
|
+
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
|
|
59
59
|
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value, autoComplete: "off", "data-lpignore": "true", "data-form-type": "other" })),
|
|
60
60
|
cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
|
|
61
61
|
e.stopPropagation();
|
|
@@ -68,7 +68,7 @@ var SearchBar = function (_a) {
|
|
|
68
68
|
e.preventDefault();
|
|
69
69
|
searchOnSubmit && searchOnSubmit();
|
|
70
70
|
} },
|
|
71
|
-
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null,
|
|
71
|
+
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
|
|
72
72
|
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, activeBorderColor: activeBorderColor, ref: searchInputMobileRef }, props, { value: value, autoComplete: "off", "data-lpignore": "true", "data-form-type": "other" })),
|
|
73
73
|
cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
|
|
74
74
|
e.stopPropagation();
|
|
@@ -13,7 +13,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
var SearchResultContainer = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (max-width: ", "px) {\n height: 100%;\n }\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"], ["\n position: fixed;\n top: ", "px;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (max-width: ", "px) {\n height: 100%;\n }\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"])), function (props) { var _a; return (_a = props.mobileTopPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, 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.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
|
|
14
14
|
var SearchRightLabel = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
15
15
|
var SearchBarContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n ", ";\n\n position: relative;\n display: flex;\n justify-content: flex-end;\n"], ["\n ", ";\n\n position: relative;\n display: flex;\n justify-content: flex-end;\n"])), function (props) { return props.flexGrow && "flex: 1;"; });
|
|
16
|
-
var SearchInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n
|
|
16
|
+
var SearchInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n line-height: ", "px;\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n line-height: ", "px;\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n"])), function (props) {
|
|
17
17
|
var _a, _b;
|
|
18
18
|
return props.inputSize === 'small'
|
|
19
19
|
? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2
|
|
@@ -23,9 +23,9 @@ var SearchInput = styled__default["default"].input(templateObject_4 || (template
|
|
|
23
23
|
return props.inputSize === 'small'
|
|
24
24
|
? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs
|
|
25
25
|
: (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
|
|
26
|
-
}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; });
|
|
26
|
+
}, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.m1; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; });
|
|
27
27
|
var MobileSearchFormContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n background: ", ";\n padding: ", ";\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n background: ", ";\n padding: ", ";\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px 10px"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; });
|
|
28
|
-
var SearchForm = styled__default["default"].form(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n\n &:focus-within {\n box-shadow: inset 0 0 0
|
|
28
|
+
var SearchForm = styled__default["default"].form(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n &:hover {\n background: ", ";\n }\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"], ["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n &:hover {\n background: ", ";\n }\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"])), function (props) { return (props.hideInMobile ? 'none' : 'flex'); }, function (props) { var _a; return "0px ".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchBarHorizontalPadding, "px"); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, 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.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.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; }, function (props) {
|
|
29
29
|
return props.isOpen &&
|
|
30
30
|
"\n flex-direction: row;\n ";
|
|
31
31
|
});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __rest, __assign } from '../../../../_virtual/_tslib.js';
|
|
2
|
-
import { useWindowSize } from '@citygross/utils';
|
|
3
2
|
import React from 'react';
|
|
3
|
+
import { useWindowSize } from '@citygross/utils';
|
|
4
4
|
import { useTheme } from 'styled-components';
|
|
5
5
|
import { SearchBarContainer, SearchForm, SearchLeftIcon, SearchInput, SearchRightLabel, MobileSearchIconContainer, SearchResultContainer, MobileSearchFormContainer } from './SearchBar.styles.js';
|
|
6
6
|
|
|
7
7
|
var SearchBar = function (_a) {
|
|
8
8
|
var _b, _c, _d;
|
|
9
|
-
var flexGrow = _a.flexGrow, isValid = _a.isValid, _e = _a.inputSize, inputSize = _e === void 0 ? 'medium' : _e, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, mobileTopPosition = _a.mobileTopPosition, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef", "mobileTopPosition"]);
|
|
9
|
+
var flexGrow = _a.flexGrow, isValid = _a.isValid, _e = _a.inputSize, inputSize = _e === void 0 ? 'medium' : _e, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, inputIcon = _a.inputIcon, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, mobileTopPosition = _a.mobileTopPosition, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "inputIcon", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef", "mobileTopPosition"]);
|
|
10
10
|
var width = useWindowSize().width;
|
|
11
11
|
var theme = useTheme();
|
|
12
12
|
var resultVariants = {
|
|
@@ -47,7 +47,7 @@ var SearchBar = function (_a) {
|
|
|
47
47
|
e.preventDefault();
|
|
48
48
|
searchOnSubmit && searchOnSubmit();
|
|
49
49
|
} },
|
|
50
|
-
React.createElement(SearchLeftIcon, null,
|
|
50
|
+
React.createElement(SearchLeftIcon, null, inputIcon),
|
|
51
51
|
React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value, autoComplete: "off", "data-lpignore": "true", "data-form-type": "other" })),
|
|
52
52
|
cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
|
|
53
53
|
e.stopPropagation();
|
|
@@ -60,7 +60,7 @@ var SearchBar = function (_a) {
|
|
|
60
60
|
e.preventDefault();
|
|
61
61
|
searchOnSubmit && searchOnSubmit();
|
|
62
62
|
} },
|
|
63
|
-
React.createElement(SearchLeftIcon, null,
|
|
63
|
+
React.createElement(SearchLeftIcon, null, inputIcon),
|
|
64
64
|
React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, activeBorderColor: activeBorderColor, ref: searchInputMobileRef }, props, { value: value, autoComplete: "off", "data-lpignore": "true", "data-form-type": "other" })),
|
|
65
65
|
cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
|
|
66
66
|
e.stopPropagation();
|
|
@@ -5,7 +5,7 @@ import styled from 'styled-components';
|
|
|
5
5
|
var SearchResultContainer = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (max-width: ", "px) {\n height: 100%;\n }\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"], ["\n position: fixed;\n top: ", "px;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (max-width: ", "px) {\n height: 100%;\n }\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"])), function (props) { var _a; return (_a = props.mobileTopPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, 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.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
|
|
6
6
|
var SearchRightLabel = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
7
7
|
var SearchBarContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n\n position: relative;\n display: flex;\n justify-content: flex-end;\n"], ["\n ", ";\n\n position: relative;\n display: flex;\n justify-content: flex-end;\n"])), function (props) { return props.flexGrow && "flex: 1;"; });
|
|
8
|
-
var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n
|
|
8
|
+
var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n line-height: ", "px;\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n line-height: ", "px;\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n"])), function (props) {
|
|
9
9
|
var _a, _b;
|
|
10
10
|
return props.inputSize === 'small'
|
|
11
11
|
? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2
|
|
@@ -15,9 +15,9 @@ var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTem
|
|
|
15
15
|
return props.inputSize === 'small'
|
|
16
16
|
? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs
|
|
17
17
|
: (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
|
|
18
|
-
}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; });
|
|
18
|
+
}, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.m1; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; });
|
|
19
19
|
var MobileSearchFormContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", ";\n padding: ", ";\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n background: ", ";\n padding: ", ";\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px 10px"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; });
|
|
20
|
-
var SearchForm = styled.form(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n\n &:focus-within {\n box-shadow: inset 0 0 0
|
|
20
|
+
var SearchForm = styled.form(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n &:hover {\n background: ", ";\n }\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"], ["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n &:hover {\n background: ", ";\n }\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"])), function (props) { return (props.hideInMobile ? 'none' : 'flex'); }, function (props) { var _a; return "0px ".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchBarHorizontalPadding, "px"); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, 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.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.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; }, function (props) {
|
|
21
21
|
return props.isOpen &&
|
|
22
22
|
"\n flex-direction: row;\n ";
|
|
23
23
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.32",
|
|
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": "7a5b76f64f5091393950854fc799f999703a919a"
|
|
80
80
|
}
|