@citygross/components 0.14.7 → 0.14.9

package/build/@types/components/RadioListItem/RadioListItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import * as styles from './RadioListItem.styles';
 export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
     onClick: (value: string | number) => void;
@@ -14,4 +14,4 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
     additionalInfo?: JSX.Element;
     ariaLabel?: string;
 };
-export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children, ariaLabel }: TRadioListItemProps): JSX.Element;
+export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children, ariaLabel }: TRadioListItemProps): React.JSX.Element;

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

@@ -16,11 +16,11 @@ export declare type TWrapMobile = {
 };
 export declare const BaseRadioListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadiolistItemcontainer, never>;
 export declare const BaseRadioItemLeftWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioItemInputWrapper, never>;
-export declare const StyledH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").TH3) => JSX.Element, import("styled-components").DefaultTheme, {
+export declare const StyledH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").TH3) => import("react").JSX.Element, import("styled-components").DefaultTheme, {
     as: string;
 } & TBaseRadioItemInputWrapper, "as">;
 export declare const RadioRightWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const DisableText: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
+export declare const DisableText: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => import("react").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>;
 export declare const LabelContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/RippleContainer/RippleContainer.d.ts

@@ -3,4 +3,4 @@ export declare type TRippleContainer = {
     color?: string;
     children: React.ReactNode;
 };
-export declare function RippleContainer({ color, children }: TRippleContainer): JSX.Element;
+export declare function RippleContainer({ color, children }: TRippleContainer): React.JSX.Element;

package/build/@types/components/RippleContainer/RippleContainer.styles.d.ts

@@ -1,4 +1,4 @@
 export declare type TRipple = {
     color?: string;
 };
-export declare const RippleContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const RippleContainer: import("styled-components").StyledComponent<import("framer-motion/dist/types.d-CQ4vRM6h").F<HTMLDivElement, import("framer-motion/dist/types.d-CQ4vRM6h").b<"div">>, import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/ScreenReader/ScreenReader.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 export declare type TScreenReader = {
     string: string;
 } & React.HTMLAttributes<HTMLSpanElement>;
-export declare const ScreenReader: ({ string, ...props }: TScreenReader) => JSX.Element;
+export declare const ScreenReader: ({ string, ...props }: TScreenReader) => React.JSX.Element;

package/build/@types/components/SearchListItem/SearchListItem.d.ts

@@ -15,4 +15,4 @@ export declare type TSearchListItem = {
     priceTag: TPriceTag;
     showMax: boolean;
 };
-export declare const SearchListItem: ({ button, fallBackImage, item, loading, markings, priceTag, showMax }: TSearchListItem) => JSX.Element;
+export declare const SearchListItem: ({ button, fallBackImage, item, loading, markings, priceTag, showMax }: TSearchListItem) => React.JSX.Element;

package/build/@types/components/SelectButton/SelectButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare type TSelectItem = {
     label: string;
     onClick: () => void;
@@ -8,4 +8,4 @@ export declare type TSelectButton = {
     selected: number;
     width?: number;
 };
-export declare const SelectButton: ({ items, selected, width }: TSelectButton) => JSX.Element;
+export declare const SelectButton: ({ items, selected, width }: TSelectButton) => React.JSX.Element;

package/build/@types/components/SideModal/SideModal.styles.d.ts

@@ -9,6 +9,6 @@ declare type TSideMoodalOverlay = {
     overlayBackground: string;
     maxHeight?: string;
 };
-export declare const SideModalOverlay: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSideMoodalOverlay, never>;
-export declare const SideModalContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSideModalContainer, never>;
+export declare const SideModalOverlay: import("styled-components").StyledComponent<import("framer-motion/dist/types.d-CQ4vRM6h").F<HTMLDivElement, import("framer-motion/dist/types.d-CQ4vRM6h").b<"div">>, import("styled-components").DefaultTheme, TSideMoodalOverlay, never>;
+export declare const SideModalContainer: import("styled-components").StyledComponent<import("framer-motion/dist/types.d-CQ4vRM6h").F<HTMLDivElement, import("framer-motion/dist/types.d-CQ4vRM6h").b<"div">>, import("styled-components").DefaultTheme, TSideModalContainer, never>;
 export {};

package/build/@types/components/SkipTo/SkipTo.d.ts

@@ -4,5 +4,5 @@ declare type TSkipTo = {
     selector: string;
     text: string;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const SkipTo: ({ elementClick, selector, text, ...props }: TSkipTo) => JSX.Element;
+export declare const SkipTo: ({ elementClick, selector, text, ...props }: TSkipTo) => React.JSX.Element;
 export {};

package/build/@types/components/SlideInOutContainer/SlideInOutContainer.d.ts

@@ -6,4 +6,4 @@ export declare type TSlideInOutContainer = {
     isInitial?: boolean;
     fullHeight?: boolean;
 };
-export declare const SlideInOutContainer: ({ slideFrom, isVisible, isInitial, fullHeight, children, ...props }: TSlideInOutContainer) => JSX.Element;
+export declare const SlideInOutContainer: ({ slideFrom, isVisible, isInitial, fullHeight, children, ...props }: TSlideInOutContainer) => React.JSX.Element;

package/build/@types/components/SlideInOutContainer/SlideInOutContainer.styles.d.ts

@@ -4,5 +4,5 @@ declare type TSideModalContainer = {
     maxWidth?: string;
     fullHeight?: boolean;
 };
-export declare const SideModalContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSideModalContainer, never>;
+export declare const SideModalContainer: import("styled-components").StyledComponent<import("framer-motion/dist/types.d-CQ4vRM6h").F<HTMLDivElement, import("framer-motion/dist/types.d-CQ4vRM6h").b<"div">>, import("styled-components").DefaultTheme, TSideModalContainer, never>;
 export {};

package/build/@types/components/Spinner/Spinner.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 export declare type TSpinner = {
     borderColor?: string;
     spinnerColor?: string;
     animationSpeedMs?: number;
     size?: number;
 };
-export declare const Spinner: ({ spinnerColor, borderColor, animationSpeedMs, size, ...props }: TSpinner) => JSX.Element;
+export declare const Spinner: ({ spinnerColor, borderColor, animationSpeedMs, size, ...props }: TSpinner) => React.JSX.Element;

package/build/@types/components/Stepper/StepperList.d.ts

@@ -15,4 +15,4 @@ export declare type TStepperList = styles.TBaseStepper & {
     setCurrent: (item: IStepperItem) => void;
     maxWidth?: number;
 };
-export declare function StepperList({ steps, current, setCurrent, maxWidth, children }: TStepperList): JSX.Element;
+export declare function StepperList({ steps, current, setCurrent, maxWidth, children }: TStepperList): React.JSX.Element;

package/build/@types/components/Stepper/StepperListItem.d.ts

@@ -8,4 +8,4 @@ export declare type TStepperListItem = styles.TBaseStepper & {
     onClick?: () => void;
     firstChild?: boolean;
 };
-export declare function StepperListItem({ active, firstChild, step, onClick, disabled, complete, tooltip, children }: TStepperListItem): JSX.Element;
+export declare function StepperListItem({ active, firstChild, step, onClick, disabled, complete, tooltip, children }: TStepperListItem): React.JSX.Element;

package/build/@types/components/StepperMobile/StepperMobile.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { IStepperItem } from '../Stepper/StepperList';
 export declare type TStepperMobile = {
     buttonText: string;
@@ -7,4 +7,4 @@ export declare type TStepperMobile = {
     setPrevious: () => void;
     steps: IStepperItem[];
 };
-export declare const StepperMobile: ({ buttonText, current, setCurrent, setPrevious, steps }: TStepperMobile) => JSX.Element;
+export declare const StepperMobile: ({ buttonText, current, setCurrent, setPrevious, steps }: TStepperMobile) => React.JSX.Element;

package/build/@types/components/Tag/Tag.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 export declare type TTag = {
     isDetailPage?: boolean;
     string: string;
 };
-export declare const Tag: ({ isDetailPage, string }: TTag) => JSX.Element;
+export declare const Tag: ({ isDetailPage, string }: TTag) => React.JSX.Element;

package/build/@types/components/Timeline/Timeline.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare type TTimelineItem = {
     primaryText: string;
     time: string;
@@ -19,4 +19,4 @@ export declare type TTimeline = {
     color?: string;
     reversed?: boolean;
 };
-export declare function Timeline({ items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, reversed, completedColor }: TTimeline): JSX.Element;
+export declare function Timeline({ items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, reversed, completedColor }: TTimeline): React.JSX.Element;

package/build/@types/components/Timeline/Timeline.styles.d.ts

@@ -6,6 +6,6 @@ declare type TBaseTimelineList = {
 };
 export declare const BaseTimelineItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const BaseTimeline: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const TimeLineH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").TH3) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const TimeLineH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").TH3) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const BaseTimelineList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseTimelineList, never>;
 export {};

package/build/@types/components/ToolTip/ToolTip.d.ts

@@ -4,4 +4,4 @@ export declare type TToolTip = {
     width?: string;
     align?: 'left' | 'center' | 'right';
 };
-export declare function ToolTip({ children, width, align }: TToolTip): JSX.Element;
+export declare function ToolTip({ children, width, align }: TToolTip): React.JSX.Element;

package/build/@types/components/ToolTipDialog/ToolTipDialog.d.ts

@@ -3,4 +3,4 @@ export declare type TToolTipDialog = {
     onBottom?: boolean;
     toggle: () => void;
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare const ToolTipDialog: ({ children, id, onBottom, toggle }: TToolTipDialog) => JSX.Element;
+export declare const ToolTipDialog: ({ children, id, onBottom, toggle }: TToolTipDialog) => React.JSX.Element;

package/build/@types/components/WarningLabel/WarningLabel.d.ts

@@ -4,4 +4,4 @@ export declare type TWarningLabel = {
     background: string;
     icon?: React.ReactNode;
 };
-export declare function WarningLabel({ text, background, icon }: TWarningLabel): JSX.Element;
+export declare function WarningLabel({ text, background, icon }: TWarningLabel): React.JSX.Element;

package/build/@types/components/WarningLabel/WarningLabel.styles.d.ts

@@ -5,4 +5,4 @@ export declare type TWarningIndicator = {
 };
 export declare const WarningIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWarningIndicator, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const BodyTextStyled: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const BodyTextStyled: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/build/@types/containers/TwoColumnsContainer/TwoColumnsPageContainer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export declare type TTwoColumnsPageContainer = {
     leftColumn: ReactNode;
     rightColumn: ReactNode;
@@ -9,4 +9,4 @@ export declare type TTwoColumnsPageContainer = {
     hideRightColumnBefore?: number;
     noCollapsable?: boolean;
 };
-export declare const TwoColumnsPageContainer: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, hideRightColumnBefore, breakpoint, noCollapsable, ...props }: TTwoColumnsPageContainer) => JSX.Element;
+export declare const TwoColumnsPageContainer: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, hideRightColumnBefore, breakpoint, noCollapsable, ...props }: TTwoColumnsPageContainer) => React.JSX.Element;

package/build/cjs/components/src/components/Accordion/Accordion.js

@@ -13,11 +13,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Accordion = function (_a) {
     var _b, _c;
-    var children = _a.children, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d, id = _a.id, onToggle = _a.onToggle, title = _a.title;
+    var children = _a.children, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d, _e = _a.hideBottomBorder, hideBottomBorder = _e === void 0 ? false : _e, id = _a.id, onToggle = _a.onToggle, title = _a.title;
     // isOpen drives animation/state; isCollapsed toggles hidden after close ends.
-    var _e = React.useState(defaultOpen), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = React.useState(!defaultOpen), isCollapsed = _f[0], setIsCollapsed = _f[1];
-    var _g = React.useState(0), contentHeight = _g[0], setContentHeight = _g[1];
+    var _f = React.useState(defaultOpen), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = React.useState(!defaultOpen), isCollapsed = _g[0], setIsCollapsed = _g[1];
+    var _h = React.useState(0), contentHeight = _h[0], setContentHeight = _h[1];
     var contentRef = React.useRef(null);
     var headerId = "".concat(id, "-header");
     var contentId = "".concat(id, "-content");
@@ -49,7 +49,7 @@ var Accordion = function (_a) {
         else if (isOpen)
             setIsOpen(false);
     }, [defaultOpen]);
-    return (React__default["default"].createElement(Accordion_styles.Container, null,
+    return (React__default["default"].createElement(Accordion_styles.Container, { hideBottomBorder: hideBottomBorder },
         React__default["default"].createElement(Accordion_styles.Header, { "aria-controls": contentId, "aria-expanded": isOpen, id: headerId, onClick: function () {
                 if (isOpen) {
                     setIsOpen(false);

package/build/cjs/components/src/components/Accordion/Accordion.styles.js

@@ -9,12 +9,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n"], ["\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
+var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border-top: 1px solid ", ";\n  border-bottom: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  border-bottom: ", ";\n"])), function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.light;
+}, function (_a) {
+    var _b;
+    var hideBottomBorder = _a.hideBottomBorder, theme = _a.theme;
+    return hideBottomBorder ? 'none' : "1px solid ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.light);
 });
-var Header = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"], ["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"])), function (_a) {
+var Header = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: ", "px 0;\n  text-align: left;\n  width: 100%;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  background: none;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: ", "px 0;\n  text-align: left;\n  width: 100%;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
+}, function (_a) {
     var _b, _c;
     var theme = _a.theme;
     return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3;
@@ -23,22 +31,18 @@ var Header = styled__default["default"].button(templateObject_2 || (templateObje
     var theme = _a.theme;
     return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight) === null || _c === void 0 ? void 0 : _c.medium;
 }, function (_a) {
-    var _b, _c;
+    var _b;
     var theme = _a.theme;
-    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.md, "px");
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
 });
 var Chevron = styled__default["default"].span(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  transition: transform 200ms ease;\n\n  &[data-state='open'] {\n    transform: rotate(180deg);\n  }\n"], ["\n  display: inline-flex;\n  transition: transform 200ms ease;\n\n  &[data-state='open'] {\n    transform: rotate(180deg);\n  }\n"])));
-var Content = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition:\n    max-height 220ms ease,\n    opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"], ["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition:\n    max-height 220ms ease,\n    opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"])), function (_a) {
+var Content = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  transition:\n    max-height 220ms ease,\n    opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"], ["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  transition:\n    max-height 220ms ease,\n    opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"])), function (_a) {
     var maxHeight = _a.maxHeight;
     return maxHeight;
-}, function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.md;
 }, function (_a) {
     var _b, _c, _d;
     var theme = _a.theme;
-    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.md, "px ").concat((_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.md, "px");
+    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xxxs, "px ").concat((_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.md, "px");
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 

package/build/cjs/components/src/components/Accordion/Accordion.styles.js.map

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

package/build/cjs/components/src/components/Button/SaveButton.js

@@ -12,16 +12,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var SaveButton = function (_a) {
-    var _b, _c;
-    var afterSaveText = _a.afterSaveText, ariaLabel = _a.ariaLabel, beforeSaveText = _a.beforeSaveText, _d = _a.childGap, childGap = _d === void 0 ? 4 : _d, _e = _a.color, color = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.secondary) !== null && _c !== void 0 ? _c : '' : _e, fullWidth = _a.fullWidth, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onAnimationComplete = _a.onAnimationComplete, onClick = _a.onClick, _f = _a.onSavedColor, onSavedColor = _f === void 0 ? 'alertGreen' : _f, saved = _a.saved, _g = _a.size, size = _g === void 0 ? 'large' : _g, xsSize = _a.xsSize;
+    var _b, _c, _d;
+    var afterSaveText = _a.afterSaveText, ariaLabel = _a.ariaLabel, beforeSaveText = _a.beforeSaveText, _e = _a.childGap, childGap = _e === void 0 ? 4 : _e, _f = _a.color, color = _f === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.secondary) !== null && _c !== void 0 ? _c : '' : _f, fullWidth = _a.fullWidth, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onAnimationComplete = _a.onAnimationComplete, onClick = _a.onClick, _g = _a.onSavedColor, onSavedColor = _g === void 0 ? 'alertGreen' : _g, saved = _a.saved, _h = _a.size, size = _h === void 0 ? 'large' : _h, xsSize = _a.xsSize;
     React.useEffect(function () {
         var _a;
+        var timeoutId;
         if (!loading && saved) {
-            setTimeout(function () {
+            timeoutId = setTimeout(function () {
                 onAnimationComplete();
             }, (_a = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.animations) === null || _a === void 0 ? void 0 : _a.saveButtonAnimationComplete);
         }
-    }, [saved]);
+        return function () {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+        };
+    }, [saved, loading, (_d = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.animations) === null || _d === void 0 ? void 0 : _d.saveButtonAnimationComplete]);
     return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { "aria-label": ariaLabel, color: saved ? onSavedColor : color, disabled: loading || isDisabled, fullWidth: fullWidth, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return onClick(e); }, size: size },
         loading && (React__default["default"].createElement(Button_styles.Loading, null,
             React__default["default"].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },

package/build/cjs/components/src/components/Button/SaveButton.js.map

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

package/build/cjs/components/src/components/FormElements/Switch/Switch.styles.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 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 SwitchWrapper = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"], ["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"])));
+var SwitchWrapper = styled__default["default"](react.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"], ["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"])));
 var Switch = styled__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  width: 20px;\n  height: 20px;\n  border-radius: 100px;\n  display: inline-block;\n"], ["\n  background: ", ";\n  width: 20px;\n  height: 20px;\n  border-radius: 100px;\n  display: inline-block;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
 var CustomSwitch = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 100px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  z-index: 1;\n  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 100px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  z-index: 1;\n  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; });
 var SwitchInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  cursor: pointer;\n\n  &:checked + ", " {\n    justify-content: flex-end;\n    background: ", ";\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  cursor: pointer;\n\n  &:checked + ", " {\n    justify-content: flex-end;\n    background: ", ";\n  }\n"])), CustomSwitch, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.alertGreen; });

package/build/cjs/components/src/components/MenuListDropdown/MenuListDropdown.js

@@ -11,14 +11,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var MenuListDropdown = function (_a) {
     var children = _a.children, dropdownHeader = _a.dropdownHeader, isOpen = _a.isOpen, onClick = _a.onClick;
+    var easing = [0.04, 0.62, 0.23, 0.98];
     var variants = {
         closed: {
             height: 0,
-            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+            transition: { duration: 0.3, ease: easing }
         },
         open: {
             height: 'auto',
-            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+            transition: { duration: 0.3, ease: easing }
         }
     };
     return (React__default["default"].createElement(MenuListDropdown_styles.DropdownContainer, null,

package/build/cjs/components/src/components/MenuListDropdown/MenuListDropdown.js.map

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

package/build/cjs/components/src/components/MenuListDropdown/MenuListDropdown.styles.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var DropdownContainer = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject([""], [""])));
-var DropdownHeader = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var DropdownChildContainer = styled__default["default"](framerMotion.motion.div)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
+var DropdownContainer = styled__default["default"](react.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject([""], [""])));
+var DropdownHeader = styled__default["default"](react.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var DropdownChildContainer = styled__default["default"](react.motion.div)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;
 
 exports.DropdownChildContainer = DropdownChildContainer;

package/build/cjs/components/src/components/RippleContainer/RippleContainer.styles.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var slide = styled.keyframes(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  0% { left: -100% }\n  100% { left: 120% }\n"], ["\n  0% { left: -100% }\n  100% { left: 120% }\n"])));
-var RippleContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"])), function (props) { var _a; return props.color ? props.color : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, slide, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.animations) === null || _b === void 0 ? void 0 : _b.rippleTransition; });
+var RippleContainer = styled__default["default"](react.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"])), function (props) { var _a; return props.color ? props.color : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, slide, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.animations) === null || _b === void 0 ? void 0 : _b.rippleTransition; });
 var templateObject_1, templateObject_2;
 
 exports.RippleContainer = RippleContainer;

package/build/cjs/components/src/components/SideModal/SideModal.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
 var React = require('react');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 var reactDom = require('react-dom');
 var SideModal_styles = require('./SideModal.styles.js');
 var designTokens = require('@citygross/design-tokens');
@@ -18,14 +18,14 @@ var SideModal = React.forwardRef(function (_a, ref) {
     var _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h, props = _tslib.__rest(_a, ["background", "children", "isVisible", "maxHeight", "maxWidth", "onBackdropClick", "overlayBackground", "querySelector", "slideFrom", "width"]);
     var domSafe = typeof document !== 'undefined';
     return domSafe
-        ? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
+        ? reactDom.createPortal(React__default["default"].createElement(react.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
                 if (e.target === e.currentTarget) {
                     onBackdropClick();
                 }
             }, overlayBackground: overlayBackground, ref: ref, transition: {
-                type: 'just'
+                duration: 0
             } },
-            React__default["default"].createElement(SideModal_styles.SideModalContainer, _tslib.__assign({ animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, props), children)))), document.querySelector(querySelector) || document.body)
+            React__default["default"].createElement(SideModal_styles.SideModalContainer, _tslib.__assign({ animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { duration: 0 }, width: width }, props), children)))), document.querySelector(querySelector) || document.body)
         : null;
 });
 SideModal.displayName = 'SideModal';

package/build/cjs/components/src/components/SideModal/SideModal.styles.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var SideModalOverlay = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  ", ";\n  justify-content: center;\n  align-items: center;\n  overscroll-behavior: none;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    max-height: unset;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  ", ";\n  justify-content: center;\n  align-items: center;\n  overscroll-behavior: none;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    max-height: unset;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, function (props) {
+var SideModalOverlay = styled__default["default"](react.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  ", ";\n  justify-content: center;\n  align-items: center;\n  overscroll-behavior: none;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    max-height: unset;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  ", ";\n  justify-content: center;\n  align-items: center;\n  overscroll-behavior: none;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    max-height: unset;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, function (props) {
     return props.maxHeight &&
         "\n    max-height: ".concat(props.maxHeight, ";\n  ");
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  @supports (height: 100dvh) {\n    height: 100dvh;\n  }\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  @supports (height: 100dvh) {\n    height: 100dvh;\n  }\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+var SideModalContainer = styled__default["default"](react.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  @supports (height: 100dvh) {\n    height: 100dvh;\n  }\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  @supports (height: 100dvh) {\n    height: 100dvh;\n  }\n  background: ", ";\n  width: 100%;\n  overscroll-behavior: none;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
     var maxWidth = _a.maxWidth;
     return maxWidth && "max-width:".concat(maxWidth);
 }, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) {

package/build/cjs/components/src/components/SlideInOutContainer/SlideInOutContainer.styles.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 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 SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  ", "\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  ", "\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
+var SideModalContainer = styled__default["default"](react.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  ", "\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  ", "\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
     var maxWidth = _a.maxWidth;
     return maxWidth && "max-width:".concat(maxWidth);
 }, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (_a) {

package/build/cjs/design-tokens/build/index.js

@@ -151,6 +151,7 @@ var palette = {
     greenLight: '#F2FDF2',
     greenMedium: '#BEE5BE',
     redLight: '#FCE9E9',
+    redLighter: '#FDF2F2',
     priceTagRed: '#C80700',
     // recipeTags
     recipeVego: '#65DB69',