@citygross/components 0.8.150 → 0.8.152

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 (16) hide show
  1. package/build/@types/components/FormElements/Input/Input.d.ts +3 -3
  2. package/build/cjs/components/src/components/FormElements/FormElement.styles.js +2 -2
  3. package/build/cjs/components/src/components/FormElements/Input/Input.js +8 -13
  4. package/build/cjs/components/src/components/FormElements/Input/Input.js.map +1 -1
  5. package/build/cjs/components/src/components/FormElements/Select/Select.styles.js +5 -1
  6. package/build/cjs/components/src/components/FormElements/Select/Select.styles.js.map +1 -1
  7. package/build/cjs/components/src/components/SideModal/SideModal.js +3 -2
  8. package/build/cjs/components/src/components/SideModal/SideModal.js.map +1 -1
  9. package/build/es/components/src/components/FormElements/FormElement.styles.js +2 -2
  10. package/build/es/components/src/components/FormElements/Input/Input.js +8 -13
  11. package/build/es/components/src/components/FormElements/Input/Input.js.map +1 -1
  12. package/build/es/components/src/components/FormElements/Select/Select.styles.js +5 -1
  13. package/build/es/components/src/components/FormElements/Select/Select.styles.js.map +1 -1
  14. package/build/es/components/src/components/SideModal/SideModal.js +3 -2
  15. package/build/es/components/src/components/SideModal/SideModal.js.map +1 -1
  16. package/package.json +2 -2
package/build/@types/components/FormElements/Input/Input.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
  import { TFormElement } from '../FormElement.types';
3
3
  export declare type TInput = {
4
- clearFunction?: () => void;
4
+ elementLeft?: React.ReactElement;
5
+ elementRight?: React.ReactElement;
5
6
  hideLabel?: boolean;
6
- icon?: React.ReactElement;
7
7
  label: string;
8
8
  paddingLeft?: number;
9
9
  unit?: string;
10
10
  } & TFormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
11
- export declare const Input: ({ clearFunction, hideLabel, icon, error, errorLabel, label, paddingLeft, size, unit, ...props }: TInput) => JSX.Element;
11
+ export declare const Input: ({ elementLeft, elementRight, hideLabel, error, errorLabel, label, paddingLeft, size, unit, ...props }: TInput) => JSX.Element;
package/build/cjs/components/src/components/FormElements/FormElement.styles.js CHANGED
@@ -31,7 +31,7 @@ var Label = styled__default["default"].label(templateObject_2 || (templateObject
31
31
  var theme = _a.theme;
32
32
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
33
33
  });
34
- var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"], ["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
34
+ var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"], ["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
35
35
  var _b, _c;
36
36
  var error = _a.error, theme = _a.theme;
37
37
  return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.placeholder;
@@ -67,7 +67,7 @@ var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 =
67
67
  }, function (_a) {
68
68
  var _b;
69
69
  var theme = _a.theme;
70
- return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
70
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
71
71
  }, function (_a) {
72
72
  var _b;
73
73
  var theme = _a.theme;
package/build/cjs/components/src/components/FormElements/Input/Input.js CHANGED
@@ -4,24 +4,21 @@ 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
+ var typography = require('@citygross/typography');
7
9
  var formElement = require('../../../helpers/form-element.js');
10
+ var ScreenReader = require('../../ScreenReader/ScreenReader.js');
8
11
  var FormElement_styles = require('../FormElement.styles.js');
9
12
  var Input_styles = require('./Input.styles.js');
10
13
  var FormElement_types = require('../FormElement.types.js');
11
- var designTokens = require('@citygross/design-tokens');
12
- var icons = require('@citygross/icons');
13
- var typography = require('@citygross/typography');
14
- var CgButton = require('../../CgButton/CgButton.js');
15
- var ScreenReader = require('../../ScreenReader/ScreenReader.js');
16
- var CgButton_types = require('../../CgButton/CgButton.types.js');
17
14
 
18
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
16
 
20
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
18
 
22
19
  var Input = function (_a) {
23
- var _b, _c, _d;
24
- var clearFunction = _a.clearFunction, hideLabel = _a.hideLabel, icon = _a.icon, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _e = _a.size, size = _e === void 0 ? FormElement_types.EFormElementSize.large : _e, unit = _a.unit, props = _tslib.__rest(_a, ["clearFunction", "hideLabel", "icon", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
20
+ var _b;
21
+ var elementLeft = _a.elementLeft, elementRight = _a.elementRight, hideLabel = _a.hideLabel, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _c = _a.size, size = _c === void 0 ? FormElement_types.EFormElementSize.large : _c, unit = _a.unit, props = _tslib.__rest(_a, ["elementLeft", "elementRight", "hideLabel", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
25
22
  var id = props.id, required = props.required;
26
23
  var sizeAttributes = formElement.getSizeAttributes(size);
27
24
  var errorId = "".concat(id, "-error");
@@ -31,12 +28,10 @@ var Input = function (_a) {
31
28
  required ? ' *' : '')),
32
29
  React__default["default"].createElement(Input_styles.InputWrapper, null,
33
30
  React__default["default"].createElement(Input_styles.InputContainer, null,
34
- icon && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, icon)),
31
+ elementLeft && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, elementLeft)),
35
32
  React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, sizeAttributes: sizeAttributes }, props)),
36
- clearFunction && (React__default["default"].createElement(Input_styles.AbsoluteContainer, { right: true },
37
- React__default["default"].createElement(CgButton.CgButton, { circle: true, onClick: clearFunction, size: CgButton_types.EButtonSize.small, variant: CgButton_types.EButtonVariant.ghost },
38
- React__default["default"].createElement(icons.Icons.Cross, { 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 }))))),
39
- unit && React__default["default"].createElement(typography.BodyText, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, unit)),
33
+ elementRight && (React__default["default"].createElement(Input_styles.AbsoluteContainer, { right: true }, elementRight))),
34
+ unit && React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
40
35
  error && errorLabel && (React__default["default"].createElement(FormElement_styles.ErrorLabel, { id: errorId }, errorLabel))));
41
36
  };
42
37
 
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/FormElements/Select/Select.styles.js CHANGED
@@ -11,7 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  var SelectContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
14
- var SelectElement = styled__default["default"].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), FormElement_styles.sharedFormElementStyles);
14
+ var SelectElement = styled__default["default"].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n ", "\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), FormElement_styles.sharedFormElementStyles, function (_a) {
15
+ var _b;
16
+ var theme = _a.theme;
17
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
18
+ });
15
19
  var SelectIcon = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: 50%;\n right: ", "px;\n transform: translateY(-50%);\n pointer-events: none;\n\n svg {\n display: block;\n }\n"], ["\n position: absolute;\n top: 50%;\n right: ", "px;\n transform: translateY(-50%);\n pointer-events: none;\n\n svg {\n display: block;\n }\n"])), function (_a) {
16
20
  var _b;
17
21
  var theme = _a.theme;
package/build/cjs/components/src/components/FormElements/Select/Select.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/SideModal/SideModal.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _tslib = require('../../../../_virtual/_tslib.js');
5
6
  var React = require('react');
6
7
  var framerMotion = require('framer-motion');
7
8
  var reactDom = require('react-dom');
@@ -14,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
15
 
15
16
  var SideModal = React.forwardRef(function (_a, ref) {
16
17
  var _b, _c, _d;
17
- var _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h;
18
+ var _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h, props = _tslib.__rest(_a, ["background", "children", "isVisible", "maxHeight", "maxWidth", "onBackdropClick", "overlayBackground", "querySelector", "slideFrom", "width"]);
18
19
  var domSafe = typeof document !== 'undefined';
19
20
  return domSafe
20
21
  ? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
@@ -24,7 +25,7 @@ var SideModal = React.forwardRef(function (_a, ref) {
24
25
  }, overlayBackground: overlayBackground, ref: ref, transition: {
25
26
  type: 'just'
26
27
  } },
27
- React__default["default"].createElement(SideModal_styles.SideModalContainer, { animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, children)))), document.querySelector(querySelector) || document.body)
28
+ React__default["default"].createElement(SideModal_styles.SideModalContainer, _tslib.__assign({ animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, props), children)))), document.querySelector(querySelector) || document.body)
28
29
  : null;
29
30
  });
30
31
  SideModal.displayName = 'SideModal';
package/build/cjs/components/src/components/SideModal/SideModal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/FormElement.styles.js CHANGED
@@ -23,7 +23,7 @@ var Label = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateO
23
23
  var theme = _a.theme;
24
24
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
25
25
  });
26
- var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"], ["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
26
+ var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"], ["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
27
27
  var _b, _c;
28
28
  var error = _a.error, theme = _a.theme;
29
29
  return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.placeholder;
@@ -59,7 +59,7 @@ var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __make
59
59
  }, function (_a) {
60
60
  var _b;
61
61
  var theme = _a.theme;
62
- return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
62
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
63
63
  }, function (_a) {
64
64
  var _b;
65
65
  var theme = _a.theme;
package/build/es/components/src/components/FormElements/Input/Input.js CHANGED
@@ -1,19 +1,16 @@
1
1
  import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
+ import { theme } from '@citygross/design-tokens';
4
+ import { BodyText } from '@citygross/typography';
3
5
  import { getSizeAttributes } from '../../../helpers/form-element.js';
6
+ import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
4
7
  import { Wrapper, Label, ErrorLabel } from '../FormElement.styles.js';
5
8
  import { InputWrapper, InputContainer, AbsoluteContainer, InputElement } from './Input.styles.js';
6
9
  import { EFormElementSize } from '../FormElement.types.js';
7
- import { theme } from '@citygross/design-tokens';
8
- import { Icons } from '@citygross/icons';
9
- import { BodyText } from '@citygross/typography';
10
- import { CgButton } from '../../CgButton/CgButton.js';
11
- import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
12
- import { EButtonSize, EButtonVariant } from '../../CgButton/CgButton.types.js';
13
10
 
14
11
  var Input = function (_a) {
15
- var _b, _c, _d;
16
- var clearFunction = _a.clearFunction, hideLabel = _a.hideLabel, icon = _a.icon, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _e = _a.size, size = _e === void 0 ? EFormElementSize.large : _e, unit = _a.unit, props = __rest(_a, ["clearFunction", "hideLabel", "icon", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
12
+ var _b;
13
+ var elementLeft = _a.elementLeft, elementRight = _a.elementRight, hideLabel = _a.hideLabel, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _c = _a.size, size = _c === void 0 ? EFormElementSize.large : _c, unit = _a.unit, props = __rest(_a, ["elementLeft", "elementRight", "hideLabel", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
17
14
  var id = props.id, required = props.required;
18
15
  var sizeAttributes = getSizeAttributes(size);
19
16
  var errorId = "".concat(id, "-error");
@@ -23,12 +20,10 @@ var Input = function (_a) {
23
20
  required ? ' *' : '')),
24
21
  React.createElement(InputWrapper, null,
25
22
  React.createElement(InputContainer, null,
26
- icon && (React.createElement(AbsoluteContainer, null, icon)),
23
+ elementLeft && (React.createElement(AbsoluteContainer, null, elementLeft)),
27
24
  React.createElement(InputElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, sizeAttributes: sizeAttributes }, props)),
28
- clearFunction && (React.createElement(AbsoluteContainer, { right: true },
29
- React.createElement(CgButton, { circle: true, onClick: clearFunction, size: EButtonSize.small, variant: EButtonVariant.ghost },
30
- React.createElement(Icons.Cross, { height: (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))))),
31
- unit && React.createElement(BodyText, { color: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, unit)),
25
+ elementRight && (React.createElement(AbsoluteContainer, { right: true }, elementRight))),
26
+ unit && React.createElement(BodyText, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
32
27
  error && errorLabel && (React.createElement(ErrorLabel, { id: errorId }, errorLabel))));
33
28
  };
34
29
 
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/FormElements/Select/Select.styles.js CHANGED
@@ -3,7 +3,11 @@ import styled from 'styled-components';
3
3
  import { sharedFormElementStyles } from '../FormElement.styles.js';
4
4
 
5
5
  var SelectContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
6
- var SelectElement = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), sharedFormElementStyles);
6
+ var SelectElement = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n ", "\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), sharedFormElementStyles, function (_a) {
7
+ var _b;
8
+ var theme = _a.theme;
9
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
10
+ });
7
11
  var SelectIcon = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n right: ", "px;\n transform: translateY(-50%);\n pointer-events: none;\n\n svg {\n display: block;\n }\n"], ["\n position: absolute;\n top: 50%;\n right: ", "px;\n transform: translateY(-50%);\n pointer-events: none;\n\n svg {\n display: block;\n }\n"])), function (_a) {
8
12
  var _b;
9
13
  var theme = _a.theme;
package/build/es/components/src/components/FormElements/Select/Select.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/SideModal/SideModal.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { __rest, __assign } from '../../../../_virtual/_tslib.js';
1
2
  import React, { forwardRef } from 'react';
2
3
  import { AnimatePresence } from 'framer-motion';
3
4
  import { createPortal } from 'react-dom';
@@ -6,7 +7,7 @@ import { theme } from '@citygross/design-tokens';
6
7
 
7
8
  var SideModal = forwardRef(function (_a, ref) {
8
9
  var _b, _c, _d;
9
- var _e = _a.background, background = _e === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h;
10
+ var _e = _a.background, background = _e === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h, props = __rest(_a, ["background", "children", "isVisible", "maxHeight", "maxWidth", "onBackdropClick", "overlayBackground", "querySelector", "slideFrom", "width"]);
10
11
  var domSafe = typeof document !== 'undefined';
11
12
  return domSafe
12
13
  ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
@@ -16,7 +17,7 @@ var SideModal = forwardRef(function (_a, ref) {
16
17
  }, overlayBackground: overlayBackground, ref: ref, transition: {
17
18
  type: 'just'
18
19
  } },
19
- React.createElement(SideModalContainer, { animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, children)))), document.querySelector(querySelector) || document.body)
20
+ React.createElement(SideModalContainer, __assign({ animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, props), children)))), document.querySelector(querySelector) || document.body)
20
21
  : null;
21
22
  });
22
23
  SideModal.displayName = 'SideModal';
package/build/es/components/src/components/SideModal/SideModal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.150",
3
+ "version": "0.8.152",
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": "4e7057064778890726168d955f7c62cd37c44bf7"
77
+ "gitHead": "25bcdb8c259cca905dab86c9732c4bc0a6d3e467"
78
78
  }