@citygross/components 0.7.12 → 0.7.16

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

@@ -5,4 +5,4 @@ export declare type TCustomerInfoBlock = {
     background?: string;
     children: React.ReactNode;
 };
-export declare function CustomerInfoBlock({ title, boldTitle, background, children }: TCustomerInfoBlock): JSX.Element;
+export declare function CustomerInfoBlock({ title, boldTitle, children }: TCustomerInfoBlock): JSX.Element;

package/build/@types/components/FormElements/TextArea/TextArea.stories.d.ts

@@ -4,6 +4,13 @@ import { TextAreaProps } from './TextArea.styles';
 declare const _default: {
     component: typeof TextArea;
     title: string;
+    argTypes: {
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const textArea: Story<TextAreaProps>;

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

@@ -1,5 +1,7 @@
 import React from 'react';
 export declare type TLayoutBox = {
     background?: string;
+    borderRadius?: number;
+    shadowInset?: boolean;
 };
 export declare const LayoutBox: React.FunctionComponent<TLayoutBox>;

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

@@ -1,6 +1,8 @@
 declare type TLayoutBoxContainer = {
     background: string;
     rounded?: boolean;
+    borderRadius?: number;
+    shadowInset?: boolean;
 };
 export declare const LayoutBoxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TLayoutBoxContainer, never>;
 export {};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+export declare type TIListItemRadio = {
+    name?: string;
+    image?: string;
+    description?: string;
+};
+export declare type TRadioOptions = {
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+};
+export declare type TListItemWithRadio = {
+    item?: TIListItemRadio;
+    loading?: boolean;
+    rightChildren?: React.ReactNode;
+    radioChildren?: React.ReactNode;
+};
+export declare function ListItemWithRadio({ item, loading, rightChildren, radioChildren }: TListItemWithRadio): JSX.Element;

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

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

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

@@ -0,0 +1,7 @@
+export declare const ListImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ListImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare const ListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ListLeft: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ListItemHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const RadioWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare enum Alignment {
     'flex-start' = 0,
     'center' = 1
@@ -7,7 +7,7 @@ export declare type TBaseRadioBox = {
     checked?: boolean;
     isDisabled?: boolean;
     align?: keyof typeof Alignment;
-    onClick?: React.Dispatch<React.SetStateAction<undefined>>;
+    onClick?: React.Dispatch<React.SetStateAction<undefined>> | (() => void);
     boxShadow?: boolean;
 };
 export declare const BaseRadioBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox & {

package/build/@types/components/RadioGroup/RadioListItem.d.ts

@@ -18,5 +18,7 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
     selected?: string | number;
     defaultDisabledString?: string;
     dotIndicator?: TDot;
+    transparent?: boolean;
+    noPadding?: boolean;
 };
-export declare function RadioListItem({ item, onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator }: TRadioListItemProps): JSX.Element;
+export declare function RadioListItem({ item, onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding }: TRadioListItemProps): JSX.Element;

package/build/@types/components/RadioGroup/RadioListItem.styles.d.ts

@@ -2,12 +2,13 @@
 export declare type TBaseRadioItemInputWrapper = {
     isDisabled?: boolean;
     flexGrow?: number;
+    noPadding?: boolean;
 };
-export declare const BaseRadioListItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    background: string;
-    rounded?: boolean | undefined;
-    padding?: number | undefined;
-}, never>;
+export declare type TBaseRadiolistItemcontainer = {
+    background?: string;
+    noPadding?: boolean;
+};
+export declare const BaseRadioListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadiolistItemcontainer, never>;
 export declare const BaseRadioItemLeftWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioItemInputWrapper, never>;
 export declare const ExtraTextContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").IH3) => JSX.Element, import("styled-components").DefaultTheme, {

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

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

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

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

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

@@ -1,5 +1,6 @@
 export declare type TRightColumn = {
     columnWidth: number;
+    hideRightColumnBefore?: number;
 };
 export declare type TContainer = {
     background?: string;

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

@@ -24,6 +24,7 @@ export * from './components/Header/Header';
 export * from './components/InfoTextBlock/InfoTextBlock';
 export * from './components/LayoutBox/LayoutBox';
 export * from './components/ListItem/ListItem';
+export * from './components/ListItemWithRadio/ListItemWithRadio';
 export * from './components/Links/Link';
 export * from './components/ListItem/ListItem';
 export * from './components/Modal/Modal';

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"], ["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.sm; }, function (props) { return props.background; }, function (props) { return (props.rounded ? '5px' : '0'); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return props.padding ? props.padding : (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.md; }, function (props) { return props.padding && "padding: " + props.padding + "px"; });
+var BoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"], ["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.md; }, function (props) { return props.background; }, function (props) { return (props.rounded ? '5px' : '0'); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { var _a, _b; return props.padding ? props.padding : (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { return props.padding && "padding: " + props.padding + "px"; });
 var templateObject_1;
 
 exports.BoxContainer = BoxContainer;

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

@@ -37,6 +37,7 @@ require('../FormGroup/FormGroup.styles.js');
 require('../InfoTextBlock/InfoTextBlock.styles.js');
 require('../LayoutBox/LayoutBox.styles.js');
 require('../ListItem/ListItem.styles.js');
+require('../ListItemWithRadio/ListItemWithRadio.styles.js');
 require('../Links/Link.js');
 require('react-dom');
 require('../Modal/Modal.styles.js');

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

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

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var typography = require('@citygross/typography');
-var Box = require('../Box/Box.js');
 var CustomerInfoBlock_styles = require('./CustomerInfoBlock.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,11 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function CustomerInfoBlock(_a) {
-    var _b = _a.title, title = _b === void 0 ? 'Dina Uppgifter' : _b, _c = _a.boldTitle, boldTitle = _c === void 0 ? true : _c, background = _a.background, children = _a.children;
-    return (React__default['default'].createElement(Box.Box, { background: background },
-        React__default['default'].createElement(CustomerInfoBlock_styles.CustomerInfoBlock, null,
-            React__default['default'].createElement(typography.H3, { fontWeight: boldTitle ? 'semiBold' : 'regular' }, title),
-            children)));
+    var _b = _a.title, title = _b === void 0 ? 'Dina Uppgifter' : _b, _c = _a.boldTitle, boldTitle = _c === void 0 ? true : _c, children = _a.children;
+    return (React__default['default'].createElement(CustomerInfoBlock_styles.CustomerInfoBlock, null,
+        React__default['default'].createElement(typography.H3, { fontWeight: boldTitle ? 'semiBold' : 'regular' }, title),
+        children));
 }
 
 exports.CustomerInfoBlock = CustomerInfoBlock;

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

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

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

@@ -9,17 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var TextArea = styled__default['default'].textarea(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  z-index: 2;\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", "px;\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  resize: vertical;\n  /* + 1 to remove scrollbar on default */\n  height: ", "px ;\n\n  width: 100%;\n  ", ";\n\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: 0 1px 5px rgb(0, 0, 0, 0.35);\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ::-webkit-scrollbar {\nwidth: 4px;\nbackground: ", ";\n}\n\n::-webkit-scrollbar-thumb {\nborder-radius: 10px;\nbackground-color: ", ";\n}\n\nscrollbar-width: thin;\nscrollbar-color:  ", ";\n"], ["\n  z-index: 2;\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", "px;\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  resize: vertical;\n  /* + 1 to remove scrollbar on default */\n  height: ", "px ;\n\n  width: 100%;\n  ", ";\n\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: 0 1px 5px rgb(0, 0, 0, 0.35);\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ::-webkit-scrollbar {\nwidth: 4px;\nbackground: ", ";\n}\n\n::-webkit-scrollbar-thumb {\nborder-radius: 10px;\nbackground-color: ", ";\n}\n\nscrollbar-width: thin;\nscrollbar-color:  ", ";\n"])), function (props) {
+var TextArea = styled__default['default'].textarea(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", "px;\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  resize: vertical;\n  width: 100%;\n  ", ";\n\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"], ["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", "px;\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  resize: vertical;\n  width: 100%;\n  ", ";\n\n  transition: ", ";\n\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"])), function (props) {
     var _a, _b, _c, _d;
     return props.disabled
         ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
         : (_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.dark;
-}, function (props) { var _a, _b, _c, _d; return ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs) + 'px' + ' ' + ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.spacings) === null || _d === void 0 ? void 0 : _d.sm); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) {
-    var _a, _b, _c, _d, _e;
-    return props.theme.typography &&
-        ((_c = (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3) + 1 +
-            ((_e = (_d = props === null || props === void 0 ? void 0 : props.theme.typography) === null || _d === void 0 ? void 0 : _d.lineHeight) === null || _e === void 0 ? void 0 : _e.m2);
-}, function (props) { return props.flexGrow && "flex: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) {
+}, function (props) { var _a, _b, _c, _d; return ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs) + 'px' + ' ' + ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.spacings) === null || _d === void 0 ? void 0 : _d.sm); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) { return props.flexGrow && "flex: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) {
     var _a, _b, _c, _d;
     return props.disabled
         ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium

package/build/cjs/components/src/components/FormElements/TextArea/TextArea.styles.js.map

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

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

@@ -15,7 +15,7 @@ var InfoBlock = styled__default['default'].div(templateObject_1 || (templateObje
         ? ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px"
         : ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px " + ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.md) + "px";
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
-var ImageContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  max-width: ", "px;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"], ["\n  max-width: ", "px;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockImageMaxWidthDesktop; });
+var ImageContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  max-width: ", "px;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"], ["\n  max-width: ", "px;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockImageMaxWidthDesktop; });
 var Image = styled__default['default'].img(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"])));
 var InfoTextWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"])), 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.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
 var ButtonContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });

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

@@ -10,8 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var LayoutBox = function (_a) {
-    var background = _a.background, children = _a.children;
-    return (React__default['default'].createElement(LayoutBox_styles.LayoutBoxContainer, { background: background || '#fff' }, children));
+    var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, children = _a.children;
+    return (React__default['default'].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff' }, children));
 };
 
 exports.LayoutBox = LayoutBox;

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

@@ -9,7 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-radius: 2px;\n  box-shadow: ", ";\n"], ["\n  background: ", ";\n  border-radius: 2px;\n  box-shadow: ", ";\n"])), function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; });
+var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
+    var _a, _b, _c, _d;
+    return props.shadowInset
+        ? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset
+        : (_d = (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow) === null || _d === void 0 ? void 0 : _d.layoutShadow;
+}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
 var templateObject_1;
 
 exports.LayoutBoxContainer = LayoutBoxContainer;

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

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

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

@@ -13,7 +13,7 @@ var ItemInformationContainer = styled__default['default'].div(templateObject_1 |
 var ListItemContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"])));
 var ListLeft = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: 20px;\n  }\n"])), 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.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
 var ListRight = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"])));
-var ListImageContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: 64px;\n  height: 64px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: 64px;\n  height: 64px;\n"])));
+var ListImageContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
 var ListImage = styled__default['default'].img(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: 50px;\n"], ["\n  max-width: 100%;\n  max-height: 50px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var typography = require('@citygross/typography');
+var Skeleton = require('react-loading-skeleton');
+var fallback_grocery = require('../ListItem/assets/fallback_grocery.svg.js');
+var ListItemWithRadio_styles = require('./ListItemWithRadio.styles.js');
+var index = require('../../../../design-tokens/build/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
+
+function ListItemWithRadio(_a) {
+    var _b, _c;
+    var item = _a.item, loading = _a.loading, rightChildren = _a.rightChildren, radioChildren = _a.radioChildren;
+    return (React__default['default'].createElement(ListItemWithRadio_styles.ListItemContainer, null,
+        React__default['default'].createElement(ListItemWithRadio_styles.ListLeft, null,
+            React__default['default'].createElement(ListItemWithRadio_styles.ListImageContainer, null,
+                React__default['default'].createElement(ListItemWithRadio_styles.ListImage, { src: (item === null || item === void 0 ? void 0 : item.image) || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name })),
+            loading ? (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement(ListItemWithRadio_styles.ListItemHeader, null,
+                    React__default['default'].createElement(Skeleton__default['default'], { width: 180 })),
+                React__default['default'].createElement(ListItemWithRadio_styles.RadioWrapper, null,
+                    React__default['default'].createElement(Skeleton__default['default'], { width: 140, count: 2, style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            marginBottom: ((_b = index.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"
+                        } })))) : (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement(ListItemWithRadio_styles.ListItemHeader, null,
+                    React__default['default'].createElement(typography.BodyText, { fontWeight: 'semiBold' }, item === null || item === void 0 ? void 0 :
+                        item.name,
+                        " "),
+                    React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark }, item === null || item === void 0 ? void 0 : item.description)),
+                React__default['default'].createElement(ListItemWithRadio_styles.RadioWrapper, null, radioChildren && radioChildren)))),
+        rightChildren && rightChildren));
+}
+
+exports.ListItemWithRadio = ListItemWithRadio;
+//# sourceMappingURL=ListItemWithRadio.js.map

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

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

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

@@ -0,0 +1,27 @@
+'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 ListImageContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  grid-area: img;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  grid-area: img;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; });
+var ListImage = styled__default['default'].img(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var ListItemContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var ListLeft = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header'\n    'radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header'\n      '. radio';\n  }\n"], ["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header'\n    'radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header'\n      '. radio';\n  }\n"])), 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.constants) === null || _a === void 0 ? void 0 : _a.ListImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.m1; });
+var ListItemHeader = styled__default['default'](ListItemContainer)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"], ["\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var RadioWrapper = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"], ["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+exports.ListImage = ListImage;
+exports.ListImageContainer = ListImageContainer;
+exports.ListItemContainer = ListItemContainer;
+exports.ListItemHeader = ListItemHeader;
+exports.ListLeft = ListLeft;
+exports.RadioWrapper = RadioWrapper;
+//# sourceMappingURL=ListItemWithRadio.styles.js.map

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

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

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

@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function RadioBoxItem(_a) {
     var _b, _c;
-    var _d = _a.radioColor, radioColor = _d === void 0 ? 'alertGreen' : _d, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, _f = _a.background, background = _f === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest : _f, _g = _a.border, border = _g === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, children = _a.children;
+    var _d = _a.radioColor, radioColor = _d === void 0 ? 'alertGreen' : _d, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, _f = _a.background, background = _f === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, children = _a.children;
     return (React__default['default'].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
         React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
         children));

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

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

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

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

package/build/cjs/components/src/components/RadioGroup/RadioListItem.js

@@ -14,14 +14,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function RadioListItem(_a) {
-    var _b, _c;
-    var item = _a.item, onClick = _a.onClick, selected = _a.selected, name = _a.name, _d = _a.radioColor, radioColor = _d === void 0 ? 'alertBlue' : _d, defaultDisabledString = _a.defaultDisabledString, _e = _a.flexGrow, flexGrow = _e === void 0 ? 1 : _e, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator;
+    var _b, _c, _d;
+    var item = _a.item, onClick = _a.onClick, selected = _a.selected, name = _a.name, _e = _a.radioColor, radioColor = _e === void 0 ? 'alertBlue' : _e, defaultDisabledString = _a.defaultDisabledString, _f = _a.flexGrow, flexGrow = _f === void 0 ? 1 : _f, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding;
     var checked = item.value === selected;
-    return (React__default['default'].createElement(RadioListItem_styles.BaseRadioListItem, { background: designTokens.theme && designTokens.theme.palette
-            ? checked
-                ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.blueLight
-                : (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white
-            : 'white', rounded: true, onClick: item.isDisabled || isDisabled ? function () { } : function () { return onClick(item.value); } },
+    return (React__default['default'].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
+            ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
+            : designTokens.theme && designTokens.theme.palette
+                ? checked
+                    ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
+                    : (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
+                : 'white', noPadding: noPadding, onClick: item.isDisabled || isDisabled ? function () { } : function () { return onClick(item.value); } },
         React__default['default'].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: item.isDisabled, flexGrow: flexGrow },
             React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: item.isDisabled, name: name, onChange: function () { return onClick(item.value); }, value: item.value }),
             React__default['default'].createElement(RadioListItem_styles.StyledH3, { lineThrough: item.isDisabled }, item.label)),

package/build/cjs/components/src/components/RadioGroup/RadioListItem.js.map

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

package/build/cjs/components/src/components/RadioGroup/RadioListItem.styles.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
-var Box_styles = require('../Box/Box.styles.js');
 var typography = require('@citygross/typography');
 var styled = require('styled-components');
 
@@ -11,14 +10,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseRadioListItem = styled__default['default'](Box_styles.BoxContainer)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  display: flex;\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), 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.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
+var BaseRadioListItemContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  display: flex;\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
 var ExtraTextContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  flex-basis: 100%;\n  margin-left: ", "px;\n  text-align: start;\n"], ["\n  flex-basis: 100%;\n  margin-left: ", "px;\n  text-align: start;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
 var StyledH3 = styled__default['default'](typography.H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
-exports.BaseRadioListItem = BaseRadioListItem;
+exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
 exports.ExtraTextContainer = ExtraTextContainer;
 exports.StyledH3 = StyledH3;
 //# sourceMappingURL=RadioListItem.styles.js.map

package/build/cjs/components/src/components/RadioGroup/RadioListItem.styles.js.map

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

package/build/cjs/components/src/containers/PageContainer/PageContainer.styles.js

@@ -10,11 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var CommonPageWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  background: ", ";\n\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"], ["\n  padding: ", "px 0;\n  background: ", ";\n\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md) + "px"; });
-var CommonPage = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n  padding: ", "px;\n  background: ", ";\n  ", ";\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n  padding: ", "px;\n  background: ", ";\n  ", ";\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return props.maxWidth || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.none; }, function (props) {
-    var _a;
-    return props.shadow &&
-        "box-shadow: " + ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow);
-}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var CommonPage = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n\n  background: ", ";\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n\n  background: ", ";\n"])), function (props) { var _a; return props.maxWidth || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth); }, function (props) { var _a, _b; return (_a = props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.none; });
 var templateObject_1, templateObject_2;
 
 exports.CommonPage = CommonPage;

package/build/cjs/components/src/containers/PageContainer/PageContainer.styles.js.map

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

package/build/cjs/components/src/containers/TwoColumnsContainer/TwoColumnsPageContainer.js

@@ -15,12 +15,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var TwoColumnsPageContainer = function (_a) {
     var _b, _c;
-    var _d = _a.rightColumnWidth, rightColumnWidth = _d === void 0 ? 30 : _d, leftColumn = _a.leftColumn, rightColumn = _a.rightColumn, containerBackground = _a.containerBackground, rightColumnCollapsebleHeader = _a.rightColumnCollapsebleHeader, _e = _a.breakpoint, breakpoint = _e === void 0 ? (_b = index.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.xl : _e, props = _tslib.__rest(_a, ["rightColumnWidth", "leftColumn", "rightColumn", "containerBackground", "rightColumnCollapsebleHeader", "breakpoint"]);
+    var _d = _a.rightColumnWidth, rightColumnWidth = _d === void 0 ? 30 : _d, leftColumn = _a.leftColumn, rightColumn = _a.rightColumn, containerBackground = _a.containerBackground, rightColumnCollapsebleHeader = _a.rightColumnCollapsebleHeader, hideRightColumnBefore = _a.hideRightColumnBefore, _e = _a.breakpoint, breakpoint = _e === void 0 ? (_b = index.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.xl : _e, props = _tslib.__rest(_a, ["rightColumnWidth", "leftColumn", "rightColumn", "containerBackground", "rightColumnCollapsebleHeader", "hideRightColumnBefore", "breakpoint"]);
     var width = index$1.useWindowSize().width;
     return (React__default['default'].createElement(TwoColumnsPageContainer_styles.Container, _tslib.__assign({ background: containerBackground }, props),
         React__default['default'].createElement(TwoColumnsPageContainer_styles.ColumnWraper, null,
             React__default['default'].createElement(TwoColumnsPageContainer_styles.LeftColumn, null, leftColumn),
-            React__default['default'].createElement(TwoColumnsPageContainer_styles.RightColumn, { columnWidth: rightColumnWidth }, width > ((breakpoint && breakpoint) || 1060) ? (React__default['default'].createElement(React__default['default'].Fragment, null, rightColumn)) : (React__default['default'].createElement(Collapsable.Collapsable, { heading: rightColumnCollapsebleHeader, backgroundColor: (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.white }, rightColumn))))));
+            React__default['default'].createElement(TwoColumnsPageContainer_styles.RightColumn, { columnWidth: rightColumnWidth, hideRightColumnBefore: hideRightColumnBefore }, width > ((breakpoint && breakpoint) || 1060) ? (React__default['default'].createElement(React__default['default'].Fragment, null, rightColumn)) : (React__default['default'].createElement(Collapsable.Collapsable, { heading: rightColumnCollapsebleHeader, backgroundColor: (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.white }, rightColumn))))));
 };
 
 exports.TwoColumnsPageContainer = TwoColumnsPageContainer;