@citygross/components 0.8.132 → 0.8.133

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/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,14 @@ 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('../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 +64,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');
@@ -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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,25 @@
+'use strict';
+
+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 SelectContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var SelectElement = styled__default["default"].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), FormElement_styles.sharedFormElementStyles);
+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\n  svg {\n    display: block;\n  }\n"], ["\n  position: absolute;\n  top: 50%;\n  right: ", "px;\n  transform: translateY(-50%);\n\n  svg {\n    display: block;\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
+});
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.SelectContainer = SelectContainer;
+exports.SelectElement = SelectElement;
+exports.SelectIcon = SelectIcon;
+//# sourceMappingURL=Select.styles.js.map

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

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

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var MenuListDropdown_styles = require('./MenuListDropdown.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MenuListDropdown = function (_a) {
+    var children = _a.children, dropdownHeader = _a.dropdownHeader, isOpen = _a.isOpen, onClick = _a.onClick;
+    var variants = {
+        closed: {
+            height: 0,
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        },
+        open: {
+            height: 'auto',
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        }
+    };
+    return (React__default["default"].createElement(MenuListDropdown_styles.DropdownContainer, null,
+        React__default["default"].createElement(MenuListDropdown_styles.DropdownHeader, { onClick: onClick }, dropdownHeader),
+        React__default["default"].createElement(MenuListDropdown_styles.DropdownChildContainer, { isOpen: isOpen, variants: variants, animate: isOpen ? 'open' : 'closed', initial: "closed" }, children)));
+};
+
+exports.MenuListDropdown = MenuListDropdown;
+//# sourceMappingURL=MenuListDropdown.js.map

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

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

package/build/cjs/components/src/components/{Dropdown/Dropdown.styles.js → MenuListDropdown/MenuListDropdown.styles.js}

@@ -18,4 +18,4 @@ var templateObject_1, templateObject_2, templateObject_3;
 exports.DropdownChildContainer = DropdownChildContainer;
 exports.DropdownContainer = DropdownContainer;
 exports.DropdownHeader = DropdownHeader;
-//# sourceMappingURL=Dropdown.styles.js.map
+//# sourceMappingURL=MenuListDropdown.styles.js.map

package/build/cjs/components/src/components/MenuListDropdown/MenuListDropdown.styles.js.map

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

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var designTokens = require('@citygross/design-tokens');
 var icons = require('@citygross/icons');
 var React = require('react');
-var Dropdown = require('../Dropdown/Dropdown.js');
+var MenuListDropdown = require('../MenuListDropdown/MenuListDropdown.js');
 var MenuListItem_styles = require('./MenuListItem.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,11 +14,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var MenuListItem = function (_a) {
     var _b, _c, _d, _e;
-    var onClick = _a.onClick, isOpen = _a.isOpen, dropdownHeader = _a.dropdownHeader, _f = _a.paddingLeft, paddingLeft = _f === void 0 ? 0 : _f, hoverBackground = _a.hoverBackground, backgroundColor = _a.backgroundColor, iconWidth = _a.iconWidth, children = _a.children;
+    var backgroundColor = _a.backgroundColor, children = _a.children, dropdownHeader = _a.dropdownHeader, hoverBackground = _a.hoverBackground, iconWidth = _a.iconWidth, isOpen = _a.isOpen, onClick = _a.onClick, _f = _a.paddingLeft, paddingLeft = _f === void 0 ? 0 : _f;
     return (React__default["default"].createElement(MenuListItem_styles.MenuListItemWrapper, null,
-        React__default["default"].createElement(Dropdown.Dropdown, { onClick: onClick, isOpen: isOpen, dropdownHeader: React__default["default"].createElement(MenuListItem_styles.HeaderWrapper, { paddingLeft: paddingLeft, backgroundColor: backgroundColor, isOpen: isOpen, hoverBackground: hoverBackground, iconWidth: iconWidth },
+        React__default["default"].createElement(MenuListDropdown.MenuListDropdown, { dropdownHeader: React__default["default"].createElement(MenuListItem_styles.HeaderWrapper, { backgroundColor: backgroundColor, hoverBackground: hoverBackground, iconWidth: iconWidth, isOpen: isOpen, paddingLeft: paddingLeft },
                 React__default["default"].createElement(MenuListItem_styles.BodyText, { isOpen: isOpen }, dropdownHeader),
-                isOpen ? (React__default["default"].createElement(icons.Icons.Minus, { width: iconWidth !== null && iconWidth !== void 0 ? iconWidth : (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.menuListItemIconSize, height: iconWidth !== null && iconWidth !== void 0 ? iconWidth : (_c = designTokens.theme.constants) === null || _c === void 0 ? void 0 : _c.menuListItemIconSize })) : (React__default["default"].createElement(icons.Icons.Plus, { width: (_d = designTokens.theme.constants) === null || _d === void 0 ? void 0 : _d.menuListItemIconSize, height: (_e = designTokens.theme.constants) === null || _e === void 0 ? void 0 : _e.menuListItemIconSize }))) }),
+                isOpen ? (React__default["default"].createElement(icons.Icons.Minus, { height: iconWidth !== null && iconWidth !== void 0 ? iconWidth : (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.menuListItemIconSize, width: iconWidth !== null && iconWidth !== void 0 ? iconWidth : (_c = designTokens.theme.constants) === null || _c === void 0 ? void 0 : _c.menuListItemIconSize })) : (React__default["default"].createElement(icons.Icons.Plus, { height: (_d = designTokens.theme.constants) === null || _d === void 0 ? void 0 : _d.menuListItemIconSize, width: (_e = designTokens.theme.constants) === null || _e === void 0 ? void 0 : _e.menuListItemIconSize }))), isOpen: isOpen, onClick: onClick }),
         isOpen && (React__default["default"].createElement(MenuListItem_styles.NestedWrapper, { nested: true, paddingLeft: paddingLeft }, children))));
 };
 

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

@@ -37,12 +37,14 @@ 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('../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 +64,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');
@@ -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/WarningLabel/WarningLabel.js.map

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

package/build/cjs/components/src/helpers/form-element.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@citygross/design-tokens');
+var FormElement_types = require('../components/FormElements/FormElement.types.js');
+
+var getSizeAttributes = function (size) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    switch (size) {
+        case FormElement_types.EFormElementSize.small:
+            return {
+                fontSize: (_b = (_a = designTokens.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s2,
+                height: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.lg,
+                iconSize: (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm,
+                padding: (_e = designTokens.theme.spacings) === null || _e === void 0 ? void 0 : _e.xs
+            };
+        case FormElement_types.EFormElementSize.large:
+            return {
+                fontSize: (_g = (_f = designTokens.theme.typography) === null || _f === void 0 ? void 0 : _f.size) === null || _g === void 0 ? void 0 : _g.s3,
+                height: (_h = designTokens.theme.spacings) === null || _h === void 0 ? void 0 : _h.xxl,
+                iconSize: (_j = designTokens.theme.spacings) === null || _j === void 0 ? void 0 : _j.sm2,
+                padding: (_k = designTokens.theme.spacings) === null || _k === void 0 ? void 0 : _k.xs2
+            };
+        default:
+            return {};
+    }
+};
+
+exports.getSizeAttributes = getSizeAttributes;
+//# sourceMappingURL=form-element.js.map

package/build/cjs/components/src/helpers/form-element.js.map

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