@citygross/components 0.14.3 → 0.14.5

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

@@ -1,8 +1,7 @@
-import { TCartSubTotal } from './CartSubTotal';
+import { type TCartSubTotal } from './CartSubTotal';
 declare type TCartSubTotalContainer = Pick<TCartSubTotal, 'type'>;
 export declare const CartSubTotalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartSubTotalContainer, never>;
 export declare const SubTotalLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToolTipButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 declare type TCartSubTotalPrice = Pick<TCartSubTotal, 'priceColor'>;
 export declare const Price: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartSubTotalPrice, never>;
 export {};

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

@@ -10,7 +10,6 @@ export declare const CartSummaryContent: import("styled-components").StyledCompo
 export declare const CartLine: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartLine, never>;
 export declare const AmountWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LabelWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ToolTipButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const CartSummaryTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const QuantitySpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const TotalLine: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartLine, never>;

package/build/@types/components/CgButton/ToolTipButton/ToolTipButton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ToolTipButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;

package/build/@types/components/CgButton/ToolTipButton/ToolTipButton.styles.d.ts

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

package/build/@types/components/FormElements/Checkbox/Checkbox.styles.d.ts

@@ -1,3 +1,3 @@
-import { TOptionInputContainer } from '../FormElement.types';
+import type { TOptionInputContainer } from '../FormElement.types';
 export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOptionInputContainer, never>;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 export declare type TToolTipDialog = {
-    id?: string;
-    info: React.ReactNode;
     onBottom?: boolean;
     toggle: () => void;
-};
-export declare const ToolTipDialog: ({ id, info, onBottom, toggle }: TToolTipDialog) => JSX.Element;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const ToolTipDialog: ({ children, id, onBottom, toggle }: TToolTipDialog) => JSX.Element;

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

@@ -1,5 +1,4 @@
-export declare type TDialogContainer = {
-    onBottom?: boolean;
-};
+import type { TToolTipDialog } from './ToolTipDialog';
+export declare type TDialogContainer = Pick<TToolTipDialog, 'onBottom'>;
 export declare const DialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDialogContainer, never>;
 export declare const DialogClose: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

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

@@ -16,6 +16,7 @@ export * from './components/CgButton/CgButton';
 export * from './components/CgButton/CgButton.types';
 export * from './components/CgButton/ButtonAsLink/ButtonAsLink';
 export * from './components/CgButton/DivAsButton/DivAsButton';
+export * from './components/CgButton/ToolTipButton/ToolTipButton';
 export * from './components/Chips/Chip';
 export * from './components/Collapsable/Collapsable';
 export * from './components/CouponCode/CouponCode';

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var designTokens = require('@citygross/design-tokens');
 var icons = require('@citygross/icons');
-var typography = require('@citygross/typography');
 var Accordion_styles = require('./Accordion.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -62,7 +61,7 @@ var Accordion = function (_a) {
                 setIsOpen(true);
                 onToggle === null || onToggle === void 0 ? void 0 : onToggle(true);
             }, type: "button" },
-            React__default["default"].createElement(typography.BodyText, { fontWeight: "medium" }, title),
+            title,
             React__default["default"].createElement(Accordion_styles.Chevron, { "data-state": isOpen ? 'open' : 'collapsed' },
                 React__default["default"].createElement(icons.Icons.ChevronDown, { "aria-hidden": "true", height: (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))),
         React__default["default"].createElement(Accordion_styles.Content, { "aria-labelledby": headerId, "data-state": isOpen ? 'open' : 'collapsed', hidden: isCollapsed, id: contentId, maxHeight: isOpen ? contentHeight : 0, onTransitionEnd: function () {

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

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

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

@@ -14,13 +14,21 @@ var Container = styled__default["default"].div(templateObject_1 || (templateObje
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.light;
 });
-var Header = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"], ["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"])), function (_a) {
+var Header = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"], ["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"])), function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight) === null || _c === void 0 ? void 0 : _c.medium;
+}, function (_a) {
     var _b, _c;
     var theme = _a.theme;
     return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.md, "px");
 });
 var Chevron = styled__default["default"].span(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  transition: transform 200ms ease;\n\n  &[data-state='open'] {\n    transform: rotate(180deg);\n  }\n"], ["\n  display: inline-flex;\n  transition: transform 200ms ease;\n\n  &[data-state='open'] {\n    transform: rotate(180deg);\n  }\n"])));
-var Content = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition: max-height 220ms ease, opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"], ["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition: max-height 220ms ease, opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"])), function (_a) {
+var Content = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition:\n    max-height 220ms ease,\n    opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"], ["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition:\n    max-height 220ms ease,\n    opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"])), function (_a) {
     var maxHeight = _a.maxHeight;
     return maxHeight;
 }, function (_a) {

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

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

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

@@ -26,9 +26,10 @@ require('@citygross/utils');
 require('react-loading-skeleton');
 require('../CartItemSummary/CartItemSummary.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
+require('../../../../design-tokens/build/index.js');
+require('../CgButton/ToolTipButton/ToolTipButton.styles.js');
 require('../ToolTipDialog/ToolTipDialog.styles.js');
 require('../CartSummary/CartSummary.styles.js');
-require('../../../../design-tokens/build/index.js');
 require('../CgButton/ButtonAsLink/ButtonAsLink.styles.js');
 require('../CgButton/CgButton.styles.js');
 require('../Chips/Chip.styles.js');
@@ -45,10 +46,10 @@ require('../Fieldset/Fieldset.styles.js');
 require('../Flex/Flex.styles.js');
 require('../Form/Form.styles.js');
 require('../FormControl/FormControl.js');
-require('../ScreenReader/ScreenReader.styles.js');
 require('../FormElements/FormElement.types.js');
-require('../FormElements/Checkbox/Checkbox.styles.js');
+require('../ScreenReader/ScreenReader.styles.js');
 require('../FormElements/FormElement.styles.js');
+require('../FormElements/Checkbox/Checkbox.styles.js');
 require('../FormElements/Input/Input.js');
 require('../FormElements/InputOld/InputOld.styles.js');
 require('../FormElements/Radio/Radio.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/CartSubTotal/CartSubTotal.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var icons = require('@citygross/icons');
+var designTokens = require('@citygross/design-tokens');
 var utils = require('@citygross/utils');
+var ToolTipButton = require('../CgButton/ToolTipButton/ToolTipButton.js');
 var ToolTipDialog = require('../ToolTipDialog/ToolTipDialog.js');
 var CartSubTotal_styles = require('./CartSubTotal.styles.js');
-var designTokens = require('@citygross/design-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,12 +35,11 @@ var CartSubTotal = function (_a) {
         React__default["default"].createElement(CartSubTotal_styles.SubTotalLabel, null,
             label,
             children,
-            React__default["default"].createElement(CartSubTotal_styles.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": tooltipAriaLabel, "aria-describedby": infoOpen ? tooltipId : undefined, onClick: handleTooltipClick },
-                React__default["default"].createElement(icons.Icons.Info, { "aria-hidden": "true", height: 16, width: 16 }))),
+            React__default["default"].createElement(ToolTipButton.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": tooltipAriaLabel, "aria-describedby": infoOpen ? tooltipId : undefined, onClick: handleTooltipClick })),
         React__default["default"].createElement(CartSubTotal_styles.Price, { priceColor: priceColor }, (value !== 0 && !value) || isNaN(value)
             ? '-'
             : "".concat(fromPrice ? 'Från ' : '').concat(formattedPrice, " kr")),
-        infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, info: info, onBottom: infoOnBottom, toggle: toggleInfoOpen })))) : (React__default["default"].createElement(CartSubTotal_styles.CartSubTotalContainer, { type: type },
+        infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, onBottom: infoOnBottom, toggle: toggleInfoOpen }, info)))) : (React__default["default"].createElement(CartSubTotal_styles.CartSubTotalContainer, { type: type },
         React__default["default"].createElement(CartSubTotal_styles.SubTotalLabel, null,
             label,
             children),

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

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

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

@@ -26,19 +26,13 @@ var SubTotalLabel = styled__default["default"].div(templateObject_2 || (template
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
 });
-var ToolTipButton = styled__default["default"].button(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: ", "px;\n\n  svg {\n    display: block;\n  }\n"], ["\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: ", "px;\n\n  svg {\n    display: block;\n  }\n"])), function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
-});
-var Price = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Price = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var priceColor = _a.priceColor;
     return priceColor;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;
 
 exports.CartSubTotalContainer = CartSubTotalContainer;
 exports.Price = Price;
 exports.SubTotalLabel = SubTotalLabel;
-exports.ToolTipButton = ToolTipButton;
 //# sourceMappingURL=CartSubTotal.styles.js.map

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

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

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
-var utils = require('@citygross/utils');
 var React = require('react');
-var icons = require('@citygross/icons');
-var ToolTipDialog = require('../ToolTipDialog/ToolTipDialog.js');
-var CartSummary_styles = require('./CartSummary.styles.js');
 var typography = require('@citygross/typography');
+var utils = require('@citygross/utils');
 var index = require('../../../../design-tokens/build/index.js');
+var ToolTipButton = require('../CgButton/ToolTipButton/ToolTipButton.js');
+var ToolTipDialog = require('../ToolTipDialog/ToolTipDialog.js');
+var CartSummary_styles = require('./CartSummary.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -53,12 +53,6 @@ function CartSummary(_a) {
     if (charges.length > 0) {
         summaryParts.push("".concat(charges.length, " avgifter"));
     }
-    var summaryText = summaryParts.length > 0
-        ? "".concat(summaryParts.join(', '), ". ").concat(totalLabel, " ").concat(utils.formatPrice(cartSummary.totalAmount))
-        : "".concat(totalLabel, " ").concat(utils.formatPrice(cartSummary.totalAmount));
-    cartSummary.totalDiscount > 0
-        ? "".concat(summaryText, ". ").concat(saveLabel, " ").concat(utils.formatPrice(cartSummary.totalDiscount))
-        : summaryText;
     var ChargeLine = function (_a) {
         var _b, _c;
         var charge = _a.charge;
@@ -74,9 +68,8 @@ function CartSummary(_a) {
             React__default["default"].createElement(CartSummary_styles.LabelWrapper, null,
                 React__default["default"].createElement(typography.BodyText, null, chargeName),
                 charge.info && (React__default["default"].createElement(React.Fragment, null,
-                    React__default["default"].createElement(CartSummary_styles.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || "Mer information om ".concat(chargeName), "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen },
-                        React__default["default"].createElement(icons.Icons.Info, { "aria-hidden": "true", height: 16, width: 16 })),
-                    infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, info: charge.info, toggle: toggleInfoOpen }))))),
+                    React__default["default"].createElement(ToolTipButton.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || "Mer information om ".concat(chargeName), "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen }),
+                    infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, toggle: toggleInfoOpen }, charge.info))))),
             React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
                 charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark, "aria-label": "Original price ".concat(utils.formatPrice(charge.cancelledAmount)) }, utils.formatPrice(charge.cancelledAmount))),
                 React__default["default"].createElement(typography.BodyText, { "aria-label": "".concat(chargeName, " ").concat(utils.formatPrice(charge.amount)) }, utils.formatPrice(charge.amount)))));

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

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

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

@@ -15,11 +15,10 @@ var CartSummaryContent = styled__default["default"].div(templateObject_3 || (tem
 var CartLine = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
 var AmountWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var LabelWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  position: relative;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var ToolTipButton = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  \n  &:hover {\n    opacity: 0.7;\n  }\n  \n  &:focus {\n    outline-offset: ", "px;\n  }\n"], ["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  \n  &:hover {\n    opacity: 0.7;\n  }\n  \n  &:focus {\n    outline-offset: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
-var CartSummaryTitle = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\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.sm; }, 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; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
-var QuantitySpan = styled__default["default"].span(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; });
-var TotalLine = styled__default["default"](CartLine)(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var CartSummaryTitle = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\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.sm; }, 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; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
+var QuantitySpan = styled__default["default"].span(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; });
+var TotalLine = styled__default["default"](CartLine)(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
 exports.AmountWrapper = AmountWrapper;
 exports.CartLine = CartLine;
@@ -29,6 +28,5 @@ exports.CartSummaryContent = CartSummaryContent;
 exports.CartSummaryTitle = CartSummaryTitle;
 exports.LabelWrapper = LabelWrapper;
 exports.QuantitySpan = QuantitySpan;
-exports.ToolTipButton = ToolTipButton;
 exports.TotalLine = TotalLine;
 //# sourceMappingURL=CartSummary.styles.js.map

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

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

package/build/cjs/components/src/components/CgButton/ToolTipButton/ToolTipButton.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.js');
+var React = require('react');
+var designTokens = require('@citygross/design-tokens');
+var icons = require('@citygross/icons');
+var ToolTipButton_styles = require('./ToolTipButton.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ToolTipButton = function (_a) {
+    var _b, _c;
+    var props = _tslib.__rest(_a, []);
+    return (React__default["default"].createElement(ToolTipButton_styles.ToolTipButton, _tslib.__assign({}, props),
+        React__default["default"].createElement(icons.Icons.Info, { "aria-hidden": "true", height: (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm })));
+};
+
+exports.ToolTipButton = ToolTipButton;
+//# sourceMappingURL=ToolTipButton.js.map

package/build/cjs/components/src/components/CgButton/ToolTipButton/ToolTipButton.js.map

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

package/build/cjs/components/src/components/CgButton/ToolTipButton/ToolTipButton.styles.js

@@ -0,0 +1,20 @@
+'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 ToolTipButton = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: ", "px;\n\n  svg {\n    display: block;\n  }\n"], ["\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: ", "px;\n\n  svg {\n    display: block;\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
+});
+var templateObject_1;
+
+exports.ToolTipButton = ToolTipButton;
+//# sourceMappingURL=ToolTipButton.styles.js.map

package/build/cjs/components/src/components/CgButton/ToolTipButton/ToolTipButton.styles.js.map

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

package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../../_virtual/_tslib.js');
 var React = require('react');
 var icons = require('@citygross/icons');
-var ScreenReader = require('../../ScreenReader/ScreenReader.js');
 var typography = require('@citygross/typography');
 var formElement = require('../../../helpers/form-element.js');
-var Checkbox_styles = require('./Checkbox.styles.js');
+var ScreenReader = require('../../ScreenReader/ScreenReader.js');
 var FormElement_styles = require('../FormElement.styles.js');
+var Checkbox_styles = require('./Checkbox.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +23,7 @@ var Checkbox = function (_a) {
         React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { attributes: attributes },
             React__default["default"].createElement(Checkbox_styles.IconContainer, null,
                 React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor }))),
-        hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(typography.BodyText, { color: labelColor, size: typography.TextTypes.TextSize.SMALL }, label))));
+        hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(typography.BodyText, { color: labelColor }, label))));
 };
 
 exports.Checkbox = Checkbox;

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

@@ -82,7 +82,7 @@ var ErrorLabel = styled__default["default"].label(templateObject_4 || (templateO
     var theme = _a.theme;
     return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2;
 });
-var OptionInputWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"])), function (_a) {
+var OptionInputWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: flex-start;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: flex-start;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {

package/build/cjs/components/src/components/FormElements/Radio/Radio.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
 var React = require('react');
-var ScreenReader = require('../../ScreenReader/ScreenReader.js');
 var typography = require('@citygross/typography');
 var formElement = require('../../../helpers/form-element.js');
-var Radio_styles = require('./Radio.styles.js');
+var ScreenReader = require('../../ScreenReader/ScreenReader.js');
 var FormElement_styles = require('../FormElement.styles.js');
+var Radio_styles = require('./Radio.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,7 +21,7 @@ var Radio = function (_a) {
     return (React__default["default"].createElement(FormElement_styles.OptionInputWrapper, { as: "label", disabled: disabled },
         React__default["default"].createElement(FormElement_styles.HiddenInput, _tslib.__assign({ type: "radio", checked: checked, disabled: disabled }, props)),
         React__default["default"].createElement(Radio_styles.RadioContainer, { attributes: attributes, borderSize: borderSize, checked: checked, disabled: disabled }),
-        showLabel ? (React__default["default"].createElement(typography.BodyText, { color: labelColor, size: typography.TextTypes.TextSize.SMALL }, label)) : (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label }))));
+        showLabel ? (React__default["default"].createElement(typography.BodyText, { color: labelColor }, label)) : (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label }))));
 };
 
 exports.Radio = Radio;

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var utils = require('@citygross/utils');
+var designTokens = require('@citygross/design-tokens');
 var icons = require('@citygross/icons');
+var utils = require('@citygross/utils');
 var ToolTipDialog_styles = require('./ToolTipDialog.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,8 +13,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ToolTipDialog = function (_a) {
-    var id = _a.id, info = _a.info, onBottom = _a.onBottom, toggle = _a.toggle;
-    var infoRef = React.useRef(null);
+    var _b, _c, _d;
+    var children = _a.children, id = _a.id, onBottom = _a.onBottom, toggle = _a.toggle;
+    var toolTipRef = React.useRef(null);
     var isOpenRef = React.useRef(true);
     var triggerElementRef = React.useRef(null);
     React.useEffect(function () {
@@ -25,17 +27,17 @@ var ToolTipDialog = function (_a) {
         }
         toggle();
     }, [toggle]);
-    utils.useOutsideClick(infoRef, handleClose);
+    utils.useOutsideClick(toolTipRef, handleClose);
     React.useEffect(function () {
         var focusTrapCleanup;
-        if (infoRef.current) {
+        if (toolTipRef.current) {
             focusTrapCleanup = utils.focusTrap({
                 exitFunction: handleClose,
-                ref: infoRef
+                ref: toolTipRef
             });
         }
         var handleKeyDown = function (event) {
-            if (event.key === 'Escape' && isOpenRef.current && infoRef.current) {
+            if (event.key === 'Escape' && isOpenRef.current && toolTipRef.current) {
                 event.stopPropagation();
                 isOpenRef.current = false;
                 handleClose();
@@ -51,10 +53,10 @@ var ToolTipDialog = function (_a) {
             }
         };
     }, [handleClose]);
-    return (React__default["default"].createElement(ToolTipDialog_styles.DialogContainer, { "aria-live": "polite", id: id, onBottom: onBottom, ref: infoRef, role: "tooltip" },
-        info,
+    return (React__default["default"].createElement(ToolTipDialog_styles.DialogContainer, { "aria-live": "polite", id: id, onBottom: onBottom, ref: toolTipRef, role: "tooltip" },
+        children,
         React__default["default"].createElement(ToolTipDialog_styles.DialogClose, { "aria-label": "St\u00E4ng", onClick: handleClose },
-            React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", color: "white", height: 20, width: 20 }))));
+            React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white, height: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2, width: (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm2 }))));
 };
 
 exports.ToolTipDialog = ToolTipDialog;

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

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

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

@@ -23,6 +23,7 @@ var CgButton = require('./components/CgButton/CgButton.js');
 var CgButton_types = require('./components/CgButton/CgButton.types.js');
 var ButtonAsLink = require('./components/CgButton/ButtonAsLink/ButtonAsLink.js');
 var DivAsButton = require('./components/CgButton/DivAsButton/DivAsButton.js');
+var ToolTipButton = require('./components/CgButton/ToolTipButton/ToolTipButton.js');
 var Chip = require('./components/Chips/Chip.js');
 var Collapsable = require('./components/Collapsable/Collapsable.js');
 var CouponCode = require('./components/CouponCode/CouponCode.js');
@@ -149,6 +150,7 @@ Object.defineProperty(exports, 'EButtonVariant', {
 });
 exports.ButtonAsLink = ButtonAsLink.ButtonAsLink;
 exports.DivAsButton = DivAsButton.DivAsButton;
+exports.ToolTipButton = ToolTipButton.ToolTipButton;
 exports.Chip = Chip.Chip;
 exports.Collapsable = Collapsable.Collapsable;
 exports.CouponCode = CouponCode.CouponCode;

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/Accordion/Accordion.js

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useLayoutEffect, useEffect } from 'react';
 import { theme } from '@citygross/design-tokens';
 import { Icons } from '@citygross/icons';
-import { BodyText } from '@citygross/typography';
 import { Container, Header, Chevron, Content } from './Accordion.styles.js';
 
 var Accordion = function (_a) {
@@ -54,7 +53,7 @@ var Accordion = function (_a) {
                 setIsOpen(true);
                 onToggle === null || onToggle === void 0 ? void 0 : onToggle(true);
             }, type: "button" },
-            React.createElement(BodyText, { fontWeight: "medium" }, title),
+            title,
             React.createElement(Chevron, { "data-state": isOpen ? 'open' : 'collapsed' },
                 React.createElement(Icons.ChevronDown, { "aria-hidden": "true", height: (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))),
         React.createElement(Content, { "aria-labelledby": headerId, "data-state": isOpen ? 'open' : 'collapsed', hidden: isCollapsed, id: contentId, maxHeight: isOpen ? contentHeight : 0, onTransitionEnd: function () {

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

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

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

@@ -6,13 +6,21 @@ var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplat
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.light;
 });
-var Header = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"], ["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"])), function (_a) {
+var Header = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"], ["\n  background: none;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: ", ";\n  text-align: left;\n  width: 100%;\n"])), function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight) === null || _c === void 0 ? void 0 : _c.medium;
+}, function (_a) {
     var _b, _c;
     var theme = _a.theme;
     return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.md, "px");
 });
 var Chevron = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  transition: transform 200ms ease;\n\n  &[data-state='open'] {\n    transform: rotate(180deg);\n  }\n"], ["\n  display: inline-flex;\n  transition: transform 200ms ease;\n\n  &[data-state='open'] {\n    transform: rotate(180deg);\n  }\n"])));
-var Content = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition: max-height 220ms ease, opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"], ["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition: max-height 220ms ease, opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"])), function (_a) {
+var Content = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition:\n    max-height 220ms ease,\n    opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"], ["\n  max-height: ", "px;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0 ", "px;\n  transition:\n    max-height 220ms ease,\n    opacity 200ms ease;\n\n  &[data-state='open'] {\n    opacity: 1;\n    padding: ", ";\n  }\n"])), function (_a) {
     var maxHeight = _a.maxHeight;
     return maxHeight;
 }, function (_a) {

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

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

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

@@ -22,9 +22,10 @@ import '@citygross/utils';
 import 'react-loading-skeleton';
 import '../CartItemSummary/CartItemSummary.styles.js';
 import '../CartSubTotal/CartSubTotal.js';
+import '../../../../design-tokens/build/index.js';
+import '../CgButton/ToolTipButton/ToolTipButton.styles.js';
 import '../ToolTipDialog/ToolTipDialog.styles.js';
 import '../CartSummary/CartSummary.styles.js';
-import '../../../../design-tokens/build/index.js';
 import '../CgButton/ButtonAsLink/ButtonAsLink.styles.js';
 import '../CgButton/CgButton.styles.js';
 import '../Chips/Chip.styles.js';
@@ -41,10 +42,10 @@ import '../Fieldset/Fieldset.styles.js';
 import '../Flex/Flex.styles.js';
 import '../Form/Form.styles.js';
 import '../FormControl/FormControl.js';
-import '../ScreenReader/ScreenReader.styles.js';
 import '../FormElements/FormElement.types.js';
-import '../FormElements/Checkbox/Checkbox.styles.js';
+import '../ScreenReader/ScreenReader.styles.js';
 import '../FormElements/FormElement.styles.js';
+import '../FormElements/Checkbox/Checkbox.styles.js';
 import '../FormElements/Input/Input.js';
 import '../FormElements/InputOld/InputOld.styles.js';
 import '../FormElements/Radio/Radio.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/CartSubTotal/CartSubTotal.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { Icons } from '@citygross/icons';
+import { theme } from '@citygross/design-tokens';
 import { formatPriceWithNoZero } from '@citygross/utils';
+import { ToolTipButton } from '../CgButton/ToolTipButton/ToolTipButton.js';
 import { ToolTipDialog } from '../ToolTipDialog/ToolTipDialog.js';
-import { CartSubTotalContainer, SubTotalLabel, ToolTipButton, Price } from './CartSubTotal.styles.js';
-import { theme } from '@citygross/design-tokens';
+import { CartSubTotalContainer, SubTotalLabel, Price } from './CartSubTotal.styles.js';
 
 var ECartSubTotalTypes;
 (function (ECartSubTotalTypes) {
@@ -27,12 +27,11 @@ var CartSubTotal = function (_a) {
         React.createElement(SubTotalLabel, null,
             label,
             children,
-            React.createElement(ToolTipButton, { "aria-expanded": infoOpen, "aria-label": tooltipAriaLabel, "aria-describedby": infoOpen ? tooltipId : undefined, onClick: handleTooltipClick },
-                React.createElement(Icons.Info, { "aria-hidden": "true", height: 16, width: 16 }))),
+            React.createElement(ToolTipButton, { "aria-expanded": infoOpen, "aria-label": tooltipAriaLabel, "aria-describedby": infoOpen ? tooltipId : undefined, onClick: handleTooltipClick })),
         React.createElement(Price, { priceColor: priceColor }, (value !== 0 && !value) || isNaN(value)
             ? '-'
             : "".concat(fromPrice ? 'Från ' : '').concat(formattedPrice, " kr")),
-        infoOpen && (React.createElement(ToolTipDialog, { id: tooltipId, info: info, onBottom: infoOnBottom, toggle: toggleInfoOpen })))) : (React.createElement(CartSubTotalContainer, { type: type },
+        infoOpen && (React.createElement(ToolTipDialog, { id: tooltipId, onBottom: infoOnBottom, toggle: toggleInfoOpen }, info)))) : (React.createElement(CartSubTotalContainer, { type: type },
         React.createElement(SubTotalLabel, null,
             label,
             children),

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

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

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

@@ -18,16 +18,11 @@ var SubTotalLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTem
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
 });
-var ToolTipButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: ", "px;\n\n  svg {\n    display: block;\n  }\n"], ["\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: ", "px;\n\n  svg {\n    display: block;\n  }\n"])), function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
-});
-var Price = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Price = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var priceColor = _a.priceColor;
     return priceColor;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;
 
-export { CartSubTotalContainer, Price, SubTotalLabel, ToolTipButton };
+export { CartSubTotalContainer, Price, SubTotalLabel };
 //# sourceMappingURL=CartSubTotal.styles.js.map

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

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

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

@@ -1,11 +1,11 @@
 import { __rest } from '../../../../_virtual/_tslib.js';
-import { formatPrice } from '@citygross/utils';
 import React, { useState, Fragment } from 'react';
-import { Icons } from '@citygross/icons';
-import { ToolTipDialog } from '../ToolTipDialog/ToolTipDialog.js';
-import { CartSummaryContainer, CartPaymentContainer, CartSummaryTitle, CartSummaryContent, CartLine, QuantitySpan, AmountWrapper, TotalLine, LabelWrapper, ToolTipButton } from './CartSummary.styles.js';
 import { H3, BodyText, TextTypes } from '@citygross/typography';
+import { formatPrice } from '@citygross/utils';
 import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
+import { ToolTipButton } from '../CgButton/ToolTipButton/ToolTipButton.js';
+import { ToolTipDialog } from '../ToolTipDialog/ToolTipDialog.js';
+import { CartSummaryContainer, CartPaymentContainer, CartSummaryTitle, CartSummaryContent, CartLine, QuantitySpan, AmountWrapper, TotalLine, LabelWrapper } from './CartSummary.styles.js';
 
 var calculateSummaryLine = function (items) {
     var sumOfItems = items === null || items === void 0 ? void 0 : items.reduce(function (prev, curr) {
@@ -45,12 +45,6 @@ function CartSummary(_a) {
     if (charges.length > 0) {
         summaryParts.push("".concat(charges.length, " avgifter"));
     }
-    var summaryText = summaryParts.length > 0
-        ? "".concat(summaryParts.join(', '), ". ").concat(totalLabel, " ").concat(formatPrice(cartSummary.totalAmount))
-        : "".concat(totalLabel, " ").concat(formatPrice(cartSummary.totalAmount));
-    cartSummary.totalDiscount > 0
-        ? "".concat(summaryText, ". ").concat(saveLabel, " ").concat(formatPrice(cartSummary.totalDiscount))
-        : summaryText;
     var ChargeLine = function (_a) {
         var _b, _c;
         var charge = _a.charge;
@@ -66,9 +60,8 @@ function CartSummary(_a) {
             React.createElement(LabelWrapper, null,
                 React.createElement(BodyText, null, chargeName),
                 charge.info && (React.createElement(Fragment, null,
-                    React.createElement(ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || "Mer information om ".concat(chargeName), "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen },
-                        React.createElement(Icons.Info, { "aria-hidden": "true", height: 16, width: 16 })),
-                    infoOpen && (React.createElement(ToolTipDialog, { id: tooltipId, info: charge.info, toggle: toggleInfoOpen }))))),
+                    React.createElement(ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || "Mer information om ".concat(chargeName), "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen }),
+                    infoOpen && (React.createElement(ToolTipDialog, { id: tooltipId, toggle: toggleInfoOpen }, charge.info))))),
             React.createElement(AmountWrapper, null,
                 charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_c = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _c === void 0 ? void 0 : _c.dark, "aria-label": "Original price ".concat(formatPrice(charge.cancelledAmount)) }, formatPrice(charge.cancelledAmount))),
                 React.createElement(BodyText, { "aria-label": "".concat(chargeName, " ").concat(formatPrice(charge.amount)) }, formatPrice(charge.amount)))));

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

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

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

@@ -7,11 +7,10 @@ var CartSummaryContent = styled.div(templateObject_3 || (templateObject_3 = __ma
 var CartLine = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
 var AmountWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var LabelWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  position: relative;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var ToolTipButton = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  \n  &:hover {\n    opacity: 0.7;\n  }\n  \n  &:focus {\n    outline-offset: ", "px;\n  }\n"], ["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  \n  &:hover {\n    opacity: 0.7;\n  }\n  \n  &:focus {\n    outline-offset: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
-var CartSummaryTitle = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\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.sm; }, 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; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
-var QuantitySpan = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; });
-var TotalLine = styled(CartLine)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var CartSummaryTitle = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\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.sm; }, 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; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
+var QuantitySpan = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; });
+var TotalLine = styled(CartLine)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
-export { AmountWrapper, CartLine, CartPaymentContainer, CartSummaryContainer, CartSummaryContent, CartSummaryTitle, LabelWrapper, QuantitySpan, ToolTipButton, TotalLine };
+export { AmountWrapper, CartLine, CartPaymentContainer, CartSummaryContainer, CartSummaryContent, CartSummaryTitle, LabelWrapper, QuantitySpan, TotalLine };
 //# sourceMappingURL=CartSummary.styles.js.map

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

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

package/build/es/components/src/components/CgButton/ToolTipButton/ToolTipButton.js

@@ -0,0 +1,15 @@
+import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
+import React from 'react';
+import { theme } from '@citygross/design-tokens';
+import { Icons } from '@citygross/icons';
+import { ToolTipButton as ToolTipButton$1 } from './ToolTipButton.styles.js';
+
+var ToolTipButton = function (_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    return (React.createElement(ToolTipButton$1, __assign({}, props),
+        React.createElement(Icons.Info, { "aria-hidden": "true", height: (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm })));
+};
+
+export { ToolTipButton };
+//# sourceMappingURL=ToolTipButton.js.map

package/build/es/components/src/components/CgButton/ToolTipButton/ToolTipButton.js.map

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

package/build/es/components/src/components/CgButton/ToolTipButton/ToolTipButton.styles.js

@@ -0,0 +1,12 @@
+import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var ToolTipButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: ", "px;\n\n  svg {\n    display: block;\n  }\n"], ["\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: ", "px;\n\n  svg {\n    display: block;\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
+});
+var templateObject_1;
+
+export { ToolTipButton };
+//# sourceMappingURL=ToolTipButton.styles.js.map

package/build/es/components/src/components/CgButton/ToolTipButton/ToolTipButton.styles.js.map

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

package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
 import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
 import React from 'react';
 import { Icons } from '@citygross/icons';
-import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
-import { BodyText, TextTypes } from '@citygross/typography';
+import { BodyText } from '@citygross/typography';
 import { getColorAttributes } from '../../../helpers/form-element.js';
-import { CheckboxContainer, IconContainer } from './Checkbox.styles.js';
+import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
 import { OptionInputWrapper, HiddenInput } from '../FormElement.styles.js';
+import { CheckboxContainer, IconContainer } from './Checkbox.styles.js';
 
 var Checkbox = function (_a) {
     var checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = __rest(_a, ["checked", "disabled", "hideLabel", "label"]);
@@ -15,7 +15,7 @@ var Checkbox = function (_a) {
         React.createElement(CheckboxContainer, { attributes: attributes },
             React.createElement(IconContainer, null,
                 React.createElement(Icons.CheckMark, { color: iconColor }))),
-        hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(BodyText, { color: labelColor, size: TextTypes.TextSize.SMALL }, label))));
+        hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(BodyText, { color: labelColor }, label))));
 };
 
 export { Checkbox };

package/build/es/components/src/components/FormElements/FormElement.styles.js

@@ -74,7 +74,7 @@ var ErrorLabel = styled.label(templateObject_4 || (templateObject_4 = __makeTemp
     var theme = _a.theme;
     return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2;
 });
-var OptionInputWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"])), function (_a) {
+var OptionInputWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: flex-start;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: flex-start;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {

package/build/es/components/src/components/FormElements/Radio/Radio.js

@@ -1,10 +1,10 @@
 import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
 import React from 'react';
-import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
-import { BodyText, TextTypes } from '@citygross/typography';
+import { BodyText } from '@citygross/typography';
 import { getColorAttributes, getBorderSize } from '../../../helpers/form-element.js';
-import { RadioContainer } from './Radio.styles.js';
+import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
 import { OptionInputWrapper, HiddenInput } from '../FormElement.styles.js';
+import { RadioContainer } from './Radio.styles.js';
 
 var Radio = function (_a) {
     var checked = _a.checked, disabled = _a.disabled, label = _a.label, showLabel = _a.showLabel, props = __rest(_a, ["checked", "disabled", "label", "showLabel"]);
@@ -13,7 +13,7 @@ var Radio = function (_a) {
     return (React.createElement(OptionInputWrapper, { as: "label", disabled: disabled },
         React.createElement(HiddenInput, __assign({ type: "radio", checked: checked, disabled: disabled }, props)),
         React.createElement(RadioContainer, { attributes: attributes, borderSize: borderSize, checked: checked, disabled: disabled }),
-        showLabel ? (React.createElement(BodyText, { color: labelColor, size: TextTypes.TextSize.SMALL }, label)) : (React.createElement(ScreenReader, { string: label }))));
+        showLabel ? (React.createElement(BodyText, { color: labelColor }, label)) : (React.createElement(ScreenReader, { string: label }))));
 };
 
 export { Radio };

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

@@ -1,11 +1,13 @@
 import React, { useRef, useEffect, useCallback } from 'react';
-import { useOutsideClick, focusTrap } from '@citygross/utils';
+import { theme } from '@citygross/design-tokens';
 import { Icons } from '@citygross/icons';
+import { useOutsideClick, focusTrap } from '@citygross/utils';
 import { DialogContainer, DialogClose } from './ToolTipDialog.styles.js';
 
 var ToolTipDialog = function (_a) {
-    var id = _a.id, info = _a.info, onBottom = _a.onBottom, toggle = _a.toggle;
-    var infoRef = useRef(null);
+    var _b, _c, _d;
+    var children = _a.children, id = _a.id, onBottom = _a.onBottom, toggle = _a.toggle;
+    var toolTipRef = useRef(null);
     var isOpenRef = useRef(true);
     var triggerElementRef = useRef(null);
     useEffect(function () {
@@ -17,17 +19,17 @@ var ToolTipDialog = function (_a) {
         }
         toggle();
     }, [toggle]);
-    useOutsideClick(infoRef, handleClose);
+    useOutsideClick(toolTipRef, handleClose);
     useEffect(function () {
         var focusTrapCleanup;
-        if (infoRef.current) {
+        if (toolTipRef.current) {
             focusTrapCleanup = focusTrap({
                 exitFunction: handleClose,
-                ref: infoRef
+                ref: toolTipRef
             });
         }
         var handleKeyDown = function (event) {
-            if (event.key === 'Escape' && isOpenRef.current && infoRef.current) {
+            if (event.key === 'Escape' && isOpenRef.current && toolTipRef.current) {
                 event.stopPropagation();
                 isOpenRef.current = false;
                 handleClose();
@@ -43,10 +45,10 @@ var ToolTipDialog = function (_a) {
             }
         };
     }, [handleClose]);
-    return (React.createElement(DialogContainer, { "aria-live": "polite", id: id, onBottom: onBottom, ref: infoRef, role: "tooltip" },
-        info,
+    return (React.createElement(DialogContainer, { "aria-live": "polite", id: id, onBottom: onBottom, ref: toolTipRef, role: "tooltip" },
+        children,
         React.createElement(DialogClose, { "aria-label": "St\u00E4ng", onClick: handleClose },
-            React.createElement(Icons.Cross, { "aria-hidden": "true", color: "white", height: 20, width: 20 }))));
+            React.createElement(Icons.Cross, { "aria-hidden": "true", color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white, height: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2, width: (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.sm2 }))));
 };
 
 export { ToolTipDialog };

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

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

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

@@ -19,6 +19,7 @@ export { CgButton } from './components/CgButton/CgButton.js';
 export { EButtonSize, EButtonVariant } from './components/CgButton/CgButton.types.js';
 export { ButtonAsLink } from './components/CgButton/ButtonAsLink/ButtonAsLink.js';
 export { DivAsButton } from './components/CgButton/DivAsButton/DivAsButton.js';
+export { ToolTipButton } from './components/CgButton/ToolTipButton/ToolTipButton.js';
 export { Chip } from './components/Chips/Chip.js';
 export { Collapsable } from './components/Collapsable/Collapsable.js';
 export { CouponCode, ECouponCodeStatus } from './components/CouponCode/CouponCode.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.14.3",
+  "version": "0.14.5",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "287719ceadb682952742e10dc6a70be2acb046ed"
+  "gitHead": "78a4d8252a80d5fbe3460b0c67d6c28d7b25b2bc"
 }