@citygross/components 0.7.72 → 0.7.74

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

@@ -5,5 +5,8 @@ export declare type TAlertBox = {
     icon?: JSX.Element;
     children: React.ReactNode;
     iconMinWidth?: number;
+    withArrow?: boolean;
+    arrowPlacement?: 'left' | 'right';
+    arrowSpacing?: number;
 };
-export declare function AlertBox({ background, borderColor, icon, iconMinWidth, children }: TAlertBox): JSX.Element;
+export declare function AlertBox({ background, borderColor, icon, iconMinWidth, withArrow, arrowSpacing, arrowPlacement, children }: TAlertBox): JSX.Element;

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

@@ -4,5 +4,8 @@ export declare type TBox = {
     rounded?: boolean;
     padding?: number;
     children: React.ReactNode;
+    withArrow?: boolean;
+    arrowSpacing?: number;
+    arrowPlacement?: 'left' | 'right';
 };
-export declare function Box({ background, rounded, padding, children }: TBox): JSX.Element;
+export declare function Box({ background, rounded, padding, arrowSpacing, arrowPlacement, withArrow, children }: TBox): JSX.Element;

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

@@ -0,0 +1,7 @@
+declare type TBoxArrow = {
+    arrowPlacement?: 'left' | 'right';
+    arrowSpacing?: number;
+    background?: string;
+};
+declare const BoxArrow: ({ arrowPlacement, arrowSpacing, background }: TBoxArrow) => JSX.Element;
+export default BoxArrow;

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

@@ -0,0 +1,6 @@
+declare type TAlertBoxArrow = {
+    margin?: number;
+    placement?: 'left' | 'right';
+};
+export declare const BoxArrowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TAlertBoxArrow, never>;
+export {};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type TDropdown = {
+    children?: React.ReactNode;
+    onClick?: () => void;
+    isOpen?: boolean;
+    dropdownHeader?: React.ReactNode;
+};
+export declare const Dropdown: ({ isOpen, onClick, dropdownHeader, children }: TDropdown) => JSX.Element;

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

@@ -0,0 +1,18 @@
+import { Story } from '@storybook/react';
+declare const _default: {
+    component: ({ isOpen, onClick, dropdownHeader, children }: import("./Dropdown").TDropdown) => JSX.Element;
+    title: string;
+    argTypes: {
+        onClick: {
+            control: boolean;
+        };
+        isOpen: {
+            control: boolean;
+        };
+        dropdownHeader: {
+            control: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: Story;

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

@@ -0,0 +1,6 @@
+export declare type TDropdownChildContainer = {
+    isOpen?: boolean;
+};
+export declare const DropdownContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const DropdownHeader: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const DropdownChildContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TDropdownChildContainer, never>;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type TSideModal = {
+    onBackdropClick: () => void;
+    children?: React.ReactNode;
+    width?: number;
+    background?: string;
+    isVisible?: boolean;
+    querySelector?: string;
+    slideFrom?: 'left' | 'right';
+    overlayBackground: string;
+};
+export declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, children }: TSideModal) => React.ReactPortal | null;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+declare const _default: {
+    component: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, children }: import("./SideModal").TSideModal) => React.ReactPortal | null;
+    title: string;
+};
+export default _default;
+export declare const Default: Story;

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

@@ -0,0 +1,11 @@
+declare type TSideModalContainer = {
+    width: number;
+    background?: string;
+    slideFrom?: 'left' | 'right';
+};
+declare type TSideMoodalOverlay = {
+    overlayBackground: string;
+};
+export declare const SideModalOverlay: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSideMoodalOverlay, never>;
+export declare const SideModalContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSideModalContainer, never>;
+export {};

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

@@ -13,5 +13,9 @@ export declare type TTimeline = {
     dotColor?: string;
     dotActiveColor?: string;
     dotShadow?: string;
+    borderStyle?: 'dashed' | 'solid';
+    borderColor?: string;
+    completedColor?: string;
+    color?: string;
 };
-export declare function Timeline({ background, items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow }: TTimeline): JSX.Element;
+export declare function Timeline({ background, items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, completedColor }: TTimeline): JSX.Element;

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

@@ -49,6 +49,27 @@ declare const _default: {
                 type: string;
             };
         };
+        borderColor: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+        completedColor: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;

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

@@ -1,4 +1,9 @@
+declare type TBaseTimelineList = {
+    borderStyle: 'dashed' | 'solid';
+    borderColor?: string;
+};
 export declare const BaseTimelineItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const BaseTimeline: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TimeLineH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").IH3) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-export declare const BaseTimelineList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const BaseTimelineList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseTimelineList, never>;
+export {};

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

@@ -6,11 +6,12 @@ var React = require('react');
 var typography = require('@citygross/typography');
 var AddressBlock_styles = require('./AddressBlock.styles.js');
 require('../../../../design-tokens/build/index.js');
+require('@citygross/icons');
+require('../BoxArrow/BoxArrow.styles.js');
 require('../AlertBox/AlertBox.styles.js');
 require('../Button/Button.js');
 require('@citygross/utils');
 require('@citygross/design-tokens');
-require('@citygross/icons');
 require('../Logo/Logo.styles.js');
 require('../Header/Header.styles.js');
 require('../HeaderLink/HeaderLink.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/AlertBox/AlertBox.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var index = require('../../../../design-tokens/build/index.js');
+var BoxArrow = require('../BoxArrow/BoxArrow.js');
 var AlertBox_styles = require('./AlertBox.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,10 +13,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function AlertBox(_a) {
     var _b, _c;
-    var _d = _a.background, background = _d === void 0 ? (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _d, _e = _a.borderColor, borderColor = _e === void 0 ? (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, icon = _a.icon, _f = _a.iconMinWidth, iconMinWidth = _f === void 0 ? 24 : _f, children = _a.children;
-    return (React__default['default'].createElement(AlertBox_styles.AlertBox, { background: background, borderColor: borderColor },
-        icon && (React__default['default'].createElement(AlertBox_styles.IconContainer, { minWidth: iconMinWidth }, icon)),
-        children));
+    var _d = _a.background, background = _d === void 0 ? (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _d, _e = _a.borderColor, borderColor = _e === void 0 ? (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, icon = _a.icon, _f = _a.iconMinWidth, iconMinWidth = _f === void 0 ? 24 : _f, withArrow = _a.withArrow, arrowSpacing = _a.arrowSpacing, arrowPlacement = _a.arrowPlacement, children = _a.children;
+    return (React__default['default'].createElement("div", null,
+        withArrow && (React__default['default'].createElement(BoxArrow, { arrowPlacement: arrowPlacement, arrowSpacing: arrowSpacing, background: background })),
+        React__default['default'].createElement(AlertBox_styles.AlertBox, { background: background, borderColor: borderColor },
+            icon && (React__default['default'].createElement(AlertBox_styles.IconContainer, { minWidth: iconMinWidth }, icon)),
+            children)));
 }
 
 exports.AlertBox = AlertBox;

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

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

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var BoxArrow = require('../BoxArrow/BoxArrow.js');
 var Box_styles = require('./Box.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -10,8 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Box(_a) {
-    var background = _a.background, _b = _a.rounded, rounded = _b === void 0 ? true : _b, padding = _a.padding, children = _a.children;
-    return (React__default['default'].createElement(Box_styles.BoxContainer, { background: background || 'transparent', rounded: rounded, padding: padding }, children));
+    var background = _a.background, _b = _a.rounded, rounded = _b === void 0 ? true : _b, padding = _a.padding, arrowSpacing = _a.arrowSpacing, arrowPlacement = _a.arrowPlacement, withArrow = _a.withArrow, children = _a.children;
+    return (React__default['default'].createElement("div", null,
+        withArrow && (React__default['default'].createElement(BoxArrow, { arrowPlacement: arrowPlacement, arrowSpacing: arrowSpacing, background: background })),
+        React__default['default'].createElement(Box_styles.BoxContainer, { background: background || 'transparent', rounded: rounded, padding: padding }, children)));
 }
 
 exports.Box = Box;

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

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

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var Icon = require('@citygross/icons');
+var React = require('react');
+var BoxArrow_styles = require('./BoxArrow.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var BoxArrow = function (_a) {
+    var arrowPlacement = _a.arrowPlacement, arrowSpacing = _a.arrowSpacing, background = _a.background;
+    return (React__default['default'].createElement(BoxArrow_styles.BoxArrowContainer, { margin: arrowSpacing, placement: arrowPlacement },
+        React__default['default'].createElement(Icon.Icons.BoxArrow, { width: 17, height: 8, color: background })));
+};
+
+module.exports = BoxArrow;
+//# sourceMappingURL=BoxArrow.js.map

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

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

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

@@ -0,0 +1,22 @@
+'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 BoxArrowContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  margin-bottom: -1px;\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  margin-bottom: -1px;\n  justify-content: ", ";\n  ", "\n"])), function (props) {
+    return props.placement === 'right' ? 'flex-end' : 'flex-start';
+}, function (props) {
+    return props.placement && props.placement === 'right'
+        ? "margin-right: " + props.margin + "px"
+        : "margin-left: " + props.margin + "px";
+});
+var templateObject_1;
+
+exports.BoxArrowContainer = BoxArrowContainer;
+//# sourceMappingURL=BoxArrow.styles.js.map

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

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

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

@@ -16,23 +16,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Timeline(_a) {
     var _b, _c, _d;
-    var background = _a.background, items = _a.items, _e = _a.title, title = _e === void 0 ? 'Vi skickar löpande information när:' : _e, _f = _a.mobileTitle, mobileTitle = _f === void 0 ? 'När din...' : _f, current = _a.current, _g = _a.dotColor, dotColor = _g === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.greenLight : _g, _h = _a.dotActiveColor, dotActiveColor = _h === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertGreen : _h, _j = _a.dotShadow, dotShadow = _j === void 0 ? (_d = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.greenMedium : _j;
+    var background = _a.background, items = _a.items, _e = _a.title, title = _e === void 0 ? 'Vi skickar löpande information när:' : _e, _f = _a.mobileTitle, mobileTitle = _f === void 0 ? 'När din...' : _f, current = _a.current, _g = _a.dotColor, dotColor = _g === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.greenLight : _g, _h = _a.dotActiveColor, dotActiveColor = _h === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertGreen : _h, _j = _a.dotShadow, dotShadow = _j === void 0 ? (_d = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.greenMedium : _j, _k = _a.borderStyle, borderStyle = _k === void 0 ? 'dashed' : _k, borderColor = _a.borderColor, color = _a.color, completedColor = _a.completedColor;
     var currentIndex = items === null || items === void 0 ? void 0 : items.indexOf(current);
     var isMobile = utils.useDetectDevice().isMobile;
     return (React__default['default'].createElement(Box.Box, { background: background },
         React__default['default'].createElement(Timeline_styles.BaseTimeline, null,
             React__default['default'].createElement(Timeline_styles.TimeLineH3, null, isMobile ? mobileTitle : title),
-            React__default['default'].createElement(Timeline_styles.BaseTimelineList, null, items.map(function (item, index) { return (React__default['default'].createElement(Timeline_styles.BaseTimelineItem, { key: item.primaryText },
+            React__default['default'].createElement(Timeline_styles.BaseTimelineList, { borderStyle: borderStyle, borderColor: borderColor }, items.map(function (item, index) { return (React__default['default'].createElement(Timeline_styles.BaseTimelineItem, { key: item.primaryText },
                 React__default['default'].createElement(DotIndicator.Dot, { color: index <= currentIndex ? dotActiveColor : dotColor, shadow: dotShadow }),
-                current === item
-                    ? (React__default['default'].createElement(typography.H3, null, isMobile
-                        ? item.primaryText + " (" + item.time + ")"
-                        : item.primaryText + " - " + item.time))
-                    : (React__default['default'].createElement(typography.BodyText, null, isMobile
-                        ? item.primaryText + " (" + item.time + ")"
-                        : item.primaryText + " - " + item.time)),
-                !isMobile && React__default['default'].createElement(typography.BodyText, null, item.secondaryText),
-                React__default['default'].createElement(typography.BodyText, null, item.tiernaryText))); })))));
+                current === item ? (React__default['default'].createElement(typography.H3, { color: color }, isMobile
+                    ? item.primaryText + " (" + item.time + ")"
+                    : item.primaryText + " - " + item.time)) : (React__default['default'].createElement(typography.BodyText, { color: completedColor !== null && completedColor !== void 0 ? completedColor : color }, isMobile
+                    ? item.primaryText + " (" + item.time + ")"
+                    : item.primaryText + " - " + item.time)),
+                !isMobile && (React__default['default'].createElement(typography.BodyText, { color: current === item || !completedColor ? color : completedColor }, item.secondaryText)),
+                React__default['default'].createElement(typography.BodyText, { color: current === item || !completedColor ? color : completedColor }, item.tiernaryText))); })))));
 }
 
 exports.Timeline = Timeline;

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

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

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

@@ -13,7 +13,10 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var BaseTimelineItem = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  padding: ", "px 0;\n  position: relative;\n  > * {\n    &:nth-child(2) {\n      flex-grow: 1;\n    }\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  padding: ", "px 0;\n  position: relative;\n  > * {\n    &:nth-child(2) {\n      flex-grow: 1;\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var BaseTimeline = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var TimeLineH3 = styled__default['default'](typography.H3)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding-bottom: ", "px;\n"], ["\n  padding-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var BaseTimelineList = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: relative;\n  &::before {\n    content: '';\n    border-left: 1px dashed ", ";\n    height: calc(100% - 24px);\n    position: absolute;\n    top: 12px;\n    left: 3.5px;\n  }\n"], ["\n  position: relative;\n  &::before {\n    content: '';\n    border-left: 1px dashed ", ";\n    height: calc(100% - 24px);\n    position: absolute;\n    top: 12px;\n    left: 3.5px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen; });
+var BaseTimelineList = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: relative;\n\n  &::before {\n    content: '';\n    border-left: 1px\n      ", ";\n    height: calc(100% - 28px);\n    position: absolute;\n    top: 14px;\n    left: 3.5px;\n  }\n"], ["\n  position: relative;\n\n  &::before {\n    content: '';\n    border-left: 1px\n      ", ";\n    height: calc(100% - 28px);\n    position: absolute;\n    top: 14px;\n    left: 3.5px;\n  }\n"])), function (props) {
+    var _a, _b;
+    return props.borderStyle + " " + ((_a = props === null || props === void 0 ? void 0 : props.borderColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.alertGreen);
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.BaseTimeline = BaseTimeline;

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

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

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

@@ -6,11 +6,12 @@ var React = require('react');
 require('@citygross/typography');
 require('../AddressBlock/AddressBlock.styles.js');
 require('../../../../design-tokens/build/index.js');
+require('@citygross/icons');
+require('../BoxArrow/BoxArrow.styles.js');
 require('../AlertBox/AlertBox.styles.js');
 require('../Button/Button.js');
 require('@citygross/utils');
 require('@citygross/design-tokens');
-require('@citygross/icons');
 require('../Logo/Logo.styles.js');
 require('../Header/Header.styles.js');
 require('../HeaderLink/HeaderLink.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/es/components/src/components/AddressBlock/AddressBlock.js

@@ -2,11 +2,12 @@ import React from 'react';
 import { H3, BodyText } from '@citygross/typography';
 import { AddressOption } from './AddressBlock.styles.js';
 import '../../../../design-tokens/build/index.js';
+import '@citygross/icons';
+import '../BoxArrow/BoxArrow.styles.js';
 import '../AlertBox/AlertBox.styles.js';
 import '../Button/Button.js';
 import '@citygross/utils';
 import '@citygross/design-tokens';
-import '@citygross/icons';
 import '../Logo/Logo.styles.js';
 import '../Header/Header.styles.js';
 import '../HeaderLink/HeaderLink.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/AlertBox/AlertBox.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
+import BoxArrow from '../BoxArrow/BoxArrow.js';
 import { AlertBox as AlertBox$1, IconContainer } from './AlertBox.styles.js';
 
 function AlertBox(_a) {
     var _b, _c;
-    var _d = _a.background, background = _d === void 0 ? (_b = theme_1.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _d, _e = _a.borderColor, borderColor = _e === void 0 ? (_c = theme_1.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, icon = _a.icon, _f = _a.iconMinWidth, iconMinWidth = _f === void 0 ? 24 : _f, children = _a.children;
-    return (React.createElement(AlertBox$1, { background: background, borderColor: borderColor },
-        icon && (React.createElement(IconContainer, { minWidth: iconMinWidth }, icon)),
-        children));
+    var _d = _a.background, background = _d === void 0 ? (_b = theme_1.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _d, _e = _a.borderColor, borderColor = _e === void 0 ? (_c = theme_1.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, icon = _a.icon, _f = _a.iconMinWidth, iconMinWidth = _f === void 0 ? 24 : _f, withArrow = _a.withArrow, arrowSpacing = _a.arrowSpacing, arrowPlacement = _a.arrowPlacement, children = _a.children;
+    return (React.createElement("div", null,
+        withArrow && (React.createElement(BoxArrow, { arrowPlacement: arrowPlacement, arrowSpacing: arrowSpacing, background: background })),
+        React.createElement(AlertBox$1, { background: background, borderColor: borderColor },
+            icon && (React.createElement(IconContainer, { minWidth: iconMinWidth }, icon)),
+            children)));
 }
 
 export { AlertBox };

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

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

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

@@ -1,9 +1,12 @@
 import React from 'react';
+import BoxArrow from '../BoxArrow/BoxArrow.js';
 import { BoxContainer } from './Box.styles.js';
 
 function Box(_a) {
-    var background = _a.background, _b = _a.rounded, rounded = _b === void 0 ? true : _b, padding = _a.padding, children = _a.children;
-    return (React.createElement(BoxContainer, { background: background || 'transparent', rounded: rounded, padding: padding }, children));
+    var background = _a.background, _b = _a.rounded, rounded = _b === void 0 ? true : _b, padding = _a.padding, arrowSpacing = _a.arrowSpacing, arrowPlacement = _a.arrowPlacement, withArrow = _a.withArrow, children = _a.children;
+    return (React.createElement("div", null,
+        withArrow && (React.createElement(BoxArrow, { arrowPlacement: arrowPlacement, arrowSpacing: arrowSpacing, background: background })),
+        React.createElement(BoxContainer, { background: background || 'transparent', rounded: rounded, padding: padding }, children)));
 }
 
 export { Box };

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

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

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

@@ -0,0 +1,12 @@
+import { Icons } from '@citygross/icons';
+import React from 'react';
+import { BoxArrowContainer } from './BoxArrow.styles.js';
+
+var BoxArrow = function (_a) {
+    var arrowPlacement = _a.arrowPlacement, arrowSpacing = _a.arrowSpacing, background = _a.background;
+    return (React.createElement(BoxArrowContainer, { margin: arrowSpacing, placement: arrowPlacement },
+        React.createElement(Icons.BoxArrow, { width: 17, height: 8, color: background })));
+};
+
+export default BoxArrow;
+//# sourceMappingURL=BoxArrow.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var BoxArrowContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: -1px;\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  margin-bottom: -1px;\n  justify-content: ", ";\n  ", "\n"])), function (props) {
+    return props.placement === 'right' ? 'flex-end' : 'flex-start';
+}, function (props) {
+    return props.placement && props.placement === 'right'
+        ? "margin-right: " + props.margin + "px"
+        : "margin-left: " + props.margin + "px";
+});
+var templateObject_1;
+
+export { BoxArrowContainer };
+//# sourceMappingURL=BoxArrow.styles.js.map

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

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

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

@@ -8,23 +8,21 @@ import { BaseTimeline, TimeLineH3, BaseTimelineList, BaseTimelineItem } from './
 
 function Timeline(_a) {
     var _b, _c, _d;
-    var background = _a.background, items = _a.items, _e = _a.title, title = _e === void 0 ? 'Vi skickar löpande information när:' : _e, _f = _a.mobileTitle, mobileTitle = _f === void 0 ? 'När din...' : _f, current = _a.current, _g = _a.dotColor, dotColor = _g === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.greenLight : _g, _h = _a.dotActiveColor, dotActiveColor = _h === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.alertGreen : _h, _j = _a.dotShadow, dotShadow = _j === void 0 ? (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.greenMedium : _j;
+    var background = _a.background, items = _a.items, _e = _a.title, title = _e === void 0 ? 'Vi skickar löpande information när:' : _e, _f = _a.mobileTitle, mobileTitle = _f === void 0 ? 'När din...' : _f, current = _a.current, _g = _a.dotColor, dotColor = _g === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.greenLight : _g, _h = _a.dotActiveColor, dotActiveColor = _h === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.alertGreen : _h, _j = _a.dotShadow, dotShadow = _j === void 0 ? (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.greenMedium : _j, _k = _a.borderStyle, borderStyle = _k === void 0 ? 'dashed' : _k, borderColor = _a.borderColor, color = _a.color, completedColor = _a.completedColor;
     var currentIndex = items === null || items === void 0 ? void 0 : items.indexOf(current);
     var isMobile = useDetectDevice().isMobile;
     return (React.createElement(Box, { background: background },
         React.createElement(BaseTimeline, null,
             React.createElement(TimeLineH3, null, isMobile ? mobileTitle : title),
-            React.createElement(BaseTimelineList, null, items.map(function (item, index) { return (React.createElement(BaseTimelineItem, { key: item.primaryText },
+            React.createElement(BaseTimelineList, { borderStyle: borderStyle, borderColor: borderColor }, items.map(function (item, index) { return (React.createElement(BaseTimelineItem, { key: item.primaryText },
                 React.createElement(Dot, { color: index <= currentIndex ? dotActiveColor : dotColor, shadow: dotShadow }),
-                current === item
-                    ? (React.createElement(H3, null, isMobile
-                        ? item.primaryText + " (" + item.time + ")"
-                        : item.primaryText + " - " + item.time))
-                    : (React.createElement(BodyText, null, isMobile
-                        ? item.primaryText + " (" + item.time + ")"
-                        : item.primaryText + " - " + item.time)),
-                !isMobile && React.createElement(BodyText, null, item.secondaryText),
-                React.createElement(BodyText, null, item.tiernaryText))); })))));
+                current === item ? (React.createElement(H3, { color: color }, isMobile
+                    ? item.primaryText + " (" + item.time + ")"
+                    : item.primaryText + " - " + item.time)) : (React.createElement(BodyText, { color: completedColor !== null && completedColor !== void 0 ? completedColor : color }, isMobile
+                    ? item.primaryText + " (" + item.time + ")"
+                    : item.primaryText + " - " + item.time)),
+                !isMobile && (React.createElement(BodyText, { color: current === item || !completedColor ? color : completedColor }, item.secondaryText)),
+                React.createElement(BodyText, { color: current === item || !completedColor ? color : completedColor }, item.tiernaryText))); })))));
 }
 
 export { Timeline };

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

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

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

@@ -5,7 +5,10 @@ import { H3 } from '@citygross/typography';
 var BaseTimelineItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  padding: ", "px 0;\n  position: relative;\n  > * {\n    &:nth-child(2) {\n      flex-grow: 1;\n    }\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  padding: ", "px 0;\n  position: relative;\n  > * {\n    &:nth-child(2) {\n      flex-grow: 1;\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var BaseTimeline = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var TimeLineH3 = styled(H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: ", "px;\n"], ["\n  padding-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var BaseTimelineList = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  &::before {\n    content: '';\n    border-left: 1px dashed ", ";\n    height: calc(100% - 24px);\n    position: absolute;\n    top: 12px;\n    left: 3.5px;\n  }\n"], ["\n  position: relative;\n  &::before {\n    content: '';\n    border-left: 1px dashed ", ";\n    height: calc(100% - 24px);\n    position: absolute;\n    top: 12px;\n    left: 3.5px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen; });
+var BaseTimelineList = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n\n  &::before {\n    content: '';\n    border-left: 1px\n      ", ";\n    height: calc(100% - 28px);\n    position: absolute;\n    top: 14px;\n    left: 3.5px;\n  }\n"], ["\n  position: relative;\n\n  &::before {\n    content: '';\n    border-left: 1px\n      ", ";\n    height: calc(100% - 28px);\n    position: absolute;\n    top: 14px;\n    left: 3.5px;\n  }\n"])), function (props) {
+    var _a, _b;
+    return props.borderStyle + " " + ((_a = props === null || props === void 0 ? void 0 : props.borderColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.alertGreen);
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 export { BaseTimeline, BaseTimelineItem, BaseTimelineList, TimeLineH3 };

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

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

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

@@ -2,11 +2,12 @@ import React from 'react';
 import '@citygross/typography';
 import '../AddressBlock/AddressBlock.styles.js';
 import '../../../../design-tokens/build/index.js';
+import '@citygross/icons';
+import '../BoxArrow/BoxArrow.styles.js';
 import '../AlertBox/AlertBox.styles.js';
 import '../Button/Button.js';
 import '@citygross/utils';
 import '@citygross/design-tokens';
-import '@citygross/icons';
 import '../Logo/Logo.styles.js';
 import '../Header/Header.styles.js';
 import '../HeaderLink/HeaderLink.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.72",
+  "version": "0.7.74",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@citygross/design-tokens": "^0.2.22",
-    "@citygross/icons": "^0.1.3",
+    "@citygross/icons": "^0.1.4",
     "@citygross/react-use-bg-wizard": "^0.0.8",
     "@citygross/typography": "^0.0.51",
     "@citygross/utils": "^0.0.21",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "944a5eff6dce323177930c7dc344962d3acd0045"
+  "gitHead": "79ef7ee7c4ec6a292cb9149b9765fa42467452ba"
 }