npm - @citygross/components - Versions diffs - 0.7.108 → 0.7.110 - Mend

@citygross/components 0.7.108 → 0.7.110

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/build/@types/components/Chips/Chip.styles.d.ts CHANGED Viewed

@@ -9,10 +9,11 @@ export declare type TChip = {
 };
 export declare const BaseChip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TChip, never>;
 export declare const ChipCheckbox: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ChipLabel: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, ...props }: {
+export declare const ChipLabel: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, textAlign, ...props }: {
     children: import("react").ReactNode;
     size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
     color?: string | undefined;
     lineThrough?: boolean | undefined;
     fontWeight?: "regular" | "medium" | "semiBold" | "bold" | undefined;
+    textAlign?: "center" | "left" | "right" | undefined;
 }) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/Nav/Nav.styles.d.ts CHANGED Viewed

@@ -9,11 +9,14 @@ declare type TNavContainer = {
 declare type TNavSearchOverlay = {
     show?: boolean;
 };
+declare type TSearchIsOpen = {
+    isOpen?: boolean;
+};
 export declare const Nav: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNav, never>;
 export declare const NavContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNavContainer, never>;
 export declare const NavChildContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const NavMainLinks: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const NavDummySearchContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const NavSearchContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const NavMainLinks: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const NavDummySearchContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSearchIsOpen, never>;
+export declare const NavSearchContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSearchIsOpen, never>;
 export declare const SearchResultOverlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNavSearchOverlay, never>;
 export {};

package/build/@types/components/RadioBox/RadioBoxItem.d.ts CHANGED Viewed

@@ -10,5 +10,6 @@ export declare type TRadioBox = styles.TBaseRadioBox & {
     border?: string;
     flexDirection?: string;
     padding?: number;
+    hideRadioButton?: boolean;
 };
-export declare function RadioBoxItem({ radioColor, checked, isDisabled, name, align, setActive, background, border, boxShadow, children, flexDirection, padding }: TRadioBox): JSX.Element;
+export declare function RadioBoxItem({ radioColor, checked, isDisabled, name, align, setActive, background, border, boxShadow, children, flexDirection, padding, hideRadioButton }: TRadioBox): JSX.Element;

package/build/@types/components/RadioBox/RadioBoxList.styles.d.ts CHANGED Viewed

@@ -3,10 +3,11 @@ import { TBaseRadioBox } from './RadioBoxItem.styles';
 export declare const BaseRadioBoxList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox, never>;
 export declare const RadioBoxListChildContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox, never>;
 export declare const DividerPadding: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const RadioBoxListParagraph: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, ...props }: {
+export declare const RadioBoxListParagraph: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, textAlign, ...props }: {
     children: import("react").ReactNode;
     size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
     color?: string | undefined;
     lineThrough?: boolean | undefined;
     fontWeight?: "regular" | "medium" | "semiBold" | "bold" | undefined;
+    textAlign?: "center" | "left" | "right" | undefined;
 }) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts CHANGED Viewed

@@ -18,12 +18,13 @@ export declare const StyledH3: import("styled-components").StyledComponent<({ ch
     as: string;
 }, "as">;
 export declare const RadioSecondaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const DisableText: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, ...props }: {
+export declare const DisableText: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, textAlign, ...props }: {
     children: import("react").ReactNode;
     size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
     color?: string | undefined;
     lineThrough?: boolean | undefined;
     fontWeight?: "bold" | "regular" | "medium" | "semiBold" | undefined;
+    textAlign?: "center" | "left" | "right" | undefined;
 }) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
 export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWrapMobile, never>;
 export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/SearchBar/SearchBar.styles.d.ts CHANGED Viewed

@@ -12,8 +12,8 @@ declare type SearchResultContainerProps = {
     topPosition?: string;
     isOpen?: boolean;
 };
-export declare const SearchResultContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchResultContainerProps, never>;
-export declare const SearchRightLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SearchResultContainerProps, "isOpen">, never>;
+export declare const SearchResultContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, SearchResultContainerProps, never>;
+export declare const SearchRightLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchInputProps, never>;
 export declare const SearchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SearchInputProps, never>;
 export declare const MobileSearchFormContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/Typography/bodyText.stories.d.ts CHANGED Viewed

@@ -2,12 +2,13 @@ import React from 'react';
 import { Story } from '@storybook/react';
 import { BodyText } from '@citygross/typography';
 declare const _default: {
-    component: ({ size, color, children, lineThrough, fontWeight, ...props }: {
+    component: ({ size, color, children, lineThrough, fontWeight, textAlign, ...props }: {
         children: React.ReactNode;
         size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
         color?: string | undefined;
         lineThrough?: boolean | undefined;
         fontWeight?: "bold" | "regular" | "medium" | "semiBold" | undefined;
+        textAlign?: "center" | "left" | "right" | undefined;
     }) => JSX.Element;
     title: string;
     argTypes: {

package/build/cjs/components/src/components/Dropdown/Dropdown.js CHANGED Viewed

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var framerMotion = require('framer-motion');
 var React = require('react');
 var Dropdown_styles = require('./Dropdown.styles.js');
@@ -12,12 +11,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Dropdown = function (_a) {
     var isOpen = _a.isOpen, onClick = _a.onClick, dropdownHeader = _a.dropdownHeader, children = _a.children;
+    var variants = {
+        closed: {
+            height: 0,
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        },
+        open: {
+            height: 'auto',
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        }
+    };
     return (React__default["default"].createElement(Dropdown_styles.DropdownContainer, null,
         React__default["default"].createElement(Dropdown_styles.DropdownHeader, { onClick: onClick }, dropdownHeader),
-        React__default["default"].createElement(framerMotion.AnimatePresence, { initial: false }, isOpen && (React__default["default"].createElement(Dropdown_styles.DropdownChildContainer, { isOpen: isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: {
-                open: { height: 'auto' },
-                collapsed: { height: 0 }
-            }, transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] } }, children)))));
+        React__default["default"].createElement(Dropdown_styles.DropdownChildContainer, { isOpen: isOpen, variants: variants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, children)));
 };
 exports.Dropdown = Dropdown;

package/build/cjs/components/src/components/Dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/Nav/Nav.js CHANGED Viewed

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
+var designTokens = require('@citygross/design-tokens');
 var utils = require('@citygross/utils');
 var React = require('react');
 var SearchBar = require('../SearchBar/SearchBar.js');
@@ -12,14 +13,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Nav = function (_a) {
-    var _b;
+    var _b, _c;
     var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
     var navContainerRef = React.useRef(null);
     var searchInputRef = React.useRef(null);
     var searchInputMobileRef = React.useRef(null);
     var navRef = React.useRef(null);
     var width = utils.useWindowSize().width;
-    var _c = React.useState(0), elToRemove = _c[0], setElToRemove = _c[1];
+    var _d = React.useState(0), elToRemove = _d[0], setElToRemove = _d[1];
     var widthRef = React.useRef(null);
     var checkWidth = function () {
         var _a, _b;
@@ -53,17 +54,33 @@ var Nav = function (_a) {
             document.removeEventListener('click', function (e) { return handleClick(e); }, true);
         };
     }, [navContainerRef]);
+    var variants = {
+        closed: {
+            width: '0',
+            transition: {
+                duration: 0.1,
+                ease: 'linear'
+            }
+        },
+        open: {
+            width: 'auto',
+            transition: { duration: 0.1, ease: 'linear' }
+        }
+    };
     return (React__default["default"].createElement(Nav_styles.Nav, { height: height, topPosition: topPosition, ref: navRef },
         React__default["default"].createElement(Nav_styles.NavContainer, { maxWidth: maxWidth, ref: navContainerRef },
             logo,
             React__default["default"].createElement(Nav_styles.NavChildContainer, null,
-                searchIsOpen ? (React__default["default"].createElement(Nav_styles.NavSearchContainer, null,
-                    React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(Nav_styles.NavMainLinks, null, (_b = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _b === void 0 ? void 0 : _b.map(function (link) { return link; })),
+                React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Nav_styles.NavMainLinks, { variants: variants, animate: designTokens.theme.constants && width < ((_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
+                            ? false
+                            : searchIsOpen
+                                ? 'closed'
+                                : 'open' }, (_c = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _c === void 0 ? void 0 : _c.map(function (link) { return link; })),
                     React__default["default"].createElement(Nav_styles.NavDummySearchContainer, { onClick: function () {
                             onSearchClick && onSearchClick();
-                        } },
-                        React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder, value: searchValue, onChange: searchOnChange })))),
+                        }, isOpen: searchIsOpen },
+                        React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
                 rightContent)),
         React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen })));
 };

package/build/cjs/components/src/components/Nav/Nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/Nav/Nav.styles.js CHANGED Viewed

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.js');
+var framerMotion = require('framer-motion');
 var styled = require('styled-components');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var Nav = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    height: ", "px;\n  }\n"], ["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    height: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
-var NavContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var Nav = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  /* @media (min-width: ", "px) {\n    height: ", "px;\n  } */\n"], ["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  /* @media (min-width: ", "px) {\n    height: ", "px;\n  } */\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
+var NavContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"], ["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b, _c; return "".concat((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, "px"); });
 var NavChildContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  justify-content: flex-end;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  z-index: 20;\n"], ["\n  justify-content: flex-end;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  z-index: 20;\n"])));
-var NavMainLinks = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var NavDummySearchContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var NavSearchContainer = styled__default["default"](NavDummySearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
+var NavMainLinks = styled__default["default"](framerMotion.motion.div)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var NavDummySearchContainer = styled__default["default"](framerMotion.motion.div)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
+styled__default["default"](NavDummySearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 exports.Nav = Nav;
@@ -23,6 +24,5 @@ exports.NavChildContainer = NavChildContainer;
 exports.NavContainer = NavContainer;
 exports.NavDummySearchContainer = NavDummySearchContainer;
 exports.NavMainLinks = NavMainLinks;
-exports.NavSearchContainer = NavSearchContainer;
 exports.SearchResultOverlay = SearchResultOverlay;
 //# sourceMappingURL=Nav.styles.js.map

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.js CHANGED Viewed

@@ -13,9 +13,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function RadioBoxItem(_a) {
     var _b, _c, _d;
-    var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertGreen' : _e, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, _g = _a.background, background = _g === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _g, _h = _a.border, border = _h === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _h, _j = _a.boxShadow, boxShadow = _j === void 0 ? true : _j, children = _a.children, flexDirection = _a.flexDirection, _k = _a.padding, padding = _k === void 0 ? (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k;
+    var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertGreen' : _e, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, _g = _a.background, background = _g === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _g, _h = _a.border, border = _h === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _h, _j = _a.boxShadow, boxShadow = _j === void 0 ? true : _j, children = _a.children, flexDirection = _a.flexDirection, _k = _a.padding, padding = _k === void 0 ? (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k, _l = _a.hideRadioButton, hideRadioButton = _l === void 0 ? false : _l;
     return (React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow, flexDirection: flexDirection, padding: padding },
-        React__default["default"].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
+        !hideRadioButton && React__default["default"].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
         children));
 }

package/build/cjs/components/src/components/SearchBar/SearchBar.js CHANGED Viewed

@@ -13,7 +13,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var SearchBar = function (_a) {
-    var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, 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, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
+    var _b, _c;
+    var flexGrow = _a.flexGrow, isValid = _a.isValid, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _d, 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, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
     var width = utils.useWindowSize().width;
     var theme = styled.useTheme();
     React.useEffect(function () {
@@ -29,6 +30,36 @@ var SearchBar = function (_a) {
             }
         }
     }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current]);
+    var resultVariants = {
+        closed: {
+            height: '0',
+            transition: { duration: 0, ease: 'linear' }
+        },
+        open: {
+            height: 'auto',
+            transition: {
+                duration: theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
+                    ? 0
+                    : 0.2,
+                delay: theme.constants && width < ((_c = theme.constants) === null || _c === void 0 ? void 0 : _c.headerBreakpoint)
+                    ? 0
+                    : 0.1,
+                ease: 'linear'
+            }
+        }
+    };
+    var iconVariants = {
+        closed: {
+            opacity: 0,
+            display: 'none',
+            transition: { duration: 0, delay: 0, ease: 'linear' }
+        },
+        open: {
+            opacity: 1,
+            display: 'flex',
+            transition: { duration: 0.1, delay: 0.1, ease: 'linear' }
+        }
+    };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
             React__default["default"].createElement(SearchBar_styles.SearchForm, { hideInMobile: true, isOpen: isOpen, onSubmit: function (e) {
@@ -39,10 +70,10 @@ var SearchBar = function (_a) {
                 React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value })),
                 cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
                         e.stopPropagation();
-                    }, isOpen: isOpen }, cancelLabel)) : null),
+                    }, variants: iconVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, cancelLabel)) : null),
             React__default["default"].createElement(SearchBar_styles.MobileSearchIconContainer, null,
                 React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, icon)),
-            React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen },
+            React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen, variants: resultVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' },
                 React__default["default"].createElement(SearchBar_styles.MobileSearchFormContainer, null,
                     React__default["default"].createElement(SearchBar_styles.SearchForm, { onSubmit: function (e) {
                             e.preventDefault();
@@ -52,7 +83,7 @@ var SearchBar = function (_a) {
                         React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, inputSize: 'small', activeBorderColor: activeBorderColor, ref: searchInputMobileRef }, props, { value: value })),
                         cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
                                 e.stopPropagation();
-                            }, isOpen: isOpen }, cancelLabel)) : null)),
+                            } }, cancelLabel)) : null)),
                 children))));
 };

package/build/cjs/components/src/components/SearchBar/SearchBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js CHANGED Viewed

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.js');
+var framerMotion = require('framer-motion');
 var styled = require('styled-components');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var SearchResultContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'block' : 'none'); }, 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, _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)"); });
-var SearchRightLabel = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"], ["\n  display: ", ";\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'flex' : 'none'); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var SearchResultContainer = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"])), 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, _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)"); });
+var SearchRightLabel = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 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;"; });
 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\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  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: ", "px;\n  padding: ", "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  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
     var _a, _b;

package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js.map CHANGED Viewed

	@@ -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/build/cjs/components/src/components/SideModal/SideModal.js CHANGED Viewed

@@ -15,9 +15,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var SideModal = function (_a) {
     var _b, _c;
     var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
+    var ref = React.useRef(null);
     var domSafe = typeof document !== 'undefined';
     return domSafe
-        ? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { onClick: onBackdropClick, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+        ? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { ref: ref, onMouseDown: function (e) {
+                if (ref && e.target === (ref === null || ref === void 0 ? void 0 : ref.current)) {
+                    onBackdropClick();
+                }
+            }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
                 type: 'just'
             } },
             React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)

package/build/cjs/components/src/components/SideModal/SideModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/SlideInOutContainer/SlideInOutContainer.js CHANGED Viewed

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.js');
-var framerMotion = require('framer-motion');
 var React = require('react');
 var SlideInOutContainer_styles = require('./SlideInOutContainer.styles.js');
@@ -13,9 +12,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var SlideInOutContainer = function (_a) {
     var _b = _a.slideFrom, slideFrom = _b === void 0 ? 'right' : _b, isVisible = _a.isVisible, isInitial = _a.isInitial, fullHeight = _a.fullHeight, children = _a.children, props = _tslib.__rest(_a, ["slideFrom", "isVisible", "isInitial", "fullHeight", "children"]);
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SlideInOutContainer_styles.SideModalContainer, _tslib.__assign({ slideFrom: slideFrom, transition: { type: 'just' }, onClick: function (e) { return e.stopPropagation(); }, fullHeight: fullHeight, initial: {
-            x: isInitial ? 0 : slideFrom === 'left' ? '-100%' : '100%'
-        }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, props), children))));
+    var iconVariants = {
+        show: {
+            x: 0,
+            transition: { duration: isInitial ? 0 : 0.3, delay: 0, ease: 'linear' }
+        },
+        hide: {
+            x: isInitial ? 0 : slideFrom === 'left' ? '-100%' : '100%',
+            transition: { duration: 0.3, delay: 0, ease: 'linear' }
+        }
+    };
+    return (React__default["default"].createElement(SlideInOutContainer_styles.SideModalContainer, _tslib.__assign({ slideFrom: slideFrom, onClick: function (e) { return e.stopPropagation(); }, fullHeight: fullHeight, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: isInitial ? 'show' : 'hide', animate: isVisible ? 'show' : 'hide', variants: iconVariants }, props), children));
 };
 exports.SlideInOutContainer = SlideInOutContainer;

package/build/cjs/components/src/components/SlideInOutContainer/SlideInOutContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SlideInOutContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"SlideInOutContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/Dropdown/Dropdown.js CHANGED Viewed

@@ -1,15 +1,21 @@
-import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 import { DropdownContainer, DropdownHeader, DropdownChildContainer } from './Dropdown.styles.js';
 var Dropdown = function (_a) {
     var isOpen = _a.isOpen, onClick = _a.onClick, dropdownHeader = _a.dropdownHeader, children = _a.children;
+    var variants = {
+        closed: {
+            height: 0,
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        },
+        open: {
+            height: 'auto',
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        }
+    };
     return (React.createElement(DropdownContainer, null,
         React.createElement(DropdownHeader, { onClick: onClick }, dropdownHeader),
-        React.createElement(AnimatePresence, { initial: false }, isOpen && (React.createElement(DropdownChildContainer, { isOpen: isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: {
-                open: { height: 'auto' },
-                collapsed: { height: 0 }
-            }, transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] } }, children)))));
+        React.createElement(DropdownChildContainer, { isOpen: isOpen, variants: variants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, children)));
 };
 export { Dropdown };

package/build/es/components/src/components/Dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/Nav/Nav.js CHANGED Viewed

@@ -1,17 +1,18 @@
+import { theme } from '@citygross/design-tokens';
 import { useWindowSize } from '@citygross/utils';
 import React, { useRef, useState, useEffect } from 'react';
 import { SearchBar } from '../SearchBar/SearchBar.js';
-import { Nav as Nav$1, NavContainer, NavChildContainer, NavSearchContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
+import { Nav as Nav$1, NavContainer, NavChildContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
 var Nav = function (_a) {
-    var _b;
+    var _b, _c;
     var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
     var navContainerRef = useRef(null);
     var searchInputRef = useRef(null);
     var searchInputMobileRef = useRef(null);
     var navRef = useRef(null);
     var width = useWindowSize().width;
-    var _c = useState(0), elToRemove = _c[0], setElToRemove = _c[1];
+    var _d = useState(0), elToRemove = _d[0], setElToRemove = _d[1];
     var widthRef = useRef(null);
     var checkWidth = function () {
         var _a, _b;
@@ -45,17 +46,33 @@ var Nav = function (_a) {
             document.removeEventListener('click', function (e) { return handleClick(e); }, true);
         };
     }, [navContainerRef]);
+    var variants = {
+        closed: {
+            width: '0',
+            transition: {
+                duration: 0.1,
+                ease: 'linear'
+            }
+        },
+        open: {
+            width: 'auto',
+            transition: { duration: 0.1, ease: 'linear' }
+        }
+    };
     return (React.createElement(Nav$1, { height: height, topPosition: topPosition, ref: navRef },
         React.createElement(NavContainer, { maxWidth: maxWidth, ref: navContainerRef },
             logo,
             React.createElement(NavChildContainer, null,
-                searchIsOpen ? (React.createElement(NavSearchContainer, null,
-                    React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))) : (React.createElement(React.Fragment, null,
-                    React.createElement(NavMainLinks, null, (_b = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _b === void 0 ? void 0 : _b.map(function (link) { return link; })),
+                React.createElement(React.Fragment, null,
+                    React.createElement(NavMainLinks, { variants: variants, animate: theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
+                            ? false
+                            : searchIsOpen
+                                ? 'closed'
+                                : 'open' }, (_c = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _c === void 0 ? void 0 : _c.map(function (link) { return link; })),
                     React.createElement(NavDummySearchContainer, { onClick: function () {
                             onSearchClick && onSearchClick();
-                        } },
-                        React.createElement(SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder, value: searchValue, onChange: searchOnChange })))),
+                        }, isOpen: searchIsOpen },
+                        React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
                 rightContent)),
         React.createElement(SearchResultOverlay, { show: searchIsOpen })));
 };

package/build/es/components/src/components/Nav/Nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/Nav/Nav.styles.js CHANGED Viewed

@@ -1,14 +1,15 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
-var Nav = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    height: ", "px;\n  }\n"], ["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    height: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
-var NavContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var Nav = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  /* @media (min-width: ", "px) {\n    height: ", "px;\n  } */\n"], ["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  /* @media (min-width: ", "px) {\n    height: ", "px;\n  } */\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
+var NavContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"], ["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b, _c; return "".concat((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, "px"); });
 var NavChildContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: flex-end;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  z-index: 20;\n"], ["\n  justify-content: flex-end;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  z-index: 20;\n"])));
-var NavMainLinks = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var NavDummySearchContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var NavSearchContainer = styled(NavDummySearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
+var NavMainLinks = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var NavDummySearchContainer = styled(motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
+styled(NavDummySearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
-export { Nav, NavChildContainer, NavContainer, NavDummySearchContainer, NavMainLinks, NavSearchContainer, SearchResultOverlay };
+export { Nav, NavChildContainer, NavContainer, NavDummySearchContainer, NavMainLinks, SearchResultOverlay };
 //# sourceMappingURL=Nav.styles.js.map

package/build/es/components/src/components/Nav/Nav.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/build/es/components/src/components/RadioBox/RadioBoxItem.js CHANGED Viewed

@@ -5,9 +5,9 @@ import { BaseRadioBox } from './RadioBoxItem.styles.js';
 function RadioBoxItem(_a) {
     var _b, _c, _d;
-    var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertGreen' : _e, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, _g = _a.background, background = _g === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white : _g, _h = _a.border, border = _h === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.border : _h, _j = _a.boxShadow, boxShadow = _j === void 0 ? true : _j, children = _a.children, flexDirection = _a.flexDirection, _k = _a.padding, padding = _k === void 0 ? (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k;
+    var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertGreen' : _e, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, _g = _a.background, background = _g === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white : _g, _h = _a.border, border = _h === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.border : _h, _j = _a.boxShadow, boxShadow = _j === void 0 ? true : _j, children = _a.children, flexDirection = _a.flexDirection, _k = _a.padding, padding = _k === void 0 ? (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k, _l = _a.hideRadioButton, hideRadioButton = _l === void 0 ? false : _l;
     return (React.createElement(BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow, flexDirection: flexDirection, padding: padding },
-        React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
+        !hideRadioButton && React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
         children));
 }

package/build/es/components/src/components/SearchBar/SearchBar.js CHANGED Viewed

@@ -5,7 +5,8 @@ import { useTheme } from 'styled-components';
 import { SearchBarContainer, SearchForm, SearchLeftIcon, SearchInput, SearchRightLabel, MobileSearchIconContainer, SearchResultContainer, MobileSearchFormContainer } from './SearchBar.styles.js';
 var SearchBar = function (_a) {
-    var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, 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, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
+    var _b, _c;
+    var flexGrow = _a.flexGrow, isValid = _a.isValid, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _d, 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, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
     var width = useWindowSize().width;
     var theme = useTheme();
     useEffect(function () {
@@ -21,6 +22,36 @@ var SearchBar = function (_a) {
             }
         }
     }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current]);
+    var resultVariants = {
+        closed: {
+            height: '0',
+            transition: { duration: 0, ease: 'linear' }
+        },
+        open: {
+            height: 'auto',
+            transition: {
+                duration: theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
+                    ? 0
+                    : 0.2,
+                delay: theme.constants && width < ((_c = theme.constants) === null || _c === void 0 ? void 0 : _c.headerBreakpoint)
+                    ? 0
+                    : 0.1,
+                ease: 'linear'
+            }
+        }
+    };
+    var iconVariants = {
+        closed: {
+            opacity: 0,
+            display: 'none',
+            transition: { duration: 0, delay: 0, ease: 'linear' }
+        },
+        open: {
+            opacity: 1,
+            display: 'flex',
+            transition: { duration: 0.1, delay: 0.1, ease: 'linear' }
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
             React.createElement(SearchForm, { hideInMobile: true, isOpen: isOpen, onSubmit: function (e) {
@@ -31,10 +62,10 @@ var SearchBar = function (_a) {
                 React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value })),
                 cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
                         e.stopPropagation();
-                    }, isOpen: isOpen }, cancelLabel)) : null),
+                    }, variants: iconVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, cancelLabel)) : null),
             React.createElement(MobileSearchIconContainer, null,
                 React.createElement(SearchLeftIcon, null, icon)),
-            React.createElement(SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen },
+            React.createElement(SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen, variants: resultVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' },
                 React.createElement(MobileSearchFormContainer, null,
                     React.createElement(SearchForm, { onSubmit: function (e) {
                             e.preventDefault();
@@ -44,7 +75,7 @@ var SearchBar = function (_a) {
                         React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, inputSize: 'small', activeBorderColor: activeBorderColor, ref: searchInputMobileRef }, props, { value: value })),
                         cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
                                 e.stopPropagation();
-                            }, isOpen: isOpen }, cancelLabel)) : null)),
+                            } }, cancelLabel)) : null)),
                 children))));
 };

package/build/es/components/src/components/SearchBar/SearchBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/SearchBar/SearchBar.styles.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
-var SearchResultContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'block' : 'none'); }, 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, _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)"); });
-var SearchRightLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"], ["\n  display: ", ";\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'flex' : 'none'); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var SearchResultContainer = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"])), 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, _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)"); });
+var SearchRightLabel = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 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;"; });
 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\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  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: ", "px;\n  padding: ", "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  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
     var _a, _b;

package/build/es/components/src/components/SearchBar/SearchBar.styles.js.map CHANGED Viewed

	@@ -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/build/es/components/src/components/SideModal/SideModal.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { SideModalOverlay, SideModalContainer } from './SideModal.styles.js';
@@ -7,9 +7,14 @@ import { theme } from '@citygross/design-tokens';
 var SideModal = function (_a) {
     var _b, _c;
     var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
+    var ref = useRef(null);
     var domSafe = typeof document !== 'undefined';
     return domSafe
-        ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { onClick: onBackdropClick, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+        ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { ref: ref, onMouseDown: function (e) {
+                if (ref && e.target === (ref === null || ref === void 0 ? void 0 : ref.current)) {
+                    onBackdropClick();
+                }
+            }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
                 type: 'just'
             } },
             React.createElement(SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)

package/build/es/components/src/components/SideModal/SideModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/SlideInOutContainer/SlideInOutContainer.js CHANGED Viewed

@@ -1,13 +1,20 @@
 import { __rest, __assign } from '../../../../_virtual/_tslib.js';
-import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 import { SideModalContainer } from './SlideInOutContainer.styles.js';
 var SlideInOutContainer = function (_a) {
     var _b = _a.slideFrom, slideFrom = _b === void 0 ? 'right' : _b, isVisible = _a.isVisible, isInitial = _a.isInitial, fullHeight = _a.fullHeight, children = _a.children, props = __rest(_a, ["slideFrom", "isVisible", "isInitial", "fullHeight", "children"]);
-    return (React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalContainer, __assign({ slideFrom: slideFrom, transition: { type: 'just' }, onClick: function (e) { return e.stopPropagation(); }, fullHeight: fullHeight, initial: {
-            x: isInitial ? 0 : slideFrom === 'left' ? '-100%' : '100%'
-        }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, props), children))));
+    var iconVariants = {
+        show: {
+            x: 0,
+            transition: { duration: isInitial ? 0 : 0.3, delay: 0, ease: 'linear' }
+        },
+        hide: {
+            x: isInitial ? 0 : slideFrom === 'left' ? '-100%' : '100%',
+            transition: { duration: 0.3, delay: 0, ease: 'linear' }
+        }
+    };
+    return (React.createElement(SideModalContainer, __assign({ slideFrom: slideFrom, onClick: function (e) { return e.stopPropagation(); }, fullHeight: fullHeight, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: isInitial ? 'show' : 'hide', animate: isVisible ? 'show' : 'hide', variants: iconVariants }, props), children));
 };
 export { SlideInOutContainer };

package/build/es/components/src/components/SlideInOutContainer/SlideInOutContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SlideInOutContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"SlideInOutContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.108",
+  "version": "0.7.110",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -65,11 +65,11 @@
     "@citygross/design-tokens": "^0.2.31",
     "@citygross/icons": "^0.1.7",
     "@citygross/react-use-bg-wizard": "^0.0.8",
-    "@citygross/typography": "^0.0.60",
+    "@citygross/typography": "^0.0.61",
     "@citygross/utils": "^0.0.22",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "2591fd960602c98533c3aefdfa72ff5c248308d6"
+  "gitHead": "56d50cbabf5990d59e717bbb451c2ab2eea986bf"
 }