@citygross/components 0.8.49 → 0.8.50

package/build/@types/components/HeaderLinkNew/HeaderLink.styles.d.ts

@@ -0,0 +1,5 @@
+import { Link } from '../Links/Link';
+export declare const HeaderLinkContainer: import("styled-components").StyledComponent<typeof Link, import("styled-components").DefaultTheme, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type THeaderLinkNew = {
+    href?: string;
+    label?: string;
+};
+export declare const HeaderLinkNew: ({ href, label }: THeaderLinkNew) => JSX.Element;

package/build/@types/components/HeaderNew/Header.css.d.ts

@@ -0,0 +1,5 @@
+export declare const wrapper: string;
+export declare const headerWrapper: string;
+export declare const headerContainer: string;
+export declare const menuIconContainer: string;
+export declare const sideModalHeader: string;

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type THeaderNew = {
+    btnLabel?: string;
+    btnOnClick?: () => void;
+    children?: ReactNode;
+    headerLinkHref?: string;
+    headerLinkLabel?: string;
+};
+export declare const HeaderNew: ({ btnLabel, btnOnClick, children, headerLinkHref, headerLinkLabel }: THeaderNew) => JSX.Element;

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

@@ -30,6 +30,8 @@ export * from './components/FormGroup/FormGroup';
 export * from './components/GridContainer/GridContainer';
 export * from './components/HighlightBox/HighlightBox';
 export * from './components/Header/Header';
+export * from './components/HeaderNew/HeaderNew';
+export * from './components/HeaderLinkNew/HeaderLinkNew';
 export * from './components/IconToolTip/IconToolTip';
 export * from './components/InfoTextBlock/InfoTextBlock';
 export * from './components/LayoutBox/LayoutBox';

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

@@ -46,6 +46,11 @@ require('../FormElements/Switch/Switch.styles.js');
 require('../FormGroup/FormGroup.styles.js');
 require('../GridContainer/GridContainer.styles.js');
 require('../HighlightBox/HighlightBox.styles.js');
+require('../HeaderLinkNew/HeaderLink.styles.js');
+require('framer-motion');
+require('react-dom');
+require('../SideModal/SideModal.styles.js');
+require('../HeaderNew/Header.css.js');
 require('../IconToolTip/IconToolTip.styles.js');
 var Spacer = require('../Spacer/Spacer.js');
 require('../InfoTextBlock/InfoTextBlock.styles.js');
@@ -53,7 +58,6 @@ require('../LayoutBox/LayoutBox.styles.js');
 require('../ListItem/ListItem.js');
 require('../ListItemWithRadio/ListItemWithRadio.styles.js');
 require('../Links/Link.js');
-require('react-dom');
 require('../Modal/Modal.styles.js');
 require('../RadioBox/RadioBoxItem.styles.js');
 require('../RadioBox/RadioBoxList.styles.js');
@@ -80,8 +84,6 @@ require('styled-components');
 require('../SearchBar/SearchBar.styles.js');
 require('../Nav/Nav.styles.js');
 require('../NavMainLink/NavMainLink.styled.js');
-require('framer-motion');
-require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');

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/HeaderLinkNew/HeaderLink.styles.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+var Link = require('../Links/Link.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var HeaderLinkContainer = styled__default["default"](Link.Link)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  display: block;\n  padding: ", ";\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n\n  @media screen and (min-width: ", "px) {\n    padding: ", ";\n  }\n"], ["\n  background: ", ";\n  color: ", ";\n  display: block;\n  padding: ", ";\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n\n  @media screen and (min-width: ", "px) {\n    padding: ", ";\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darker;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs2, "px");
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.lg;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.md, "px");
+});
+var Content = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin: 0 auto;\n  max-width: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin: 0 auto;\n  max-width: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth;
+});
+var IconContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-self: center;\n"], ["\n  display: flex;\n  align-self: center;\n"])));
+var TextContainer = styled__default["default"].span(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n"], ["\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size.s2;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight.medium;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight.s2;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+exports.Content = Content;
+exports.HeaderLinkContainer = HeaderLinkContainer;
+exports.IconContainer = IconContainer;
+exports.TextContainer = TextContainer;
+//# sourceMappingURL=HeaderLink.styles.js.map

package/build/cjs/components/src/components/HeaderLinkNew/HeaderLink.styles.js.map

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

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var HeaderLink_styles = require('./HeaderLink.styles.js');
+var icons = require('@citygross/icons');
+var designTokens = require('@citygross/design-tokens');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var HeaderLinkNew = function (_a) {
+    var _b;
+    var _c = _a.href, href = _c === void 0 ? '/' : _c, _d = _a.label, label = _d === void 0 ? 'Tillbaka till e-handeln' : _d;
+    return (React__default["default"].createElement(HeaderLink_styles.HeaderLinkContainer, { hrefPath: href },
+        React__default["default"].createElement(HeaderLink_styles.Content, null,
+            React__default["default"].createElement(HeaderLink_styles.IconContainer, null,
+                React__default["default"].createElement(icons.Icons.ChevronLeft, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white, width: 20, height: 20 })),
+            React__default["default"].createElement(HeaderLink_styles.TextContainer, null, label))));
+};
+
+exports.HeaderLinkNew = HeaderLinkNew;
+//# sourceMappingURL=HeaderLinkNew.js.map

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

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

package/build/cjs/components/src/components/HeaderNew/Header.css.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@citygross/design-tokens');
+var css = require('@vanilla-extract/css');
+
+var _a;
+var wrapper = css.style({
+    position: 'relative',
+    boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07)'
+});
+var headerWrapper = css.style({
+    backgroundColor: designTokens.palette === null || designTokens.palette === void 0 ? void 0 : designTokens.palette.white,
+    margin: '0 auto',
+    maxWidth: "".concat(designTokens.constants.pageContentMaxWidth, "px"),
+    padding: designTokens.spacings.xs2,
+    '@media': (_a = {},
+        _a["screen and (min-width: ".concat(designTokens.breakpoints.lg, "px)")] = {
+            padding: "".concat(designTokens.spacings.sm2, "px ").concat(designTokens.spacings.md, "px")
+        },
+        _a)
+});
+var headerContainer = css.style({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+});
+var menuIconContainer = css.style({
+    display: 'flex',
+    alignSelf: 'center'
+});
+var sideModalHeader = css.style({
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: designTokens.spacings.xs2
+});
+
+exports.headerContainer = headerContainer;
+exports.headerWrapper = headerWrapper;
+exports.menuIconContainer = menuIconContainer;
+exports.sideModalHeader = sideModalHeader;
+exports.wrapper = wrapper;
+//# sourceMappingURL=Header.css.js.map

package/build/cjs/components/src/components/HeaderNew/Header.css.js.map

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

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var HeaderLinkNew = require('../HeaderLinkNew/HeaderLinkNew.js');
+var CgButton = require('../CgButton/CgButton.js');
+var icons = require('@citygross/icons');
+var designTokens = require('@citygross/design-tokens');
+var SideModal = require('../SideModal/SideModal.js');
+var Header_css = require('./Header.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var HeaderNew = function (_a) {
+    var _b, _c;
+    var btnLabel = _a.btnLabel, btnOnClick = _a.btnOnClick, children = _a.children, headerLinkHref = _a.headerLinkHref, headerLinkLabel = _a.headerLinkLabel;
+    var _d = React.useState(false), showSideModal = _d[0], setShowSideModal = _d[1];
+    var isMobile = window.innerWidth < ((_c = (_b = designTokens.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.lg) !== null && _c !== void 0 ? _c : 960);
+    return (React__default["default"].createElement("div", { className: Header_css.wrapper },
+        React__default["default"].createElement(HeaderLinkNew.HeaderLinkNew, { href: headerLinkHref, label: headerLinkLabel }),
+        React__default["default"].createElement("div", { className: Header_css.headerWrapper },
+            React__default["default"].createElement("div", { className: Header_css.headerContainer },
+                isMobile ? React__default["default"].createElement(icons.Icons.LogoFlat, null) : React__default["default"].createElement(icons.Icons.Logo, null),
+                isMobile ? (React__default["default"].createElement("div", { className: Header_css.menuIconContainer, onClick: function () { return setShowSideModal(true); } },
+                    React__default["default"].createElement(icons.Icons.Menu, null))) : (btnLabel && (React__default["default"].createElement(CgButton.CgButton, { onClick: btnOnClick, variant: CgButton.EButtonVariant.secondary }, btnLabel))))),
+        showSideModal && (React__default["default"].createElement(SideModal.SideModal, { isVisible: true, onBackdropClick: function () { return setShowSideModal(false); }, slideFrom: "right" },
+            React__default["default"].createElement("div", { className: Header_css.sideModalHeader },
+                React__default["default"].createElement(icons.Icons.LogoFlat, null),
+                React__default["default"].createElement(CgButton.CgButton, { onClick: function () { return setShowSideModal(false); }, icon: React__default["default"].createElement(icons.Icons.Cross, { height: 16, width: 16 }), round: true, size: CgButton.ECgButtonSize.small, variant: CgButton.EButtonVariant.secondary })),
+            children))));
+};
+
+exports.HeaderNew = HeaderNew;
+//# sourceMappingURL=HeaderNew.js.map

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

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

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

@@ -46,6 +46,11 @@ require('../FormElements/Switch/Switch.styles.js');
 require('../FormGroup/FormGroup.styles.js');
 require('../GridContainer/GridContainer.styles.js');
 require('../HighlightBox/HighlightBox.styles.js');
+require('../HeaderLinkNew/HeaderLink.styles.js');
+require('framer-motion');
+require('react-dom');
+require('../SideModal/SideModal.styles.js');
+require('../HeaderNew/Header.css.js');
 require('../IconToolTip/IconToolTip.styles.js');
 require('../Spacer/Spacer.styles.js');
 require('../InfoTextBlock/InfoTextBlock.styles.js');
@@ -53,7 +58,6 @@ require('../LayoutBox/LayoutBox.styles.js');
 require('../ListItem/ListItem.js');
 require('../ListItemWithRadio/ListItemWithRadio.styles.js');
 require('../Links/Link.js');
-require('react-dom');
 require('../Modal/Modal.styles.js');
 require('../RadioBox/RadioBoxItem.styles.js');
 require('../RadioBox/RadioBoxList.styles.js');
@@ -80,8 +84,6 @@ require('styled-components');
 require('../SearchBar/SearchBar.styles.js');
 require('../Nav/Nav.styles.js');
 require('../NavMainLink/NavMainLink.styled.js');
-require('framer-motion');
-require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');

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

@@ -36,6 +36,8 @@ var Switch = require('./components/FormElements/Switch/Switch.js');
 var FormGroup = require('./components/FormGroup/FormGroup.js');
 var GridContainer = require('./components/GridContainer/GridContainer.js');
 var HighlightBox = require('./components/HighlightBox/HighlightBox.js');
+var HeaderNew = require('./components/HeaderNew/HeaderNew.js');
+var HeaderLinkNew = require('./components/HeaderLinkNew/HeaderLinkNew.js');
 var IconToolTip = require('./components/IconToolTip/IconToolTip.js');
 var InfoTextBlock = require('./components/InfoTextBlock/InfoTextBlock.js');
 var LayoutBox = require('./components/LayoutBox/LayoutBox.js');
@@ -138,6 +140,8 @@ exports.Switch = Switch.Switch;
 exports.FormGroup = FormGroup.FormGroup;
 exports.GridContainer = GridContainer.GridContainer;
 exports.HighlightBox = HighlightBox.HighlightBox;
+exports.HeaderNew = HeaderNew.HeaderNew;
+exports.HeaderLinkNew = HeaderLinkNew.HeaderLinkNew;
 exports.IconToolTip = IconToolTip.IconToolTip;
 exports.InfoWithButtonBlock = InfoTextBlock.InfoWithButtonBlock;
 exports.LayoutBox = LayoutBox.LayoutBox;

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

@@ -42,6 +42,11 @@ import '../FormElements/Switch/Switch.styles.js';
 import '../FormGroup/FormGroup.styles.js';
 import '../GridContainer/GridContainer.styles.js';
 import '../HighlightBox/HighlightBox.styles.js';
+import '../HeaderLinkNew/HeaderLink.styles.js';
+import 'framer-motion';
+import 'react-dom';
+import '../SideModal/SideModal.styles.js';
+import '../HeaderNew/Header.css.js';
 import '../IconToolTip/IconToolTip.styles.js';
 import { Spacer } from '../Spacer/Spacer.js';
 import '../InfoTextBlock/InfoTextBlock.styles.js';
@@ -49,7 +54,6 @@ import '../LayoutBox/LayoutBox.styles.js';
 import '../ListItem/ListItem.js';
 import '../ListItemWithRadio/ListItemWithRadio.styles.js';
 import '../Links/Link.js';
-import 'react-dom';
 import '../Modal/Modal.styles.js';
 import '../RadioBox/RadioBoxItem.styles.js';
 import '../RadioBox/RadioBoxList.styles.js';
@@ -76,8 +80,6 @@ import 'styled-components';
 import '../SearchBar/SearchBar.styles.js';
 import '../Nav/Nav.styles.js';
 import '../NavMainLink/NavMainLink.styled.js';
-import 'framer-motion';
-import '../SideModal/SideModal.styles.js';
 import '../IconText/IconText.styles.js';
 import '../Dropdown/Dropdown.styles.js';
 import '../SearchListItem/SearchListItem.styles.js';

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/HeaderLinkNew/HeaderLink.styles.js

@@ -0,0 +1,56 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import { Link } from '../Links/Link.js';
+
+var HeaderLinkContainer = styled(Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  display: block;\n  padding: ", ";\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n\n  @media screen and (min-width: ", "px) {\n    padding: ", ";\n  }\n"], ["\n  background: ", ";\n  color: ", ";\n  display: block;\n  padding: ", ";\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n\n  @media screen and (min-width: ", "px) {\n    padding: ", ";\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darker;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs2, "px");
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.lg;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.md, "px");
+});
+var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin: 0 auto;\n  max-width: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin: 0 auto;\n  max-width: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth;
+});
+var IconContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-self: center;\n"], ["\n  display: flex;\n  align-self: center;\n"])));
+var TextContainer = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n"], ["\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size.s2;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight.medium;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight.s2;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { Content, HeaderLinkContainer, IconContainer, TextContainer };
+//# sourceMappingURL=HeaderLink.styles.js.map

package/build/es/components/src/components/HeaderLinkNew/HeaderLink.styles.js.map

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { HeaderLinkContainer, Content, IconContainer, TextContainer } from './HeaderLink.styles.js';
+import { Icons } from '@citygross/icons';
+import { theme } from '@citygross/design-tokens';
+
+var HeaderLinkNew = function (_a) {
+    var _b;
+    var _c = _a.href, href = _c === void 0 ? '/' : _c, _d = _a.label, label = _d === void 0 ? 'Tillbaka till e-handeln' : _d;
+    return (React.createElement(HeaderLinkContainer, { hrefPath: href },
+        React.createElement(Content, null,
+            React.createElement(IconContainer, null,
+                React.createElement(Icons.ChevronLeft, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white, width: 20, height: 20 })),
+            React.createElement(TextContainer, null, label))));
+};
+
+export { HeaderLinkNew };
+//# sourceMappingURL=HeaderLinkNew.js.map

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

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

package/build/es/components/src/components/HeaderNew/Header.css.js

@@ -0,0 +1,36 @@
+import { palette, constants, spacings, breakpoints } from '@citygross/design-tokens';
+import { style } from '@vanilla-extract/css';
+
+var _a;
+var wrapper = style({
+    position: 'relative',
+    boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07)'
+});
+var headerWrapper = style({
+    backgroundColor: palette === null || palette === void 0 ? void 0 : palette.white,
+    margin: '0 auto',
+    maxWidth: "".concat(constants.pageContentMaxWidth, "px"),
+    padding: spacings.xs2,
+    '@media': (_a = {},
+        _a["screen and (min-width: ".concat(breakpoints.lg, "px)")] = {
+            padding: "".concat(spacings.sm2, "px ").concat(spacings.md, "px")
+        },
+        _a)
+});
+var headerContainer = style({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+});
+var menuIconContainer = style({
+    display: 'flex',
+    alignSelf: 'center'
+});
+var sideModalHeader = style({
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: spacings.xs2
+});
+
+export { headerContainer, headerWrapper, menuIconContainer, sideModalHeader, wrapper };
+//# sourceMappingURL=Header.css.js.map

package/build/es/components/src/components/HeaderNew/Header.css.js.map

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

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { HeaderLinkNew } from '../HeaderLinkNew/HeaderLinkNew.js';
+import { CgButton, EButtonVariant, ECgButtonSize } from '../CgButton/CgButton.js';
+import { Icons } from '@citygross/icons';
+import { theme } from '@citygross/design-tokens';
+import { SideModal } from '../SideModal/SideModal.js';
+import { wrapper, headerWrapper, headerContainer, menuIconContainer, sideModalHeader } from './Header.css.js';
+
+var HeaderNew = function (_a) {
+    var _b, _c;
+    var btnLabel = _a.btnLabel, btnOnClick = _a.btnOnClick, children = _a.children, headerLinkHref = _a.headerLinkHref, headerLinkLabel = _a.headerLinkLabel;
+    var _d = useState(false), showSideModal = _d[0], setShowSideModal = _d[1];
+    var isMobile = window.innerWidth < ((_c = (_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.lg) !== null && _c !== void 0 ? _c : 960);
+    return (React.createElement("div", { className: wrapper },
+        React.createElement(HeaderLinkNew, { href: headerLinkHref, label: headerLinkLabel }),
+        React.createElement("div", { className: headerWrapper },
+            React.createElement("div", { className: headerContainer },
+                isMobile ? React.createElement(Icons.LogoFlat, null) : React.createElement(Icons.Logo, null),
+                isMobile ? (React.createElement("div", { className: menuIconContainer, onClick: function () { return setShowSideModal(true); } },
+                    React.createElement(Icons.Menu, null))) : (btnLabel && (React.createElement(CgButton, { onClick: btnOnClick, variant: EButtonVariant.secondary }, btnLabel))))),
+        showSideModal && (React.createElement(SideModal, { isVisible: true, onBackdropClick: function () { return setShowSideModal(false); }, slideFrom: "right" },
+            React.createElement("div", { className: sideModalHeader },
+                React.createElement(Icons.LogoFlat, null),
+                React.createElement(CgButton, { onClick: function () { return setShowSideModal(false); }, icon: React.createElement(Icons.Cross, { height: 16, width: 16 }), round: true, size: ECgButtonSize.small, variant: EButtonVariant.secondary })),
+            children))));
+};
+
+export { HeaderNew };
+//# sourceMappingURL=HeaderNew.js.map

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

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

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

@@ -42,6 +42,11 @@ import '../FormElements/Switch/Switch.styles.js';
 import '../FormGroup/FormGroup.styles.js';
 import '../GridContainer/GridContainer.styles.js';
 import '../HighlightBox/HighlightBox.styles.js';
+import '../HeaderLinkNew/HeaderLink.styles.js';
+import 'framer-motion';
+import 'react-dom';
+import '../SideModal/SideModal.styles.js';
+import '../HeaderNew/Header.css.js';
 import '../IconToolTip/IconToolTip.styles.js';
 import '../Spacer/Spacer.styles.js';
 import '../InfoTextBlock/InfoTextBlock.styles.js';
@@ -49,7 +54,6 @@ import '../LayoutBox/LayoutBox.styles.js';
 import '../ListItem/ListItem.js';
 import '../ListItemWithRadio/ListItemWithRadio.styles.js';
 import '../Links/Link.js';
-import 'react-dom';
 import '../Modal/Modal.styles.js';
 import '../RadioBox/RadioBoxItem.styles.js';
 import '../RadioBox/RadioBoxList.styles.js';
@@ -76,8 +80,6 @@ import 'styled-components';
 import '../SearchBar/SearchBar.styles.js';
 import '../Nav/Nav.styles.js';
 import '../NavMainLink/NavMainLink.styled.js';
-import 'framer-motion';
-import '../SideModal/SideModal.styles.js';
 import '../IconText/IconText.styles.js';
 import '../Dropdown/Dropdown.styles.js';
 import '../SearchListItem/SearchListItem.styles.js';

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

@@ -32,6 +32,8 @@ export { Switch } from './components/FormElements/Switch/Switch.js';
 export { FormGroup } from './components/FormGroup/FormGroup.js';
 export { GridContainer } from './components/GridContainer/GridContainer.js';
 export { HighlightBox } from './components/HighlightBox/HighlightBox.js';
+export { HeaderNew } from './components/HeaderNew/HeaderNew.js';
+export { HeaderLinkNew } from './components/HeaderLinkNew/HeaderLinkNew.js';
 export { IconToolTip } from './components/IconToolTip/IconToolTip.js';
 export { InfoWithButtonBlock } from './components/InfoTextBlock/InfoTextBlock.js';
 export { LayoutBox } from './components/LayoutBox/LayoutBox.js';

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.8.49",
+  "version": "0.8.50",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@citygross/design-tokens": "^0.2.69",
-    "@citygross/icons": "^0.1.11",
+    "@citygross/icons": "^0.1.12",
     "@citygross/react-use-bg-wizard": "^0.0.8",
     "@citygross/typography": "^0.0.89",
     "@citygross/utils": "^0.0.39",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "b1e0e9fa5fa0039b16ed0effc43c26e0ca33a60c"
+  "gitHead": "17f7a6c40f8723764a1828cac168e370a832cfc0"
 }