@citygross/components 0.8.132 → 0.8.134

package/build/@types/components/FormElements/Checkbox/Checkbox.d.ts

@@ -1,7 +1,13 @@
-import React, { InputHTMLAttributes } from 'react';
-export interface CheckBoxInputProps extends InputHTMLAttributes<HTMLInputElement> {
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    size?: number;
-    iconSize?: number;
-}
-export declare function Checkbox({ onChange, size, iconSize, ...inputProps }: CheckBoxInputProps): JSX.Element;
+import { InputHTMLAttributes } from 'react';
+export declare type TCheckbox = {
+    label: string;
+    showLabel?: boolean;
+} & InputHTMLAttributes<HTMLInputElement>;
+export declare type TCheckboxAttributes = {
+    backgroundColor?: string;
+    borderColor?: string;
+    hoverBackgroundColor?: string;
+    iconColor?: string;
+    labelColor?: string;
+};
+export declare const Checkbox: ({ label, showLabel, ...props }: TCheckbox) => JSX.Element;

package/build/@types/components/FormElements/Checkbox/Checkbox.styles.d.ts

@@ -1,7 +1,13 @@
-import { CheckBoxInputProps } from './Checkbox';
-export declare type TCheckWrapper = {
-    size: number;
+import { TCheckboxAttributes } from './Checkbox';
+declare type TCheckboxWrapper = {
+    disabled?: boolean;
+    focused?: boolean;
 };
-export declare const CheckboxWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TCheckWrapper, never>;
-export declare const CheckIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const Checkbox: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, CheckBoxInputProps, never>;
+export declare const CheckboxWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCheckboxWrapper, never>;
+export declare const Checkbox: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+declare type TCheckboxContainer = {
+    attributes: Omit<TCheckboxAttributes, 'iconColor' | 'labelColor'>;
+};
+export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCheckboxContainer, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/build/@types/components/FormElements/FormElement.styles.d.ts

@@ -0,0 +1,5 @@
+import { TFormElementStyles } from './FormElement.types';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const sharedFormElementStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<TFormElementStyles, import("styled-components").DefaultTheme>>;
+export declare const ErrorLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/FormElements/FormElement.types.d.ts

@@ -0,0 +1,19 @@
+export declare enum EFormElementSize {
+    small = "small",
+    large = "large"
+}
+export declare type TFormElement = {
+    error?: boolean;
+    errorLabel?: string;
+    label?: string;
+    size?: EFormElementSize;
+};
+export declare type TFormElementSizeAttributes = {
+    fontSize?: number;
+    height?: number;
+    iconSize?: number;
+    padding?: number;
+};
+export declare type TFormElementStyles = {
+    sizeAttributes: Omit<TFormElementSizeAttributes, 'iconSize'>;
+} & Pick<TFormElement, 'error'>;

package/build/@types/components/FormElements/Input/Input.d.ts

@@ -1,9 +1,4 @@
-import * as styles from './Input.styles';
 import React from 'react';
-export declare type TInput = styles.InputProps & {
-    icon?: JSX.Element;
-    iconOnClick?: () => void;
-};
-export declare function Input({ icon, iconOnClick, flexGrow, isValid, fontSize, inputSize, inputRef, ...props }: TInput & {
-    inputRef?: React.RefObject<HTMLInputElement>;
-}): JSX.Element;
+import { TFormElement } from '../FormElement.types';
+export declare type TInput = TFormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export declare const Input: ({ error, errorLabel, label, size, ...props }: TInput) => JSX.Element;

package/build/@types/components/FormElements/Input/Input.styles.d.ts

@@ -1,11 +1,3 @@
-import { InputHTMLAttributes } from 'react';
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    readonly isValid?: boolean;
-    flexGrow?: number;
-    fontSize?: number;
-    inputSize?: 'small' | 'medium';
-    iconExists?: boolean;
-}
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, InputProps, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputProps, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    sizeAttributes: Omit<import("../FormElement.types").TFormElementSizeAttributes, "iconSize">;
+} & Pick<import("../FormElement.types").TFormElement, "error">, never>;

package/build/@types/components/FormElements/Select/Select.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TFormElement } from '../FormElement.types';
+export declare type TSelect = {
+    children?: React.ReactNode;
+    isOpen?: boolean;
+} & TFormElement & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>;
+export declare const Select: ({ children, error, errorLabel, isOpen, label, size, ...props }: TSelect) => JSX.Element;

package/build/@types/components/FormElements/Select/Select.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const SelectContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectElement: import("styled-components").StyledComponent<"select", import("styled-components").DefaultTheme, {
+    sizeAttributes: Omit<import("../FormElement.types").TFormElementSizeAttributes, "iconSize">;
+} & Pick<import("../FormElement.types").TFormElement, "error">, never>;
+export declare const SelectIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/MenuListDropdown/MenuListDropdown.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type TMenuListDropdown = {
+    children?: React.ReactNode;
+    dropdownHeader?: React.ReactNode;
+    isOpen?: boolean;
+    onClick?: () => void;
+};
+export declare const MenuListDropdown: ({ children, dropdownHeader, isOpen, onClick }: TMenuListDropdown) => JSX.Element;

package/build/@types/components/MenuListItem/MenuListItem.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 export declare type TMenuListItem = {
-    onClick: () => void;
-    isOpen: boolean;
-    dropdownHeader: string;
-    paddingLeft?: number;
     backgroundColor?: string;
+    children: React.ReactNode;
+    dropdownHeader: string;
     hoverBackground?: string;
     iconWidth?: number;
-    children: React.ReactNode;
+    isOpen: boolean;
+    onClick: () => void;
+    paddingLeft?: number;
 };
 export declare const MenuListItem: React.FunctionComponent<TMenuListItem>;

package/build/@types/helpers/checkbox.d.ts

@@ -0,0 +1,2 @@
+import { TCheckboxAttributes } from '../components/FormElements/Checkbox/Checkbox';
+export declare const getAttributes: (checked?: boolean, disabled?: boolean) => TCheckboxAttributes;

package/build/@types/helpers/form-element.d.ts

@@ -0,0 +1,2 @@
+import { EFormElementSize, TFormElementSizeAttributes } from '../components/FormElements/FormElement.types';
+export declare const getSizeAttributes: (size?: EFormElementSize) => TFormElementSizeAttributes;

package/build/@types/index.d.ts

@@ -23,12 +23,13 @@ export * from './components/DeliverySlotItem/DeliverySlotItem';
 export * from './components/DeliveryTimeBlock/DeliveryTimeBlock';
 export * from './components/Divider/Divider';
 export * from './components/DotIndicator/DotIndicator';
-export * from './components/Dropdown/Dropdown';
 export * from './components/Form/Form';
 export * from './components/FormControl/FormControl';
 export * from './components/FormElements/Checkbox/Checkbox';
 export * from './components/FormElements/Input/Input';
 export * from './components/FormElements/Radio/Radio';
+export * from './components/FormElements/Select/Select';
+export * from './components/FormElements/FormElement.types';
 export * from './components/FormElements/Switch/Switch';
 export * from './components/FormElements/TextArea/TextArea';
 export * from './components/FormGroup/FormGroup';
@@ -69,7 +70,6 @@ export * from './components/ScreenReader/ScreenReader';
 export * from './components/SearchBar/SearchBar';
 export * from './components/SearchListItem/SearchListItem';
 export * from './components/SearchSuggestionChip/SearchSuggestionChip';
-export * from './components/Select/Select';
 export * from './components/SelectButton/SelectButton';
 export * from './components/SkipTo/SkipTo';
 export * from './components/SideModal/SideModal';

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js

@@ -37,12 +37,15 @@ require('../DateBox/DateBox.styles.js');
 require('../DeliverySlotItem/DeliverySlotItem.styles.js');
 require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
 require('../DotIndicator/DotIndicator.styles.js');
-require('../Dropdown/Dropdown.styles.js');
 require('../Form/Form.styles.js');
 require('../FormControl/FormControl.js');
 require('../FormElements/Checkbox/Checkbox.styles.js');
+require('../ScreenReader/ScreenReader.styles.js');
+require('../FormElements/FormElement.types.js');
+require('../FormElements/FormElement.styles.js');
 require('../FormElements/Input/Input.styles.js');
 require('../FormElements/Radio/Radio.styles.js');
+require('../FormElements/Select/Select.styles.js');
 require('../FormElements/Switch/Switch.styles.js');
 require('../FormElements/TextArea/TextArea.styles.js');
 require('../FormGroup/FormGroup.styles.js');
@@ -62,6 +65,7 @@ require('../ListItemWithRadio/ListItemWithRadio.styles.js');
 require('../MaxHeightText/styles.js');
 require('../Menu/Menu.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
+require('../MenuListDropdown/MenuListDropdown.styles.js');
 require('../MobileTable/MobileTable.styles.js');
 require('../Modal/Modal.js');
 require('styled-components');
@@ -72,7 +76,6 @@ require('../Pagination/Pagination.styles.js');
 require('../Pill/Pill.styles.js');
 require('../PriceTag/PriceTag.types.js');
 require('../PriceStripe/PriceStripe.styles.js');
-require('../ScreenReader/ScreenReader.styles.js');
 require('../PriceTag/PriceTag.styles.js');
 require('../ProductHeader/ProductHeader.js');
 require('../ProgressBar/ProgressBar.styled.js');
@@ -85,7 +88,6 @@ require('../RadioListItem/RadioListItem.styles.js');
 require('../RippleContainer/RippleContainer.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
-require('../Select/Select.styles.js');
 require('../SelectButton/SelectButton.styles.js');
 require('../SkipTo/SkipTo.styles.js');
 require('../SideModal/SideModal.js');

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js

@@ -4,26 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
 var React = require('react');
-var designTokens = require('@citygross/design-tokens');
 var icons = require('@citygross/icons');
 var Checkbox_styles = require('./Checkbox.styles.js');
+var checkbox = require('../../../helpers/checkbox.js');
+var ScreenReader = require('../../ScreenReader/ScreenReader.js');
+var typography = require('@citygross/typography');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Checkbox(_a) {
-    var onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 16 : _c, inputProps = _tslib.__rest(_a, ["onChange", "size", "iconSize"]);
-    return (React__default["default"].createElement(Checkbox_styles.CheckboxWrapper, { size: size, whileTap: { scale: 0.9 }, whileHover: { scale: 1.1 } },
-        React__default["default"].createElement(Checkbox_styles.Checkbox, _tslib.__assign({ tabIndex: 0, type: "checkbox", onChange: onChange, onKeyDown: function (event) {
-                if (event.key === 'Enter' && onChange && !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled)) {
-                    var syntheticEvent = _tslib.__assign(_tslib.__assign({}, event), { target: event.target });
-                    onChange(syntheticEvent);
-                }
-            }, size: size }, inputProps)),
-        React__default["default"].createElement(Checkbox_styles.CheckIcon, null,
-            React__default["default"].createElement(icons.Icons.CheckMark, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette.alertGreen : 'white', width: iconSize }))));
-}
+var Checkbox = function (_a) {
+    var label = _a.label, showLabel = _a.showLabel, props = _tslib.__rest(_a, ["label", "showLabel"]);
+    var checked = props.checked, disabled = props.disabled;
+    var _b = checkbox.getAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = _tslib.__rest(_b, ["iconColor", "labelColor"]);
+    return (React__default["default"].createElement(Checkbox_styles.CheckboxWrapper, { as: "label", disabled: disabled },
+        React__default["default"].createElement(Checkbox_styles.Checkbox, _tslib.__assign({ type: "checkbox" }, props)),
+        React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { attributes: attributes },
+            React__default["default"].createElement(Checkbox_styles.IconContainer, null,
+                React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor }))),
+        showLabel ? (React__default["default"].createElement(typography.BodyText, { color: labelColor, size: typography.TextTypes.TextSize.SMALL }, label)) : (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label }))));
+};
 
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js

@@ -3,19 +3,60 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
-var framerMotion = require('framer-motion');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CheckboxWrapper = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: 2px;\n  box-shadow: 0 0 0 1px ", " inset;\n  box-sizing: border-box;\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  z-index: 1;\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: 2px;\n  box-shadow: 0 0 0 1px ", " inset;\n  box-sizing: border-box;\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  z-index: 1;\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; });
-var CheckIcon = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background: 'transparent';\n  z-index: 2;\n  > svg {\n    opacity: 0;\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background: 'transparent';\n  z-index: 2;\n  > svg {\n    opacity: 0;\n  }\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium; });
-var Checkbox = styled__default["default"].input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  cursor: pointer;\n  opacity: 0;\n  z-index: 3;\n\n  &:focus-visible + ", " {\n    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 6px #fff;\n    transition: all 0.1s ease-in-out;\n  }\n  &:checked + ", " {\n    opacity: 1;\n    border: 1px solid ", ";\n    background: #f2fdf2;\n\n    > svg {\n      opacity: 1;\n    }\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  min-height: ", "px;\n  min-width: ", "px;\n  cursor: pointer;\n  opacity: 0;\n  z-index: 3;\n\n  &:focus-visible + ", " {\n    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 6px #fff;\n    transition: all 0.1s ease-in-out;\n  }\n  &:checked + ", " {\n    opacity: 1;\n    border: 1px solid ", ";\n    background: #f2fdf2;\n\n    > svg {\n      opacity: 1;\n    }\n  }\n"])), function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.size; }, CheckIcon, CheckIcon, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.alertGreen; });
-var templateObject_1, templateObject_2, templateObject_3;
+var CheckboxWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'not-allowed' : 'pointer');
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius) === null || _c === void 0 ? void 0 : _c.extraSmall;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.focusVisible;
+});
+var Checkbox = styled__default["default"].input(templateObject_2 || (templateObject_2 = _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"])));
+var CheckboxContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_a) {
+    var attributes = _a.attributes;
+    return attributes.backgroundColor;
+}, function (_a) {
+    var attributes = _a.attributes;
+    return attributes.borderColor;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius) === null || _c === void 0 ? void 0 : _c.extraSmall;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
+}, function (_a) {
+    var attributes = _a.attributes;
+    return attributes.hoverBackgroundColor;
+});
+var IconContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox;
+exports.CheckboxContainer = CheckboxContainer;
 exports.CheckboxWrapper = CheckboxWrapper;
+exports.IconContainer = IconContainer;
 //# sourceMappingURL=Checkbox.styles.js.map

package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/FormElement.styles.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Wrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _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 (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+});
+var Label = styled__default["default"].label(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  padding-bottom: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  padding-bottom: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight) === null || _c === void 0 ? void 0 : _c.medium;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+});
+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) {
+    var _b, _c;
+    var error = _a.error, theme = _a.theme;
+    return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.placeholder;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary;
+}, function (_a) {
+    var sizeAttributes = _a.sizeAttributes;
+    return sizeAttributes.fontSize;
+}, function (_a) {
+    var sizeAttributes = _a.sizeAttributes;
+    return sizeAttributes.height;
+}, function (_a) {
+    var sizeAttributes = _a.sizeAttributes;
+    return sizeAttributes.padding;
+}, function (_a) {
+    var _b, _c;
+    var error = _a.error, theme = _a.theme;
+    return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.brandBlue;
+}, function (_a) {
+    var _b, _c;
+    var error = _a.error, theme = _a.theme;
+    return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.brandBlue;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.light;
+});
+var ErrorLabel = styled__default["default"].label(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+exports.ErrorLabel = ErrorLabel;
+exports.Label = Label;
+exports.Wrapper = Wrapper;
+exports.sharedFormElementStyles = sharedFormElementStyles;
+//# sourceMappingURL=FormElement.styles.js.map

package/build/cjs/components/src/components/FormElements/FormElement.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/FormElement.types.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.EFormElementSize = void 0;
+(function (EFormElementSize) {
+    EFormElementSize["small"] = "small";
+    EFormElementSize["large"] = "large";
+})(exports.EFormElementSize || (exports.EFormElementSize = {}));
+//# sourceMappingURL=FormElement.types.js.map

package/build/cjs/components/src/components/FormElements/FormElement.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/Input/Input.js

@@ -3,19 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
-var Input_styles = require('./Input.styles.js');
 var React = require('react');
+var formElement = require('../../../helpers/form-element.js');
+var FormElement_styles = require('../FormElement.styles.js');
+var Input_styles = require('./Input.styles.js');
+var FormElement_types = require('../FormElement.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Input(_a) {
-    var icon = _a.icon, iconOnClick = _a.iconOnClick, flexGrow = _a.flexGrow, isValid = _a.isValid, fontSize = _a.fontSize, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, inputRef = _a.inputRef, props = _tslib.__rest(_a, ["icon", "iconOnClick", "flexGrow", "isValid", "fontSize", "inputSize", "inputRef"]);
-    return icon ? (React__default["default"].createElement(Input_styles.InputWrapper, { flexGrow: flexGrow },
-        React__default["default"].createElement(Input_styles.Input, _tslib.__assign({ iconExists: Boolean(icon), flexGrow: flexGrow, fontSize: fontSize, isValid: isValid, inputSize: inputSize, ref: inputRef }, props)),
-        React__default["default"].createElement(Input_styles.IconWrapper, { onClick: iconOnClick }, icon))) : (React__default["default"].createElement(Input_styles.Input, _tslib.__assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid, inputSize: inputSize, ref: inputRef }, props)));
-}
+var Input = function (_a) {
+    var error = _a.error, errorLabel = _a.errorLabel, label = _a.label, _b = _a.size, size = _b === void 0 ? FormElement_types.EFormElementSize.large : _b, props = _tslib.__rest(_a, ["error", "errorLabel", "label", "size"]);
+    var id = props.id, required = props.required;
+    var sizeAttributes = formElement.getSizeAttributes(size);
+    var errorId = "".concat(id, "-error");
+    return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
+        label && (React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
+            label,
+            required ? ' *' : '')),
+        React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: sizeAttributes }, props)),
+        error && errorLabel && (React__default["default"].createElement(FormElement_styles.ErrorLabel, { id: errorId }, errorLabel))));
+};
 
 exports.Input = Input;
 //# sourceMappingURL=Input.js.map

package/build/cjs/components/src/components/FormElements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/Input/Input.styles.js

@@ -4,38 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
+var FormElement_styles = require('../FormElement.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var InputWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  flex-grow: ", ";\n"], ["\n  position: relative;\n  display: inline-block;\n  flex-grow: ", ";\n"])), function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; });
-var Input = styled__default["default"].input(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", ";\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  transition: ", ";\n  ", "\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n  border: 1px solid\n    ", ";\n  outline: none;\n  padding: ", ";\n  border-radius: 2px;\n  background: ", ";\n  color: ", ";\n  flex-grow: ", ";\n  font-size: ", "px;\n  transition: ", ";\n  ", "\n  &:focus,\n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
-    var _a, _b, _c, _d, _e, _f;
-    return props.disabled
-        ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
-        : (props === null || props === void 0 ? void 0 : props.isValid) === false
-            ? (_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.alertRed
-            : (_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.dark;
-}, function (props) {
-    var _a, _b, _c, _d;
-    return props.inputSize === 'small'
-        ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px")
-        : "".concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, "px ").concat((_d = props.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm, "px");
-}, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) {
-    var _a;
-    return (props === null || props === void 0 ? void 0 : props.iconExists) &&
-        "\n    width: 100%;\n    padding-right: ".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.InputWithIconPaddingRight, "px;\n  ");
-}, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) {
-    var _a, _b, _c, _d;
-    return props.disabled
-        ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
-        : (_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.dark;
-});
-var IconWrapper = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  position: absolute;\n  right: ", "px;\n  top: 0;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  position: absolute;\n  right: ", "px;\n  top: 0;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var templateObject_1, templateObject_2, templateObject_3;
+var InputElement = styled__default["default"].input(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), FormElement_styles.sharedFormElementStyles);
+var templateObject_1;
 
-exports.IconWrapper = IconWrapper;
-exports.Input = Input;
-exports.InputWrapper = InputWrapper;
+exports.InputElement = InputElement;
 //# sourceMappingURL=Input.styles.js.map

package/build/cjs/components/src/components/FormElements/Input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/Select/Select.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.js');
+var React = require('react');
+var icons = require('@citygross/icons');
+var formElement = require('../../../helpers/form-element.js');
+var FormElement_styles = require('../FormElement.styles.js');
+var Select_styles = require('./Select.styles.js');
+var FormElement_types = require('../FormElement.types.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Select = function (_a) {
+    var children = _a.children, error = _a.error, errorLabel = _a.errorLabel, isOpen = _a.isOpen, label = _a.label, _b = _a.size, size = _b === void 0 ? FormElement_types.EFormElementSize.large : _b, props = _tslib.__rest(_a, ["children", "error", "errorLabel", "isOpen", "label", "size"]);
+    var id = props.id, required = props.required;
+    var _c = formElement.getSizeAttributes(size), iconSize = _c.iconSize, restSizeAttributes = _tslib.__rest(_c, ["iconSize"]);
+    var errorId = "".concat(id, "-error");
+    return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
+        label && (React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
+            label,
+            required ? ' *' : '')),
+        React__default["default"].createElement(Select_styles.SelectContainer, null,
+            React__default["default"].createElement(Select_styles.SelectElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: restSizeAttributes }, props), children),
+            React__default["default"].createElement(Select_styles.SelectIcon, null, isOpen ? (React__default["default"].createElement(icons.Icons.ChevronUp, { height: iconSize, width: iconSize })) : (React__default["default"].createElement(icons.Icons.ChevronDown, { height: iconSize, width: iconSize })))),
+        error && errorLabel && (React__default["default"].createElement(FormElement_styles.ErrorLabel, { id: errorId }, errorLabel))));
+};
+
+exports.Select = Select;
+//# sourceMappingURL=Select.js.map

package/build/{es/components/src/components → cjs/components/src/components/FormElements}/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"Select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}