@citygross/components 0.13.19 → 0.14.1

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 (32) hide show
  1. package/build/@types/components/Chips/Chip.styles.d.ts +1 -8
  2. package/build/@types/components/RadioBox/RadioBoxList.styles.d.ts +1 -8
  3. package/build/@types/components/RadioListItem/RadioListItem.d.ts +1 -3
  4. package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts +2 -8
  5. package/build/@types/components/WarningLabel/WarningLabel.d.ts +3 -3
  6. package/build/@types/components/WarningLabel/WarningLabel.styles.d.ts +2 -0
  7. package/build/cjs/components/src/components/AlertBox/AlertBox.js +7 -7
  8. package/build/cjs/components/src/components/Fieldset/Fieldset.js +3 -3
  9. package/build/cjs/components/src/components/FormElements/Input/Input.js +2 -4
  10. package/build/cjs/components/src/components/FormElements/Input/Input.js.map +1 -1
  11. package/build/cjs/components/src/components/Links/Link.js +2 -2
  12. package/build/cjs/components/src/components/ProductHeader/ProductHeader.js +5 -5
  13. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +3 -3
  14. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +8 -4
  15. package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  16. package/build/cjs/components/src/components/WarningLabel/WarningLabel.js +5 -110
  17. package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map +1 -1
  18. package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js +7 -5
  19. package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js.map +1 -1
  20. package/build/es/components/src/components/AlertBox/AlertBox.js +7 -7
  21. package/build/es/components/src/components/Fieldset/Fieldset.js +3 -3
  22. package/build/es/components/src/components/FormElements/Input/Input.js +2 -4
  23. package/build/es/components/src/components/FormElements/Input/Input.js.map +1 -1
  24. package/build/es/components/src/components/Links/Link.js +3 -3
  25. package/build/es/components/src/components/ProductHeader/ProductHeader.js +5 -5
  26. package/build/es/components/src/components/RadioListItem/RadioListItem.js +4 -4
  27. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +8 -4
  28. package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map +1 -1
  29. package/build/es/components/src/components/WarningLabel/WarningLabel.js +6 -111
  30. package/build/es/components/src/components/WarningLabel/WarningLabel.js.map +1 -1
  31. package/build/es/components/src/components/WarningLabel/WarningLabel.styles.js +6 -6
  32. package/package.json +3 -3
package/build/@types/components/Chips/Chip.styles.d.ts CHANGED
@@ -9,11 +9,4 @@ export declare type TChip = {
9
9
  };
10
10
  export declare const BaseChip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TChip, never>;
11
11
  export declare const ChipCheckbox: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
12
- export declare const ChipLabel: import("styled-components").StyledComponent<({ children, color, fontWeight, id, lineThrough, size, textAlign, ...props }: {
13
- color?: string | undefined;
14
- fontWeight?: "regular" | "medium" | "semiBold" | "bold" | "extraBold" | undefined;
15
- id?: string | undefined;
16
- lineThrough?: boolean | undefined;
17
- size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
18
- textAlign?: "center" | "left" | "right" | undefined;
19
- } & import("react").HTMLAttributes<HTMLParagraphElement>) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
12
+ export declare const ChipLabel: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
package/build/@types/components/RadioBox/RadioBoxList.styles.d.ts CHANGED
@@ -3,11 +3,4 @@ import { TBaseRadioBox } from './RadioBoxItem.styles';
3
3
  export declare const BaseRadioBoxList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox, never>;
4
4
  export declare const RadioBoxListChildContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox, never>;
5
5
  export declare const DividerPadding: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
6
- export declare const RadioBoxListParagraph: import("styled-components").StyledComponent<({ children, color, fontWeight, id, lineThrough, size, textAlign, ...props }: {
7
- color?: string | undefined;
8
- fontWeight?: "regular" | "medium" | "semiBold" | "bold" | "extraBold" | undefined;
9
- id?: string | undefined;
10
- lineThrough?: boolean | undefined;
11
- size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
12
- textAlign?: "center" | "left" | "right" | undefined;
13
- } & import("react").HTMLAttributes<HTMLParagraphElement>) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
6
+ export declare const RadioBoxListParagraph: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
package/build/@types/components/RadioListItem/RadioListItem.d.ts CHANGED
@@ -3,16 +3,14 @@ import * as styles from './RadioListItem.styles';
3
3
  export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
4
4
  onClick: (value: string | number) => void;
5
5
  selected?: boolean;
6
- defaultDisabledString?: string;
7
6
  transparent?: boolean;
8
7
  noPadding?: boolean;
9
8
  label: string;
10
9
  secondaryLabel?: string;
11
10
  isDisabled?: boolean;
12
- disabledText?: string;
13
11
  value: string | number;
14
12
  wrapMobile?: boolean;
15
13
  children?: JSX.Element;
16
14
  additionalInfo?: JSX.Element;
17
15
  };
18
- export declare function RadioListItem({ onClick, selected, defaultDisabledString, flexGrow, isDisabled, transparent, noPadding, label, disabledText, value, wrapMobile, additionalInfo, children }: TRadioListItemProps): JSX.Element;
16
+ export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children }: TRadioListItemProps): JSX.Element;
package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts CHANGED
@@ -20,13 +20,7 @@ export declare const StyledH3: import("styled-components").StyledComponent<({ ch
20
20
  as: string;
21
21
  } & TBaseRadioItemInputWrapper, "as">;
22
22
  export declare const RadioRightWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
23
- export declare const DisableText: import("styled-components").StyledComponent<({ children, color, fontWeight, id, lineThrough, size, textAlign, ...props }: {
24
- color?: string | undefined;
25
- fontWeight?: "bold" | "regular" | "medium" | "semiBold" | "extraBold" | undefined;
26
- id?: string | undefined;
27
- lineThrough?: boolean | undefined;
28
- size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
29
- textAlign?: "left" | "center" | "right" | undefined;
30
- } & import("react").HTMLAttributes<HTMLParagraphElement>) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
23
+ export declare const DisableText: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
31
24
  export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWrapMobile, never>;
32
25
  export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
26
+ export declare const LabelContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/build/@types/components/WarningLabel/WarningLabel.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  export declare type TWarningLabel = {
3
- children: React.ReactNode;
3
+ text: string;
4
4
  background: string;
5
- toolTip?: React.ReactNode;
5
+ icon?: React.ReactNode;
6
6
  };
7
- export declare function WarningLabel({ children, background, toolTip }: TWarningLabel): JSX.Element;
7
+ export declare function WarningLabel({ text, background, icon }: TWarningLabel): JSX.Element;
package/build/@types/components/WarningLabel/WarningLabel.styles.d.ts CHANGED
@@ -4,3 +4,5 @@ export declare type TWarningIndicator = {
4
4
  toolTip?: React.ReactNode;
5
5
  };
6
6
  export declare const WarningIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWarningIndicator, never>;
7
+ export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
+ export declare const BodyTextStyled: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
package/build/cjs/components/src/components/AlertBox/AlertBox.js CHANGED
@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../_virtual/_tslib.js');
6
6
  var React = require('react');
7
+ var designTokens = require('@citygross/design-tokens');
7
8
  var icons = require('@citygross/icons');
9
+ var typography = require('@citygross/typography');
8
10
  var alertBox = require('../../helpers/alert-box.js');
9
11
  var AlertBox_styles = require('./AlertBox.styles.js');
10
- var typography = require('@citygross/typography');
11
- var designTokens = require('@citygross/design-tokens');
12
12
 
13
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
14
 
@@ -21,14 +21,14 @@ exports.EAlertBoxVariant = void 0;
21
21
  EAlertBoxVariant["warning"] = "warning";
22
22
  })(exports.EAlertBoxVariant || (exports.EAlertBoxVariant = {}));
23
23
  function AlertBox(_a) {
24
- var _b, _c, _d, _e;
25
- var customElement = _a.customElement, headLine = _a.headLine, text = _a.text, _f = _a.variant, variant = _f === void 0 ? exports.EAlertBoxVariant.info : _f, props = _tslib.__rest(_a, ["customElement", "headLine", "text", "variant"]);
26
- var _g = alertBox.getAlertBoxAttributes(variant), backgroundColor = _g.backgroundColor, borderColor = _g.borderColor, iconColor = _g.iconColor;
24
+ var _b, _c;
25
+ var customElement = _a.customElement, headLine = _a.headLine, text = _a.text, _d = _a.variant, variant = _d === void 0 ? exports.EAlertBoxVariant.info : _d, props = _tslib.__rest(_a, ["customElement", "headLine", "text", "variant"]);
26
+ var _e = alertBox.getAlertBoxAttributes(variant), backgroundColor = _e.backgroundColor, borderColor = _e.borderColor, iconColor = _e.iconColor;
27
27
  return (React__default["default"].createElement(AlertBox_styles.AlertBox, _tslib.__assign({ backgroundColor: backgroundColor, borderColor: borderColor }, props),
28
28
  React__default["default"].createElement(icons.Icons.Info, { color: iconColor, height: (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }),
29
29
  React__default["default"].createElement(AlertBox_styles.AlertBoxContent, null,
30
- headLine && (React__default["default"].createElement(typography.BodyText, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.darkest, fontWeight: "medium" }, headLine)),
31
- text && React__default["default"].createElement(typography.BodyText, { color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest }, text),
30
+ headLine && React__default["default"].createElement(typography.BodyText, { fontWeight: "medium" }, headLine),
31
+ text && React__default["default"].createElement(typography.BodyText, null, text),
32
32
  customElement && customElement)));
33
33
  }
34
34
 
package/build/cjs/components/src/components/Fieldset/Fieldset.js CHANGED
@@ -12,11 +12,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
14
  var Fieldset = function (_a) {
15
- var _b, _c, _d;
16
- var children = _a.children, _e = _a.gap, gap = _e === void 0 ? (_c = (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) !== null && _c !== void 0 ? _c : 8 : _e, legend = _a.legend;
15
+ var _b, _c;
16
+ var children = _a.children, _d = _a.gap, gap = _d === void 0 ? (_c = (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) !== null && _c !== void 0 ? _c : 8 : _d, legend = _a.legend;
17
17
  return (React__default["default"].createElement(Fieldset_styles.Fieldset, { gap: gap },
18
18
  legend && (React__default["default"].createElement("legend", null,
19
- React__default["default"].createElement(typography.BodyText, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.darkest, fontWeight: "medium", size: typography.TextTypes.TextSize.SMALL }, legend))),
19
+ React__default["default"].createElement(typography.BodyText, { fontWeight: "medium", size: typography.TextTypes.TextSize.SMALL }, legend))),
20
20
  children));
21
21
  };
22
22
 
package/build/cjs/components/src/components/FormElements/Input/Input.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../../_virtual/_tslib.js');
6
6
  var React = require('react');
7
- var designTokens = require('@citygross/design-tokens');
8
7
  var typography = require('@citygross/typography');
9
8
  var formElement = require('../../../helpers/form-element.js');
10
9
  var FormElement_styles = require('../FormElement.styles.js');
@@ -16,8 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
16
15
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
16
 
18
17
  var Input = React__default["default"].forwardRef(function (_a, ref) {
19
- var _b;
20
- var elementLeft = _a.elementLeft, elementRight = _a.elementRight, error = _a.error, errorLabel = _a.errorLabel, fullWidth = _a.fullWidth, id = _a.id, hideLabel = _a.hideLabel, label = _a.label, required = _a.required, paddingLeft = _a.paddingLeft, _c = _a.size, size = _c === void 0 ? FormElement_types.EFormElementSize.large : _c, unit = _a.unit, props = _tslib.__rest(_a, ["elementLeft", "elementRight", "error", "errorLabel", "fullWidth", "id", "hideLabel", "label", "required", "paddingLeft", "size", "unit"]);
18
+ var elementLeft = _a.elementLeft, elementRight = _a.elementRight, error = _a.error, errorLabel = _a.errorLabel, fullWidth = _a.fullWidth, id = _a.id, hideLabel = _a.hideLabel, label = _a.label, required = _a.required, paddingLeft = _a.paddingLeft, _b = _a.size, size = _b === void 0 ? FormElement_types.EFormElementSize.large : _b, unit = _a.unit, props = _tslib.__rest(_a, ["elementLeft", "elementRight", "error", "errorLabel", "fullWidth", "id", "hideLabel", "label", "required", "paddingLeft", "size", "unit"]);
21
19
  var sizeAttributes = formElement.getSizeAttributes(size);
22
20
  var errorId = "".concat(id, "-error");
23
21
  return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
@@ -29,7 +27,7 @@ var Input = React__default["default"].forwardRef(function (_a, ref) {
29
27
  elementLeft && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, elementLeft)),
30
28
  React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, ref: ref, sizeAttributes: sizeAttributes, id: id }, props)),
31
29
  elementRight && (React__default["default"].createElement(Input_styles.AbsoluteContainer, { right: true }, elementRight))),
32
- unit && React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
30
+ unit && React__default["default"].createElement(typography.BodyText, null, unit)),
33
31
  error && errorLabel && (React__default["default"].createElement(FormElement_styles.ErrorLabel, { id: errorId }, errorLabel))));
34
32
  });
35
33
  Input.displayName = 'Input';
package/build/cjs/components/src/components/FormElements/Input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/Links/Link.js CHANGED
@@ -30,9 +30,9 @@ exports.ELinkVariant = void 0;
30
30
  function Link(_a) {
31
31
  var asButton = _a.asButton, borderRadius = _a.borderRadius, children = _a.children, hrefPath = _a.hrefPath, icon = _a.icon, _b = _a.inverted, inverted = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, noWrap = _a.noWrap, onClick = _a.onClick, _c = _a.size, size = _c === void 0 ? typography.TextTypes.TextSize.REGULAR : _c, _d = _a.target, target = _d === void 0 ? '_self' : _d, tabIndex = _a.tabIndex, _e = _a.variant, variant = _e === void 0 ? exports.ELinkVariant.PRIMARY : _e, props = _tslib.__rest(_a, ["asButton", "borderRadius", "children", "hrefPath", "icon", "inverted", "isDisabled", "noWrap", "onClick", "size", "target", "tabIndex", "variant"]);
32
32
  return asButton ? (React__default["default"].createElement(Link_styles.LinkAsButton, _tslib.__assign({ borderRadius: borderRadius, disabled: isDisabled, icon: icon, inverted: inverted, isDisabled: isDisabled, noWrap: noWrap, onClick: onClick, size: size, variant: variant }, props),
33
- React__default["default"].createElement(typography.LinkText, { size: size }, children),
33
+ React__default["default"].createElement(typography.BodyText, { size: size }, children),
34
34
  icon && React__default["default"].createElement(Link_styles.IconWrapper, null, icon))) : (React__default["default"].createElement(Link_styles.BaseLink, _tslib.__assign({ borderRadius: borderRadius, href: hrefPath, isDisabled: isDisabled, icon: icon, inverted: inverted, noWrap: noWrap, onClick: onClick, size: size, tabIndex: tabIndex, target: target, variant: variant }, props),
35
- React__default["default"].createElement(typography.LinkText, { size: size }, children),
35
+ React__default["default"].createElement(typography.BodyText, { size: size }, children),
36
36
  icon && React__default["default"].createElement(Link_styles.IconWrapper, null, icon)));
37
37
  }
38
38
 
package/build/cjs/components/src/components/ProductHeader/ProductHeader.js CHANGED
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var typography = require('@citygross/typography');
7
6
  var designTokens = require('@citygross/design-tokens');
7
+ var typography = require('@citygross/typography');
8
8
  var ProductHeader_styles = require('./ProductHeader.styles.js');
9
9
 
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -18,7 +18,7 @@ exports.EProductHeader = void 0;
18
18
  EProductHeader["LIST_ITEM"] = "listItem";
19
19
  })(exports.EProductHeader || (exports.EProductHeader = {}));
20
20
  var ProductHeader = function (_a) {
21
- var _b, _c, _d, _e, _f, _g;
21
+ var _b, _c, _d, _e, _f;
22
22
  var location = _a.location, subtitle = _a.subtitle, title = _a.title;
23
23
  switch (location) {
24
24
  case exports.EProductHeader.DETAIL_PAGE:
@@ -28,11 +28,11 @@ var ProductHeader = function (_a) {
28
28
  case exports.EProductHeader.CARD:
29
29
  return (React__default["default"].createElement(ProductHeader_styles.Container, null,
30
30
  React__default["default"].createElement(typography.H3, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, title),
31
- React__default["default"].createElement(typography.BodyText, { color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, size: typography.TextTypes.TextSize.EXTRASMALL }, subtitle)));
31
+ React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.EXTRASMALL }, subtitle)));
32
32
  case exports.EProductHeader.LIST_ITEM:
33
33
  return (React__default["default"].createElement(ProductHeader_styles.Container, null,
34
- React__default["default"].createElement(typography.BodyText, { color: (_f = designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.darkest, fontWeight: "medium", size: typography.TextTypes.TextSize.REGULAR }, title),
35
- React__default["default"].createElement(typography.BodyText, { color: (_g = designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.darkest, size: typography.TextTypes.TextSize.EXTRASMALL }, subtitle)));
34
+ React__default["default"].createElement(typography.BodyText, { color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, fontWeight: "medium", size: typography.TextTypes.TextSize.REGULAR }, title),
35
+ React__default["default"].createElement(typography.BodyText, { color: (_f = designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.darkest, size: typography.TextTypes.TextSize.EXTRASMALL }, subtitle)));
36
36
  default:
37
37
  return null;
38
38
  }
package/build/cjs/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
 
12
12
  function RadioListItem(_a) {
13
- var onClick = _a.onClick, selected = _a.selected, defaultDisabledString = _a.defaultDisabledString, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
13
+ var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
14
14
  return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: 0, role: 'checkbox', transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
15
15
  if (event.key === 'Enter' && !isDisabled) {
16
16
  onClick(value);
@@ -18,10 +18,10 @@ function RadioListItem(_a) {
18
18
  } },
19
19
  React__default["default"].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
20
20
  React__default["default"].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
21
- React__default["default"].createElement("div", null,
21
+ React__default["default"].createElement(RadioListItem_styles.LabelContentWrapper, null,
22
22
  React__default["default"].createElement(RadioListItem_styles.StyledH3, { isDisabled: isDisabled }, label),
23
23
  additionalInfo && additionalInfo)),
24
- React__default["default"].createElement(RadioListItem_styles.RadioRightWrapper, null, isDisabled ? (React__default["default"].createElement(RadioListItem_styles.DisableText, null, disabledText || defaultDisabledString)) : (children)))));
24
+ !isDisabled && (React__default["default"].createElement(RadioListItem_styles.RadioRightWrapper, null, children)))));
25
25
  }
26
26
 
27
27
  exports.RadioListItem = RadioListItem;
package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -35,9 +35,12 @@ var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1
35
35
  "background: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter));
36
36
  });
37
37
  var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
38
- 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 line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
38
+ 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 line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
39
+ var _a;
40
+ return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark, ";\n text-decoration: line-through;\n ");
41
+ });
39
42
  var RadioRightWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\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; });
40
- var DisableText = styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\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) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
43
+ styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\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) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
41
44
  return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
42
45
  "\n text-align: left;\n \n";
43
46
  }, 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; });
@@ -47,11 +50,12 @@ var RadioFlex = styled__default["default"].div(templateObject_6 || (templateObje
47
50
  "\n flex-wrap: wrap;\n @media (min-width: ".concat((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs, "px) {\n flex-wrap: nowrap;\n }\n ");
48
51
  });
49
52
  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"])));
50
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
53
+ var LabelContentWrapper = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
54
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
51
55
 
52
56
  exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
53
57
  exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
54
- exports.DisableText = DisableText;
58
+ exports.LabelContentWrapper = LabelContentWrapper;
55
59
  exports.RadioFlex = RadioFlex;
56
60
  exports.RadioRightWrapper = RadioRightWrapper;
57
61
  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/cjs/components/src/components/WarningLabel/WarningLabel.js CHANGED
@@ -3,123 +3,18 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- require('@citygross/typography');
7
- require('../AddressBlock/AddressBlock.styles.js');
8
- require('@citygross/design-tokens');
9
- require('@citygross/icons');
10
- require('../Accordion/Accordion.styles.js');
11
- require('../AlertBox/AlertBox.js');
12
- require('../BackButton/BackButton.styles.js');
13
- require('../BackgroundImage/BackgroundImage.styles.js');
14
- require('../Badge/Badge.styles.js');
15
- require('../../../../_virtual/_tslib.js');
16
- require('../BoxArrow/BoxArrow.styles.js');
17
- require('../Box/Box.styles.js');
18
- require('../Button/Button.js');
19
- require('../Button/Button.styles.js');
20
- require('../Button/NavButton.js');
21
- require('../CartCard/CartCard.styles.js');
22
- require('../CgButton/CgButton.js');
23
- require('../CgButton/CgButton.types.js');
24
- require('../CartCardLabel/CartCardLabel.styles.js');
25
- require('@citygross/utils');
26
- require('react-loading-skeleton');
27
- require('../CartItemSummary/CartItemSummary.styles.js');
28
- require('../CartSubTotal/CartSubTotal.js');
29
- require('../ToolTipDialog/ToolTipDialog.styles.js');
30
- require('../CartSummary/CartSummary.styles.js');
31
- require('../../../../design-tokens/build/index.js');
32
- require('../CgButton/ButtonAsLink/ButtonAsLink.styles.js');
33
- require('../CgButton/CgButton.styles.js');
34
- require('../Chips/Chip.styles.js');
35
- require('../Spinner/Spinner.styles.js');
36
- require('../Collapsable/Collapsable.styles.js');
37
- require('../CouponCode/CouponCode.js');
38
- require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
39
- require('../DateBox/DateBox.styles.js');
40
- require('../DeliverySlotItem/DeliverySlotItem.styles.js');
41
- require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
42
- require('../Divider/Divider.styles.js');
43
- require('../DotIndicator/DotIndicator.styles.js');
44
- require('../Fieldset/Fieldset.styles.js');
45
- require('../Flex/Flex.styles.js');
46
- require('../Form/Form.styles.js');
47
- require('../FormControl/FormControl.js');
48
- require('../ScreenReader/ScreenReader.styles.js');
49
- require('../FormElements/FormElement.types.js');
50
- require('../FormElements/Checkbox/Checkbox.styles.js');
51
- require('../FormElements/FormElement.styles.js');
52
- require('../FormElements/Input/Input.js');
53
- require('../FormElements/InputOld/InputOld.styles.js');
54
- require('../FormElements/Radio/Radio.styles.js');
55
- require('../FormElements/Select/Select.styles.js');
56
- require('../FormElements/Switch/Switch.styles.js');
57
- require('../FormElements/TextArea/TextArea.styles.js');
58
- require('../FormGroup/FormGroup.styles.js');
59
- require('../GridContainer/GridContainer.styles.js');
60
- require('../Logo/Logo.styles.js');
61
- require('../Header/Header.styles.js');
62
- require('../HeaderLink/HeaderLink.styles.js');
63
- require('../HighlightBox/HighlightBox.styles.js');
64
- require('../IconText/IconText.styles.js');
65
- require('../IconToolTip/IconToolTip.styles.js');
66
- require('../Spacer/Spacer.styles.js');
67
- require('../InfoTextBlock/InfoTextBlock.styles.js');
68
- require('../LayoutBox/LayoutBox.styles.js');
69
- require('../Links/Link.js');
70
- require('../ListItem/ListItem.js');
71
- require('../ListItemWithRadio/ListItemWithRadio.styles.js');
72
- require('../MaxHeightText/styles.js');
73
- require('../Menu/Menu.styles.js');
74
- require('../MenuListItem/MenuListItem.styles.js');
75
- require('../MenuListDropdown/MenuListDropdown.styles.js');
76
- require('../MobileTable/MobileTable.styles.js');
77
- require('../Modal/Modal.js');
78
- require('../NavMainLink/NavMainLink.styled.js');
79
- require('../Pagination/Pagination.styles.js');
80
- require('../Pill/Pill.styles.js');
81
- require('../PriceTag/PriceTag.types.js');
82
- require('../PriceStripe/PriceStripe.styles.js');
83
- require('../PriceTag/PriceTag.styles.js');
84
- require('../ProductHeader/ProductHeader.js');
85
- require('../ProgressBar/ProgressBar.styled.js');
86
- require('../QuantitySelector/QuantitySelector.styles.js');
87
- require('../QuantitySelector/QuantitySelector.types.js');
88
- require('../RadioBox/RadioBoxItem.styles.js');
89
- require('../RadioBox/RadioBoxList.styles.js');
90
- require('../RadioGroup/RadioGroup.styles.js');
91
- require('../RadioListItem/RadioListItem.styles.js');
92
- require('../RippleContainer/RippleContainer.styles.js');
93
- require('../SearchListItem/SearchListItem.styles.js');
94
- require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
95
- require('../SelectButton/SelectButton.styles.js');
96
- require('../SkipTo/SkipTo.styles.js');
97
- require('../SideModal/SideModal.js');
98
- require('../SlideInOutContainer/SlideInOutContainer.styles.js');
99
- require('../Slider/Slider.styles.js');
100
- require('react-slick');
101
- require('../Stepper/Stepper.styles.js');
102
- var ToolTip = require('../ToolTip/ToolTip.js');
103
- require('../StepperMobile/StepperMobile.styles.js');
104
- require('../Table/Table.styles.js');
105
- require('../Tag/Tag.styles.js');
106
- require('../Timeline/Timeline.styles.js');
107
- require('../UnorderedList/UnorderedList.styles.js');
108
6
  var WarningLabel_styles = require('./WarningLabel.styles.js');
109
- require('../ZipCodeInput/ZipCodeInput.styles.js');
110
- require('../../containers/PageContainer/PageContainer.styles.js');
111
- require('../../../../utils/build/index.js');
112
- require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js');
7
+ var typography = require('@citygross/typography');
113
8
 
114
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
115
10
 
116
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
117
12
 
118
13
  function WarningLabel(_a) {
119
- var children = _a.children, background = _a.background, toolTip = _a.toolTip;
120
- return (React__default["default"].createElement(WarningLabel_styles.WarningIndicator, { background: background, toolTip: toolTip },
121
- toolTip && React__default["default"].createElement(ToolTip.ToolTip, null, toolTip),
122
- children));
14
+ var text = _a.text, background = _a.background, icon = _a.icon;
15
+ return (React__default["default"].createElement(WarningLabel_styles.WarningIndicator, { background: background },
16
+ icon && (React__default["default"].createElement(WarningLabel_styles.IconWrapper, null, icon)),
17
+ React__default["default"].createElement(WarningLabel_styles.BodyTextStyled, { size: typography.TextTypes.TextSize.TINY }, text)));
123
18
  }
124
19
 
125
20
  exports.WarningLabel = WarningLabel;
package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js CHANGED
@@ -4,16 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../_virtual/_tslib.js');
6
6
  var styled = require('styled-components');
7
+ var typography = require('@citygross/typography');
7
8
 
8
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
10
 
10
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
12
 
12
- var WarningIndicator = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n position: relative;\n ", ";\n"], ["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n position: relative;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) {
13
- return props.toolTip &&
14
- "\n > {\n &:first-child {\n display: none;\n }\n }\n\n &:hover {\n > {\n &:first-child {\n display: block;\n }\n }\n }\n ";
15
- });
16
- var templateObject_1;
13
+ var WarningIndicator = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n width: fit-content;\n"], ["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n width: fit-content;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
14
+ var IconWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"])));
15
+ var BodyTextStyled = styled__default["default"](typography.BodyText)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
16
+ var templateObject_1, templateObject_2, templateObject_3;
17
17
 
18
+ exports.BodyTextStyled = BodyTextStyled;
19
+ exports.IconWrapper = IconWrapper;
18
20
  exports.WarningIndicator = WarningIndicator;
19
21
  //# sourceMappingURL=WarningLabel.styles.js.map
package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"WarningLabel.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"WarningLabel.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/AlertBox/AlertBox.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { __rest, __assign } from '../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
+ import { theme } from '@citygross/design-tokens';
3
4
  import { Icons } from '@citygross/icons';
5
+ import { BodyText } from '@citygross/typography';
4
6
  import { getAlertBoxAttributes } from '../../helpers/alert-box.js';
5
7
  import { AlertBox as AlertBox$1, AlertBoxContent } from './AlertBox.styles.js';
6
- import { BodyText } from '@citygross/typography';
7
- import { theme } from '@citygross/design-tokens';
8
8
 
9
9
  var EAlertBoxVariant;
10
10
  (function (EAlertBoxVariant) {
@@ -13,14 +13,14 @@ var EAlertBoxVariant;
13
13
  EAlertBoxVariant["warning"] = "warning";
14
14
  })(EAlertBoxVariant || (EAlertBoxVariant = {}));
15
15
  function AlertBox(_a) {
16
- var _b, _c, _d, _e;
17
- var customElement = _a.customElement, headLine = _a.headLine, text = _a.text, _f = _a.variant, variant = _f === void 0 ? EAlertBoxVariant.info : _f, props = __rest(_a, ["customElement", "headLine", "text", "variant"]);
18
- var _g = getAlertBoxAttributes(variant), backgroundColor = _g.backgroundColor, borderColor = _g.borderColor, iconColor = _g.iconColor;
16
+ var _b, _c;
17
+ var customElement = _a.customElement, headLine = _a.headLine, text = _a.text, _d = _a.variant, variant = _d === void 0 ? EAlertBoxVariant.info : _d, props = __rest(_a, ["customElement", "headLine", "text", "variant"]);
18
+ var _e = getAlertBoxAttributes(variant), backgroundColor = _e.backgroundColor, borderColor = _e.borderColor, iconColor = _e.iconColor;
19
19
  return (React.createElement(AlertBox$1, __assign({ backgroundColor: backgroundColor, borderColor: borderColor }, props),
20
20
  React.createElement(Icons.Info, { color: iconColor, height: (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }),
21
21
  React.createElement(AlertBoxContent, null,
22
- headLine && (React.createElement(BodyText, { color: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.darkest, fontWeight: "medium" }, headLine)),
23
- text && React.createElement(BodyText, { color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.darkest }, text),
22
+ headLine && React.createElement(BodyText, { fontWeight: "medium" }, headLine),
23
+ text && React.createElement(BodyText, null, text),
24
24
  customElement && customElement)));
25
25
  }
26
26
 
package/build/es/components/src/components/Fieldset/Fieldset.js CHANGED
@@ -4,11 +4,11 @@ import { BodyText, TextTypes } from '@citygross/typography';
4
4
  import { Fieldset as Fieldset$1 } from './Fieldset.styles.js';
5
5
 
6
6
  var Fieldset = function (_a) {
7
- var _b, _c, _d;
8
- var children = _a.children, _e = _a.gap, gap = _e === void 0 ? (_c = (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) !== null && _c !== void 0 ? _c : 8 : _e, legend = _a.legend;
7
+ var _b, _c;
8
+ var children = _a.children, _d = _a.gap, gap = _d === void 0 ? (_c = (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) !== null && _c !== void 0 ? _c : 8 : _d, legend = _a.legend;
9
9
  return (React.createElement(Fieldset$1, { gap: gap },
10
10
  legend && (React.createElement("legend", null,
11
- React.createElement(BodyText, { color: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.darkest, fontWeight: "medium", size: TextTypes.TextSize.SMALL }, legend))),
11
+ React.createElement(BodyText, { fontWeight: "medium", size: TextTypes.TextSize.SMALL }, legend))),
12
12
  children));
13
13
  };
14
14
 
package/build/es/components/src/components/FormElements/Input/Input.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
- import { theme } from '@citygross/design-tokens';
4
3
  import { BodyText } from '@citygross/typography';
5
4
  import { getSizeAttributes } from '../../../helpers/form-element.js';
6
5
  import { Wrapper, HiddenLabel, Label, ErrorLabel } from '../FormElement.styles.js';
@@ -8,8 +7,7 @@ import { InputWrapper, InputContainer, AbsoluteContainer, InputElement } from '.
8
7
  import { EFormElementSize } from '../FormElement.types.js';
9
8
 
10
9
  var Input = React.forwardRef(function (_a, ref) {
11
- var _b;
12
- var elementLeft = _a.elementLeft, elementRight = _a.elementRight, error = _a.error, errorLabel = _a.errorLabel, fullWidth = _a.fullWidth, id = _a.id, hideLabel = _a.hideLabel, label = _a.label, required = _a.required, paddingLeft = _a.paddingLeft, _c = _a.size, size = _c === void 0 ? EFormElementSize.large : _c, unit = _a.unit, props = __rest(_a, ["elementLeft", "elementRight", "error", "errorLabel", "fullWidth", "id", "hideLabel", "label", "required", "paddingLeft", "size", "unit"]);
10
+ var elementLeft = _a.elementLeft, elementRight = _a.elementRight, error = _a.error, errorLabel = _a.errorLabel, fullWidth = _a.fullWidth, id = _a.id, hideLabel = _a.hideLabel, label = _a.label, required = _a.required, paddingLeft = _a.paddingLeft, _b = _a.size, size = _b === void 0 ? EFormElementSize.large : _b, unit = _a.unit, props = __rest(_a, ["elementLeft", "elementRight", "error", "errorLabel", "fullWidth", "id", "hideLabel", "label", "required", "paddingLeft", "size", "unit"]);
13
11
  var sizeAttributes = getSizeAttributes(size);
14
12
  var errorId = "".concat(id, "-error");
15
13
  return (React.createElement(Wrapper, null,
@@ -21,7 +19,7 @@ var Input = React.forwardRef(function (_a, ref) {
21
19
  elementLeft && (React.createElement(AbsoluteContainer, null, elementLeft)),
22
20
  React.createElement(InputElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, ref: ref, sizeAttributes: sizeAttributes, id: id }, props)),
23
21
  elementRight && (React.createElement(AbsoluteContainer, { right: true }, elementRight))),
24
- unit && React.createElement(BodyText, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
22
+ unit && React.createElement(BodyText, null, unit)),
25
23
  error && errorLabel && (React.createElement(ErrorLabel, { id: errorId }, errorLabel))));
26
24
  });
27
25
  Input.displayName = 'Input';
package/build/es/components/src/components/FormElements/Input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Links/Link.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest, __assign } from '../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
- import { TextTypes, LinkText } from '@citygross/typography';
3
+ import { TextTypes, BodyText } from '@citygross/typography';
4
4
  import { LinkAsButton, IconWrapper, BaseLink } from './Link.styles.js';
5
5
 
6
6
  var LinkSize;
@@ -22,9 +22,9 @@ var ELinkVariant;
22
22
  function Link(_a) {
23
23
  var asButton = _a.asButton, borderRadius = _a.borderRadius, children = _a.children, hrefPath = _a.hrefPath, icon = _a.icon, _b = _a.inverted, inverted = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, noWrap = _a.noWrap, onClick = _a.onClick, _c = _a.size, size = _c === void 0 ? TextTypes.TextSize.REGULAR : _c, _d = _a.target, target = _d === void 0 ? '_self' : _d, tabIndex = _a.tabIndex, _e = _a.variant, variant = _e === void 0 ? ELinkVariant.PRIMARY : _e, props = __rest(_a, ["asButton", "borderRadius", "children", "hrefPath", "icon", "inverted", "isDisabled", "noWrap", "onClick", "size", "target", "tabIndex", "variant"]);
24
24
  return asButton ? (React.createElement(LinkAsButton, __assign({ borderRadius: borderRadius, disabled: isDisabled, icon: icon, inverted: inverted, isDisabled: isDisabled, noWrap: noWrap, onClick: onClick, size: size, variant: variant }, props),
25
- React.createElement(LinkText, { size: size }, children),
25
+ React.createElement(BodyText, { size: size }, children),
26
26
  icon && React.createElement(IconWrapper, null, icon))) : (React.createElement(BaseLink, __assign({ borderRadius: borderRadius, href: hrefPath, isDisabled: isDisabled, icon: icon, inverted: inverted, noWrap: noWrap, onClick: onClick, size: size, tabIndex: tabIndex, target: target, variant: variant }, props),
27
- React.createElement(LinkText, { size: size }, children),
27
+ React.createElement(BodyText, { size: size }, children),
28
28
  icon && React.createElement(IconWrapper, null, icon)));
29
29
  }
30
30
 
package/build/es/components/src/components/ProductHeader/ProductHeader.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { BodyText, TextTypes, H3, H1 } from '@citygross/typography';
3
2
  import { theme } from '@citygross/design-tokens';
3
+ import { BodyText, TextTypes, H3, H1 } from '@citygross/typography';
4
4
  import { Container } from './ProductHeader.styles.js';
5
5
 
6
6
  var EProductHeader;
@@ -10,7 +10,7 @@ var EProductHeader;
10
10
  EProductHeader["LIST_ITEM"] = "listItem";
11
11
  })(EProductHeader || (EProductHeader = {}));
12
12
  var ProductHeader = function (_a) {
13
- var _b, _c, _d, _e, _f, _g;
13
+ var _b, _c, _d, _e, _f;
14
14
  var location = _a.location, subtitle = _a.subtitle, title = _a.title;
15
15
  switch (location) {
16
16
  case EProductHeader.DETAIL_PAGE:
@@ -20,11 +20,11 @@ var ProductHeader = function (_a) {
20
20
  case EProductHeader.CARD:
21
21
  return (React.createElement(Container, null,
22
22
  React.createElement(H3, { color: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, title),
23
- React.createElement(BodyText, { color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, size: TextTypes.TextSize.EXTRASMALL }, subtitle)));
23
+ React.createElement(BodyText, { size: TextTypes.TextSize.EXTRASMALL }, subtitle)));
24
24
  case EProductHeader.LIST_ITEM:
25
25
  return (React.createElement(Container, null,
26
- React.createElement(BodyText, { color: (_f = theme.palette) === null || _f === void 0 ? void 0 : _f.darkest, fontWeight: "medium", size: TextTypes.TextSize.REGULAR }, title),
27
- React.createElement(BodyText, { color: (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.darkest, size: TextTypes.TextSize.EXTRASMALL }, subtitle)));
26
+ React.createElement(BodyText, { color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, fontWeight: "medium", size: TextTypes.TextSize.REGULAR }, title),
27
+ React.createElement(BodyText, { color: (_f = theme.palette) === null || _f === void 0 ? void 0 : _f.darkest, size: TextTypes.TextSize.EXTRASMALL }, subtitle)));
28
28
  default:
29
29
  return null;
30
30
  }
package/build/es/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
- import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioRightWrapper, DisableText } from './RadioListItem.styles.js';
2
+ import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, LabelContentWrapper, StyledH3, RadioRightWrapper } from './RadioListItem.styles.js';
3
3
 
4
4
  function RadioListItem(_a) {
5
- var onClick = _a.onClick, selected = _a.selected, defaultDisabledString = _a.defaultDisabledString, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
5
+ var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
6
6
  return (React.createElement(BaseRadioListItemContainer, { tabIndex: 0, role: 'checkbox', transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
7
7
  if (event.key === 'Enter' && !isDisabled) {
8
8
  onClick(value);
@@ -10,10 +10,10 @@ function RadioListItem(_a) {
10
10
  } },
11
11
  React.createElement(RadioFlex, { wrapMobile: wrapMobile },
12
12
  React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
13
- React.createElement("div", null,
13
+ React.createElement(LabelContentWrapper, null,
14
14
  React.createElement(StyledH3, { isDisabled: isDisabled }, label),
15
15
  additionalInfo && additionalInfo)),
16
- React.createElement(RadioRightWrapper, null, isDisabled ? (React.createElement(DisableText, null, disabledText || defaultDisabledString)) : (children)))));
16
+ !isDisabled && (React.createElement(RadioRightWrapper, null, children)))));
17
17
  }
18
18
 
19
19
  export { RadioListItem };
package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js CHANGED
@@ -27,9 +27,12 @@ var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_
27
27
  "background: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter));
28
28
  });
29
29
  var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
30
- var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
30
+ var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
31
+ var _a;
32
+ return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark, ";\n text-decoration: line-through;\n ");
33
+ });
31
34
  var RadioRightWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\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; });
32
- var DisableText = styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\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) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
35
+ styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\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) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
33
36
  return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
34
37
  "\n text-align: left;\n \n";
35
38
  }, 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; });
@@ -39,7 +42,8 @@ var RadioFlex = styled.div(templateObject_6 || (templateObject_6 = __makeTemplat
39
42
  "\n flex-wrap: wrap;\n @media (min-width: ".concat((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs, "px) {\n flex-wrap: nowrap;\n }\n ");
40
43
  });
41
44
  styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
42
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
45
+ var LabelContentWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
46
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
43
47
 
44
- export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, DisableText, RadioFlex, RadioRightWrapper, StyledH3 };
48
+ export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, LabelContentWrapper, RadioFlex, RadioRightWrapper, StyledH3 };
45
49
  //# 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/build/es/components/src/components/WarningLabel/WarningLabel.js CHANGED
@@ -1,117 +1,12 @@
1
1
  import React from 'react';
2
- import '@citygross/typography';
3
- import '../AddressBlock/AddressBlock.styles.js';
4
- import '@citygross/design-tokens';
5
- import '@citygross/icons';
6
- import '../Accordion/Accordion.styles.js';
7
- import '../AlertBox/AlertBox.js';
8
- import '../BackButton/BackButton.styles.js';
9
- import '../BackgroundImage/BackgroundImage.styles.js';
10
- import '../Badge/Badge.styles.js';
11
- import '../../../../_virtual/_tslib.js';
12
- import '../BoxArrow/BoxArrow.styles.js';
13
- import '../Box/Box.styles.js';
14
- import '../Button/Button.js';
15
- import '../Button/Button.styles.js';
16
- import '../Button/NavButton.js';
17
- import '../CartCard/CartCard.styles.js';
18
- import '../CgButton/CgButton.js';
19
- import '../CgButton/CgButton.types.js';
20
- import '../CartCardLabel/CartCardLabel.styles.js';
21
- import '@citygross/utils';
22
- import 'react-loading-skeleton';
23
- import '../CartItemSummary/CartItemSummary.styles.js';
24
- import '../CartSubTotal/CartSubTotal.js';
25
- import '../ToolTipDialog/ToolTipDialog.styles.js';
26
- import '../CartSummary/CartSummary.styles.js';
27
- import '../../../../design-tokens/build/index.js';
28
- import '../CgButton/ButtonAsLink/ButtonAsLink.styles.js';
29
- import '../CgButton/CgButton.styles.js';
30
- import '../Chips/Chip.styles.js';
31
- import '../Spinner/Spinner.styles.js';
32
- import '../Collapsable/Collapsable.styles.js';
33
- import '../CouponCode/CouponCode.js';
34
- import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
35
- import '../DateBox/DateBox.styles.js';
36
- import '../DeliverySlotItem/DeliverySlotItem.styles.js';
37
- import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
38
- import '../Divider/Divider.styles.js';
39
- import '../DotIndicator/DotIndicator.styles.js';
40
- import '../Fieldset/Fieldset.styles.js';
41
- import '../Flex/Flex.styles.js';
42
- import '../Form/Form.styles.js';
43
- import '../FormControl/FormControl.js';
44
- import '../ScreenReader/ScreenReader.styles.js';
45
- import '../FormElements/FormElement.types.js';
46
- import '../FormElements/Checkbox/Checkbox.styles.js';
47
- import '../FormElements/FormElement.styles.js';
48
- import '../FormElements/Input/Input.js';
49
- import '../FormElements/InputOld/InputOld.styles.js';
50
- import '../FormElements/Radio/Radio.styles.js';
51
- import '../FormElements/Select/Select.styles.js';
52
- import '../FormElements/Switch/Switch.styles.js';
53
- import '../FormElements/TextArea/TextArea.styles.js';
54
- import '../FormGroup/FormGroup.styles.js';
55
- import '../GridContainer/GridContainer.styles.js';
56
- import '../Logo/Logo.styles.js';
57
- import '../Header/Header.styles.js';
58
- import '../HeaderLink/HeaderLink.styles.js';
59
- import '../HighlightBox/HighlightBox.styles.js';
60
- import '../IconText/IconText.styles.js';
61
- import '../IconToolTip/IconToolTip.styles.js';
62
- import '../Spacer/Spacer.styles.js';
63
- import '../InfoTextBlock/InfoTextBlock.styles.js';
64
- import '../LayoutBox/LayoutBox.styles.js';
65
- import '../Links/Link.js';
66
- import '../ListItem/ListItem.js';
67
- import '../ListItemWithRadio/ListItemWithRadio.styles.js';
68
- import '../MaxHeightText/styles.js';
69
- import '../Menu/Menu.styles.js';
70
- import '../MenuListItem/MenuListItem.styles.js';
71
- import '../MenuListDropdown/MenuListDropdown.styles.js';
72
- import '../MobileTable/MobileTable.styles.js';
73
- import '../Modal/Modal.js';
74
- import '../NavMainLink/NavMainLink.styled.js';
75
- import '../Pagination/Pagination.styles.js';
76
- import '../Pill/Pill.styles.js';
77
- import '../PriceTag/PriceTag.types.js';
78
- import '../PriceStripe/PriceStripe.styles.js';
79
- import '../PriceTag/PriceTag.styles.js';
80
- import '../ProductHeader/ProductHeader.js';
81
- import '../ProgressBar/ProgressBar.styled.js';
82
- import '../QuantitySelector/QuantitySelector.styles.js';
83
- import '../QuantitySelector/QuantitySelector.types.js';
84
- import '../RadioBox/RadioBoxItem.styles.js';
85
- import '../RadioBox/RadioBoxList.styles.js';
86
- import '../RadioGroup/RadioGroup.styles.js';
87
- import '../RadioListItem/RadioListItem.styles.js';
88
- import '../RippleContainer/RippleContainer.styles.js';
89
- import '../SearchListItem/SearchListItem.styles.js';
90
- import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
91
- import '../SelectButton/SelectButton.styles.js';
92
- import '../SkipTo/SkipTo.styles.js';
93
- import '../SideModal/SideModal.js';
94
- import '../SlideInOutContainer/SlideInOutContainer.styles.js';
95
- import '../Slider/Slider.styles.js';
96
- import 'react-slick';
97
- import '../Stepper/Stepper.styles.js';
98
- import { ToolTip } from '../ToolTip/ToolTip.js';
99
- import '../StepperMobile/StepperMobile.styles.js';
100
- import '../Table/Table.styles.js';
101
- import '../Tag/Tag.styles.js';
102
- import '../Timeline/Timeline.styles.js';
103
- import '../UnorderedList/UnorderedList.styles.js';
104
- import { WarningIndicator } from './WarningLabel.styles.js';
105
- import '../ZipCodeInput/ZipCodeInput.styles.js';
106
- import '../../containers/PageContainer/PageContainer.styles.js';
107
- import '../../../../utils/build/index.js';
108
- import '../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js';
2
+ import { WarningIndicator, IconWrapper, BodyTextStyled } from './WarningLabel.styles.js';
3
+ import { TextTypes } from '@citygross/typography';
109
4
 
110
5
  function WarningLabel(_a) {
111
- var children = _a.children, background = _a.background, toolTip = _a.toolTip;
112
- return (React.createElement(WarningIndicator, { background: background, toolTip: toolTip },
113
- toolTip && React.createElement(ToolTip, null, toolTip),
114
- children));
6
+ var text = _a.text, background = _a.background, icon = _a.icon;
7
+ return (React.createElement(WarningIndicator, { background: background },
8
+ icon && (React.createElement(IconWrapper, null, icon)),
9
+ React.createElement(BodyTextStyled, { size: TextTypes.TextSize.TINY }, text)));
115
10
  }
116
11
 
117
12
  export { WarningLabel };
package/build/es/components/src/components/WarningLabel/WarningLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
package/build/es/components/src/components/WarningLabel/WarningLabel.styles.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
+ import { BodyText } from '@citygross/typography';
3
4
 
4
- var WarningIndicator = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n position: relative;\n ", ";\n"], ["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n position: relative;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) {
5
- return props.toolTip &&
6
- "\n > {\n &:first-child {\n display: none;\n }\n }\n\n &:hover {\n > {\n &:first-child {\n display: block;\n }\n }\n }\n ";
7
- });
8
- var templateObject_1;
5
+ var WarningIndicator = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n width: fit-content;\n"], ["\n padding: ", "px\n ", "px;\n background-color: ", ";\n border-radius: ", "px;\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n width: fit-content;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
6
+ var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"])));
7
+ var BodyTextStyled = styled(BodyText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
8
+ var templateObject_1, templateObject_2, templateObject_3;
9
9
 
10
- export { WarningIndicator };
10
+ export { BodyTextStyled, IconWrapper, WarningIndicator };
11
11
  //# sourceMappingURL=WarningLabel.styles.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.13.19",
3
+ "version": "0.14.1",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -67,7 +67,7 @@
67
67
  "@citygross/design-tokens": "^0.2.80",
68
68
  "@citygross/icons": "^0.3.2",
69
69
  "@citygross/react-use-bg-wizard": "^0.0.8",
70
- "@citygross/typography": "^0.0.116",
70
+ "@citygross/typography": "^0.0.117",
71
71
  "@citygross/utils": "^0.0.44",
72
72
  "framer-motion": "^4.1.17",
73
73
  "moment": "^2.29.1",
@@ -75,5 +75,5 @@
75
75
  "react-slick": "^0.30.1",
76
76
  "slick-carousel": "^1.8.1"
77
77
  },
78
- "gitHead": "90b890a0fd785bd46de3bdbb15523d6f7d782c4f"
78
+ "gitHead": "9cd386e7e3379dd334507dc20128b9aa39c6ad0e"
79
79
  }