@citygross/components 0.8.172 → 0.8.174
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/Flex/Flex.d.ts +2 -0
- package/build/@types/components/Nav/Nav.d.ts +2 -1
- package/build/@types/components/SearchBar/SearchBar.d.ts +3 -3
- package/build/@types/components/SearchBar/SearchBar.styles.d.ts +13 -14
- package/build/cjs/components/src/components/Flex/Flex.styles.js +7 -1
- package/build/cjs/components/src/components/Flex/Flex.styles.js.map +1 -1
- package/build/cjs/components/src/components/Nav/Nav.js +3 -3
- package/build/cjs/components/src/components/SearchBar/SearchBar.js +1 -1
- package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js +115 -18
- package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js.map +1 -1
- package/build/es/components/src/components/Flex/Flex.styles.js +7 -1
- package/build/es/components/src/components/Flex/Flex.styles.js.map +1 -1
- package/build/es/components/src/components/Nav/Nav.js +3 -3
- package/build/es/components/src/components/SearchBar/SearchBar.js +1 -1
- package/build/es/components/src/components/SearchBar/SearchBar.styles.js +115 -18
- package/build/es/components/src/components/SearchBar/SearchBar.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare type TFlex = {
|
|
3
|
+
alignItems?: 'baseline' | 'center' | 'flex-start' | 'flex-end' | 'stretch';
|
|
3
4
|
children: React.ReactNode;
|
|
4
5
|
gap?: number;
|
|
6
|
+
justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
5
7
|
row?: boolean;
|
|
6
8
|
} & React.HTMLAttributes<HTMLDivElement>;
|
|
7
9
|
export declare const Flex: ({ children, ...props }: TFlex) => JSX.Element;
|
|
@@ -11,6 +11,7 @@ export declare type TNav = {
|
|
|
11
11
|
onSearchClick?: () => void;
|
|
12
12
|
overlayTopPosition?: number;
|
|
13
13
|
rightContent?: React.ReactNode;
|
|
14
|
+
searchAriaLabel: string;
|
|
14
15
|
searchCancelLabel?: React.ReactNode;
|
|
15
16
|
searchContainerRef: React.RefObject<HTMLDivElement>;
|
|
16
17
|
searchIcon?: React.ReactNode;
|
|
@@ -24,4 +25,4 @@ export declare type TNav = {
|
|
|
24
25
|
searchValue?: string;
|
|
25
26
|
topPosition?: number;
|
|
26
27
|
};
|
|
27
|
-
export declare const Nav: ({ closeSearch, height, inputIcon, logo, mainLinks, maxWidth, mobileTopPosition, onSearchBlur, onSearchClick, overlayTopPosition, rightContent, searchCancelLabel, searchContainerRef, searchIcon, searchInputMobileRef, searchInputRef, searchIsOpen, searchOnChange, searchOnSubmit, searchPlaceHolder, searchResultElement, searchValue, topPosition }: TNav) => JSX.Element;
|
|
28
|
+
export declare const Nav: ({ closeSearch, height, inputIcon, logo, mainLinks, maxWidth, mobileTopPosition, onSearchBlur, onSearchClick, overlayTopPosition, rightContent, searchAriaLabel, searchCancelLabel, searchContainerRef, searchIcon, searchInputMobileRef, searchInputRef, searchIsOpen, searchOnChange, searchOnSubmit, searchPlaceHolder, searchResultElement, searchValue, topPosition }: TNav) => JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { InputHTMLAttributes } from 'react';
|
|
2
2
|
import * as styles from './SearchBar.styles';
|
|
3
|
-
export declare type TSearchBar = styles.
|
|
3
|
+
export declare type TSearchBar = styles.TSearchInput & {
|
|
4
4
|
cancelLabel?: React.ReactNode;
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
icon?: React.ReactNode;
|
|
@@ -11,5 +11,5 @@ export declare type TSearchBar = styles.SearchInputProps & {
|
|
|
11
11
|
resultBoxTopPosition?: string;
|
|
12
12
|
searchInputMobileRef?: React.RefObject<HTMLInputElement>;
|
|
13
13
|
searchOnSubmit?: () => void;
|
|
14
|
-
}
|
|
14
|
+
} & InputHTMLAttributes<HTMLInputElement>;
|
|
15
15
|
export declare const SearchBar: ({ activeBorderColor, cancelLabel, children, flexGrow, icon, inputIcon, inputRef, inputSize, isOpen, isValid, mobileTopPosition, resultBoxTopPosition, searchInputMobileRef, searchOnSubmit, value, ...props }: TSearchBar) => JSX.Element;
|
|
@@ -1,24 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
export interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
-
readonly isValid?: boolean;
|
|
4
|
-
flexGrow?: number;
|
|
5
|
-
inputSize?: 'small' | 'medium';
|
|
6
|
-
isOpen?: boolean;
|
|
1
|
+
export declare type TSearchInput = {
|
|
7
2
|
activeBorderColor?: string;
|
|
3
|
+
flexGrow?: boolean;
|
|
8
4
|
hideInMobile?: boolean;
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
inputSize?: 'small' | 'medium';
|
|
6
|
+
isOpen?: boolean;
|
|
7
|
+
isValid?: boolean;
|
|
8
|
+
};
|
|
9
|
+
declare type TSearchResultContainer = {
|
|
11
10
|
background?: string;
|
|
12
|
-
topPosition?: string;
|
|
13
|
-
mobileTopPosition?: number;
|
|
14
11
|
isOpen?: boolean;
|
|
12
|
+
mobileTopPosition?: number;
|
|
13
|
+
topPosition?: string;
|
|
15
14
|
};
|
|
16
|
-
export declare const SearchResultContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme,
|
|
15
|
+
export declare const SearchResultContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSearchResultContainer, never>;
|
|
17
16
|
export declare const SearchRightLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
|
|
18
|
-
export declare const SearchBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme,
|
|
19
|
-
export declare const SearchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme,
|
|
17
|
+
export declare const SearchBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSearchInput, never>;
|
|
18
|
+
export declare const SearchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TSearchInput, never>;
|
|
20
19
|
export declare const MobileSearchFormContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
21
|
-
export declare const SearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme,
|
|
20
|
+
export declare const SearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, TSearchInput, never>;
|
|
22
21
|
export declare const MobileSearchIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
23
22
|
export declare const SearchLeftIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
24
23
|
export {};
|
|
@@ -9,12 +9,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var Flex = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n gap: ", "px;\n"], ["\n display: flex;\n flex-direction: ", ";\n gap: ", "px;\n"])), function (_a) {
|
|
12
|
+
var Flex = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: ", ";\n flex-direction: ", ";\n gap: ", "px;\n justify-content: ", ";\n"], ["\n display: flex;\n align-items: ", ";\n flex-direction: ", ";\n gap: ", "px;\n justify-content: ", ";\n"])), function (_a) {
|
|
13
|
+
var alignItems = _a.alignItems;
|
|
14
|
+
return alignItems !== null && alignItems !== void 0 ? alignItems : 'center';
|
|
15
|
+
}, function (_a) {
|
|
13
16
|
var row = _a.row;
|
|
14
17
|
return (row ? 'row' : 'column');
|
|
15
18
|
}, function (_a) {
|
|
16
19
|
var gap = _a.gap;
|
|
17
20
|
return gap !== null && gap !== void 0 ? gap : 0;
|
|
21
|
+
}, function (_a) {
|
|
22
|
+
var justifyContent = _a.justifyContent;
|
|
23
|
+
return justifyContent !== null && justifyContent !== void 0 ? justifyContent : 'center';
|
|
18
24
|
});
|
|
19
25
|
var templateObject_1;
|
|
20
26
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Flex.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
14
14
|
|
|
15
15
|
var Nav = function (_a) {
|
|
16
16
|
var _b, _c, _d, _e;
|
|
17
|
-
var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchCancelLabel = _a.searchCancelLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputMobileRef = _a.searchInputMobileRef, searchInputRef = _a.searchInputRef, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
|
|
17
|
+
var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchAriaLabel = _a.searchAriaLabel, searchCancelLabel = _a.searchCancelLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputMobileRef = _a.searchInputMobileRef, searchInputRef = _a.searchInputRef, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
|
|
18
18
|
var navContainerRef = React.useRef(null);
|
|
19
19
|
var navChildContainerRef = React.useRef(null);
|
|
20
20
|
var navRef = React.useRef(null);
|
|
@@ -99,8 +99,8 @@ var Nav = function (_a) {
|
|
|
99
99
|
: searchIsOpen
|
|
100
100
|
? 'closed'
|
|
101
101
|
: 'open', initial: "open" }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
|
|
102
|
-
React__default["default"].createElement(Nav_styles.SearchContainer, { "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
|
|
103
|
-
React__default["default"].createElement(SearchBar.SearchBar, { "aria-label": searchPlaceHolder, cancelLabel: searchCancelLabel, flexGrow:
|
|
102
|
+
React__default["default"].createElement(Nav_styles.SearchContainer, { "aria-label": searchAriaLabel, "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
|
|
103
|
+
React__default["default"].createElement(SearchBar.SearchBar, { "aria-label": searchPlaceHolder, cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, inputRef: searchInputRef, isOpen: searchIsOpen, mobileTopPosition: mobileTopPosition, onBlur: onSearchBlur, onChange: searchOnChange, onClick: function () {
|
|
104
104
|
onSearchClick && onSearchClick();
|
|
105
105
|
}, onKeyDown: function (e) {
|
|
106
106
|
if (e.key === 'Enter') {
|
|
@@ -56,7 +56,7 @@ var SearchBar = function (_a) {
|
|
|
56
56
|
searchOnSubmit && searchOnSubmit();
|
|
57
57
|
} },
|
|
58
58
|
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
|
|
59
|
-
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
|
|
59
|
+
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input", inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
|
|
60
60
|
cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: 'closed', onClick: function (e) {
|
|
61
61
|
e.stopPropagation();
|
|
62
62
|
}, variants: iconVariants }, cancelLabel)) : null),
|
|
@@ -10,26 +10,123 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
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 (
|
|
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 (_a) {
|
|
14
|
+
var mobileTopPosition = _a.mobileTopPosition;
|
|
15
|
+
return mobileTopPosition !== null && mobileTopPosition !== void 0 ? mobileTopPosition : 0;
|
|
16
|
+
}, function (_a) {
|
|
17
|
+
var _b;
|
|
18
|
+
var theme = _a.theme;
|
|
19
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.searchModalZIndex;
|
|
20
|
+
}, function (_a) {
|
|
21
|
+
var _b;
|
|
22
|
+
var theme = _a.theme;
|
|
23
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
24
|
+
}, function (_a) {
|
|
25
|
+
var _b;
|
|
26
|
+
var theme = _a.theme;
|
|
27
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
28
|
+
}, function (_a) {
|
|
29
|
+
var _b;
|
|
30
|
+
var topPosition = _a.topPosition, theme = _a.theme;
|
|
31
|
+
return topPosition !== null && topPosition !== void 0 ? topPosition : "calc(100% + ".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)");
|
|
32
|
+
});
|
|
14
33
|
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
|
-
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 (
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
34
|
+
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 (_a) {
|
|
35
|
+
var flexGrow = _a.flexGrow;
|
|
36
|
+
return flexGrow && "flex: 1;";
|
|
37
|
+
});
|
|
38
|
+
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\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\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 (_a) {
|
|
39
|
+
var _b, _c;
|
|
40
|
+
var inputSize = _a.inputSize, theme = _a.theme;
|
|
41
|
+
return inputSize === 'small'
|
|
42
|
+
? (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size.s2
|
|
43
|
+
: (_c = theme.typography) === null || _c === void 0 ? void 0 : _c.size.s3;
|
|
44
|
+
}, function (_a) {
|
|
45
|
+
var _b, _c;
|
|
46
|
+
var inputSize = _a.inputSize, theme = _a.theme;
|
|
47
|
+
return inputSize === 'small' ? (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs : (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs2;
|
|
48
|
+
}, function (_a) {
|
|
49
|
+
var _b;
|
|
50
|
+
var theme = _a.theme;
|
|
51
|
+
return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size.m1;
|
|
52
|
+
}, function (_a) {
|
|
53
|
+
var _b;
|
|
54
|
+
var theme = _a.theme;
|
|
55
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.mediumDark;
|
|
56
|
+
}, function (_a) {
|
|
57
|
+
var _b;
|
|
58
|
+
var theme = _a.theme;
|
|
59
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.mediumDark;
|
|
60
|
+
}, function (_a) {
|
|
61
|
+
var _b;
|
|
62
|
+
var theme = _a.theme;
|
|
63
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.mediumDark;
|
|
64
|
+
});
|
|
65
|
+
var MobileSearchFormContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n background: ", ";\n padding: ", ";\n\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n background: ", ";\n padding: ", ";\n\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (_a) {
|
|
66
|
+
var _b;
|
|
67
|
+
var theme = _a.theme;
|
|
68
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
69
|
+
}, function (_a) {
|
|
70
|
+
var _b;
|
|
71
|
+
var theme = _a.theme;
|
|
72
|
+
return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px 10px");
|
|
73
|
+
}, function (_a) {
|
|
74
|
+
var _b;
|
|
75
|
+
var theme = _a.theme;
|
|
76
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
77
|
+
});
|
|
78
|
+
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 2px ", ";\n background: ", ";\n }\n\n > div[data-lastpass-icon-root] {\n display: none;\n }\n\n @media (min-width: ", ") {\n &:hover {\n background: ", ";\n }\n }\n\n @media (min-width: ", "px) {\n display: flex;\n flex-direction: row;\n padding: 0 ", "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\n &:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n background: ", ";\n }\n\n > div[data-lastpass-icon-root] {\n display: none;\n }\n\n @media (min-width: ", ") {\n &:hover {\n background: ", ";\n }\n }\n\n @media (min-width: ", "px) {\n display: flex;\n flex-direction: row;\n padding: 0 ", "px;\n ", "\n }\n"])), function (_a) {
|
|
79
|
+
var hideInMobile = _a.hideInMobile;
|
|
80
|
+
return (hideInMobile ? 'none' : 'flex');
|
|
81
|
+
}, function (_a) {
|
|
82
|
+
var _b;
|
|
83
|
+
var theme = _a.theme;
|
|
84
|
+
return "0px ".concat((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.searchBarHorizontalPadding, "px");
|
|
85
|
+
}, function (_a) {
|
|
86
|
+
var _b;
|
|
87
|
+
var theme = _a.theme;
|
|
88
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
89
|
+
}, function (_a) {
|
|
90
|
+
var _b;
|
|
91
|
+
var theme = _a.theme;
|
|
92
|
+
return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
|
|
93
|
+
}, function (_a) {
|
|
94
|
+
var _b;
|
|
95
|
+
var theme = _a.theme;
|
|
96
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledGray;
|
|
97
|
+
}, function (_a) {
|
|
98
|
+
var _b;
|
|
99
|
+
var theme = _a.theme;
|
|
100
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue;
|
|
101
|
+
}, function (_a) {
|
|
102
|
+
var _b;
|
|
103
|
+
var theme = _a.theme;
|
|
104
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
105
|
+
}, function (_a) {
|
|
106
|
+
var _b;
|
|
107
|
+
var theme = _a.theme;
|
|
108
|
+
return (_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.sm;
|
|
109
|
+
}, function (_a) {
|
|
110
|
+
var _b;
|
|
111
|
+
var theme = _a.theme;
|
|
112
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
|
|
113
|
+
}, function (_a) {
|
|
114
|
+
var _b;
|
|
115
|
+
var theme = _a.theme;
|
|
116
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
117
|
+
}, function (_a) {
|
|
118
|
+
var _b;
|
|
119
|
+
var theme = _a.theme;
|
|
120
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
|
|
121
|
+
}, function (_a) {
|
|
122
|
+
var isOpen = _a.isOpen;
|
|
123
|
+
return isOpen && "flex-direction: row;";
|
|
124
|
+
});
|
|
125
|
+
var MobileSearchIconContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: block;\n\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n display: block;\n\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (_a) {
|
|
126
|
+
var _b;
|
|
127
|
+
var theme = _a.theme;
|
|
128
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
31
129
|
});
|
|
32
|
-
var MobileSearchIconContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: block;\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n display: block;\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; });
|
|
33
130
|
var SearchLeftIcon = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
34
131
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
35
132
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var Flex = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n gap: ", "px;\n"], ["\n display: flex;\n flex-direction: ", ";\n gap: ", "px;\n"])), function (_a) {
|
|
4
|
+
var Flex = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n flex-direction: ", ";\n gap: ", "px;\n justify-content: ", ";\n"], ["\n display: flex;\n align-items: ", ";\n flex-direction: ", ";\n gap: ", "px;\n justify-content: ", ";\n"])), function (_a) {
|
|
5
|
+
var alignItems = _a.alignItems;
|
|
6
|
+
return alignItems !== null && alignItems !== void 0 ? alignItems : 'center';
|
|
7
|
+
}, function (_a) {
|
|
5
8
|
var row = _a.row;
|
|
6
9
|
return (row ? 'row' : 'column');
|
|
7
10
|
}, function (_a) {
|
|
8
11
|
var gap = _a.gap;
|
|
9
12
|
return gap !== null && gap !== void 0 ? gap : 0;
|
|
13
|
+
}, function (_a) {
|
|
14
|
+
var justifyContent = _a.justifyContent;
|
|
15
|
+
return justifyContent !== null && justifyContent !== void 0 ? justifyContent : 'center';
|
|
10
16
|
});
|
|
11
17
|
var templateObject_1;
|
|
12
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Flex.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,7 +6,7 @@ import { Nav as Nav$1, NavContainer, NavChildContainer, NavMainLinks, SearchCont
|
|
|
6
6
|
|
|
7
7
|
var Nav = function (_a) {
|
|
8
8
|
var _b, _c, _d, _e;
|
|
9
|
-
var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchCancelLabel = _a.searchCancelLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputMobileRef = _a.searchInputMobileRef, searchInputRef = _a.searchInputRef, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
|
|
9
|
+
var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchAriaLabel = _a.searchAriaLabel, searchCancelLabel = _a.searchCancelLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputMobileRef = _a.searchInputMobileRef, searchInputRef = _a.searchInputRef, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
|
|
10
10
|
var navContainerRef = useRef(null);
|
|
11
11
|
var navChildContainerRef = useRef(null);
|
|
12
12
|
var navRef = useRef(null);
|
|
@@ -91,8 +91,8 @@ var Nav = function (_a) {
|
|
|
91
91
|
: searchIsOpen
|
|
92
92
|
? 'closed'
|
|
93
93
|
: 'open', initial: "open" }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
|
|
94
|
-
React.createElement(SearchContainer, { "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
|
|
95
|
-
React.createElement(SearchBar, { "aria-label": searchPlaceHolder, cancelLabel: searchCancelLabel, flexGrow:
|
|
94
|
+
React.createElement(SearchContainer, { "aria-label": searchAriaLabel, "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
|
|
95
|
+
React.createElement(SearchBar, { "aria-label": searchPlaceHolder, cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, inputRef: searchInputRef, isOpen: searchIsOpen, mobileTopPosition: mobileTopPosition, onBlur: onSearchBlur, onChange: searchOnChange, onClick: function () {
|
|
96
96
|
onSearchClick && onSearchClick();
|
|
97
97
|
}, onKeyDown: function (e) {
|
|
98
98
|
if (e.key === 'Enter') {
|
|
@@ -48,7 +48,7 @@ var SearchBar = function (_a) {
|
|
|
48
48
|
searchOnSubmit && searchOnSubmit();
|
|
49
49
|
} },
|
|
50
50
|
React.createElement(SearchLeftIcon, null, inputIcon),
|
|
51
|
-
React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
|
|
51
|
+
React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input", inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
|
|
52
52
|
cancelLabel ? (React.createElement(SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: 'closed', onClick: function (e) {
|
|
53
53
|
e.stopPropagation();
|
|
54
54
|
}, variants: iconVariants }, cancelLabel)) : null),
|
|
@@ -2,26 +2,123 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import { motion } from 'framer-motion';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
|
|
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 (
|
|
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 (_a) {
|
|
6
|
+
var mobileTopPosition = _a.mobileTopPosition;
|
|
7
|
+
return mobileTopPosition !== null && mobileTopPosition !== void 0 ? mobileTopPosition : 0;
|
|
8
|
+
}, function (_a) {
|
|
9
|
+
var _b;
|
|
10
|
+
var theme = _a.theme;
|
|
11
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.searchModalZIndex;
|
|
12
|
+
}, function (_a) {
|
|
13
|
+
var _b;
|
|
14
|
+
var theme = _a.theme;
|
|
15
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
16
|
+
}, function (_a) {
|
|
17
|
+
var _b;
|
|
18
|
+
var theme = _a.theme;
|
|
19
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
20
|
+
}, function (_a) {
|
|
21
|
+
var _b;
|
|
22
|
+
var topPosition = _a.topPosition, theme = _a.theme;
|
|
23
|
+
return topPosition !== null && topPosition !== void 0 ? topPosition : "calc(100% + ".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)");
|
|
24
|
+
});
|
|
6
25
|
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
|
-
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 (
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
26
|
+
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 (_a) {
|
|
27
|
+
var flexGrow = _a.flexGrow;
|
|
28
|
+
return flexGrow && "flex: 1;";
|
|
29
|
+
});
|
|
30
|
+
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\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\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 (_a) {
|
|
31
|
+
var _b, _c;
|
|
32
|
+
var inputSize = _a.inputSize, theme = _a.theme;
|
|
33
|
+
return inputSize === 'small'
|
|
34
|
+
? (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size.s2
|
|
35
|
+
: (_c = theme.typography) === null || _c === void 0 ? void 0 : _c.size.s3;
|
|
36
|
+
}, function (_a) {
|
|
37
|
+
var _b, _c;
|
|
38
|
+
var inputSize = _a.inputSize, theme = _a.theme;
|
|
39
|
+
return inputSize === 'small' ? (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs : (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs2;
|
|
40
|
+
}, function (_a) {
|
|
41
|
+
var _b;
|
|
42
|
+
var theme = _a.theme;
|
|
43
|
+
return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size.m1;
|
|
44
|
+
}, function (_a) {
|
|
45
|
+
var _b;
|
|
46
|
+
var theme = _a.theme;
|
|
47
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.mediumDark;
|
|
48
|
+
}, function (_a) {
|
|
49
|
+
var _b;
|
|
50
|
+
var theme = _a.theme;
|
|
51
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.mediumDark;
|
|
52
|
+
}, function (_a) {
|
|
53
|
+
var _b;
|
|
54
|
+
var theme = _a.theme;
|
|
55
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.mediumDark;
|
|
56
|
+
});
|
|
57
|
+
var MobileSearchFormContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", ";\n padding: ", ";\n\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n background: ", ";\n padding: ", ";\n\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (_a) {
|
|
58
|
+
var _b;
|
|
59
|
+
var theme = _a.theme;
|
|
60
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
61
|
+
}, function (_a) {
|
|
62
|
+
var _b;
|
|
63
|
+
var theme = _a.theme;
|
|
64
|
+
return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px 10px");
|
|
65
|
+
}, function (_a) {
|
|
66
|
+
var _b;
|
|
67
|
+
var theme = _a.theme;
|
|
68
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
69
|
+
});
|
|
70
|
+
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 2px ", ";\n background: ", ";\n }\n\n > div[data-lastpass-icon-root] {\n display: none;\n }\n\n @media (min-width: ", ") {\n &:hover {\n background: ", ";\n }\n }\n\n @media (min-width: ", "px) {\n display: flex;\n flex-direction: row;\n padding: 0 ", "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\n &:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n background: ", ";\n }\n\n > div[data-lastpass-icon-root] {\n display: none;\n }\n\n @media (min-width: ", ") {\n &:hover {\n background: ", ";\n }\n }\n\n @media (min-width: ", "px) {\n display: flex;\n flex-direction: row;\n padding: 0 ", "px;\n ", "\n }\n"])), function (_a) {
|
|
71
|
+
var hideInMobile = _a.hideInMobile;
|
|
72
|
+
return (hideInMobile ? 'none' : 'flex');
|
|
73
|
+
}, function (_a) {
|
|
74
|
+
var _b;
|
|
75
|
+
var theme = _a.theme;
|
|
76
|
+
return "0px ".concat((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.searchBarHorizontalPadding, "px");
|
|
77
|
+
}, function (_a) {
|
|
78
|
+
var _b;
|
|
79
|
+
var theme = _a.theme;
|
|
80
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
81
|
+
}, function (_a) {
|
|
82
|
+
var _b;
|
|
83
|
+
var theme = _a.theme;
|
|
84
|
+
return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
|
|
85
|
+
}, function (_a) {
|
|
86
|
+
var _b;
|
|
87
|
+
var theme = _a.theme;
|
|
88
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledGray;
|
|
89
|
+
}, function (_a) {
|
|
90
|
+
var _b;
|
|
91
|
+
var theme = _a.theme;
|
|
92
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue;
|
|
93
|
+
}, function (_a) {
|
|
94
|
+
var _b;
|
|
95
|
+
var theme = _a.theme;
|
|
96
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
97
|
+
}, function (_a) {
|
|
98
|
+
var _b;
|
|
99
|
+
var theme = _a.theme;
|
|
100
|
+
return (_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.sm;
|
|
101
|
+
}, function (_a) {
|
|
102
|
+
var _b;
|
|
103
|
+
var theme = _a.theme;
|
|
104
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
|
|
105
|
+
}, function (_a) {
|
|
106
|
+
var _b;
|
|
107
|
+
var theme = _a.theme;
|
|
108
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
109
|
+
}, function (_a) {
|
|
110
|
+
var _b;
|
|
111
|
+
var theme = _a.theme;
|
|
112
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
|
|
113
|
+
}, function (_a) {
|
|
114
|
+
var isOpen = _a.isOpen;
|
|
115
|
+
return isOpen && "flex-direction: row;";
|
|
116
|
+
});
|
|
117
|
+
var MobileSearchIconContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: block;\n\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n display: block;\n\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (_a) {
|
|
118
|
+
var _b;
|
|
119
|
+
var theme = _a.theme;
|
|
120
|
+
return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
|
|
23
121
|
});
|
|
24
|
-
var MobileSearchIconContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: block;\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n display: block;\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; });
|
|
25
122
|
var SearchLeftIcon = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
26
123
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
27
124
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.174",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"react-slick": "^0.30.1",
|
|
75
75
|
"slick-carousel": "^1.8.1"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "57c68282f7d418e4f0b323a1dd79fc23c48b3e89"
|
|
78
78
|
}
|