@citygross/components 0.7.97 → 0.7.99

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type TDeliverySelectionButton = {
+    icon: React.ReactElement;
+    label: string;
+    active: boolean;
+    onClick: () => number;
+    disabled?: boolean;
+    name: string;
+    backgroundColor?: string;
+};
+export declare const DeliverySelectionButton: React.FunctionComponent<TDeliverySelectionButton>;

package/build/@types/components/DeliverySelectionButton/DeliverySelectionButton.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { TDeliverySelectionButton } from './DeliverySelectionButton';
+declare const _default: {
+    component: React.FunctionComponent<TDeliverySelectionButton>;
+    title: string;
+};
+export default _default;
+export declare const HomeDelivery: Story<TDeliverySelectionButton>;
+export declare const PickupInStore: Story<TDeliverySelectionButton>;
+export declare const Disabled: Story<TDeliverySelectionButton>;
+export declare const differentBackgroundColor: Story<TDeliverySelectionButton>;
+export declare const MultipleIcons: Story<TDeliverySelectionButton>;

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

@@ -0,0 +1,2 @@
+export declare const DeliverySelectionButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconAndTextWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

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

package/build/@types/components/RadioBox/RadioBoxItem.styles.d.ts

@@ -13,4 +13,6 @@ export declare type TBaseRadioBox = {
 export declare const BaseRadioBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox & {
     border?: string | undefined;
     background?: string | undefined;
+    flexDirection?: string | undefined;
+    padding?: number | undefined;
 }, never>;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type TSlideInOutContainer = {
+    children?: React.ReactNode;
+    isVisible?: boolean;
+    slideFrom?: 'left' | 'right';
+    isInitial?: boolean;
+};
+declare const SlideInOutContainer: ({ slideFrom, isVisible, isInitial, children }: TSlideInOutContainer) => JSX.Element;
+export default SlideInOutContainer;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Story } from '@storybook/react';
+declare const _default: {
+    component: ({ slideFrom, isVisible, isInitial, children }: import("./SlideInOutContainer").TSlideInOutContainer) => JSX.Element;
+    title: string;
+};
+export default _default;
+export declare const Default: Story;

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

@@ -0,0 +1,7 @@
+declare type TSideModalContainer = {
+    background?: string;
+    slideFrom?: 'left' | 'right';
+    maxWidth?: string;
+};
+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 {};

package/build/@types/index.d.ts

@@ -69,3 +69,4 @@ export * from './components/Dropdown/Dropdown';
 export * from './components/SearchListItem/SearchListItem';
 export * from './components/MenuListItem/MenuListHeader';
 export * from './components/MenuListItem/MenuListItem';
+export * from './components/SlideInOutContainer/SlideInOutContainer';

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

@@ -83,6 +83,7 @@ require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
+require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

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

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

@@ -12,9 +12,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function RadioBoxItem(_a) {
-    var _b, _c;
-    var _d = _a.radioColor, radioColor = _d === void 0 ? 'alertGreen' : _d, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, _f = _a.background, background = _f === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, children = _a.children;
-    return (React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
+    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;
+    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; } }),
         children));
 }

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js

@@ -14,7 +14,9 @@ exports.Alignment = void 0;
     Alignment[Alignment["flex-start"] = 0] = "flex-start";
     Alignment[Alignment["center"] = 1] = "center";
 })(exports.Alignment || (exports.Alignment = {}));
-var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-basis: 100%;\n  padding: ", ";\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-basis: 100%;\n  padding: ", ";\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) { var _a; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md, "px "); }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
+var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) {
+    return props.flexDirection ? props.flexDirection : 'row';
+}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
     return props.checked &&
         props.border &&
         "border: 1px solid ".concat(props.border && props.border);

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js.map

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+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);
+
+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 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'); });
+var templateObject_1;
+//# sourceMappingURL=SlideInOutContainer.styles.js.map

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

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

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

@@ -83,6 +83,7 @@ require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
+require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

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

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

@@ -74,6 +74,9 @@ var Dropdown = require('./components/Dropdown/Dropdown.js');
 var SearchListItem = require('./components/SearchListItem/SearchListItem.js');
 var MenuListHeader = require('./components/MenuListItem/MenuListHeader.js');
 var MenuListItem = require('./components/MenuListItem/MenuListItem.js');
+require('framer-motion');
+require('react');
+require('./components/SlideInOutContainer/SlideInOutContainer.styles.js');
 
 
 

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

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

package/build/es/components/src/components/AddressBlock/AddressBlock.js

@@ -79,6 +79,7 @@ import '../IconText/IconText.styles.js';
 import '../Dropdown/Dropdown.styles.js';
 import '../SearchListItem/SearchListItem.styles.js';
 import '../MenuListItem/MenuListItem.styles.js';
+import '../SlideInOutContainer/SlideInOutContainer.styles.js';
 
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;

package/build/es/components/src/components/AddressBlock/AddressBlock.js.map

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

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

@@ -4,9 +4,9 @@ import { Radio } from '../FormElements/Radio/Radio.js';
 import { BaseRadioBox } from './RadioBoxItem.styles.js';
 
 function RadioBoxItem(_a) {
-    var _b, _c;
-    var _d = _a.radioColor, radioColor = _d === void 0 ? 'alertGreen' : _d, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, _f = _a.background, background = _f === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, children = _a.children;
-    return (React.createElement(BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
+    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;
+    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; } }),
         children));
 }

package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js

@@ -6,7 +6,9 @@ var Alignment;
     Alignment[Alignment["flex-start"] = 0] = "flex-start";
     Alignment[Alignment["center"] = 1] = "center";
 })(Alignment || (Alignment = {}));
-var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-basis: 100%;\n  padding: ", ";\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-basis: 100%;\n  padding: ", ";\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) { var _a; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md, "px "); }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
+var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) {
+    return props.flexDirection ? props.flexDirection : 'row';
+}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
     return props.checked &&
         props.border &&
         "border: 1px solid ".concat(props.border && props.border);

package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js.map

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

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

@@ -0,0 +1,10 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+
+styled(motion.div)(templateObject_1 || (templateObject_1 = __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'); });
+var templateObject_1;
+//# sourceMappingURL=SlideInOutContainer.styles.js.map

package/build/es/components/src/components/SlideInOutContainer/SlideInOutContainer.styles.js.map

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

package/build/es/components/src/components/WarningLabel/WarningLabel.js

@@ -79,6 +79,7 @@ import '../IconText/IconText.styles.js';
 import '../Dropdown/Dropdown.styles.js';
 import '../SearchListItem/SearchListItem.styles.js';
 import '../MenuListItem/MenuListItem.styles.js';
+import '../SlideInOutContainer/SlideInOutContainer.styles.js';
 
 function WarningLabel(_a) {
     var children = _a.children, background = _a.background, toolTip = _a.toolTip;

package/build/es/components/src/components/WarningLabel/WarningLabel.js.map

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

package/build/es/components/src/index.js

@@ -70,4 +70,7 @@ export { Dropdown } from './components/Dropdown/Dropdown.js';
 export { SearchListItem } from './components/SearchListItem/SearchListItem.js';
 export { MenuListHeader } from './components/MenuListItem/MenuListHeader.js';
 export { MenuListItem } from './components/MenuListItem/MenuListItem.js';
+import 'framer-motion';
+import 'react';
+import './components/SlideInOutContainer/SlideInOutContainer.styles.js';
 //# sourceMappingURL=index.js.map

package/build/es/components/src/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.97",
+  "version": "0.7.99",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "5d3438e2c9972e0318a6db8266f7691ec650df6b"
+  "gitHead": "ed08313d9b9185ee857c5bee01c50d5b8312dd94"
 }