@citygross/components 0.7.68 → 0.7.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/build/@types/components/AddressBlock/AddressBlock.d.ts +4 -1
  2. package/build/@types/components/AddressBlock/AddressBlock.stories.d.ts +4 -0
  3. package/build/@types/components/FormElements/Input/Input.d.ts +1 -1
  4. package/build/@types/components/FormElements/Input/Input.styles.d.ts +1 -0
  5. package/build/@types/components/RadioListItem/RadioListItem.d.ts +2 -1
  6. package/build/@types/components/RadioListItem/RadioListItem.stories.d.ts +1 -0
  7. package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts +12 -1
  8. package/build/cjs/components/src/components/AddressBlock/AddressBlock.js +74 -1
  9. package/build/cjs/components/src/components/AddressBlock/AddressBlock.js.map +1 -1
  10. package/build/cjs/components/src/components/AddressBlock/AddressBlock.styles.js +1 -1
  11. package/build/cjs/components/src/components/FormElements/Input/Input.js +2 -2
  12. package/build/cjs/components/src/components/FormElements/Input/Input.styles.js +6 -1
  13. package/build/cjs/components/src/components/FormElements/Input/Input.styles.js.map +1 -1
  14. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +3 -3
  15. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +12 -3
  16. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  17. package/build/es/components/src/components/AddressBlock/AddressBlock.js +74 -1
  18. package/build/es/components/src/components/AddressBlock/AddressBlock.js.map +1 -1
  19. package/build/es/components/src/components/AddressBlock/AddressBlock.styles.js +1 -1
  20. package/build/es/components/src/components/FormElements/Input/Input.js +2 -2
  21. package/build/es/components/src/components/FormElements/Input/Input.styles.js +6 -1
  22. package/build/es/components/src/components/FormElements/Input/Input.styles.js.map +1 -1
  23. package/build/es/components/src/components/RadioListItem/RadioListItem.js +4 -4
  24. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +13 -5
  25. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  26. package/package.json +2 -2
package/build/@types/components/AddressBlock/AddressBlock.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { Spacings } from '@citygross/design-tokens';
2
3
  export declare type TAddressBlock = {
3
4
  deliverOption?: string;
4
5
  icon?: JSX.Element;
@@ -10,5 +11,7 @@ export declare type TAddressBlock = {
10
11
  doorCode?: string;
11
12
  floor?: string;
12
13
  deliveryInstructions?: React.ReactNode;
14
+ xsSpacing?: keyof Spacings;
15
+ lgSpacing?: keyof Spacings;
13
16
  };
14
- export declare function AddressBlock({ deliverOption, icon, storeName, customerName, street, zipCode, city, doorCode, floor, deliveryInstructions }: TAddressBlock): JSX.Element;
17
+ export declare function AddressBlock({ deliverOption, icon, storeName, customerName, street, zipCode, city, doorCode, floor, deliveryInstructions, xsSpacing, lgSpacing }: TAddressBlock): JSX.Element;
package/build/@types/components/AddressBlock/AddressBlock.stories.d.ts CHANGED
@@ -10,9 +10,13 @@ declare const _default: {
10
10
  address: {
11
11
  control: boolean;
12
12
  };
13
+ deliveryInstructions: {
14
+ control: boolean;
15
+ };
13
16
  };
14
17
  };
15
18
  export default _default;
16
19
  export declare const Store: Story<TAddressBlock>;
17
20
  export declare const Customer: Story<TAddressBlock>;
18
21
  export declare const WithIcon: Story<TAddressBlock>;
22
+ export declare const WithSpacers: Story<TAddressBlock>;
package/build/@types/components/FormElements/Input/Input.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import * as styles from './Input.styles';
2
- export declare function Input({ flexGrow, isValid, fontSize, ...props }: styles.InputProps): JSX.Element;
2
+ export declare function Input({ flexGrow, isValid, fontSize, inputSize, ...props }: styles.InputProps): JSX.Element;
package/build/@types/components/FormElements/Input/Input.styles.d.ts CHANGED
@@ -3,5 +3,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
3
3
  readonly isValid?: boolean;
4
4
  flexGrow?: number;
5
5
  fontSize?: number;
6
+ inputSize?: 'small' | 'medium';
6
7
  }
7
8
  export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputProps, never>;
package/build/@types/components/RadioListItem/RadioListItem.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
16
16
  disabledText?: string;
17
17
  textOnSelected?: string;
18
18
  value: string | number;
19
+ wrapMobile?: boolean;
19
20
  children?: JSX.Element;
20
21
  };
21
- export declare function RadioListItem({ onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding, label, disabledText, secondaryLabel, textOnSelected, value, children }: TRadioListItemProps): JSX.Element;
22
+ export declare function RadioListItem({ onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding, label, disabledText, secondaryLabel, textOnSelected, value, wrapMobile, children }: TRadioListItemProps): JSX.Element;
package/build/@types/components/RadioListItem/RadioListItem.stories.d.ts CHANGED
@@ -9,3 +9,4 @@ export default _default;
9
9
  export declare const Default: Story<TRadioListItemProps>;
10
10
  export declare const Disabled: Story<TRadioListItemProps>;
11
11
  export declare const withChildren: Story<TRadioListItemProps>;
12
+ export declare const DisableWrapTemplate: Story<TRadioListItemProps>;
package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare type TBaseRadioItemInputWrapper = {
2
3
  isDisabled?: boolean;
3
4
  flexGrow?: number;
@@ -8,11 +9,21 @@ export declare type TBaseRadiolistItemcontainer = {
8
9
  background?: string;
9
10
  noPadding?: boolean;
10
11
  };
12
+ export declare type TWrapMobile = {
13
+ wrapMobile?: boolean;
14
+ };
11
15
  export declare const BaseRadioListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadiolistItemcontainer, never>;
12
16
  export declare const BaseRadioItemLeftWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioItemInputWrapper, never>;
13
17
  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, {
14
18
  as: string;
15
19
  }, "as">;
16
20
  export declare const RadioSecondaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
17
- export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
21
+ export declare const DisableText: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, ...props }: {
22
+ children: import("react").ReactNode;
23
+ size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
24
+ color?: string | undefined;
25
+ lineThrough?: boolean | undefined;
26
+ fontWeight?: "medium" | "bold" | "regular" | "semiBold" | undefined;
27
+ }) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
28
+ export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWrapMobile, never>;
18
29
  export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/build/cjs/components/src/components/AddressBlock/AddressBlock.js CHANGED
@@ -5,26 +5,99 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var typography = require('@citygross/typography');
7
7
  var AddressBlock_styles = require('./AddressBlock.styles.js');
8
+ require('../../../../design-tokens/build/index.js');
9
+ require('../AlertBox/AlertBox.styles.js');
10
+ require('../Button/Button.js');
11
+ require('@citygross/utils');
12
+ require('@citygross/design-tokens');
13
+ require('@citygross/icons');
14
+ require('../Logo/Logo.styles.js');
15
+ require('../Header/Header.styles.js');
16
+ require('../HeaderLink/HeaderLink.styles.js');
17
+ require('../BackgroundImage/BackgroundImage.styles.js');
18
+ require('../Badge/Badge.styles.js');
19
+ require('../Box/Box.styles.js');
20
+ require('../Button/Button.styles.js');
21
+ require('../BackButton/BackButton.styles.js');
22
+ require('../Chips/Chip.styles.js');
23
+ require('../Spinner/Spinner.styles.js');
24
+ require('react-loading-skeleton');
25
+ require('../CartItemSummary/CartItemSummary.styles.js');
26
+ require('../Divider/Divider.styles.js');
27
+ require('../CartSummary/CartSummary.styles.js');
28
+ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
29
+ require('../Collapsable/Collapsable.styles.js');
30
+ require('../DeliverySlotItem/DeliverySlotItem.styles.js');
31
+ require('../Slider/Slider.styles.js');
32
+ require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
33
+ require('../Menu/Menu.styles.js');
34
+ require('../DateBox/DateBox.styles.js');
35
+ require('../DotIndicator/DotIndicator.styles.js');
36
+ require('../Form/Form.styles.js');
37
+ require('../FormControl/FormControl.js');
38
+ require('../FormElements/Checkbox/Checkbox.styles.js');
39
+ require('../FormElements/Input/Input.styles.js');
40
+ require('../FormElements/Radio/Radio.styles.js');
41
+ require('../FormElements/Switch/Switch.styles.js');
42
+ require('../FormGroup/FormGroup.styles.js');
43
+ require('../GridContainer/GridContainer.styles.js');
44
+ require('../HighlightBox/HighlightBox.styles.js');
45
+ require('../IconToolTip/IconToolTip.styles.js');
46
+ var Spacer = require('../Spacer/Spacer.js');
47
+ require('../InfoTextBlock/InfoTextBlock.styles.js');
48
+ require('../LayoutBox/LayoutBox.styles.js');
49
+ require('../ListItem/ListItem.styles.js');
50
+ require('../ListItemWithRadio/ListItemWithRadio.styles.js');
51
+ require('../Links/Link.js');
52
+ require('react-dom');
53
+ require('../Modal/Modal.styles.js');
54
+ require('../RadioBox/RadioBoxItem.styles.js');
55
+ require('../RadioBox/RadioBoxList.styles.js');
56
+ require('../RadioGroup/RadioGroup.styles.js');
57
+ require('../RadioListItem/RadioListItem.styles.js');
58
+ require('../ProgressBar/ProgressBar.styled.js');
59
+ require('../RippleContainer/RippleContainer.styles.js');
60
+ require('../Select/Select.styles.js');
61
+ require('../Stepper/Stepper.styles.js');
62
+ require('../ToolTip/ToolTip.styles.js');
63
+ require('../StepperMobile/StepperMobile.styles.js');
64
+ require('../FormElements/TextArea/TextArea.styles.js');
65
+ require('../Table/Table.styles.js');
66
+ require('../Timeline/Timeline.styles.js');
67
+ require('../QuantitySelector/QuantitySelector.styles.js');
68
+ require('../Pagination/Pagination.styles.js');
69
+ require('../../containers/PageContainer/PageContainer.styles.js');
70
+ require('../../../../utils/build/index.js');
71
+ require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js');
72
+ require('../UnorderedList/UnorderedList.styles.js');
73
+ require('../WarningLabel/WarningLabel.styles.js');
8
74
 
9
75
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
76
 
11
77
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
78
 
13
79
  function AddressBlock(_a) {
14
- var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions;
80
+ var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;
81
+ var spacingsDefined = (xsSpacing || lgSpacing);
15
82
  return (React__default['default'].createElement(React__default['default'].Fragment, null,
16
83
  React__default['default'].createElement(AddressBlock_styles.AddressOption, null,
17
84
  icon && icon,
18
85
  deliverOption && React__default['default'].createElement(typography.H3, null, deliverOption)),
86
+ spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
19
87
  storeName && React__default['default'].createElement(typography.H3, null, storeName),
20
88
  customerName && React__default['default'].createElement(typography.BodyText, null, customerName),
89
+ spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
21
90
  React__default['default'].createElement(typography.BodyText, null, street),
91
+ spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
22
92
  React__default['default'].createElement(typography.BodyText, null,
23
93
  zipCode,
24
94
  " ",
25
95
  city),
96
+ spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
26
97
  doorCode && (React__default['default'].createElement(typography.BodyText, null, doorCode)),
98
+ spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
27
99
  floor && (React__default['default'].createElement(typography.BodyText, null, floor)),
100
+ spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
28
101
  deliveryInstructions && (deliveryInstructions)));
29
102
  }
30
103
 
package/build/cjs/components/src/components/AddressBlock/AddressBlock.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/AddressBlock/AddressBlock.styles.js CHANGED
@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- var AddressOption = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n margin-bottom: ", "px;\n align-items: center;\n"], ["\n display: flex;\n gap: ", "px;\n margin-bottom: ", "px;\n align-items: center;\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; });
12
+ var AddressOption = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n align-items: center;\n"], ["\n display: flex;\n gap: ", "px;\n align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
13
13
  var templateObject_1;
14
14
 
15
15
  exports.AddressOption = AddressOption;
package/build/cjs/components/src/components/FormElements/Input/Input.js CHANGED
@@ -11,8 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
 
13
13
  function Input(_a) {
14
- var flexGrow = _a.flexGrow, isValid = _a.isValid, fontSize = _a.fontSize, props = _tslib.__rest(_a, ["flexGrow", "isValid", "fontSize"]);
15
- return (React__default['default'].createElement(Input_styles.Input, _tslib.__assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid }, props)));
14
+ var flexGrow = _a.flexGrow, isValid = _a.isValid, fontSize = _a.fontSize, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, props = _tslib.__rest(_a, ["flexGrow", "isValid", "fontSize", "inputSize"]);
15
+ return (React__default['default'].createElement(Input_styles.Input, _tslib.__assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid, inputSize: inputSize }, props)));
16
16
  }
17
17
 
18
18
  exports.Input = Input;
package/build/cjs/components/src/components/FormElements/Input/Input.styles.js CHANGED
@@ -16,7 +16,12 @@ var Input = styled__default['default'].input(templateObject_1 || (templateObject
16
16
  : (props === null || props === void 0 ? void 0 : props.isValid) === false
17
17
  ? 'red'
18
18
  : (_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;
19
- }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px"; }, 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; 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) {
19
+ }, function (props) {
20
+ var _a, _b, _c, _d;
21
+ return props.inputSize === 'small'
22
+ ? ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"
23
+ : ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs) + "px " + ((_d = props.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm) + "px";
24
+ }, 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; 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) {
20
25
  var _a, _b, _c, _d;
21
26
  return props.disabled
22
27
  ? (_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/Input/Input.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
15
 
16
16
  function RadioListItem(_a) {
17
17
  var _b, _c, _d, _e;
18
- var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, children = _a.children;
18
+ var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, wrapMobile = _a.wrapMobile, children = _a.children;
19
19
  return (React__default['default'].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
20
20
  ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
21
21
  : designTokens.theme && designTokens.theme.palette
@@ -23,7 +23,7 @@ function RadioListItem(_a) {
23
23
  ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
24
24
  : (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
25
25
  : 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
26
- React__default['default'].createElement(RadioListItem_styles.RadioFlex, null,
26
+ React__default['default'].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
27
27
  React__default['default'].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow, center: !textOnSelected },
28
28
  React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: selected, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
29
29
  React__default['default'].createElement("div", null,
@@ -31,7 +31,7 @@ function RadioListItem(_a) {
31
31
  textOnSelected && selected && (React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
32
32
  React__default['default'].createElement(RadioListItem_styles.RadioSecondaryWrapper, null,
33
33
  React__default['default'].createElement("span", null, dotIndicator && selected && (React__default['default'].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
34
- isDisabled ? (React__default['default'].createElement(typography.BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
34
+ isDisabled ? (React__default['default'].createElement(RadioListItem_styles.DisableText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
35
35
  }
36
36
 
37
37
  exports.RadioListItem = RadioListItem;
package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -14,12 +14,21 @@ var BaseRadioListItemContainer = styled__default['default'].div(templateObject_1
14
14
  var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: ", ";\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: ", ";\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"])), function (props) { return (props.center ? 'center' : 'flex-start'); }, 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'; });
15
15
  var StyledH3 = styled__default['default'](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n"])));
16
16
  var RadioSecondaryWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\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.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
17
- var RadioFlex = 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; });
18
- styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
19
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
17
+ var DisableText = styled__default['default'](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
18
+ return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
19
+ "\n text-align: left;\n \n";
20
+ }, 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.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
21
+ var RadioFlex = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n ", "\n"], ["\n display: flex;\n gap: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
22
+ var _a;
23
+ return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
24
+ "\n flex-wrap: wrap;\n @media (min-width: " + ((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs) + "px) {\n flex-wrap: nowrap;\n }\n ";
25
+ });
26
+ styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
27
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
20
28
 
21
29
  exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
22
30
  exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
31
+ exports.DisableText = DisableText;
23
32
  exports.RadioFlex = RadioFlex;
24
33
  exports.RadioSecondaryWrapper = RadioSecondaryWrapper;
25
34
  exports.StyledH3 = StyledH3;
package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/AddressBlock/AddressBlock.js CHANGED
@@ -1,22 +1,95 @@
1
1
  import React from 'react';
2
2
  import { H3, BodyText } from '@citygross/typography';
3
3
  import { AddressOption } from './AddressBlock.styles.js';
4
+ import '../../../../design-tokens/build/index.js';
5
+ import '../AlertBox/AlertBox.styles.js';
6
+ import '../Button/Button.js';
7
+ import '@citygross/utils';
8
+ import '@citygross/design-tokens';
9
+ import '@citygross/icons';
10
+ import '../Logo/Logo.styles.js';
11
+ import '../Header/Header.styles.js';
12
+ import '../HeaderLink/HeaderLink.styles.js';
13
+ import '../BackgroundImage/BackgroundImage.styles.js';
14
+ import '../Badge/Badge.styles.js';
15
+ import '../Box/Box.styles.js';
16
+ import '../Button/Button.styles.js';
17
+ import '../BackButton/BackButton.styles.js';
18
+ import '../Chips/Chip.styles.js';
19
+ import '../Spinner/Spinner.styles.js';
20
+ import 'react-loading-skeleton';
21
+ import '../CartItemSummary/CartItemSummary.styles.js';
22
+ import '../Divider/Divider.styles.js';
23
+ import '../CartSummary/CartSummary.styles.js';
24
+ import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
25
+ import '../Collapsable/Collapsable.styles.js';
26
+ import '../DeliverySlotItem/DeliverySlotItem.styles.js';
27
+ import '../Slider/Slider.styles.js';
28
+ import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
29
+ import '../Menu/Menu.styles.js';
30
+ import '../DateBox/DateBox.styles.js';
31
+ import '../DotIndicator/DotIndicator.styles.js';
32
+ import '../Form/Form.styles.js';
33
+ import '../FormControl/FormControl.js';
34
+ import '../FormElements/Checkbox/Checkbox.styles.js';
35
+ import '../FormElements/Input/Input.styles.js';
36
+ import '../FormElements/Radio/Radio.styles.js';
37
+ import '../FormElements/Switch/Switch.styles.js';
38
+ import '../FormGroup/FormGroup.styles.js';
39
+ import '../GridContainer/GridContainer.styles.js';
40
+ import '../HighlightBox/HighlightBox.styles.js';
41
+ import '../IconToolTip/IconToolTip.styles.js';
42
+ import { Spacer } from '../Spacer/Spacer.js';
43
+ import '../InfoTextBlock/InfoTextBlock.styles.js';
44
+ import '../LayoutBox/LayoutBox.styles.js';
45
+ import '../ListItem/ListItem.styles.js';
46
+ import '../ListItemWithRadio/ListItemWithRadio.styles.js';
47
+ import '../Links/Link.js';
48
+ import 'react-dom';
49
+ import '../Modal/Modal.styles.js';
50
+ import '../RadioBox/RadioBoxItem.styles.js';
51
+ import '../RadioBox/RadioBoxList.styles.js';
52
+ import '../RadioGroup/RadioGroup.styles.js';
53
+ import '../RadioListItem/RadioListItem.styles.js';
54
+ import '../ProgressBar/ProgressBar.styled.js';
55
+ import '../RippleContainer/RippleContainer.styles.js';
56
+ import '../Select/Select.styles.js';
57
+ import '../Stepper/Stepper.styles.js';
58
+ import '../ToolTip/ToolTip.styles.js';
59
+ import '../StepperMobile/StepperMobile.styles.js';
60
+ import '../FormElements/TextArea/TextArea.styles.js';
61
+ import '../Table/Table.styles.js';
62
+ import '../Timeline/Timeline.styles.js';
63
+ import '../QuantitySelector/QuantitySelector.styles.js';
64
+ import '../Pagination/Pagination.styles.js';
65
+ import '../../containers/PageContainer/PageContainer.styles.js';
66
+ import '../../../../utils/build/index.js';
67
+ import '../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js';
68
+ import '../UnorderedList/UnorderedList.styles.js';
69
+ import '../WarningLabel/WarningLabel.styles.js';
4
70
 
5
71
  function AddressBlock(_a) {
6
- var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions;
72
+ var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;
73
+ var spacingsDefined = (xsSpacing || lgSpacing);
7
74
  return (React.createElement(React.Fragment, null,
8
75
  React.createElement(AddressOption, null,
9
76
  icon && icon,
10
77
  deliverOption && React.createElement(H3, null, deliverOption)),
78
+ spacingsDefined && React.createElement(Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
11
79
  storeName && React.createElement(H3, null, storeName),
12
80
  customerName && React.createElement(BodyText, null, customerName),
81
+ spacingsDefined && React.createElement(Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
13
82
  React.createElement(BodyText, null, street),
83
+ spacingsDefined && React.createElement(Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
14
84
  React.createElement(BodyText, null,
15
85
  zipCode,
16
86
  " ",
17
87
  city),
88
+ spacingsDefined && React.createElement(Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
18
89
  doorCode && (React.createElement(BodyText, null, doorCode)),
90
+ spacingsDefined && React.createElement(Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
19
91
  floor && (React.createElement(BodyText, null, floor)),
92
+ spacingsDefined && React.createElement(Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
20
93
  deliveryInstructions && (deliveryInstructions)));
21
94
  }
22
95
 
package/build/es/components/src/components/AddressBlock/AddressBlock.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/AddressBlock/AddressBlock.styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
- var AddressOption = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n margin-bottom: ", "px;\n align-items: center;\n"], ["\n display: flex;\n gap: ", "px;\n margin-bottom: ", "px;\n align-items: center;\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; });
4
+ var AddressOption = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n align-items: center;\n"], ["\n display: flex;\n gap: ", "px;\n align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
5
5
  var templateObject_1;
6
6
 
7
7
  export { AddressOption };
package/build/es/components/src/components/FormElements/Input/Input.js CHANGED
@@ -3,8 +3,8 @@ import { Input as Input$1 } from './Input.styles.js';
3
3
  import React from 'react';
4
4
 
5
5
  function Input(_a) {
6
- var flexGrow = _a.flexGrow, isValid = _a.isValid, fontSize = _a.fontSize, props = __rest(_a, ["flexGrow", "isValid", "fontSize"]);
7
- return (React.createElement(Input$1, __assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid }, props)));
6
+ var flexGrow = _a.flexGrow, isValid = _a.isValid, fontSize = _a.fontSize, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, props = __rest(_a, ["flexGrow", "isValid", "fontSize", "inputSize"]);
7
+ return (React.createElement(Input$1, __assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid, inputSize: inputSize }, props)));
8
8
  }
9
9
 
10
10
  export { Input };
package/build/es/components/src/components/FormElements/Input/Input.styles.js CHANGED
@@ -8,7 +8,12 @@ var Input = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateO
8
8
  : (props === null || props === void 0 ? void 0 : props.isValid) === false
9
9
  ? 'red'
10
10
  : (_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;
11
- }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px"; }, 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; 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) {
11
+ }, function (props) {
12
+ var _a, _b, _c, _d;
13
+ return props.inputSize === 'small'
14
+ ? ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"
15
+ : ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs) + "px " + ((_d = props.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm) + "px";
16
+ }, 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; 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) {
12
17
  var _a, _b, _c, _d;
13
18
  return props.disabled
14
19
  ? (_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/es/components/src/components/FormElements/Input/Input.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -3,11 +3,11 @@ import { BodyText, TextTypes } from '@citygross/typography';
3
3
  import { Radio } from '../FormElements/Radio/Radio.js';
4
4
  import { Dot } from '../DotIndicator/DotIndicator.js';
5
5
  import { theme } from '@citygross/design-tokens';
6
- import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper } from './RadioListItem.styles.js';
6
+ import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper, DisableText } from './RadioListItem.styles.js';
7
7
 
8
8
  function RadioListItem(_a) {
9
9
  var _b, _c, _d, _e;
10
- var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, children = _a.children;
10
+ var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, wrapMobile = _a.wrapMobile, children = _a.children;
11
11
  return (React.createElement(BaseRadioListItemContainer, { background: transparent
12
12
  ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
13
13
  : theme && theme.palette
@@ -15,7 +15,7 @@ function RadioListItem(_a) {
15
15
  ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
16
16
  : (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.white
17
17
  : 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
18
- React.createElement(RadioFlex, null,
18
+ React.createElement(RadioFlex, { wrapMobile: wrapMobile },
19
19
  React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow, center: !textOnSelected },
20
20
  React.createElement(Radio, { customColor: radioColor, checked: selected, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
21
21
  React.createElement("div", null,
@@ -23,7 +23,7 @@ function RadioListItem(_a) {
23
23
  textOnSelected && selected && (React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
24
24
  React.createElement(RadioSecondaryWrapper, null,
25
25
  React.createElement("span", null, dotIndicator && selected && (React.createElement(Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
26
- isDisabled ? (React.createElement(BodyText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
26
+ isDisabled ? (React.createElement(DisableText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
27
27
  }
28
28
 
29
29
  export { RadioListItem };
package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -1,14 +1,22 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
- import { H3 } from '@citygross/typography';
2
+ import { H3, BodyText } from '@citygross/typography';
3
3
  import styled from 'styled-components';
4
4
 
5
5
  var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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 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; });
6
6
  var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: ", ";\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: ", ";\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"])), function (props) { return (props.center ? 'center' : 'flex-start'); }, 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'; });
7
7
  var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n"])));
8
8
  var RadioSecondaryWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\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.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
9
- var RadioFlex = 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; });
10
- styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
11
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
9
+ var DisableText = styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", "px;\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
10
+ return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
11
+ "\n text-align: left;\n \n";
12
+ }, 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.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
13
+ var RadioFlex = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n ", "\n"], ["\n display: flex;\n gap: ", "px;\n ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
14
+ var _a;
15
+ return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
16
+ "\n flex-wrap: wrap;\n @media (min-width: " + ((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs) + "px) {\n flex-wrap: nowrap;\n }\n ";
17
+ });
18
+ styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
19
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
12
20
 
13
- export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, RadioFlex, RadioSecondaryWrapper, StyledH3 };
21
+ export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, DisableText, RadioFlex, RadioSecondaryWrapper, StyledH3 };
14
22
  //# sourceMappingURL=RadioListItem.styles.js.map
package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.68",
3
+ "version": "0.7.71",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
71
71
  "moment": "^2.29.1",
72
72
  "react-loading-skeleton": "^2.2.0"
73
73
  },
74
- "gitHead": "be6c8b4f4b4c721787c6c9c3cac0117dbfa46e89"
74
+ "gitHead": "ea1baad49b5bb535b7547925d6bc48d9654c5f16"
75
75
  }