@citygross/components 0.14.4 → 0.14.6

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 (14) hide show
  1. package/build/@types/components/FormElements/Checkbox/Checkbox.d.ts +2 -1
  2. package/build/@types/components/FormElements/Checkbox/Checkbox.styles.d.ts +1 -1
  3. package/build/@types/components/FormElements/FormElement.styles.d.ts +1 -0
  4. package/build/cjs/components/src/components/AddressBlock/AddressBlock.js +2 -2
  5. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js +5 -5
  6. package/build/cjs/components/src/components/FormElements/FormElement.styles.js +4 -1
  7. package/build/cjs/components/src/components/FormElements/FormElement.styles.js.map +1 -1
  8. package/build/cjs/components/src/components/FormElements/Radio/Radio.js +3 -3
  9. package/build/es/components/src/components/AddressBlock/AddressBlock.js +2 -2
  10. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js +6 -6
  11. package/build/es/components/src/components/FormElements/FormElement.styles.js +4 -1
  12. package/build/es/components/src/components/FormElements/FormElement.styles.js.map +1 -1
  13. package/build/es/components/src/components/FormElements/Radio/Radio.js +4 -4
  14. package/package.json +2 -2
package/build/@types/components/FormElements/Checkbox/Checkbox.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  export declare type TCheckbox = {
3
+ alignItems?: 'flex-start' | 'center';
3
4
  hideLabel?: boolean;
4
5
  label: string;
5
6
  } & InputHTMLAttributes<HTMLInputElement>;
6
- export declare const Checkbox: ({ checked, disabled, hideLabel, label, ...props }: TCheckbox) => JSX.Element;
7
+ export declare const Checkbox: ({ alignItems, checked, disabled, hideLabel, label, ...props }: TCheckbox) => JSX.Element;
package/build/@types/components/FormElements/Checkbox/Checkbox.styles.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { TOptionInputContainer } from '../FormElement.types';
1
+ import type { TOptionInputContainer } from '../FormElement.types';
2
2
  export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOptionInputContainer, never>;
3
3
  export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/build/@types/components/FormElements/FormElement.styles.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const Label: import("styled-components").StyledComponent<"label",
4
4
  export declare const sharedFormElementStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<TFormElementStyles, import("styled-components").DefaultTheme>>;
5
5
  export declare const ErrorLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
6
6
  declare type TOptionInputWrapper = {
7
+ alignItems?: 'flex-start' | 'center';
7
8
  disabled?: boolean;
8
9
  focused?: boolean;
9
10
  };
package/build/cjs/components/src/components/AddressBlock/AddressBlock.js CHANGED
@@ -46,10 +46,10 @@ require('../Fieldset/Fieldset.styles.js');
46
46
  require('../Flex/Flex.styles.js');
47
47
  require('../Form/Form.styles.js');
48
48
  require('../FormControl/FormControl.js');
49
- require('../ScreenReader/ScreenReader.styles.js');
50
49
  require('../FormElements/FormElement.types.js');
51
- require('../FormElements/Checkbox/Checkbox.styles.js');
50
+ require('../ScreenReader/ScreenReader.styles.js');
52
51
  require('../FormElements/FormElement.styles.js');
52
+ require('../FormElements/Checkbox/Checkbox.styles.js');
53
53
  require('../FormElements/Input/Input.js');
54
54
  require('../FormElements/InputOld/InputOld.styles.js');
55
55
  require('../FormElements/Radio/Radio.styles.js');
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js CHANGED
@@ -5,25 +5,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var _tslib = require('../../../../../_virtual/_tslib.js');
6
6
  var React = require('react');
7
7
  var icons = require('@citygross/icons');
8
- var ScreenReader = require('../../ScreenReader/ScreenReader.js');
9
8
  var typography = require('@citygross/typography');
10
9
  var formElement = require('../../../helpers/form-element.js');
11
- var Checkbox_styles = require('./Checkbox.styles.js');
10
+ var ScreenReader = require('../../ScreenReader/ScreenReader.js');
12
11
  var FormElement_styles = require('../FormElement.styles.js');
12
+ var Checkbox_styles = require('./Checkbox.styles.js');
13
13
 
14
14
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
15
 
16
16
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
17
 
18
18
  var Checkbox = function (_a) {
19
- var checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = _tslib.__rest(_a, ["checked", "disabled", "hideLabel", "label"]);
19
+ var alignItems = _a.alignItems, checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = _tslib.__rest(_a, ["alignItems", "checked", "disabled", "hideLabel", "label"]);
20
20
  var _b = formElement.getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = _tslib.__rest(_b, ["iconColor", "labelColor"]);
21
- return (React__default["default"].createElement(FormElement_styles.OptionInputWrapper, { as: "label", disabled: disabled },
21
+ return (React__default["default"].createElement(FormElement_styles.OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
22
22
  React__default["default"].createElement(FormElement_styles.HiddenInput, _tslib.__assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
23
23
  React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { attributes: attributes },
24
24
  React__default["default"].createElement(Checkbox_styles.IconContainer, null,
25
25
  React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor }))),
26
- hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(typography.BodyText, { color: labelColor, size: typography.TextTypes.TextSize.SMALL }, label))));
26
+ hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(typography.BodyText, { color: labelColor }, label))));
27
27
  };
28
28
 
29
29
  exports.Checkbox = Checkbox;
package/build/cjs/components/src/components/FormElements/FormElement.styles.js CHANGED
@@ -82,9 +82,12 @@ var ErrorLabel = styled__default["default"].label(templateObject_4 || (templateO
82
82
  var theme = _a.theme;
83
83
  return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2;
84
84
  });
85
- var OptionInputWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n cursor: ", ";\n display: inline-flex;\n align-items: center;\n gap: ", "px;\n padding: ", "px;\n position: relative;\n\n &:has(input:focus-visible) {\n border-radius: ", "px;\n box-shadow: ", ";\n }\n\n > p {\n line-height: 1;\n }\n"], ["\n cursor: ", ";\n display: inline-flex;\n align-items: center;\n gap: ", "px;\n padding: ", "px;\n position: relative;\n\n &:has(input:focus-visible) {\n border-radius: ", "px;\n box-shadow: ", ";\n }\n\n > p {\n line-height: 1;\n }\n"])), function (_a) {
85
+ var OptionInputWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n cursor: ", ";\n display: inline-flex;\n align-items: ", ";\n gap: ", "px;\n padding: ", "px;\n position: relative;\n\n &:has(input:focus-visible) {\n border-radius: ", "px;\n box-shadow: ", ";\n }\n"], ["\n cursor: ", ";\n display: inline-flex;\n align-items: ", ";\n gap: ", "px;\n padding: ", "px;\n position: relative;\n\n &:has(input:focus-visible) {\n border-radius: ", "px;\n box-shadow: ", ";\n }\n"])), function (_a) {
86
86
  var disabled = _a.disabled;
87
87
  return (disabled ? 'not-allowed' : 'pointer');
88
+ }, function (_a) {
89
+ var alignItems = _a.alignItems;
90
+ return alignItems || 'center';
88
91
  }, function (_a) {
89
92
  var _b;
90
93
  var theme = _a.theme;
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/Radio/Radio.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 ScreenReader = require('../../ScreenReader/ScreenReader.js');
8
7
  var typography = require('@citygross/typography');
9
8
  var formElement = require('../../../helpers/form-element.js');
10
- var Radio_styles = require('./Radio.styles.js');
9
+ var ScreenReader = require('../../ScreenReader/ScreenReader.js');
11
10
  var FormElement_styles = require('../FormElement.styles.js');
11
+ var Radio_styles = require('./Radio.styles.js');
12
12
 
13
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
14
 
@@ -21,7 +21,7 @@ var Radio = function (_a) {
21
21
  return (React__default["default"].createElement(FormElement_styles.OptionInputWrapper, { as: "label", disabled: disabled },
22
22
  React__default["default"].createElement(FormElement_styles.HiddenInput, _tslib.__assign({ type: "radio", checked: checked, disabled: disabled }, props)),
23
23
  React__default["default"].createElement(Radio_styles.RadioContainer, { attributes: attributes, borderSize: borderSize, checked: checked, disabled: disabled }),
24
- showLabel ? (React__default["default"].createElement(typography.BodyText, { color: labelColor, size: typography.TextTypes.TextSize.SMALL }, label)) : (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label }))));
24
+ showLabel ? (React__default["default"].createElement(typography.BodyText, { color: labelColor }, label)) : (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label }))));
25
25
  };
26
26
 
27
27
  exports.Radio = Radio;
package/build/es/components/src/components/AddressBlock/AddressBlock.js CHANGED
@@ -42,10 +42,10 @@ import '../Fieldset/Fieldset.styles.js';
42
42
  import '../Flex/Flex.styles.js';
43
43
  import '../Form/Form.styles.js';
44
44
  import '../FormControl/FormControl.js';
45
- import '../ScreenReader/ScreenReader.styles.js';
46
45
  import '../FormElements/FormElement.types.js';
47
- import '../FormElements/Checkbox/Checkbox.styles.js';
46
+ import '../ScreenReader/ScreenReader.styles.js';
48
47
  import '../FormElements/FormElement.styles.js';
48
+ import '../FormElements/Checkbox/Checkbox.styles.js';
49
49
  import '../FormElements/Input/Input.js';
50
50
  import '../FormElements/InputOld/InputOld.styles.js';
51
51
  import '../FormElements/Radio/Radio.styles.js';
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js CHANGED
@@ -1,21 +1,21 @@
1
1
  import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
3
  import { Icons } from '@citygross/icons';
4
- import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
5
- import { BodyText, TextTypes } from '@citygross/typography';
4
+ import { BodyText } from '@citygross/typography';
6
5
  import { getColorAttributes } from '../../../helpers/form-element.js';
7
- import { CheckboxContainer, IconContainer } from './Checkbox.styles.js';
6
+ import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
8
7
  import { OptionInputWrapper, HiddenInput } from '../FormElement.styles.js';
8
+ import { CheckboxContainer, IconContainer } from './Checkbox.styles.js';
9
9
 
10
10
  var Checkbox = function (_a) {
11
- var checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = __rest(_a, ["checked", "disabled", "hideLabel", "label"]);
11
+ var alignItems = _a.alignItems, checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = __rest(_a, ["alignItems", "checked", "disabled", "hideLabel", "label"]);
12
12
  var _b = getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = __rest(_b, ["iconColor", "labelColor"]);
13
- return (React.createElement(OptionInputWrapper, { as: "label", disabled: disabled },
13
+ return (React.createElement(OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
14
14
  React.createElement(HiddenInput, __assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
15
15
  React.createElement(CheckboxContainer, { attributes: attributes },
16
16
  React.createElement(IconContainer, null,
17
17
  React.createElement(Icons.CheckMark, { color: iconColor }))),
18
- hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(BodyText, { color: labelColor, size: TextTypes.TextSize.SMALL }, label))));
18
+ hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(BodyText, { color: labelColor }, label))));
19
19
  };
20
20
 
21
21
  export { Checkbox };
package/build/es/components/src/components/FormElements/FormElement.styles.js CHANGED
@@ -74,9 +74,12 @@ var ErrorLabel = styled.label(templateObject_4 || (templateObject_4 = __makeTemp
74
74
  var theme = _a.theme;
75
75
  return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2;
76
76
  });
77
- var OptionInputWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n cursor: ", ";\n display: inline-flex;\n align-items: center;\n gap: ", "px;\n padding: ", "px;\n position: relative;\n\n &:has(input:focus-visible) {\n border-radius: ", "px;\n box-shadow: ", ";\n }\n\n > p {\n line-height: 1;\n }\n"], ["\n cursor: ", ";\n display: inline-flex;\n align-items: center;\n gap: ", "px;\n padding: ", "px;\n position: relative;\n\n &:has(input:focus-visible) {\n border-radius: ", "px;\n box-shadow: ", ";\n }\n\n > p {\n line-height: 1;\n }\n"])), function (_a) {
77
+ var OptionInputWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n cursor: ", ";\n display: inline-flex;\n align-items: ", ";\n gap: ", "px;\n padding: ", "px;\n position: relative;\n\n &:has(input:focus-visible) {\n border-radius: ", "px;\n box-shadow: ", ";\n }\n"], ["\n cursor: ", ";\n display: inline-flex;\n align-items: ", ";\n gap: ", "px;\n padding: ", "px;\n position: relative;\n\n &:has(input:focus-visible) {\n border-radius: ", "px;\n box-shadow: ", ";\n }\n"])), function (_a) {
78
78
  var disabled = _a.disabled;
79
79
  return (disabled ? 'not-allowed' : 'pointer');
80
+ }, function (_a) {
81
+ var alignItems = _a.alignItems;
82
+ return alignItems || 'center';
80
83
  }, function (_a) {
81
84
  var _b;
82
85
  var theme = _a.theme;
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/Radio/Radio.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
- import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
4
- import { BodyText, TextTypes } from '@citygross/typography';
3
+ import { BodyText } from '@citygross/typography';
5
4
  import { getColorAttributes, getBorderSize } from '../../../helpers/form-element.js';
6
- import { RadioContainer } from './Radio.styles.js';
5
+ import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
7
6
  import { OptionInputWrapper, HiddenInput } from '../FormElement.styles.js';
7
+ import { RadioContainer } from './Radio.styles.js';
8
8
 
9
9
  var Radio = function (_a) {
10
10
  var checked = _a.checked, disabled = _a.disabled, label = _a.label, showLabel = _a.showLabel, props = __rest(_a, ["checked", "disabled", "label", "showLabel"]);
@@ -13,7 +13,7 @@ var Radio = function (_a) {
13
13
  return (React.createElement(OptionInputWrapper, { as: "label", disabled: disabled },
14
14
  React.createElement(HiddenInput, __assign({ type: "radio", checked: checked, disabled: disabled }, props)),
15
15
  React.createElement(RadioContainer, { attributes: attributes, borderSize: borderSize, checked: checked, disabled: disabled }),
16
- showLabel ? (React.createElement(BodyText, { color: labelColor, size: TextTypes.TextSize.SMALL }, label)) : (React.createElement(ScreenReader, { string: label }))));
16
+ showLabel ? (React.createElement(BodyText, { color: labelColor }, label)) : (React.createElement(ScreenReader, { string: label }))));
17
17
  };
18
18
 
19
19
  export { Radio };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.14.4",
3
+ "version": "0.14.6",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
75
75
  "react-slick": "^0.30.1",
76
76
  "slick-carousel": "^1.8.1"
77
77
  },
78
- "gitHead": "c137f7346af0339652849d130c3896f4d466e315"
78
+ "gitHead": "8aedc3a7880afa6eafa4c2e39a3f4fb2610fdfbd"
79
79
  }