@citygross/components 0.8.162 → 0.8.164

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 (23) hide show
  1. package/build/@types/components/CgButton/ButtonAsLink/ButtonAsLink.d.ts +2 -1
  2. package/build/@types/components/CgButton/CgButton.styles.d.ts +3 -0
  3. package/build/@types/components/CgButton/CgButton.types.d.ts +2 -0
  4. package/build/@types/components/FormElements/FormElement.styles.d.ts +1 -0
  5. package/build/cjs/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.js +2 -2
  6. package/build/cjs/components/src/components/CgButton/CgButton.js +6 -3
  7. package/build/cjs/components/src/components/CgButton/CgButton.js.map +1 -1
  8. package/build/cjs/components/src/components/CgButton/CgButton.styles.js +38 -17
  9. package/build/cjs/components/src/components/CgButton/CgButton.styles.js.map +1 -1
  10. package/build/cjs/components/src/components/FormElements/FormElement.styles.js +5 -2
  11. package/build/cjs/components/src/components/FormElements/FormElement.styles.js.map +1 -1
  12. package/build/cjs/components/src/components/FormElements/Input/Input.js +2 -3
  13. package/build/cjs/components/src/components/FormElements/Input/Input.js.map +1 -1
  14. package/build/es/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.js +2 -2
  15. package/build/es/components/src/components/CgButton/CgButton.js +7 -4
  16. package/build/es/components/src/components/CgButton/CgButton.js.map +1 -1
  17. package/build/es/components/src/components/CgButton/CgButton.styles.js +31 -12
  18. package/build/es/components/src/components/CgButton/CgButton.styles.js.map +1 -1
  19. package/build/es/components/src/components/FormElements/FormElement.styles.js +5 -3
  20. package/build/es/components/src/components/FormElements/FormElement.styles.js.map +1 -1
  21. package/build/es/components/src/components/FormElements/Input/Input.js +4 -5
  22. package/build/es/components/src/components/FormElements/Input/Input.js.map +1 -1
  23. package/package.json +2 -2
package/build/@types/components/CgButton/ButtonAsLink/ButtonAsLink.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  export declare type TButtonAsLink = {
3
3
  children: React.ReactNode;
4
+ type?: 'button' | 'submit' | 'reset';
4
5
  } & React.ButtonHTMLAttributes<HTMLButtonElement>;
5
- export declare const ButtonAsLink: ({ children, ...props }: TButtonAsLink) => JSX.Element;
6
+ export declare const ButtonAsLink: ({ children, type, ...props }: TButtonAsLink) => JSX.Element;
package/build/@types/components/CgButton/CgButton.styles.d.ts CHANGED
@@ -1,7 +1,10 @@
1
+ import { TChildrenContainer } from './CgButton.types';
1
2
  export declare const ButtonStyle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & {
2
3
  sizeAttributes: import("./CgButton.types").TButtonSizeAttributes;
3
4
  variantAttributes: import("./CgButton.types").TButtonVariantAttributes;
4
5
  }, never>;
6
+ export declare const ChildrenContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TChildrenContainer, never>;
7
+ export declare const SpinnerContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
5
8
  export declare const DivAsButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & {
6
9
  sizeAttributes: import("./CgButton.types").TButtonSizeAttributes;
7
10
  variantAttributes: import("./CgButton.types").TButtonVariantAttributes;
package/build/@types/components/CgButton/CgButton.types.d.ts CHANGED
@@ -19,6 +19,7 @@ export declare type TCgButtonRoot = {
19
19
  loading?: boolean;
20
20
  rounded?: boolean;
21
21
  size?: EButtonSize;
22
+ type?: 'button' | 'submit' | 'reset';
22
23
  variant?: EButtonVariant;
23
24
  };
24
25
  export declare type TCgButton = TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -41,3 +42,4 @@ export declare type TButtonVariantAttributes = {
41
42
  border?: boolean;
42
43
  fontColor?: string;
43
44
  };
45
+ export declare type TChildrenContainer = Pick<TCgButtonRoot, 'loading'>;
package/build/@types/components/FormElements/FormElement.styles.d.ts CHANGED
@@ -9,4 +9,5 @@ declare type TOptionInputWrapper = {
9
9
  };
10
10
  export declare const OptionInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOptionInputWrapper, never>;
11
11
  export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
12
+ export declare const HiddenLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
12
13
  export {};
package/build/cjs/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.js CHANGED
@@ -11,8 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
 
13
13
  var ButtonAsLink = function (_a) {
14
- var children = _a.children, props = _tslib.__rest(_a, ["children"]);
15
- return (React__default["default"].createElement(ButtonAsLink_styles.ButtonAsLink, _tslib.__assign({}, props), children));
14
+ var children = _a.children, _b = _a.type, type = _b === void 0 ? 'button' : _b, props = _tslib.__rest(_a, ["children", "type"]);
15
+ return (React__default["default"].createElement(ButtonAsLink_styles.ButtonAsLink, _tslib.__assign({ type: type }, props), children));
16
16
  };
17
17
 
18
18
  exports.ButtonAsLink = ButtonAsLink;
package/build/cjs/components/src/components/CgButton/CgButton.js CHANGED
@@ -16,9 +16,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
16
 
17
17
  var CgButton = React.forwardRef(function (_a, ref) {
18
18
  var _b;
19
- var boxShadow = _a.boxShadow, children = _a.children, circle = _a.circle, fullWidth = _a.fullWidth, loading = _a.loading, rounded = _a.rounded, _c = _a.size, size = _c === void 0 ? CgButton_types.EButtonSize.medium : _c, _d = _a.variant, variant = _d === void 0 ? CgButton_types.EButtonVariant.primary : _d, props = _tslib.__rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "variant"]);
20
- var _e = button.getButtonAttributes(size, variant), sizeAttributes = _e.sizeAttributes, variantAttributes = _e.variantAttributes;
21
- return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, variantAttributes: variantAttributes }, props), loading ? (React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })) : (children)));
19
+ var boxShadow = _a.boxShadow, children = _a.children, circle = _a.circle, fullWidth = _a.fullWidth, loading = _a.loading, rounded = _a.rounded, _c = _a.size, size = _c === void 0 ? CgButton_types.EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? CgButton_types.EButtonVariant.primary : _e, props = _tslib.__rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "type", "variant"]);
20
+ var _f = button.getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
21
+ return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
22
+ React__default["default"].createElement(CgButton_styles.ChildrenContainer, { loading: loading }, children),
23
+ loading && (React__default["default"].createElement(CgButton_styles.SpinnerContainer, null,
24
+ React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })))));
22
25
  });
23
26
  CgButton.displayName = 'CgButton';
24
27
 
package/build/cjs/components/src/components/CgButton/CgButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/CgButton/CgButton.styles.js CHANGED
@@ -6,34 +6,32 @@ var _tslib = require('../../../../_virtual/_tslib.js');
6
6
  var styled = require('styled-components');
7
7
  var global_styles = require('../../shared/global.styles.js');
8
8
  var CgButton_types = require('./CgButton.types.js');
9
- var designTokens = require('@citygross/design-tokens');
10
9
 
11
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
11
 
13
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
13
 
15
- var _a, _b, _c, _d, _e;
16
14
  var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"], ["\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
17
15
  var _b;
18
- var variantAttributes = _a.variantAttributes;
16
+ var theme = _a.theme, variantAttributes = _a.variantAttributes;
19
17
  return variantAttributes.border
20
- ? "1px solid ".concat((_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder)
18
+ ? "1px solid ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder)
21
19
  : 'none';
22
20
  }, function (_a) {
23
21
  var _b, _c, _d;
24
- var circle = _a.circle, rounded = _a.rounded;
22
+ var circle = _a.circle, rounded = _a.rounded, theme = _a.theme;
25
23
  return circle
26
- ? (_b = designTokens.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.circle
24
+ ? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.circle
27
25
  : rounded
28
- ? "".concat((_c = designTokens.theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.rounded, "px")
29
- : "".concat((_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.xxs, "px");
26
+ ? "".concat((_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.rounded, "px")
27
+ : "".concat((_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.xxs, "px");
30
28
  }, function (_a) {
31
29
  var _b, _c;
32
- var boxShadow = _a.boxShadow, size = _a.size;
30
+ var boxShadow = _a.boxShadow, size = _a.size, theme = _a.theme;
33
31
  return boxShadow
34
32
  ? size === CgButton_types.EButtonSize.small
35
- ? (_b = designTokens.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
36
- : (_c = designTokens.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
33
+ ? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
34
+ : (_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
37
35
  : 'none';
38
36
  }, function (_a) {
39
37
  var variantAttributes = _a.variantAttributes;
@@ -41,10 +39,22 @@ var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tsl
41
39
  }, function (_a) {
42
40
  var variantAttributes = _a.variantAttributes;
43
41
  return variantAttributes.fontColor;
44
- }, (_a = designTokens.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, (_b = designTokens.theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary, function (_a) {
42
+ }, function (_a) {
43
+ var _b;
44
+ var theme = _a.theme;
45
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
46
+ }, function (_a) {
47
+ var _b;
48
+ var theme = _a.theme;
49
+ return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary;
50
+ }, function (_a) {
45
51
  var sizeAttributes = _a.sizeAttributes;
46
52
  return sizeAttributes.fontSize;
47
- }, (_d = (_c = designTokens.theme.typography) === null || _c === void 0 ? void 0 : _c.weight) === null || _d === void 0 ? void 0 : _d.medium, function (_a) {
53
+ }, function (_a) {
54
+ var _b, _c;
55
+ var theme = _a.theme;
56
+ return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight) === null || _c === void 0 ? void 0 : _c.medium;
57
+ }, function (_a) {
48
58
  var circle = _a.circle, sizeAttributes = _a.sizeAttributes;
49
59
  return !circle ? "".concat(sizeAttributes.height, "px") : 'max-content';
50
60
  }, function (_a) {
@@ -62,13 +72,24 @@ var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tsl
62
72
  var variantAttributes = _a.variantAttributes;
63
73
  return variantAttributes.backgroundActive;
64
74
  }, global_styles.focusVisible);
65
- var ButtonStyle = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"])), sharedButtonStyles, function (_a) {
75
+ var ButtonStyle = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n cursor: pointer;\n position: relative;\n\n svg {\n display: block;\n }\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n ", "\n cursor: pointer;\n position: relative;\n\n svg {\n display: block;\n }\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"])), sharedButtonStyles, function (_a) {
66
76
  var variantAttributes = _a.variantAttributes;
67
77
  return variantAttributes.backgroundDisabled;
68
- }, (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.placeholder);
69
- var DivAsButton = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n ", "\n cursor: pointer;\n"], ["\n ", "\n cursor: pointer;\n"])), sharedButtonStyles);
70
- var templateObject_1, templateObject_2, templateObject_3;
78
+ }, function (_a) {
79
+ var _b;
80
+ var theme = _a.theme;
81
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder;
82
+ });
83
+ var ChildrenContainer = styled__default["default"].span(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n opacity: ", ";\n"], ["\n opacity: ", ";\n"])), function (_a) {
84
+ var loading = _a.loading;
85
+ return (loading ? 0 : 1);
86
+ });
87
+ var SpinnerContainer = styled__default["default"].span(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n position: absolute;\n"], ["\n position: absolute;\n"])));
88
+ var DivAsButton = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n ", "\n cursor: pointer;\n"], ["\n ", "\n cursor: pointer;\n"])), sharedButtonStyles);
89
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
71
90
 
72
91
  exports.ButtonStyle = ButtonStyle;
92
+ exports.ChildrenContainer = ChildrenContainer;
73
93
  exports.DivAsButton = DivAsButton;
94
+ exports.SpinnerContainer = SpinnerContainer;
74
95
  //# sourceMappingURL=CgButton.styles.js.map
package/build/cjs/components/src/components/CgButton/CgButton.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/FormElements/FormElement.styles.js CHANGED
@@ -102,11 +102,14 @@ var OptionInputWrapper = styled__default["default"].div(templateObject_5 || (tem
102
102
  var theme = _a.theme;
103
103
  return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.focusVisible;
104
104
  });
105
- var HiddenInput = styled__default["default"].input(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"], ["\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"])));
106
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
105
+ var hiddenStyles = styled.css(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"], ["\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"])));
106
+ var HiddenInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), hiddenStyles);
107
+ var HiddenLabel = styled__default["default"].label(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), hiddenStyles);
108
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
107
109
 
108
110
  exports.ErrorLabel = ErrorLabel;
109
111
  exports.HiddenInput = HiddenInput;
112
+ exports.HiddenLabel = HiddenLabel;
110
113
  exports.Label = Label;
111
114
  exports.OptionInputWrapper = OptionInputWrapper;
112
115
  exports.Wrapper = Wrapper;
package/build/cjs/components/src/components/FormElements/FormElement.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/FormElements/Input/Input.js CHANGED
@@ -7,7 +7,6 @@ var React = require('react');
7
7
  var designTokens = require('@citygross/design-tokens');
8
8
  var typography = require('@citygross/typography');
9
9
  var formElement = require('../../../helpers/form-element.js');
10
- var ScreenReader = require('../../ScreenReader/ScreenReader.js');
11
10
  var FormElement_styles = require('../FormElement.styles.js');
12
11
  var Input_styles = require('./Input.styles.js');
13
12
  var FormElement_types = require('../FormElement.types.js');
@@ -23,9 +22,9 @@ var Input = function (_a) {
23
22
  var sizeAttributes = formElement.getSizeAttributes(size);
24
23
  var errorId = "".concat(id, "-error");
25
24
  return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
26
- React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id }, hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(React.Fragment, null,
25
+ hideLabel ? (React__default["default"].createElement(FormElement_styles.HiddenLabel, { htmlFor: id }, label)) : (React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
27
26
  label,
28
- required ? ' *' : ''))),
27
+ required ? ' *' : '')),
29
28
  React__default["default"].createElement(Input_styles.InputWrapper, null,
30
29
  React__default["default"].createElement(Input_styles.InputContainer, { fullWidth: fullWidth },
31
30
  elementLeft && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, elementLeft)),
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/es/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.js CHANGED
@@ -3,8 +3,8 @@ import React from 'react';
3
3
  import { ButtonAsLink as ButtonAsLink$1 } from './ButtonAsLink.styles.js';
4
4
 
5
5
  var ButtonAsLink = function (_a) {
6
- var children = _a.children, props = __rest(_a, ["children"]);
7
- return (React.createElement(ButtonAsLink$1, __assign({}, props), children));
6
+ var children = _a.children, _b = _a.type, type = _b === void 0 ? 'button' : _b, props = __rest(_a, ["children", "type"]);
7
+ return (React.createElement(ButtonAsLink$1, __assign({ type: type }, props), children));
8
8
  };
9
9
 
10
10
  export { ButtonAsLink };
package/build/es/components/src/components/CgButton/CgButton.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest, __assign } from '../../../../_virtual/_tslib.js';
2
2
  import React, { forwardRef } from 'react';
3
- import { ButtonStyle } from './CgButton.styles.js';
3
+ import { ButtonStyle, ChildrenContainer, SpinnerContainer } from './CgButton.styles.js';
4
4
  import { Spinner } from '../Spinner/Spinner.js';
5
5
  import { EButtonSize, EButtonVariant } from './CgButton.types.js';
6
6
  import { getButtonAttributes } from '../../helpers/button.js';
@@ -8,9 +8,12 @@ import { theme } from '@citygross/design-tokens';
8
8
 
9
9
  var CgButton = forwardRef(function (_a, ref) {
10
10
  var _b;
11
- var boxShadow = _a.boxShadow, children = _a.children, circle = _a.circle, fullWidth = _a.fullWidth, loading = _a.loading, rounded = _a.rounded, _c = _a.size, size = _c === void 0 ? EButtonSize.medium : _c, _d = _a.variant, variant = _d === void 0 ? EButtonVariant.primary : _d, props = __rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "variant"]);
12
- var _e = getButtonAttributes(size, variant), sizeAttributes = _e.sizeAttributes, variantAttributes = _e.variantAttributes;
13
- return (React.createElement(ButtonStyle, __assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, variantAttributes: variantAttributes }, props), loading ? (React.createElement(Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })) : (children)));
11
+ var boxShadow = _a.boxShadow, children = _a.children, circle = _a.circle, fullWidth = _a.fullWidth, loading = _a.loading, rounded = _a.rounded, _c = _a.size, size = _c === void 0 ? EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? EButtonVariant.primary : _e, props = __rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "type", "variant"]);
12
+ var _f = getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
13
+ return (React.createElement(ButtonStyle, __assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
14
+ React.createElement(ChildrenContainer, { loading: loading }, children),
15
+ loading && (React.createElement(SpinnerContainer, null,
16
+ React.createElement(Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })))));
14
17
  });
15
18
  CgButton.displayName = 'CgButton';
16
19
 
package/build/es/components/src/components/CgButton/CgButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/CgButton/CgButton.styles.js CHANGED
@@ -2,18 +2,16 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled, { css } from 'styled-components';
3
3
  import { focusVisible } from '../../shared/global.styles.js';
4
4
  import { EButtonSize } from './CgButton.types.js';
5
- import { theme } from '@citygross/design-tokens';
6
5
 
7
- var _a, _b, _c, _d, _e;
8
6
  var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"], ["\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
9
7
  var _b;
10
- var variantAttributes = _a.variantAttributes;
8
+ var theme = _a.theme, variantAttributes = _a.variantAttributes;
11
9
  return variantAttributes.border
12
10
  ? "1px solid ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder)
13
11
  : 'none';
14
12
  }, function (_a) {
15
13
  var _b, _c, _d;
16
- var circle = _a.circle, rounded = _a.rounded;
14
+ var circle = _a.circle, rounded = _a.rounded, theme = _a.theme;
17
15
  return circle
18
16
  ? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.circle
19
17
  : rounded
@@ -21,7 +19,7 @@ var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTempl
21
19
  : "".concat((_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.xxs, "px");
22
20
  }, function (_a) {
23
21
  var _b, _c;
24
- var boxShadow = _a.boxShadow, size = _a.size;
22
+ var boxShadow = _a.boxShadow, size = _a.size, theme = _a.theme;
25
23
  return boxShadow
26
24
  ? size === EButtonSize.small
27
25
  ? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
@@ -33,10 +31,22 @@ var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTempl
33
31
  }, function (_a) {
34
32
  var variantAttributes = _a.variantAttributes;
35
33
  return variantAttributes.fontColor;
36
- }, (_a = theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary, function (_a) {
34
+ }, function (_a) {
35
+ var _b;
36
+ var theme = _a.theme;
37
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
38
+ }, function (_a) {
39
+ var _b;
40
+ var theme = _a.theme;
41
+ return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary;
42
+ }, function (_a) {
37
43
  var sizeAttributes = _a.sizeAttributes;
38
44
  return sizeAttributes.fontSize;
39
- }, (_d = (_c = theme.typography) === null || _c === void 0 ? void 0 : _c.weight) === null || _d === void 0 ? void 0 : _d.medium, function (_a) {
45
+ }, function (_a) {
46
+ var _b, _c;
47
+ var theme = _a.theme;
48
+ return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight) === null || _c === void 0 ? void 0 : _c.medium;
49
+ }, function (_a) {
40
50
  var circle = _a.circle, sizeAttributes = _a.sizeAttributes;
41
51
  return !circle ? "".concat(sizeAttributes.height, "px") : 'max-content';
42
52
  }, function (_a) {
@@ -54,12 +64,21 @@ var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTempl
54
64
  var variantAttributes = _a.variantAttributes;
55
65
  return variantAttributes.backgroundActive;
56
66
  }, focusVisible);
57
- var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n ", "\n cursor: pointer;\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"])), sharedButtonStyles, function (_a) {
67
+ var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n cursor: pointer;\n position: relative;\n\n svg {\n display: block;\n }\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n ", "\n cursor: pointer;\n position: relative;\n\n svg {\n display: block;\n }\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"])), sharedButtonStyles, function (_a) {
58
68
  var variantAttributes = _a.variantAttributes;
59
69
  return variantAttributes.backgroundDisabled;
60
- }, (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.placeholder);
61
- var DivAsButton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n cursor: pointer;\n"], ["\n ", "\n cursor: pointer;\n"])), sharedButtonStyles);
62
- var templateObject_1, templateObject_2, templateObject_3;
70
+ }, function (_a) {
71
+ var _b;
72
+ var theme = _a.theme;
73
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder;
74
+ });
75
+ var ChildrenContainer = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n opacity: ", ";\n"], ["\n opacity: ", ";\n"])), function (_a) {
76
+ var loading = _a.loading;
77
+ return (loading ? 0 : 1);
78
+ });
79
+ var SpinnerContainer = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n"], ["\n position: absolute;\n"])));
80
+ var DivAsButton = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n cursor: pointer;\n"], ["\n ", "\n cursor: pointer;\n"])), sharedButtonStyles);
81
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
63
82
 
64
- export { ButtonStyle, DivAsButton };
83
+ export { ButtonStyle, ChildrenContainer, DivAsButton, SpinnerContainer };
65
84
  //# sourceMappingURL=CgButton.styles.js.map
package/build/es/components/src/components/CgButton/CgButton.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/FormElement.styles.js CHANGED
@@ -94,8 +94,10 @@ var OptionInputWrapper = styled.div(templateObject_5 || (templateObject_5 = __ma
94
94
  var theme = _a.theme;
95
95
  return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.focusVisible;
96
96
  });
97
- var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"], ["\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"])));
98
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
97
+ var hiddenStyles = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"], ["\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n"])));
98
+ var HiddenInput = styled.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), hiddenStyles);
99
+ var HiddenLabel = styled.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), hiddenStyles);
100
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
99
101
 
100
- export { ErrorLabel, HiddenInput, Label, OptionInputWrapper, Wrapper, sharedFormElementStyles };
102
+ export { ErrorLabel, HiddenInput, HiddenLabel, Label, OptionInputWrapper, Wrapper, sharedFormElementStyles };
101
103
  //# sourceMappingURL=FormElement.styles.js.map
package/build/es/components/src/components/FormElements/FormElement.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/Input/Input.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
2
- import React, { Fragment } from 'react';
2
+ import React from 'react';
3
3
  import { theme } from '@citygross/design-tokens';
4
4
  import { BodyText } from '@citygross/typography';
5
5
  import { getSizeAttributes } from '../../../helpers/form-element.js';
6
- import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
7
- import { Wrapper, Label, ErrorLabel } from '../FormElement.styles.js';
6
+ import { Wrapper, HiddenLabel, Label, ErrorLabel } from '../FormElement.styles.js';
8
7
  import { InputWrapper, InputContainer, AbsoluteContainer, InputElement } from './Input.styles.js';
9
8
  import { EFormElementSize } from '../FormElement.types.js';
10
9
 
@@ -15,9 +14,9 @@ var Input = function (_a) {
15
14
  var sizeAttributes = getSizeAttributes(size);
16
15
  var errorId = "".concat(id, "-error");
17
16
  return (React.createElement(Wrapper, null,
18
- React.createElement(Label, { htmlFor: id }, hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(Fragment, null,
17
+ hideLabel ? (React.createElement(HiddenLabel, { htmlFor: id }, label)) : (React.createElement(Label, { htmlFor: id },
19
18
  label,
20
- required ? ' *' : ''))),
19
+ required ? ' *' : '')),
21
20
  React.createElement(InputWrapper, null,
22
21
  React.createElement(InputContainer, { fullWidth: fullWidth },
23
22
  elementLeft && (React.createElement(AbsoluteContainer, null, elementLeft)),
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.162",
3
+ "version": "0.8.164",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
74
74
  "react-slick": "^0.30.1",
75
75
  "slick-carousel": "^1.8.1"
76
76
  },
77
- "gitHead": "27c5027c1eb2749ccc090d6f8c1fe9619cf9f543"
77
+ "gitHead": "2ceba690548259d29b0271499880d6f8614a8764"
78
78
  }