@learningpool/ui 1.15.4 → 1.16.0

package/components/navigation/MobileNavigation/MobileNavigationSearch.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ISwipeableTemporarySearch {
     isSearchOpen: boolean;
     setIsSearchOpen?: any;
@@ -7,5 +6,5 @@ interface ISwipeableTemporarySearch {
     searchPanelOnClickSearch?: any;
     dataAttributes?: any;
 }
-export default function SwipeableTemporarySearch(props: ISwipeableTemporarySearch): JSX.Element;
+export default function SwipeableTemporarySearch(props: ISwipeableTemporarySearch): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/components/navigation/MobileNavigation/MobileNavigationSearch.js

@@ -1,56 +1,47 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import * as React from 'react';
 import { FormControl, InputAdornment, Stack, IconButton } from '../../../index';
 import { StyledBox, StyledSwipeableSearch, StyledOutlinedInput, StyledOutlinedInputLabel } from './MobileNavigationSearchStyles';
 import Search from '@mui/icons-material/Search';
 import { animated, config, useSpring } from '@react-spring/web';
 import { defaultAttributes } from '../../../utils/dataAttributes';
+import { EVENT_KEYS } from '../../../utils/constants';
 export default function SwipeableTemporarySearch(props) {
-    var isSearchOpen = props.isSearchOpen, setIsSearchOpen = props.setIsSearchOpen, searchPanelPlaceholder = props.searchPanelPlaceholder, searchPanelDefaultValue = props.searchPanelDefaultValue, searchPanelOnClickSearch = props.searchPanelOnClickSearch, dataAttributes = props.dataAttributes;
-    var _a = React.useState(isSearchOpen !== null && isSearchOpen !== void 0 ? isSearchOpen : false), isOpen = _a[0], setIsOpen = _a[1];
-    var _b = React.useState(searchPanelDefaultValue !== null && searchPanelDefaultValue !== void 0 ? searchPanelDefaultValue : ''), searchValue = _b[0], setSearchValue = _b[1];
-    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
-    React.useEffect(function () { return handleOpenState(isSearchOpen); }, [isSearchOpen]);
-    var handleOpenState = function (open) {
+    const { isSearchOpen, setIsSearchOpen, searchPanelPlaceholder, searchPanelDefaultValue, searchPanelOnClickSearch, dataAttributes } = props;
+    const [isOpen, setIsOpen] = React.useState(isSearchOpen ?? false);
+    const [searchValue, setSearchValue] = React.useState(searchPanelDefaultValue ?? '');
+    const dataIds = { ...defaultAttributes, ...dataAttributes };
+    React.useEffect(() => handleOpenState(isSearchOpen), [isSearchOpen]);
+    const handleOpenState = (open) => {
         setIsOpen(open);
         setIsSearchOpen(open);
     };
-    var toggleSearch = function (open) {
-        return function (event) {
-            if (event && event.type === 'keydown' &&
-                (event.key === 'Tab' ||
-                    event.key === 'Shift')) {
-                return;
-            }
-            handleOpenState(open);
-        };
+    const toggleSearch = (open) => (event) => {
+        if (event && event.type === EVENT_KEYS.Keydown &&
+            (event.key === EVENT_KEYS.Tab ||
+                event.key === EVENT_KEYS.Shift)) {
+            return;
+        }
+        handleOpenState(open);
     };
-    var handleSearch = function (event) {
-        if (event && event.type === 'keydown' &&
-            (event.key !== 'Enter')) {
+    const handleSearch = (event) => {
+        if (event && event.type === EVENT_KEYS.Keydown &&
+            (event.key !== EVENT_KEYS.Enter)) {
             return;
         }
         // Pass search value into the onClick function
         searchPanelOnClickSearch && searchPanelOnClickSearch(searchValue);
     };
-    return (_jsx(StyledSwipeableSearch, __assign({ "data-id": dataIds.MobileNavSearchPanel, anchor: 'bottom', open: isOpen, onClose: toggleSearch(false), onOpen: toggleSearch(true), swipeAreaWidth: 44, variant: 'persistent', ModalProps: {
+    return (_jsx(StyledSwipeableSearch, { "data-id": dataIds.MobileNavSearchPanel, anchor: 'bottom', open: isOpen, onClose: toggleSearch(false), onOpen: toggleSearch(true), swipeAreaWidth: 44, variant: 'persistent', ModalProps: {
             keepMounted: true
-        } }, { children: _jsx(StyledBox, { children: _jsx(Stack, __assign({ spacing: 2 }, { children: _jsx(animated.div, __assign({ style: useSpring({
+        }, children: _jsx(StyledBox, { children: _jsx(Stack, { spacing: 2, children: _jsx(animated.div, { style: useSpring({
                         from: { opacity: 0, y: 10 },
                         to: { opacity: 1, y: 0 },
                         delay: isSearchOpen ? 100 : 0,
                         reverse: !isSearchOpen,
-                        config: __assign(__assign({}, config.default), { mass: 1 })
-                    }) }, { children: _jsxs(FormControl, __assign({ fullWidth: true, variant: 'outlined', color: 'secondary', "data-id": dataIds.MobileNavSearchForm }, { children: [_jsx(StyledOutlinedInputLabel, __assign({ htmlFor: 'mobile-nav-search' }, { children: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search' })), _jsx(StyledOutlinedInput, { label: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search', id: 'mobile-nav-search', endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: _jsx(IconButton, __assign({ "aria-label": 'Search', edge: 'end', onClick: handleSearch }, { children: _jsx(Search, {}) })) })), onKeyDown: handleSearch, value: searchValue, onChange: function (event) { var _a; return setSearchValue((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); } })] })) })) })) }) })));
+                        config: {
+                            ...config.default,
+                            mass: 1
+                        }
+                    }), children: _jsxs(FormControl, { fullWidth: true, variant: 'outlined', color: 'secondary', "data-id": dataIds.MobileNavSearchForm, children: [_jsx(StyledOutlinedInputLabel, { htmlFor: 'mobile-nav-search', children: searchPanelPlaceholder ?? 'Search' }), _jsx(StyledOutlinedInput, { label: searchPanelPlaceholder ?? 'Search', id: 'mobile-nav-search', endAdornment: _jsx(InputAdornment, { position: 'end', children: _jsx(IconButton, { "aria-label": 'Search', edge: 'end', onClick: handleSearch, children: _jsx(Search, {}) }) }), onKeyDown: handleSearch, value: searchValue, onChange: event => setSearchValue(event?.target?.value) })] }) }) }) }) }));
 }

package/components/navigation/MobileNavigation/MobileNavigationSearchStyles.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 /// <reference types="react" />
-/// <reference types="trusted-types" />
 export declare const StyledSwipeableSearch: import("@emotion/styled").StyledComponent<import("@mui/material").SwipeableDrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
     className?: string | undefined;
@@ -18,6 +17,8 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         animationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
         animationName?: import("csstype").Property.AnimationName | undefined;
         animationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
+        animationRangeEnd?: import("csstype").Property.AnimationRangeEnd<string | number> | undefined;
+        animationRangeStart?: import("csstype").Property.AnimationRangeStart<string | number> | undefined;
         animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;
         animationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
         appearance?: import("csstype").Property.Appearance | undefined;
@@ -139,6 +140,10 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         fontStretch?: import("csstype").Property.FontStretch | undefined;
         fontStyle?: import("csstype").Property.FontStyle | undefined;
         fontSynthesis?: import("csstype").Property.FontSynthesis | undefined;
+        fontSynthesisPosition?: import("csstype").Property.FontSynthesisPosition | undefined;
+        fontSynthesisSmallCaps?: import("csstype").Property.FontSynthesisSmallCaps | undefined;
+        fontSynthesisStyle?: import("csstype").Property.FontSynthesisStyle | undefined;
+        fontSynthesisWeight?: import("csstype").Property.FontSynthesisWeight | undefined;
         fontVariant?: import("csstype").Property.FontVariant | undefined;
         fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
         fontVariantCaps?: import("csstype").Property.FontVariantCaps | undefined;
@@ -212,6 +217,7 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         maskRepeat?: import("csstype").Property.MaskRepeat | undefined;
         maskSize?: import("csstype").Property.MaskSize<string | number> | undefined;
         maskType?: import("csstype").Property.MaskType | undefined;
+        masonryAutoFlow?: import("csstype").Property.MasonryAutoFlow | undefined;
         mathDepth?: import("csstype").Property.MathDepth | undefined;
         mathShift?: import("csstype").Property.MathShift | undefined;
         mathStyle?: import("csstype").Property.MathStyle | undefined;
@@ -251,6 +257,7 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         overflowWrap?: import("csstype").Property.OverflowWrap | undefined;
         overflowX?: import("csstype").Property.OverflowX | undefined;
         overflowY?: import("csstype").Property.OverflowY | undefined;
+        overlay?: import("csstype").Property.Overlay | undefined;
         overscrollBehaviorBlock?: import("csstype").Property.OverscrollBehaviorBlock | undefined;
         overscrollBehaviorInline?: import("csstype").Property.OverscrollBehaviorInline | undefined;
         overscrollBehaviorX?: import("csstype").Property.OverscrollBehaviorX | undefined;
@@ -338,12 +345,15 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         textTransform?: import("csstype").Property.TextTransform | undefined;
         textUnderlineOffset?: import("csstype").Property.TextUnderlineOffset<string | number> | undefined;
         textUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
+        textWrap?: import("csstype").Property.TextWrap | undefined;
+        timelineScope?: import("csstype").Property.TimelineScope | undefined;
         top?: import("csstype").Property.Top<string | number> | undefined;
         touchAction?: import("csstype").Property.TouchAction | undefined;
         transform?: string | undefined;
         transformBox?: import("csstype").Property.TransformBox | undefined;
         transformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
         transformStyle?: import("csstype").Property.TransformStyle | undefined;
+        transitionBehavior?: import("csstype").Property.TransitionBehavior | undefined;
         transitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
         transitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
         transitionProperty?: import("csstype").Property.TransitionProperty | undefined;
@@ -352,9 +362,14 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         unicodeBidi?: import("csstype").Property.UnicodeBidi | undefined;
         userSelect?: import("csstype").Property.UserSelect | undefined;
         verticalAlign?: import("csstype").Property.VerticalAlign<string | number> | undefined;
+        viewTimelineAxis?: import("csstype").Property.ViewTimelineAxis | undefined;
+        viewTimelineInset?: import("csstype").Property.ViewTimelineInset<string | number> | undefined;
+        viewTimelineName?: import("csstype").Property.ViewTimelineName | undefined;
         viewTransitionName?: import("csstype").Property.ViewTransitionName | undefined;
         visibility?: import("csstype").Property.Visibility | undefined;
         whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
+        whiteSpaceCollapse?: import("csstype").Property.WhiteSpaceCollapse | undefined;
+        whiteSpaceTrim?: import("csstype").Property.WhiteSpaceTrim | undefined;
         widows?: import("csstype").Property.Widows | undefined;
         width?: import("csstype").Property.Width<string | number> | undefined;
         willChange?: import("csstype").Property.WillChange | undefined;
@@ -366,6 +381,7 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         zoom?: import("csstype").Property.Zoom | undefined;
         all?: import("csstype").Globals | undefined;
         animation?: import("csstype").Property.Animation<string & {}> | undefined;
+        animationRange?: import("csstype").Property.AnimationRange<string | number> | undefined;
         background?: import("csstype").Property.Background<string | number> | undefined;
         backgroundPosition?: import("csstype").Property.BackgroundPosition<string | number> | undefined;
         border?: import("csstype").Property.Border<string | number> | undefined;
@@ -430,6 +446,7 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         textDecoration?: import("csstype").Property.TextDecoration<string | number> | undefined;
         textEmphasis?: import("csstype").Property.TextEmphasis | undefined;
         transition?: import("csstype").Property.Transition<string & {}> | undefined;
+        viewTimeline?: import("csstype").Property.ViewTimeline | undefined;
         MozAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
         MozAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
         MozAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
@@ -439,7 +456,6 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         MozAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
         MozAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
         MozAppearance?: import("csstype").Property.MozAppearance | undefined;
-        MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
         MozBinding?: import("csstype").Property.MozBinding | undefined;
         MozBorderBottomColors?: import("csstype").Property.MozBorderBottomColors | undefined;
         MozBorderEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
@@ -466,20 +482,16 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         MozMarginStart?: import("csstype").Property.MarginInlineStart<string | number> | undefined;
         MozOrient?: import("csstype").Property.MozOrient | undefined;
         MozOsxFontSmoothing?: import("csstype").Property.FontSmooth<string | number> | undefined;
+        MozOutlineRadiusBottomleft?: import("csstype").Property.MozOutlineRadiusBottomleft<string | number> | undefined;
+        MozOutlineRadiusBottomright?: import("csstype").Property.MozOutlineRadiusBottomright<string | number> | undefined;
+        MozOutlineRadiusTopleft?: import("csstype").Property.MozOutlineRadiusTopleft<string | number> | undefined;
+        MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<string | number> | undefined;
         MozPaddingEnd?: import("csstype").Property.PaddingInlineEnd<string | number> | undefined;
         MozPaddingStart?: import("csstype").Property.PaddingInlineStart<string | number> | undefined;
-        MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
-        MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
         MozStackSizing?: import("csstype").Property.MozStackSizing | undefined;
         MozTabSize?: import("csstype").Property.TabSize<string | number> | undefined;
         MozTextBlink?: import("csstype").Property.MozTextBlink | undefined;
         MozTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
-        MozTransformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
-        MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
-        MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
-        MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
-        MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
-        MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
         MozUserFocus?: import("csstype").Property.MozUserFocus | undefined;
         MozUserModify?: import("csstype").Property.MozUserModify | undefined;
         MozUserSelect?: import("csstype").Property.UserSelect | undefined;
@@ -659,7 +671,7 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         MozBorderImage?: import("csstype").Property.BorderImage | undefined;
         MozColumnRule?: import("csstype").Property.ColumnRule<string | number> | undefined;
         MozColumns?: import("csstype").Property.Columns<string | number> | undefined;
-        MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
+        MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<string | number> | undefined;
         msContentZoomLimit?: import("csstype").Property.MsContentZoomLimit | undefined;
         msContentZoomSnap?: import("csstype").Property.MsContentZoomSnap | undefined;
         msFlex?: import("csstype").Property.Flex<string | number> | undefined;
@@ -717,6 +729,7 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         KhtmlLineBreak?: import("csstype").Property.LineBreak | undefined;
         KhtmlOpacity?: import("csstype").Property.Opacity | undefined;
         KhtmlUserSelect?: import("csstype").Property.UserSelect | undefined;
+        MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
         MozBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
         MozBackgroundInlinePolicy?: import("csstype").Property.BoxDecorationBreak | undefined;
         MozBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
@@ -738,17 +751,22 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         MozOpacity?: import("csstype").Property.Opacity | undefined;
         MozOutline?: import("csstype").Property.Outline<string | number> | undefined;
         MozOutlineColor?: import("csstype").Property.OutlineColor | undefined;
-        MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<string | number> | undefined;
-        MozOutlineRadiusBottomleft?: import("csstype").Property.MozOutlineRadiusBottomleft<string | number> | undefined;
-        MozOutlineRadiusBottomright?: import("csstype").Property.MozOutlineRadiusBottomright<string | number> | undefined;
-        MozOutlineRadiusTopleft?: import("csstype").Property.MozOutlineRadiusTopleft<string | number> | undefined;
-        MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<string | number> | undefined;
         MozOutlineStyle?: import("csstype").Property.OutlineStyle | undefined;
         MozOutlineWidth?: import("csstype").Property.OutlineWidth<string | number> | undefined;
+        MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
+        MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
         MozTextAlignLast?: import("csstype").Property.TextAlignLast | undefined;
         MozTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
         MozTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
         MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
+        MozTransform?: import("csstype").Property.Transform | undefined;
+        MozTransformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
+        MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
+        MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
+        MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
+        MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
+        MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
+        MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
         MozUserInput?: import("csstype").Property.MozUserInput | undefined;
         msImeMode?: import("csstype").Property.ImeMode | undefined;
         OAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
@@ -781,8 +799,6 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
         WebkitBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
         WebkitBoxOrient?: import("csstype").Property.BoxOrient | undefined;
         WebkitBoxPack?: import("csstype").Property.BoxPack | undefined;
-        WebkitScrollSnapPointsX?: import("csstype").Property.ScrollSnapPointsX | undefined;
-        WebkitScrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | undefined;
         alignmentBaseline?: import("csstype").Property.AlignmentBaseline | undefined;
         baselineShift?: import("csstype").Property.BaselineShift<string | number> | undefined;
         clipRule?: import("csstype").Property.ClipRule | undefined;

package/components/navigation/MobileNavigation/MobileNavigationSearchStyles.js

@@ -1,13 +1,51 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { SwipeableDrawer, OutlinedInput, InputLabel } from '../../../index';
 import { getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableSearch = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* Override the MUI default z-index of the Drawer component\n     to ensure that the drawer is always below the AppBar. */\n  z-index: ", ";\n\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1100;\n  }\n"], ["\n  /* Override the MUI default z-index of the Drawer component\n     to ensure that the drawer is always below the AppBar. */\n  z-index: ", ";\n\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1100;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; });
-export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", ";\n  height: 100%;\n"], ["\n  background-color: ", ";\n  padding: ", ";\n  height: 100%;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(3, 2.5, '80px', 2.5); });
-export var StyledOutlinedInputLabel = styled(InputLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n\n  &.MuiInputLabel-root.Mui-focused {\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n\n  &.MuiInputLabel-root.Mui-focused {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); });
-export var StyledOutlinedInput = styled(OutlinedInput)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .MuiInputBase-input {\n    color: ", ";\n  }\n\n  fieldset {\n    border-color: ", " !important;\n    transition: all 0.2s ease;\n  }\n\n  &.MuiOutlinedInput-root:hover fieldset,\n  &.MuiOutlinedInput-root:focus fieldset {\n    border-width: 2px;\n  }\n\n  .MuiIconButton-root {\n    color: ", ";\n  }\n"], ["\n  .MuiInputBase-input {\n    color: ", ";\n  }\n\n  fieldset {\n    border-color: ", " !important;\n    transition: all 0.2s ease;\n  }\n\n  &.MuiOutlinedInput-root:hover fieldset,\n  &.MuiOutlinedInput-root:focus fieldset {\n    border-width: 2px;\n  }\n\n  .MuiIconButton-root {\n    color: ", ";\n  }\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export const StyledSwipeableSearch = styled(SwipeableDrawer) `
+  /* Override the MUI default z-index of the Drawer component
+     to ensure that the drawer is always below the AppBar. */
+  z-index: ${props => props.theme.zIndex.appBar - 1};
+
+  .MuiPaper-root {
+    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+                0px 5px 8px 0px rgba(0, 0, 0, 0.14),
+                0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+    border: none;
+    border-radius: 20px 20px 0 0;
+    z-index: 1100;
+  }
+`;
+export const StyledBox = styled(animated.div) `
+  background-color: ${props => getOffsetNavigationBackground(props.theme)};
+  padding: ${props => props.theme.spacing(3, 2.5, '80px', 2.5)};
+  height: 100%;
+`;
+export const StyledOutlinedInputLabel = styled(InputLabel) `
+  background-color: ${props => getOffsetNavigationBackground(props.theme)};
+  color: ${props => getOffsetNavigationContrastText(props.theme)};
+
+  &.MuiInputLabel-root.Mui-focused {
+    background-color: ${props => getOffsetNavigationBackground(props.theme)};
+    color: ${props => getOffsetNavigationContrastText(props.theme)};
+  }
+`;
+export const StyledOutlinedInput = styled(OutlinedInput) `
+  .MuiInputBase-input {
+    color: ${props => getOffsetNavigationContrastText(props.theme)};
+  }
+
+  fieldset {
+    border-color: ${props => getOffsetNavigationContrastText(props.theme)} !important;
+    transition: all 0.2s ease;
+  }
+
+  &.MuiOutlinedInput-root:hover fieldset,
+  &.MuiOutlinedInput-root:focus fieldset {
+    border-width: 2px;
+  }
+
+  .MuiIconButton-root {
+    color: ${props => getOffsetNavigationContrastText(props.theme)};
+  }
+`;