@citygross/components 0.7.21 → 0.7.25
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.
- package/build/@types/components/RadioGroup/RadioGroup.d.ts +3 -12
- package/build/@types/components/RadioGroup/RadioGroup.stories.d.ts +1 -12
- package/build/@types/components/RadioGroup/index.d.ts +0 -1
- package/build/@types/components/{RadioGroup → RadioListItem}/RadioListItem.d.ts +7 -10
- package/build/@types/components/RadioListItem/RadioListItem.stories.d.ts +19 -0
- package/build/@types/components/{RadioGroup → RadioListItem}/RadioListItem.styles.d.ts +1 -0
- package/build/@types/components/Stepper/StepperList.d.ts +1 -0
- package/build/@types/index.d.ts +1 -0
- package/build/cjs/components/src/components/Button/Button.styles.js +1 -1
- package/build/cjs/components/src/components/FormElements/Radio/Radio.js +1 -1
- package/build/cjs/components/src/components/RadioGroup/RadioGroup.js +2 -3
- package/build/cjs/components/src/components/RadioGroup/RadioGroup.js.map +1 -1
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +42 -0
- package/build/cjs/components/src/components/{RadioGroup → RadioListItem}/RadioListItem.js.map +1 -1
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +25 -0
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -0
- package/build/cjs/components/src/components/Stepper/Stepper.styles.js +1 -1
- package/build/cjs/components/src/index.js +1 -1
- package/build/cjs/design-tokens/build/index.js +1 -1
- package/build/cjs/design-tokens/build/index.js.map +1 -1
- package/build/es/components/src/components/Button/Button.styles.js +1 -1
- package/build/es/components/src/components/FormElements/Radio/Radio.js +1 -1
- package/build/es/components/src/components/RadioGroup/RadioGroup.js +2 -3
- package/build/es/components/src/components/RadioGroup/RadioGroup.js.map +1 -1
- package/build/es/components/src/components/RadioListItem/RadioListItem.js +34 -0
- package/build/es/components/src/components/{RadioGroup → RadioListItem}/RadioListItem.js.map +1 -1
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +13 -0
- package/build/es/components/src/components/{RadioGroup → RadioListItem}/RadioListItem.styles.js.map +1 -1
- package/build/es/components/src/components/Stepper/Stepper.styles.js +1 -1
- package/build/es/components/src/index.js +1 -1
- package/build/es/design-tokens/build/index.js +1 -1
- package/build/es/design-tokens/build/index.js.map +1 -1
- package/package.json +5 -5
- package/build/cjs/components/src/components/RadioGroup/RadioListItem.js +0 -41
- package/build/cjs/components/src/components/RadioGroup/RadioListItem.styles.js +0 -23
- package/build/cjs/components/src/components/RadioGroup/RadioListItem.styles.js.map +0 -1
- package/build/es/components/src/components/RadioGroup/RadioListItem.js +0 -33
- package/build/es/components/src/components/RadioGroup/RadioListItem.styles.js +0 -12
|
@@ -1,15 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { TRadioListItem } from './RadioListItem';
|
|
3
|
-
import { TDot } from '../DotIndicator/DotIndicator';
|
|
1
|
+
import React from 'react';
|
|
4
2
|
import * as styles from './RadioGroup.styles';
|
|
5
3
|
export declare type TRadioGroup = styles.TBaseRadioGroup & {
|
|
6
|
-
|
|
7
|
-
onClick: (value: string | number) => void;
|
|
8
|
-
radioColor?: keyof TRadioColor;
|
|
9
|
-
name: string;
|
|
10
|
-
dotIndicator?: TDot;
|
|
11
|
-
selected: string | number;
|
|
12
|
-
defaultDisabledString?: string;
|
|
13
|
-
flexGrow?: number;
|
|
4
|
+
children: React.ReactNode;
|
|
14
5
|
};
|
|
15
|
-
export declare function RadioGroup({
|
|
6
|
+
export declare function RadioGroup({ header, children }: TRadioGroup): JSX.Element;
|
|
@@ -1,21 +1,10 @@
|
|
|
1
1
|
import { Story } from '@storybook/react';
|
|
2
|
-
import { RadioListItem
|
|
2
|
+
import { RadioListItem } from '../RadioListItem/RadioListItem';
|
|
3
3
|
import { RadioGroup, TRadioGroup } from './RadioGroup';
|
|
4
4
|
declare const _default: {
|
|
5
5
|
component: typeof RadioGroup;
|
|
6
6
|
subComponents: typeof RadioListItem;
|
|
7
7
|
title: string;
|
|
8
|
-
argTypes: {
|
|
9
|
-
selected: {
|
|
10
|
-
options: (string | null)[];
|
|
11
|
-
control: {
|
|
12
|
-
type: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
8
|
};
|
|
17
9
|
export default _default;
|
|
18
|
-
export declare const Default: Story<TRadioListItemProps>;
|
|
19
|
-
export declare const Selected: Story<TRadioListItemProps>;
|
|
20
|
-
export declare const Disabled: Story<TRadioListItemProps>;
|
|
21
10
|
export declare const List: Story<TRadioGroup>;
|
|
@@ -1,16 +1,7 @@
|
|
|
1
1
|
import { TRadioColor } from '../FormElements/Radio/Radio';
|
|
2
2
|
import { TDot } from '../DotIndicator/DotIndicator';
|
|
3
3
|
import * as styles from './RadioListItem.styles';
|
|
4
|
-
export declare type TRadioListItem = {
|
|
5
|
-
label: string;
|
|
6
|
-
secondaryLabel?: string;
|
|
7
|
-
isDisabled?: boolean;
|
|
8
|
-
disabledText?: string;
|
|
9
|
-
textOnSelected?: string;
|
|
10
|
-
value: string | number;
|
|
11
|
-
};
|
|
12
4
|
export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
|
|
13
|
-
item: TRadioListItem;
|
|
14
5
|
onClick: (value: string | number) => void;
|
|
15
6
|
radioColor?: keyof TRadioColor;
|
|
16
7
|
name: string;
|
|
@@ -19,5 +10,11 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
|
|
|
19
10
|
dotIndicator?: TDot;
|
|
20
11
|
transparent?: boolean;
|
|
21
12
|
noPadding?: boolean;
|
|
13
|
+
label: string;
|
|
14
|
+
secondaryLabel?: string;
|
|
15
|
+
isDisabled?: boolean;
|
|
16
|
+
disabledText?: string;
|
|
17
|
+
textOnSelected?: string;
|
|
18
|
+
value: string | number;
|
|
22
19
|
};
|
|
23
|
-
export declare function RadioListItem({
|
|
20
|
+
export declare function RadioListItem({ onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding, label, secondaryLabel, disabledText, textOnSelected, value }: TRadioListItemProps): JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Story } from '@storybook/react';
|
|
2
|
+
import { RadioListItem, TRadioListItemProps } from './RadioListItem';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
component: typeof RadioListItem;
|
|
5
|
+
subComponents: typeof RadioListItem;
|
|
6
|
+
title: string;
|
|
7
|
+
argTypes: {
|
|
8
|
+
selected: {
|
|
9
|
+
options: (string | null)[];
|
|
10
|
+
control: {
|
|
11
|
+
type: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
17
|
+
export declare const Default: Story<TRadioListItemProps>;
|
|
18
|
+
export declare const Selected: Story<TRadioListItemProps>;
|
|
19
|
+
export declare const Disabled: Story<TRadioListItemProps>;
|
|
@@ -13,3 +13,4 @@ export declare const ExtraTextContainer: import("styled-components").StyledCompo
|
|
|
13
13
|
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
14
|
as: string;
|
|
15
15
|
}, "as">;
|
|
16
|
+
export declare const RadioSecondaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
package/build/@types/index.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export * from './components/ListItem/ListItem';
|
|
|
31
31
|
export * from './components/Modal/Modal';
|
|
32
32
|
export * from './components/RadioBox';
|
|
33
33
|
export * from './components/RadioGroup';
|
|
34
|
+
export * from './components/RadioListItem/RadioListItem';
|
|
34
35
|
export * from './components/RippleContainer/RippleContainer';
|
|
35
36
|
export * from './components/Spacer/Spacer';
|
|
36
37
|
export * from './components/Spinner/Spinner';
|
|
@@ -45,8 +45,8 @@ require('../Modal/Modal.styles.js');
|
|
|
45
45
|
require('../Spacer/Spacer.styles.js');
|
|
46
46
|
require('../RadioBox/RadioBoxItem.styles.js');
|
|
47
47
|
require('../RadioBox/RadioBoxList.styles.js');
|
|
48
|
-
require('../RadioGroup/RadioListItem.styles.js');
|
|
49
48
|
require('../RadioGroup/RadioGroup.styles.js');
|
|
49
|
+
require('../RadioListItem/RadioListItem.styles.js');
|
|
50
50
|
require('../RippleContainer/RippleContainer.styles.js');
|
|
51
51
|
var Spinner = require('../Spinner/Spinner.js');
|
|
52
52
|
require('../Stepper/Stepper.styles.js');
|
|
@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
13
13
|
|
|
14
14
|
function Radio(_a) {
|
|
15
15
|
var onChange = _a.onChange, _b = _a.customColor, customColor = _b === void 0 ? 'alertGreen' : _b, inputProps = _tslib.__rest(_a, ["onChange", "customColor"]);
|
|
16
|
-
return (React__default['default'].createElement(Radio_styles.RadioWrapper, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }
|
|
16
|
+
return (React__default['default'].createElement(Radio_styles.RadioWrapper, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 } },
|
|
17
17
|
React__default['default'].createElement(Radio_styles.RadioInput, _tslib.__assign({ type: "radio", onChange: onChange, customColor: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[customColor] : 'white' }, inputProps)),
|
|
18
18
|
React__default['default'].createElement(Radio_styles.CustomRadio, { customColor: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[customColor] : 'white' })));
|
|
19
19
|
}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var RadioListItem = require('./RadioListItem.js');
|
|
7
6
|
var typography = require('@citygross/typography');
|
|
8
7
|
var RadioGroup_styles = require('./RadioGroup.styles.js');
|
|
9
8
|
|
|
@@ -12,11 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
12
|
|
|
14
13
|
function RadioGroup(_a) {
|
|
15
|
-
var
|
|
14
|
+
var header = _a.header, children = _a.children;
|
|
16
15
|
return (React__default['default'].createElement(RadioGroup_styles.StyledDiv, { rounded: true },
|
|
17
16
|
React__default['default'].createElement(RadioGroup_styles.BaseRadioGroup, { header: header },
|
|
18
17
|
header && React__default['default'].createElement(typography.H1, null, header),
|
|
19
|
-
|
|
18
|
+
children)));
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
exports.RadioGroup = RadioGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var typography = require('@citygross/typography');
|
|
7
|
+
var Radio = require('../FormElements/Radio/Radio.js');
|
|
8
|
+
var DotIndicator = require('../DotIndicator/DotIndicator.js');
|
|
9
|
+
var designTokens = require('@citygross/design-tokens');
|
|
10
|
+
var RadioListItem_styles = require('./RadioListItem.styles.js');
|
|
11
|
+
|
|
12
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
+
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
|
+
|
|
16
|
+
function RadioListItem(_a) {
|
|
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, secondaryLabel = _a.secondaryLabel, disabledText = _a.disabledText, textOnSelected = _a.textOnSelected, value = _a.value;
|
|
19
|
+
var checked = value === selected;
|
|
20
|
+
return (React__default['default'].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
|
|
21
|
+
? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
|
|
22
|
+
: designTokens.theme && designTokens.theme.palette
|
|
23
|
+
? checked
|
|
24
|
+
? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
25
|
+
: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
26
|
+
: 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
|
|
27
|
+
React__default['default'].createElement("div", { style: { display: 'flex' } },
|
|
28
|
+
React__default['default'].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
|
|
29
|
+
React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
|
|
30
|
+
React__default['default'].createElement(RadioListItem_styles.StyledH3, { lineThrough: isDisabled }, label)),
|
|
31
|
+
React__default['default'].createElement(RadioListItem_styles.RadioSecondaryWrapper, null,
|
|
32
|
+
React__default['default'].createElement("p", null,
|
|
33
|
+
React__default['default'].createElement("span", { style: { marginRight: '8px' } }, dotIndicator && checked && (React__default['default'].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
|
|
34
|
+
isDisabled
|
|
35
|
+
? disabledText || defaultDisabledString
|
|
36
|
+
: secondaryLabel))),
|
|
37
|
+
textOnSelected && checked && (React__default['default'].createElement(RadioListItem_styles.ExtraTextContainer, null,
|
|
38
|
+
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)))));
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
exports.RadioListItem = RadioListItem;
|
|
42
|
+
//# sourceMappingURL=RadioListItem.js.map
|
package/build/cjs/components/src/components/{RadioGroup → RadioListItem}/RadioListItem.js.map
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
|
+
var typography = require('@citygross/typography');
|
|
7
|
+
var styled = require('styled-components');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
|
+
|
|
13
|
+
var BaseRadioListItemContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__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; });
|
|
14
|
+
var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: center;\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: center;\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'; });
|
|
15
|
+
var ExtraTextContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n margin-left: ", "px;\n margin-top: ", "px;\n"], ["\n margin-left: ", "px;\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
16
|
+
var StyledH3 = styled__default['default'](typography.H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n"], ["\n cursor: pointer;\n white-space: nowrap;\n"])));
|
|
17
|
+
var RadioSecondaryWrapper = styled__default['default'].div(templateObject_5 || (templateObject_5 = _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; });
|
|
18
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
19
|
+
|
|
20
|
+
exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
|
|
21
|
+
exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
|
|
22
|
+
exports.ExtraTextContainer = ExtraTextContainer;
|
|
23
|
+
exports.RadioSecondaryWrapper = RadioSecondaryWrapper;
|
|
24
|
+
exports.StyledH3 = StyledH3;
|
|
25
|
+
//# sourceMappingURL=RadioListItem.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -19,7 +19,7 @@ var BaseStepperItem = styled__default['default'].div(templateObject_1 || (templa
|
|
|
19
19
|
"border-left: 1px solid " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium);
|
|
20
20
|
});
|
|
21
21
|
var BaseStepperList = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n box-shadow: ", ";\n background: ", ";\n"], ["\n box-shadow: ", ";\n background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
|
|
22
|
-
var MaxWidthContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n max-width: ", "px;\n margin: 0 auto;\n
|
|
22
|
+
var MaxWidthContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (max-width: ", "px) {\n padding-right: ", "px;\n }\n"], ["\n display: flex;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (max-width: ", "px) {\n padding-right: ", "px;\n }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_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; });
|
|
23
23
|
var ButtonContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n /* margin-right: ", "px; */\n margin-left: auto;\n justify-content: flex-end;\n min-width: 155px;\n"], ["\n display: flex;\n align-items: center;\n /* margin-right: ", "px; */\n margin-left: auto;\n justify-content: flex-end;\n min-width: 155px;\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.lg; });
|
|
24
24
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
25
25
|
|
|
@@ -35,7 +35,7 @@ var Modal = require('./components/Modal/Modal.js');
|
|
|
35
35
|
var RadioBoxItem = require('./components/RadioBox/RadioBoxItem.js');
|
|
36
36
|
var RadioBoxList = require('./components/RadioBox/RadioBoxList.js');
|
|
37
37
|
var RadioGroup = require('./components/RadioGroup/RadioGroup.js');
|
|
38
|
-
var RadioListItem = require('./components/
|
|
38
|
+
var RadioListItem = require('./components/RadioListItem/RadioListItem.js');
|
|
39
39
|
var RippleContainer = require('./components/RippleContainer/RippleContainer.js');
|
|
40
40
|
var Spacer = require('./components/Spacer/Spacer.js');
|
|
41
41
|
var Spinner = require('./components/Spinner/Spinner.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth: 1232,\n infoBlockBorderWidth: 4\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
|
|
@@ -41,8 +41,8 @@ import '../Modal/Modal.styles.js';
|
|
|
41
41
|
import '../Spacer/Spacer.styles.js';
|
|
42
42
|
import '../RadioBox/RadioBoxItem.styles.js';
|
|
43
43
|
import '../RadioBox/RadioBoxList.styles.js';
|
|
44
|
-
import '../RadioGroup/RadioListItem.styles.js';
|
|
45
44
|
import '../RadioGroup/RadioGroup.styles.js';
|
|
45
|
+
import '../RadioListItem/RadioListItem.styles.js';
|
|
46
46
|
import '../RippleContainer/RippleContainer.styles.js';
|
|
47
47
|
import { Spinner } from '../Spinner/Spinner.js';
|
|
48
48
|
import '../Stepper/Stepper.styles.js';
|
|
@@ -5,7 +5,7 @@ import { RadioWrapper, RadioInput, CustomRadio } from './Radio.styles.js';
|
|
|
5
5
|
|
|
6
6
|
function Radio(_a) {
|
|
7
7
|
var onChange = _a.onChange, _b = _a.customColor, customColor = _b === void 0 ? 'alertGreen' : _b, inputProps = __rest(_a, ["onChange", "customColor"]);
|
|
8
|
-
return (React.createElement(RadioWrapper, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }
|
|
8
|
+
return (React.createElement(RadioWrapper, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 } },
|
|
9
9
|
React.createElement(RadioInput, __assign({ type: "radio", onChange: onChange, customColor: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[customColor] : 'white' }, inputProps)),
|
|
10
10
|
React.createElement(CustomRadio, { customColor: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[customColor] : 'white' })));
|
|
11
11
|
}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { RadioListItem } from './RadioListItem.js';
|
|
3
2
|
import { H1 } from '@citygross/typography';
|
|
4
3
|
import { StyledDiv, BaseRadioGroup } from './RadioGroup.styles.js';
|
|
5
4
|
|
|
6
5
|
function RadioGroup(_a) {
|
|
7
|
-
var
|
|
6
|
+
var header = _a.header, children = _a.children;
|
|
8
7
|
return (React.createElement(StyledDiv, { rounded: true },
|
|
9
8
|
React.createElement(BaseRadioGroup, { header: header },
|
|
10
9
|
header && React.createElement(H1, null, header),
|
|
11
|
-
|
|
10
|
+
children)));
|
|
12
11
|
}
|
|
13
12
|
|
|
14
13
|
export { RadioGroup };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BodyText, TextTypes } from '@citygross/typography';
|
|
3
|
+
import { Radio } from '../FormElements/Radio/Radio.js';
|
|
4
|
+
import { Dot } from '../DotIndicator/DotIndicator.js';
|
|
5
|
+
import { theme } from '@citygross/design-tokens';
|
|
6
|
+
import { BaseRadioListItemContainer, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper, ExtraTextContainer } from './RadioListItem.styles.js';
|
|
7
|
+
|
|
8
|
+
function RadioListItem(_a) {
|
|
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, secondaryLabel = _a.secondaryLabel, disabledText = _a.disabledText, textOnSelected = _a.textOnSelected, value = _a.value;
|
|
11
|
+
var checked = value === selected;
|
|
12
|
+
return (React.createElement(BaseRadioListItemContainer, { background: transparent
|
|
13
|
+
? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
|
|
14
|
+
: theme && theme.palette
|
|
15
|
+
? checked
|
|
16
|
+
? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
17
|
+
: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
18
|
+
: 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
|
|
19
|
+
React.createElement("div", { style: { display: 'flex' } },
|
|
20
|
+
React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
|
|
21
|
+
React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
|
|
22
|
+
React.createElement(StyledH3, { lineThrough: isDisabled }, label)),
|
|
23
|
+
React.createElement(RadioSecondaryWrapper, null,
|
|
24
|
+
React.createElement("p", null,
|
|
25
|
+
React.createElement("span", { style: { marginRight: '8px' } }, dotIndicator && checked && (React.createElement(Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
|
|
26
|
+
isDisabled
|
|
27
|
+
? disabledText || defaultDisabledString
|
|
28
|
+
: secondaryLabel))),
|
|
29
|
+
textOnSelected && checked && (React.createElement(ExtraTextContainer, null,
|
|
30
|
+
React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { RadioListItem };
|
|
34
|
+
//# sourceMappingURL=RadioListItem.js.map
|
package/build/es/components/src/components/{RadioGroup → RadioListItem}/RadioListItem.js.map
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
+
import { H3 } from '@citygross/typography';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
|
|
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
|
+
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: center;\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: center;\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'; });
|
|
7
|
+
var ExtraTextContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: ", "px;\n margin-top: ", "px;\n"], ["\n margin-left: ", "px;\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
8
|
+
var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n"], ["\n cursor: pointer;\n white-space: nowrap;\n"])));
|
|
9
|
+
var RadioSecondaryWrapper = styled.div(templateObject_5 || (templateObject_5 = __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; });
|
|
10
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
11
|
+
|
|
12
|
+
export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, ExtraTextContainer, RadioSecondaryWrapper, StyledH3 };
|
|
13
|
+
//# sourceMappingURL=RadioListItem.styles.js.map
|
package/build/es/components/src/components/{RadioGroup → RadioListItem}/RadioListItem.styles.js.map
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -11,7 +11,7 @@ var BaseStepperItem = styled.div(templateObject_1 || (templateObject_1 = __makeT
|
|
|
11
11
|
"border-left: 1px solid " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium);
|
|
12
12
|
});
|
|
13
13
|
var BaseStepperList = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: ", ";\n background: ", ";\n"], ["\n box-shadow: ", ";\n background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
|
|
14
|
-
var MaxWidthContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n max-width: ", "px;\n margin: 0 auto;\n
|
|
14
|
+
var MaxWidthContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (max-width: ", "px) {\n padding-right: ", "px;\n }\n"], ["\n display: flex;\n max-width: ", "px;\n margin: 0 auto;\n\n @media (max-width: ", "px) {\n padding-right: ", "px;\n }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_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; });
|
|
15
15
|
var ButtonContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n /* margin-right: ", "px; */\n margin-left: auto;\n justify-content: flex-end;\n min-width: 155px;\n"], ["\n display: flex;\n align-items: center;\n /* margin-right: ", "px; */\n margin-left: auto;\n justify-content: flex-end;\n min-width: 155px;\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.lg; });
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
17
17
|
|
|
@@ -31,7 +31,7 @@ export { Modal } from './components/Modal/Modal.js';
|
|
|
31
31
|
export { RadioBoxItem } from './components/RadioBox/RadioBoxItem.js';
|
|
32
32
|
export { RadioBoxList } from './components/RadioBox/RadioBoxList.js';
|
|
33
33
|
export { RadioGroup } from './components/RadioGroup/RadioGroup.js';
|
|
34
|
-
export { RadioListItem } from './components/
|
|
34
|
+
export { RadioListItem } from './components/RadioListItem/RadioListItem.js';
|
|
35
35
|
export { RippleContainer } from './components/RippleContainer/RippleContainer.js';
|
|
36
36
|
export { Spacer } from './components/Spacer/Spacer.js';
|
|
37
37
|
export { Spinner } from './components/Spinner/Spinner.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth: 1232,\n infoBlockBorderWidth: 4\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.25",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -62,14 +62,14 @@
|
|
|
62
62
|
"styled-components": "^5.2.1"
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@citygross/design-tokens": "^0.2.
|
|
65
|
+
"@citygross/design-tokens": "^0.2.13",
|
|
66
66
|
"@citygross/icons": "^0.1.1",
|
|
67
|
-
"@citygross/react-use-bg-wizard": "^0.0.
|
|
68
|
-
"@citygross/typography": "^0.0.
|
|
67
|
+
"@citygross/react-use-bg-wizard": "^0.0.7",
|
|
68
|
+
"@citygross/typography": "^0.0.40",
|
|
69
69
|
"@citygross/utils": "^0.0.17",
|
|
70
70
|
"framer-motion": "^4.1.17",
|
|
71
71
|
"moment": "^2.29.1",
|
|
72
72
|
"react-loading-skeleton": "^2.2.0"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "3cfe73a8c31470661907dca4833cfacf4897519b"
|
|
75
75
|
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var typography = require('@citygross/typography');
|
|
7
|
-
var Radio = require('../FormElements/Radio/Radio.js');
|
|
8
|
-
var DotIndicator = require('../DotIndicator/DotIndicator.js');
|
|
9
|
-
var designTokens = require('@citygross/design-tokens');
|
|
10
|
-
var RadioListItem_styles = require('./RadioListItem.styles.js');
|
|
11
|
-
|
|
12
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
-
|
|
14
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
|
-
|
|
16
|
-
function RadioListItem(_a) {
|
|
17
|
-
var _b, _c, _d, _e;
|
|
18
|
-
var item = _a.item, 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;
|
|
19
|
-
var checked = item.value === selected;
|
|
20
|
-
return (React__default['default'].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
|
|
21
|
-
? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
|
|
22
|
-
: designTokens.theme && designTokens.theme.palette
|
|
23
|
-
? checked
|
|
24
|
-
? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
25
|
-
: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
26
|
-
: 'white', noPadding: noPadding, onClick: item.isDisabled || isDisabled ? function () { } : function () { return onClick(item.value); } },
|
|
27
|
-
React__default['default'].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: item.isDisabled, flexGrow: flexGrow },
|
|
28
|
-
React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: item.isDisabled, name: name, onChange: function () { return onClick(item.value); }, value: item.value }),
|
|
29
|
-
React__default['default'].createElement(RadioListItem_styles.StyledH3, { lineThrough: item.isDisabled }, item.label)),
|
|
30
|
-
dotIndicator && checked && (React__default['default'].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow })),
|
|
31
|
-
React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, item.isDisabled
|
|
32
|
-
? item.disabledText
|
|
33
|
-
? item.disabledText
|
|
34
|
-
: defaultDisabledString
|
|
35
|
-
: item.secondaryLabel),
|
|
36
|
-
item.textOnSelected && checked && (React__default['default'].createElement(RadioListItem_styles.ExtraTextContainer, null,
|
|
37
|
-
React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, item.textOnSelected)))));
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
exports.RadioListItem = RadioListItem;
|
|
41
|
-
//# sourceMappingURL=RadioListItem.js.map
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
|
-
var typography = require('@citygross/typography');
|
|
7
|
-
var styled = require('styled-components');
|
|
8
|
-
|
|
9
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
-
|
|
11
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
|
-
|
|
13
|
-
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; });
|
|
14
|
-
var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n align-items: center;\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'; });
|
|
15
|
-
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 margin-top: ", "px;\n"], ["\n flex-basis: 100%;\n margin-left: ", "px;\n text-align: start;\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
16
|
-
var StyledH3 = styled__default['default'](typography.H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
17
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
18
|
-
|
|
19
|
-
exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
|
|
20
|
-
exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
|
|
21
|
-
exports.ExtraTextContainer = ExtraTextContainer;
|
|
22
|
-
exports.StyledH3 = StyledH3;
|
|
23
|
-
//# sourceMappingURL=RadioListItem.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { BodyText, TextTypes } from '@citygross/typography';
|
|
3
|
-
import { Radio } from '../FormElements/Radio/Radio.js';
|
|
4
|
-
import { Dot } from '../DotIndicator/DotIndicator.js';
|
|
5
|
-
import { theme } from '@citygross/design-tokens';
|
|
6
|
-
import { BaseRadioListItemContainer, BaseRadioItemLeftWrapper, StyledH3, ExtraTextContainer } from './RadioListItem.styles.js';
|
|
7
|
-
|
|
8
|
-
function RadioListItem(_a) {
|
|
9
|
-
var _b, _c, _d, _e;
|
|
10
|
-
var item = _a.item, 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;
|
|
11
|
-
var checked = item.value === selected;
|
|
12
|
-
return (React.createElement(BaseRadioListItemContainer, { background: transparent
|
|
13
|
-
? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
|
|
14
|
-
: theme && theme.palette
|
|
15
|
-
? checked
|
|
16
|
-
? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
17
|
-
: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.white
|
|
18
|
-
: 'white', noPadding: noPadding, onClick: item.isDisabled || isDisabled ? function () { } : function () { return onClick(item.value); } },
|
|
19
|
-
React.createElement(BaseRadioItemLeftWrapper, { isDisabled: item.isDisabled, flexGrow: flexGrow },
|
|
20
|
-
React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: item.isDisabled, name: name, onChange: function () { return onClick(item.value); }, value: item.value }),
|
|
21
|
-
React.createElement(StyledH3, { lineThrough: item.isDisabled }, item.label)),
|
|
22
|
-
dotIndicator && checked && (React.createElement(Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow })),
|
|
23
|
-
React.createElement(BodyText, { size: TextTypes.TextSize.SMALL }, item.isDisabled
|
|
24
|
-
? item.disabledText
|
|
25
|
-
? item.disabledText
|
|
26
|
-
: defaultDisabledString
|
|
27
|
-
: item.secondaryLabel),
|
|
28
|
-
item.textOnSelected && checked && (React.createElement(ExtraTextContainer, null,
|
|
29
|
-
React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, item.textOnSelected)))));
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export { RadioListItem };
|
|
33
|
-
//# sourceMappingURL=RadioListItem.js.map
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
-
import { H3 } from '@citygross/typography';
|
|
3
|
-
import styled from 'styled-components';
|
|
4
|
-
|
|
5
|
-
var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_1 = __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; });
|
|
6
|
-
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", ";\n > * {\n &:first-child {\n margin-right: ", "px;\n }\n }\n ", ";\n"], ["\n display: flex;\n align-items: center;\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'; });
|
|
7
|
-
var ExtraTextContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-basis: 100%;\n margin-left: ", "px;\n text-align: start;\n margin-top: ", "px;\n"], ["\n flex-basis: 100%;\n margin-left: ", "px;\n text-align: start;\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
8
|
-
var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
9
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
10
|
-
|
|
11
|
-
export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, ExtraTextContainer, StyledH3 };
|
|
12
|
-
//# sourceMappingURL=RadioListItem.styles.js.map
|