@citygross/components 0.7.31 → 0.7.35

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

@@ -0,0 +1,8 @@
+export declare type TBackButton = {
+    label?: string;
+    icon?: JSX.Element;
+    color?: string;
+    onClick?: () => void;
+    children?: JSX.Element;
+};
+export declare function BackButton({ label, color, icon, onClick, children }: TBackButton): JSX.Element;

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

@@ -0,0 +1,20 @@
+import { Story } from '@storybook/react';
+import { TBackButton, BackButton } from './BackButton';
+declare const _default: {
+    component: typeof BackButton;
+    title: string;
+    argTypes: {
+        color: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+        icon: {
+            control: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: Story<TBackButton>;

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

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

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

@@ -9,7 +9,8 @@ export declare enum ButtonColor {
     'primary' = 0,
     'secondary' = 1,
     'white' = 2,
-    'darkest' = 3
+    'darkest' = 3,
+    'lightest' = 4
 }
 export declare type TButtonColor = keyof typeof ButtonColor;
 export declare type TBaseButton = styles.TButton & {
@@ -18,4 +19,4 @@ export declare type TBaseButton = styles.TButton & {
     children: React.ReactNode;
     color?: TButtonColor;
 };
-export declare function Button({ center, color, fullWidth, flexReverse, icon, isDisabled, loading, noWrap, onClick, size, xsSize, children }: TBaseButton): JSX.Element;
+export declare function Button({ center, color, fullWidth, flexReverse, icon, selected, isDisabled, loading, noWrap, onClick, size, xsSize, children }: TBaseButton): JSX.Element;

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

@@ -46,3 +46,4 @@ export declare const LargeButton: Story<TBaseButton>;
 export declare const WithIconButton: Story<TBaseButton>;
 export declare const paginationButton: Story<TPaginationButton>;
 export declare const iconButton: Story<TIconButton>;
+export declare const SelectButton: Story<TBaseButton>;

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

@@ -5,6 +5,7 @@ export declare type TButton = {
     fullWidth?: boolean;
     flexReverse?: boolean;
     icon?: JSX.Element;
+    selected?: boolean;
     isDisabled?: boolean;
     loading?: boolean | null;
     noWrap?: boolean;

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

@@ -1,3 +1,4 @@
 export declare const CartItemSummaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const CancelledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AmountText: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").IH3) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import * as styles from './GridContainer.styles';
+export declare type TGridContainer = styles.TGrid & {
+    children: React.ReactNode;
+};
+export declare function GridContainer({ alignItems, gap, columns, columnWidth, children }: TGridContainer): JSX.Element;

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

@@ -0,0 +1,8 @@
+import { Story } from '@storybook/react';
+import { TGridContainer, GridContainer } from './GridContainer';
+declare const _default: {
+    component: typeof GridContainer;
+    title: string;
+};
+export default _default;
+export declare const Default: Story<TGridContainer>;

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

@@ -0,0 +1,7 @@
+export declare type TGrid = {
+    columns?: number;
+    alignItems?: 'start' | 'end' | 'center';
+    columnWidth?: number;
+    gap?: number;
+};
+export declare const Grid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TGrid, never>;

package/build/@types/components/Links/Link.d.ts

@@ -9,7 +9,7 @@ export declare enum LinkColors {
     'black' = 1
 }
 export declare type TLinkButton = {
-    size: TextTypes.TextSize;
+    size?: TextTypes.TextSize;
     center?: boolean;
     color?: keyof typeof LinkColors;
     isDisabled?: boolean;
@@ -17,5 +17,7 @@ export declare type TLinkButton = {
     hrefPath?: string;
     onClick?: () => void;
     children: React.ReactNode;
+    icon?: JSX.Element;
+    textDecoration?: 'none' | 'underline';
 };
-export declare function LinkButton({ center, color, isDisabled, noWrap, onClick, hrefPath, size, children }: TLinkButton): JSX.Element;
+export declare function LinkButton({ center, color, isDisabled, noWrap, onClick, hrefPath, icon, textDecoration, size, children }: TLinkButton): JSX.Element;

package/build/@types/components/Links/Link.stories.d.ts

@@ -16,3 +16,4 @@ declare const _default: {
 export default _default;
 export declare const Default: Story<TLinkButton>;
 export declare const SecondaryLink: Story<TLinkButton>;
+export declare const WithIcon: Story<TLinkButton>;

package/build/@types/components/Links/Link.styles.d.ts

@@ -2,3 +2,4 @@ import { TLinkButton } from './Link';
 export declare const BaseLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Omit<TLinkButton, "color"> & {
     color: string;
 }, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type TMenu = {
+    children: React.ReactNode;
+    showFade?: boolean;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+};
+export declare function Menu({ showFade, onScroll, children }: TMenu): JSX.Element;

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

@@ -0,0 +1,15 @@
+import { Story } from '@storybook/react';
+import { Menu, TMenu } from './Menu';
+import { TMenuItem } from './Menu.styles';
+declare const _default: {
+    component: typeof Menu;
+    title: string;
+    argTypes: {
+        onScroll: {
+            control: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: Story<TMenu>;
+export declare const Item: Story<TMenuItem>;

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

@@ -0,0 +1,9 @@
+export declare const MenuContainer: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+export declare type TMenuItem = {
+    active?: boolean;
+};
+export declare type FadeProps = {
+    readonly isVisible?: boolean;
+};
+export declare const MenuItem: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, TMenuItem, never>;
+export declare const Fade: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FadeProps, never>;

package/build/@types/components/Menu/MenuItem.d.ts

@@ -0,0 +1,6 @@
+import React, { AnchorHTMLAttributes } from 'react';
+export declare type TMenuItem = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: React.ReactNode;
+    active?: boolean;
+};
+export declare function MenuItem({ active, children, ...props }: TMenuItem): JSX.Element;

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    component: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const FourColumns: () => JSX.Element;
+export declare const LinkTable: () => JSX.Element;

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

@@ -0,0 +1,19 @@
+export declare type TThead = {
+    borderColor?: string;
+};
+export declare type THeadRow = {
+    fontSize?: number;
+    weight?: number;
+};
+export declare type TRow = THeadRow & {
+    strikeThrough?: boolean;
+    borderColor?: string;
+};
+export declare const Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
+export declare const Thead: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, TThead, never>;
+export declare const Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, THeadRow, never>;
+export declare const Tr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {}, never>;
+export declare const Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, THeadRow & {
+    strikeThrough?: boolean | undefined;
+    borderColor?: string | undefined;
+}, never>;

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

@@ -0,0 +1 @@
+export * from './Table.styles';

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

@@ -0,0 +1,7 @@
+import { Story } from '@storybook/react';
+declare const _default: {
+    component: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+    title: string;
+};
+export default _default;
+export declare const Default: Story;

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

@@ -0,0 +1,2 @@
+export declare const UnorderedList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const UnorderedListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1 @@
+export * from './UnorderedList.styles';

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

@@ -7,5 +7,6 @@ export declare type TTwoColumnsPageContainer = {
     containerBackground?: string;
     breakpoint?: number;
     hideRightColumnBefore?: number;
+    noCollapsable?: boolean;
 };
-export declare const TwoColumnsPageContainer: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, hideRightColumnBefore, breakpoint, ...props }: TTwoColumnsPageContainer) => JSX.Element;
+export declare const TwoColumnsPageContainer: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, hideRightColumnBefore, breakpoint, noCollapsable, ...props }: TTwoColumnsPageContainer) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import { Story } from '@storybook/react';
 import { TTwoColumnsPageContainer } from './TwoColumnsPageContainer';
 declare const _default: {
-    component: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, hideRightColumnBefore, breakpoint, ...props }: TTwoColumnsPageContainer) => JSX.Element;
+    component: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, hideRightColumnBefore, breakpoint, noCollapsable, ...props }: TTwoColumnsPageContainer) => JSX.Element;
     title: string;
     argTypes: {
         leftColumn: {

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

@@ -5,7 +5,10 @@ export declare type TRightColumn = {
 export declare type TContainer = {
     background?: string;
 };
+export declare type TColumnWrapper = {
+    noCollapsable?: boolean;
+};
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TContainer, never>;
-export declare const ColumnWraper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ColumnWraper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TColumnWrapper, never>;
 export declare const LeftColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const RightColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TRightColumn, never>;

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

@@ -12,6 +12,8 @@ export * from './components/Collapsable/Collapsable';
 export * from './components/DeliverySlotItem/DeliverySlotItem';
 export * from './components/Slider/Slider';
 export * from './components/DeliveryTimeBlock/DeliveryTimeBlock';
+export * from './components/Menu/Menu';
+export * from './components/Menu/MenuItem';
 export * from './components/Divider/Divider';
 export * from './components/DotIndicator/DotIndicator';
 export * from './components/Form/Form';
@@ -21,6 +23,7 @@ export * from './components/FormElements/Input/Input';
 export * from './components/FormElements/Radio/Radio';
 export * from './components/FormElements/Switch/Switch';
 export * from './components/FormGroup/FormGroup';
+export * from './components/GridContainer/GridContainer';
 export * from './components/Header/Header';
 export * from './components/InfoTextBlock/InfoTextBlock';
 export * from './components/LayoutBox/LayoutBox';
@@ -38,8 +41,10 @@ export * from './components/Spinner/Spinner';
 export * from './components/Stepper';
 export * from './components/StepperMobile/StepperMobile';
 export * from './components/FormElements/TextArea/TextArea';
+export * from './components/Table/';
 export * from './components/Timeline/Timeline';
 export * from './components/ToolTip/ToolTip';
 export * from './components/QuantitySelector/QuantitySelector';
 export * from './containers/PageContainer/PageContainer';
 export * from './containers/TwoColumnsContainer/TwoColumnsPageContainer';
+export * from './components/UnorderedList';

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

@@ -22,10 +22,16 @@ exports.ButtonColor = void 0;
     ButtonColor[ButtonColor["secondary"] = 1] = "secondary";
     ButtonColor[ButtonColor["white"] = 2] = "white";
     ButtonColor[ButtonColor["darkest"] = 3] = "darkest";
+    ButtonColor[ButtonColor["lightest"] = 4] = "lightest";
 })(exports.ButtonColor || (exports.ButtonColor = {}));
 function Button(_a) {
-    var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 'large' : _d, xsSize = _a.xsSize, children = _a.children;
-    return (React__default['default'].createElement(Button_styles.BasePrimaryButton, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); } },
+    var _b;
+    var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, children = _a.children;
+    return (React__default['default'].createElement(Button_styles.BasePrimaryButton, { center: center, color: designTokens.theme && designTokens.theme.palette
+            ? selected
+                ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
+                : designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color]
+            : 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); } },
         loading && (React__default['default'].createElement(Button_styles.Loading, null,
             React__default['default'].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
                 React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),

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

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

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

@@ -76,28 +76,34 @@ var BasePrimaryButton = styled__default['default'](BaseButton)(templateObject_2
         ? ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2) + "px"
         : ((_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight.m1) + "px";
 }, function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return props.xsSize ||
-        (props.size &&
-            (props.color === ((_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.primary) ||
-                props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.secondary)))
-        ? ButtonShadow(props.xsSize || props.size)
-        : props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.white)
-            ? "inset 0px 0px 0px 1px " + ((_g = props.theme.palette) === null || _g === void 0 ? void 0 : _g.medium)
-            : 'none';
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return props.selected
+        ? " inset 0px 0px 0px 1px " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium) + ",\n          " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
+        : props.xsSize ||
+            (props.size &&
+                (props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.primary) ||
+                    props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary)))
+            ? ButtonShadow(props.xsSize || props.size)
+            : props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.white) ||
+                props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.lightest)
+                ? "inset 0px 0px 0px 1px " + ((_l = props.theme.palette) === null || _l === void 0 ? void 0 : _l.medium)
+                : 'none';
 }, function (props) {
     return ButtonPadding(props.xsSize || props.size, props.icon, props.flexReverse);
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return ButtonFontSize(props.size); }, function (props) {
     return ButtonPadding(props.size, props.icon, props.flexReverse);
 }, function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return props.size &&
-        (props.color === ((_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.primary) ||
-            props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.secondary))
-        ? ButtonShadow(props.size)
-        : props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.white)
-            ? "inset 0px 0px 0px 1px " + ((_g = props.theme.palette) === null || _g === void 0 ? void 0 : _g.medium)
-            : 'none';
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return props.selected
+        ? " inset 0px 0px 0px 1px " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium) + ",\n            " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
+        : props.size &&
+            (props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.primary) ||
+                props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary))
+            ? ButtonShadow(props.size)
+            : props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.white) ||
+                props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.lightest)
+                ? "inset 0px 0px 0px 1px " + ((_l = props.theme.palette) === null || _l === void 0 ? void 0 : _l.medium)
+                : 'none';
 }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return (props.size === 'small' ? '8px' : '12px'); }, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
 var Loading = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var LoadingContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });

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

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

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

@@ -18,18 +18,13 @@ function CartItemSummary(_a) {
     return (React__default['default'].createElement(CartItemSummary_styles.CartItemSummaryWrapper, null,
         product &&
             (product.amount === 0 || product.amount) &&
-            (product === null || product === void 0 ? void 0 : product.cancelledQuantity) !== 0 && (React__default['default'].createElement(CartItemSummary_styles.CancelledWrapper, null,
-            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, lineThrough: true }, (product === null || product === void 0 ? void 0 : product.cancelledQuantity)
-                ? (product.cancelledQuantity + " st")
-                : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))),
-            React__default['default'].createElement(typography.H3, { lineThrough: true }, product
-                ? (utils.formatPrice(product.cancelledAmount))
-                : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))))),
+            (product === null || product === void 0 ? void 0 : product.cancelledQuantity) !== 0 &&
+            (product === null || product === void 0 ? void 0 : product.cancelledQuantity) && (React__default['default'].createElement(CartItemSummary_styles.CancelledWrapper, null,
+            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, lineThrough: true }, (product === null || product === void 0 ? void 0 : product.cancelledQuantity) ? (product.cancelledQuantity + " st") : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))),
+            React__default['default'].createElement(CartItemSummary_styles.AmountText, { lineThrough: true }, product ? (utils.formatPrice(product.cancelledAmount)) : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))))),
         React__default['default'].createElement(CartItemSummary_styles.ItemInformationContainer, null,
-            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity)
-                ? (product.quantity + " st")
-                : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))),
-            React__default['default'].createElement(typography.H3, null, product ? utils.formatPrice(product.amount) : React__default['default'].createElement(Skeleton__default['default'], { width: 100 })))));
+            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity) || (product === null || product === void 0 ? void 0 : product.quantity) === 0 ? (product.quantity + " st") : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))),
+            React__default['default'].createElement(CartItemSummary_styles.AmountText, null, product ? utils.formatPrice(product.amount) : React__default['default'].createElement(Skeleton__default['default'], { width: 100 })))));
 }
 
 exports.CartItemSummary = CartItemSummary;

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

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

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

@@ -3,17 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
+var typography = require('@citygross/typography');
 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 CartItemSummaryWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: 20px;\n"], ["\n  display: flex;\n  gap: 20px;\n"])));
+var CartItemSummaryWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
 var CancelledWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
 var ItemInformationContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+var AmountText = styled__default['default'](typography.H3)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  white-space: nowrap;\n"], ["\n  white-space: nowrap;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
+exports.AmountText = AmountText;
 exports.CancelledWrapper = CancelledWrapper;
 exports.CartItemSummaryWrapper = CartItemSummaryWrapper;
 exports.ItemInformationContainer = ItemInformationContainer;

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

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

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var GridContainer_styles = require('./GridContainer.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function GridContainer(_a) {
+    var alignItems = _a.alignItems, gap = _a.gap, _b = _a.columns, columns = _b === void 0 ? 2 : _b, columnWidth = _a.columnWidth, children = _a.children;
+    return (React__default['default'].createElement(GridContainer_styles.Grid, { alignItems: alignItems, gap: gap, columnWidth: columnWidth, columns: columns }, children));
+}
+
+exports.GridContainer = GridContainer;
+//# sourceMappingURL=GridContainer.js.map

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

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+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 Grid = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: ", ";\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    grid-template-columns: repeat(\n      ", ",\n      ", "\n    );\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: ", ";\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    grid-template-columns: repeat(\n      ", ",\n      ", "\n    );\n  }\n"])), function (props) { return props.alignItems || 'start'; }, function (props) { var _a, _b; return props.gap || ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.sm); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { return props.columns; }, function (props) { return (props.columnWidth ? props.columnWidth + "px" : '1fr'); });
+var templateObject_1;
+
+exports.Grid = Grid;
+//# sourceMappingURL=GridContainer.styles.js.map

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

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

package/build/cjs/components/src/components/Links/Link.js

@@ -22,9 +22,10 @@ exports.LinkColors = void 0;
     LinkColors[LinkColors["black"] = 1] = "black";
 })(exports.LinkColors || (exports.LinkColors = {}));
 function LinkButton(_a) {
-    var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'link' : _c, isDisabled = _a.isDisabled, noWrap = _a.noWrap, onClick = _a.onClick, hrefPath = _a.hrefPath, _d = _a.size, size = _d === void 0 ? typography.TextTypes.TextSize.REGULAR : _d, children = _a.children;
-    return (React__default['default'].createElement(Link_styles.BaseLink, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'black', href: hrefPath, isDisabled: isDisabled, noWrap: noWrap, onClick: onClick, size: size },
-        React__default['default'].createElement(typography.LinkText, { size: size }, children)));
+    var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'link' : _c, isDisabled = _a.isDisabled, noWrap = _a.noWrap, onClick = _a.onClick, hrefPath = _a.hrefPath, icon = _a.icon, _d = _a.textDecoration, textDecoration = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? typography.TextTypes.TextSize.REGULAR : _e, children = _a.children;
+    return (React__default['default'].createElement(Link_styles.BaseLink, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'black', href: hrefPath, isDisabled: isDisabled, textDecoration: textDecoration, noWrap: noWrap, onClick: onClick, size: size, icon: icon },
+        React__default['default'].createElement(typography.LinkText, { size: size }, children),
+        icon && React__default['default'].createElement(Link_styles.IconWrapper, null, icon)));
 }
 
 exports.LinkButton = LinkButton;

package/build/cjs/components/src/components/Links/Link.js.map

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

package/build/cjs/components/src/components/Links/Link.styles.js

@@ -9,13 +9,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseLink = styled__default['default'].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n"], ["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n"])), function (props) { return props.isDisabled && 'none'; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { var _a; return props.isDisabled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium : props.color; }, function (props) {
+var BaseLink = styled__default['default'].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"], ["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"])), function (props) { return props.isDisabled && 'none'; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.textDecoration; }, function (props) { var _a; return props.isDisabled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium : props.color; }, function (props) {
     var _a, _b;
     return props.size === 'small'
         ? ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2) + 'px'
         : ((_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight.m1) + 'px';
-}, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); });
-var templateObject_1;
+}, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) {
+    return props.icon &&
+        "\n      display:flex;\n      align-items: center;\n    ";
+});
+var IconWrapper = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"])));
+var templateObject_1, templateObject_2;
 
 exports.BaseLink = BaseLink;
+exports.IconWrapper = IconWrapper;
 //# sourceMappingURL=Link.styles.js.map

package/build/cjs/components/src/components/Links/Link.styles.js.map

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

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Menu_styles = require('./Menu.styles.js');
+var utils = require('@citygross/utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Menu(_a) {
+    var showFade = _a.showFade, onScroll = _a.onScroll, children = _a.children;
+    var isMobile = utils.useDetectDevice().isMobile;
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(Menu_styles.MenuContainer, { onScroll: onScroll && onScroll }, children),
+        ' ',
+        isMobile && React__default['default'].createElement(Menu_styles.Fade, { isVisible: showFade })));
+}
+
+exports.Menu = Menu;
+//# sourceMappingURL=Menu.js.map

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

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