@wireapp/react-ui-kit 8.4.0 → 8.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.5.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.4.0...@wireapp/react-ui-kit@8.5.0) (2022-05-31)
+
+
+### Features
+
+* Prepare new select component ([#4274](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4274)) ([8084830](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/8084830220b924eae55fcac13bc3cea11c53f709))
+
+
+
+
+
 # [8.4.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.3.0...@wireapp/react-ui-kit@8.4.0) (2022-05-30)
 
 

package/package.json

@@ -67,6 +67,6 @@
     "test:update": "yarn test --updateSnapshot",
     "test:project": "yarn dist && yarn test"
   },
-  "version": "8.4.0",
-  "gitHead": "4a9e90c8c5c46e4d3cc3f24ee83d2a5ed1673aef"
+  "version": "8.5.0",
+  "gitHead": "97d45ca6fbd2c9f72871882b3cd0b92b26d49cf3"
 }

package/src/Form/Select.d.js

@@ -1,2 +1,6 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=Select.d.js.map

package/src/Form/Select.d.ts

@@ -1,14 +1,24 @@
 /** @jsx jsx */
 import { CSSObject, jsx } from '@emotion/react';
 import type { Theme } from '../Layout';
-import { InputProps } from './Input';
 import { ReactElement } from 'react';
-export interface SelectProps<T = HTMLSelectElement> extends InputProps<T> {
+declare type Option = {
+    value: string | number;
+    label: string;
+};
+export interface SelectProps {
+    id: string;
+    onChange: (selectedOption: string | number) => void;
+    dataUieName: string;
+    options: Option[];
+    value?: Option | null;
     helperText?: string;
     label?: string;
     disabled?: boolean;
+    required?: boolean;
     markInvalid?: boolean;
     error?: ReactElement;
 }
-export declare const selectStyle: <T>(theme: Theme, props: SelectProps<T>, error?: boolean) => CSSObject;
-export declare const Select: ({ label, children, error, helperText, ...props }: SelectProps) => jsx.JSX.Element;
+export declare const selectStyle: <T>(theme: Theme, props: any, error?: boolean) => CSSObject;
+export declare const Select: ({ id, label, error, helperText, options, value, onChange, required, markInvalid, dataUieName, ...props }: SelectProps) => jsx.JSX.Element;
+export {};

package/src/Form/Select.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = require("@emotion/react");
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -21,12 +25,18 @@ var _util = require("../util");
 
 var _Input = require("./Input");
 
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
 var _excluded = ["disabled", "markInvalid"],
-    _excluded2 = ["label", "children", "error", "helperText"];
+    _excluded2 = ["id", "label", "error", "helperText", "options", "value", "onChange", "required", "markInvalid", "dataUieName"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -57,6 +67,7 @@ var selectStyle = function selectStyle(theme, _ref) {
     fontSize: '16px',
     fontWeight: 300,
     paddingRight: '30px',
+    textAlign: 'left',
     marginBottom: error && '8px',
     '&:invalid, option:first-of-type': {
       color: _Identity.COLOR_V2.RED
@@ -73,43 +84,244 @@ var selectStyle = function selectStyle(theme, _ref) {
 
 exports.selectStyle = selectStyle;
 
+var dropdownStyles = function dropdownStyles(theme, isDropdownOpen) {
+  return {
+    height: isDropdownOpen ? 'auto' : 0,
+    visibility: isDropdownOpen ? 'visible' : 'hidden',
+    margin: '3px 0 0',
+    padding: 0,
+    borderRadius: '10px',
+    border: "1px solid ".concat(_Identity.COLOR_V2.BLUE),
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    width: '100%',
+    zIndex: 9
+  };
+};
+
+var dropdownOptionStyles = function dropdownOptionStyles(theme, isSelected) {
+  return {
+    background: isSelected ? _Identity.COLOR_V2.BLUE : _Identity.COLOR_V2.WHITE,
+    listStyle: 'none',
+    padding: '10px 20px 14px',
+    cursor: 'pointer',
+    fontSize: '16px',
+    fontWeight: 300,
+    lineHeight: '24px',
+    letterSpacing: '0.05px',
+    color: isSelected ? _Identity.COLOR_V2.WHITE : _Identity.COLOR_V2.BLACK,
+    '&:first-of-type': {
+      borderRadius: '10px 10px 0 0'
+    },
+    '&:last-of-type': {
+      borderRadius: '0 0 10px 10px'
+    },
+    '&:not(:last-of-type)': {
+      borderBottom: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40)
+    },
+    '&:hover, &:active, &:focus': {
+      background: _Identity.COLOR_V2.BLUE,
+      borderColor: _Identity.COLOR_V2.BLUE,
+      color: _Identity.COLOR_V2.WHITE
+    }
+  };
+};
+
 var filterSelectProps = function filterSelectProps(props) {
   return (0, _util.filterProps)(props, ['markInvalid']);
 };
 
+var placeholderText = '- Please select -';
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "bjn8wh",
+  styles: "position:relative"
+} : {
+  name: "tvi1yf-Select",
+  styles: "position:relative;label:Select;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcVBXIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7Q09MT1JfVjJ9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHMsIGlubGluZVNWR30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge2lucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IFJlYWN0LCB7UmVhY3RFbGVtZW50LCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBJbnB1dExhYmVsIGZyb20gJy4vSW5wdXRMYWJlbCc7XG5cbnR5cGUgT3B0aW9uID0ge1xuICB2YWx1ZTogc3RyaW5nIHwgbnVtYmVyO1xuICBsYWJlbDogc3RyaW5nO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBTZWxlY3RQcm9wcyB7XG4gIGlkOiBzdHJpbmc7XG4gIG9uQ2hhbmdlOiAoc2VsZWN0ZWRPcHRpb246IHN0cmluZyB8IG51bWJlcikgPT4gdm9pZDtcbiAgZGF0YVVpZU5hbWU6IHN0cmluZztcbiAgb3B0aW9uczogT3B0aW9uW107XG4gIHZhbHVlPzogT3B0aW9uIHwgbnVsbDtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG4gIGVycm9yPzogUmVhY3RFbGVtZW50O1xufVxuXG5jb25zdCBBcnJvd0Rvd24gPSAodGhlbWU6IFRoZW1lKSA9PiBgXG4gICAgPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxNlwiIGhlaWdodD1cIjE2XCIgdmlld0JveD1cIjAgMCAxNiAxNlwiPlxuICAgICAgICA8cGF0aCBmaWxsPVwiJHt0aGVtZS5nZW5lcmFsLmNvbG9yfVwiIGZpbGwtcnVsZT1cImV2ZW5vZGRcIiBjbGlwLXJ1bGU9XCJldmVub2RkXCIgZD1cIk03Ljk5OTYzIDEyLjU3MTFMMTUuNjU2NSA0LjkxNDIxTDE0LjI0MjMgMy41TDcuOTk5NjMgOS43NDI2NEwxLjc1Njk5IDMuNUwwLjM0Mjc3MyA0LjkxNDIxTDcuOTk5NjMgMTIuNTcxMVpcIi8+XG4gICAgPC9zdmc+XG5gO1xuXG5leHBvcnQgY29uc3Qgc2VsZWN0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzLCBlcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHtkaXNhYmxlZCA9IGZhbHNlLCBtYXJrSW52YWxpZCwgLi4ucHJvcHN9LFxuICBlcnJvciA9IGZhbHNlLFxuKSA9PiAoe1xuICAuLi5pbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyksXG4gICcmOi1tb3otZm9jdXNyaW5nJzoge1xuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIHRleHRTaGFkb3c6ICcwIDAgMCAjMDAwJyxcbiAgfSxcbiAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLkdSQVksXG4gIH0sXG4gIGFwcGVhcmFuY2U6ICdub25lJyxcbiAgYmFja2dyb3VuZDogZGlzYWJsZWRcbiAgICA/IGAke3RoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYFxuICAgIDogYCR7dGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYCxcbiAgYm94U2hhZG93OiBtYXJrSW52YWxpZCA/IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5SRUR9YCA6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzQwfWAsXG4gIGN1cnNvcjogZGlzYWJsZWQgPyAnbm9ybWFsJyA6ICdwb2ludGVyJyxcbiAgZm9udFNpemU6ICcxNnB4JyxcbiAgZm9udFdlaWdodDogMzAwLFxuICBwYWRkaW5nUmlnaHQ6ICczMHB4JyxcbiAgdGV4dEFsaWduOiAnbGVmdCcsXG4gIG1hcmdpbkJvdHRvbTogZXJyb3IgJiYgJzhweCcsXG4gICcmOmludmFsaWQsIG9wdGlvbjpmaXJzdC1vZi10eXBlJzoge1xuICAgIGNvbG9yOiBDT0xPUl9WMi5SRUQsXG4gIH0sXG4gIC4uLighZGlzYWJsZWQgJiYge1xuICAgICcmOmhvdmVyJzoge1xuICAgICAgYm94U2hhZG93OiBgMCAwIDAgMXB4ICR7Q09MT1JfVjIuR1JBWV82MH1gLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMsICY6YWN0aXZlJzoge1xuICAgICAgYm94U2hhZG93OiBgMCAwIDAgMXB4ICR7Q09MT1JfVjIuQkxVRX1gLFxuICAgIH0sXG4gIH0pLFxufSk7XG5cbmNvbnN0IGRyb3Bkb3duU3R5bGVzID0gKHRoZW1lOiBUaGVtZSwgaXNEcm9wZG93bk9wZW46IGJvb2xlYW4pOiBDU1NPYmplY3QgPT4gKHtcbiAgaGVpZ2h0OiBpc0Ryb3Bkb3duT3BlbiA/ICdhdXRvJyA6IDAsXG4gIHZpc2liaWxpdHk6IGlzRHJvcGRvd25PcGVuID8gJ3Zpc2libGUnIDogJ2hpZGRlbicsXG4gIG1hcmdpbjogJzNweCAwIDAnLFxuICBwYWRkaW5nOiAwLFxuICBib3JkZXJSYWRpdXM6ICcxMHB4JyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7Q09MT1JfVjIuQkxVRX1gLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgdG9wOiAnMTAwJScsXG4gIGxlZnQ6IDAsXG4gIHdpZHRoOiAnMTAwJScsXG4gIHpJbmRleDogOSxcbn0pO1xuXG5jb25zdCBkcm9wZG93bk9wdGlvblN0eWxlcyA9ICh0aGVtZTogVGhlbWUsIGlzU2VsZWN0ZWQ6IGJvb2xlYW4pOiBDU1NPYmplY3QgPT4gKHtcbiAgYmFja2dyb3VuZDogaXNTZWxlY3RlZCA/IENPTE9SX1YyLkJMVUUgOiBDT0xPUl9WMi5XSElURSxcbiAgbGlzdFN0eWxlOiAnbm9uZScsXG4gIHBhZGRpbmc6ICcxMHB4IDIwcHggMTRweCcsXG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgbGV0dGVyU3BhY2luZzogJzAuMDVweCcsXG4gIGNvbG9yOiBpc1NlbGVjdGVkID8gQ09MT1JfVjIuV0hJVEUgOiBDT0xPUl9WMi5CTEFDSyxcbiAgJyY6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBib3JkZXJSYWRpdXM6ICcxMHB4IDEwcHggMCAwJyxcbiAgfSxcbiAgJyY6bGFzdC1vZi10eXBlJzoge1xuICAgIGJvcmRlclJhZGl1czogJzAgMCAxMHB4IDEwcHgnLFxuICB9LFxuICAnJjpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7Q09MT1JfVjIuR1JBWV80MH1gLFxuICB9LFxuICAnJjpob3ZlciwgJjphY3RpdmUsICY6Zm9jdXMnOiB7XG4gICAgYmFja2dyb3VuZDogQ09MT1JfVjIuQkxVRSxcbiAgICBib3JkZXJDb2xvcjogQ09MT1JfVjIuQkxVRSxcbiAgICBjb2xvcjogQ09MT1JfVjIuV0hJVEUsXG4gIH0sXG59KTtcblxuY29uc3QgZmlsdGVyU2VsZWN0UHJvcHMgPSBwcm9wcyA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuY29uc3QgcGxhY2Vob2xkZXJUZXh0ID0gJy0gUGxlYXNlIHNlbGVjdCAtJztcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7XG4gIGlkLFxuICBsYWJlbCxcbiAgZXJyb3IsXG4gIGhlbHBlclRleHQsXG4gIG9wdGlvbnMgPSBbXSxcbiAgdmFsdWUgPSBudWxsLFxuICBvbkNoYW5nZSxcbiAgcmVxdWlyZWQsXG4gIG1hcmtJbnZhbGlkLFxuICBkYXRhVWllTmFtZSxcbiAgLi4ucHJvcHNcbn06IFNlbGVjdFByb3BzKSA9PiB7XG4gIGNvbnN0IHNlbGVjdENvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IFtpc0Ryb3Bkb3duT3Blbiwgc2V0SXNEcm9wZG93bk9wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbc2VsZWN0ZWRPcHRpb24sIHNldFNlbGVjdGVkT3B0aW9uXSA9IHVzZVN0YXRlPG51bWJlciB8IG51bGw+KCgpID0+ICh2YWx1ZSA/IG9wdGlvbnMuaW5kZXhPZih2YWx1ZSkgOiBudWxsKSk7XG5cbiAgY29uc3Qgb25Ub2dnbGVEcm9wZG93biA9ICgpID0+IHNldElzRHJvcGRvd25PcGVuKHByZXZTdGF0ZSA9PiAhcHJldlN0YXRlKTtcblxuICBjb25zdCBvbk9wdGlvblNlbGVjdCA9IChpZHg6IG51bWJlcikgPT4ge1xuICAgIHNldFNlbGVjdGVkT3B0aW9uKGlkeCk7XG4gICAgb25DaGFuZ2Uob3B0aW9uc1tpZHhdLnZhbHVlKTtcbiAgfTtcblxuICBjb25zdCBvbk9wdGlvbkNoYW5nZSA9IChpZHg6IG51bWJlcikgPT4ge1xuICAgIG9uT3B0aW9uU2VsZWN0KGlkeCk7XG4gICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUxpc3RLZXlEb3duID0gZSA9PiB7XG4gICAgc3dpdGNoIChlLmtleSkge1xuICAgICAgY2FzZSAnRXNjYXBlJzpcbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBzZXRJc0Ryb3Bkb3duT3BlbihmYWxzZSk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dVcCc6XG4gICAgICBjYXNlICdBcnJvd0xlZnQnOlxuICAgICAgICBpZiAoIWlzRHJvcGRvd25PcGVuKSB7XG4gICAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4odHJ1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIG9uT3B0aW9uU2VsZWN0KHNlbGVjdGVkT3B0aW9uIC0gMSA+PSAwID8gc2VsZWN0ZWRPcHRpb24gLSAxIDogb3B0aW9ucy5sZW5ndGggLSAxKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdBcnJvd0Rvd24nOlxuICAgICAgY2FzZSAnQXJyb3dSaWdodCc6XG4gICAgICAgIGlmICghaXNEcm9wZG93bk9wZW4pIHtcbiAgICAgICAgICBzZXRJc0Ryb3Bkb3duT3Blbih0cnVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgaWYgKHNlbGVjdGVkT3B0aW9uID09PSBudWxsKSB7XG4gICAgICAgICAgb25PcHRpb25TZWxlY3QoMCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgb25PcHRpb25TZWxlY3Qoc2VsZWN0ZWRPcHRpb24gPT09IG9wdGlvbnMubGVuZ3RoIC0gMSA/IDAgOiBzZWxlY3RlZE9wdGlvbiArIDEpO1xuICAgICAgICB9XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSBpbmRleCA9PiBlID0+IHtcbiAgICBzd2l0Y2ggKGUua2V5KSB7XG4gICAgICBjYXNlICcgJzpcbiAgICAgIGNhc2UgJ1NwYWNlQmFyJzpcbiAgICAgIGNhc2UgJ0VudGVyJzpcbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBvbk9wdGlvbkNoYW5nZShpbmRleCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhc0Vycm9yID0gISFlcnJvcjtcblxuICBjb25zdCBoYXNTZWxlY3RlZE9wdGlvbiA9IG9wdGlvbnMgJiYgISFvcHRpb25zW3NlbGVjdGVkT3B0aW9uXTtcblxuICBjb25zdCBoYW5kbGVPdXRzaWRlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICBpZiAoc2VsZWN0Q29udGFpbmVyUmVmLmN1cnJlbnQgJiYgIXNlbGVjdENvbnRhaW5lclJlZi5jdXJyZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSkge1xuICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgIH1cbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZU91dHNpZGVDbGljayk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlT3V0c2lkZUNsaWNrKTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e3tcbiAgICAgICAgbWFyZ2luQm90dG9tOiBtYXJrSW52YWxpZCA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICB9fVxuICAgICAgZGF0YS11aWUtbmFtZT17ZGF0YVVpZU5hbWV9XG4gICAgICByZWY9e3NlbGVjdENvbnRhaW5lclJlZn1cbiAgICA+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8SW5wdXRMYWJlbCBodG1sRm9yPXtpZH0gaXNSZXF1aXJlZD17cmVxdWlyZWR9IG1hcmtJbnZhbGlkPXttYXJrSW52YWxpZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0lucHV0TGFiZWw+XG4gICAgICApfVxuXG4gICAgICA8ZGl2IGNzcz17e3Bvc2l0aW9uOiAncmVsYXRpdmUnfX0+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBhcmlhLWFjdGl2ZWRlc2NlbmRhbnQ9e2hhc1NlbGVjdGVkT3B0aW9uID8gb3B0aW9uc1tzZWxlY3RlZE9wdGlvbl0ubGFiZWwgOiAnJ31cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0Ryb3Bkb3duT3Blbn1cbiAgICAgICAgICBhcmlhLWhhc3BvcHVwPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgb25DbGljaz17b25Ub2dnbGVEcm9wZG93bn1cbiAgICAgICAgICBvbktleURvd249e2hhbmRsZUxpc3RLZXlEb3dufVxuICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gc2VsZWN0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX1cbiAgICAgICAgICBkYXRhLXVpZS1uYW1lPXtkYXRhVWllTmFtZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtoYXNTZWxlY3RlZE9wdGlvbiA/IG9wdGlvbnNbc2VsZWN0ZWRPcHRpb25dLmxhYmVsIDogcGxhY2Vob2xkZXJUZXh0fVxuICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICA8dWxcbiAgICAgICAgICByb2xlPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICB0YWJJbmRleD17LTF9XG4gICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVMaXN0S2V5RG93bn1cbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGRyb3Bkb3duU3R5bGVzKHRoZW1lLCBpc0Ryb3Bkb3duT3Blbil9XG4gICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBkcm9wZG93bi0ke2RhdGFVaWVOYW1lfWAsXG4gICAgICAgICAgfSl9XG4gICAgICAgID5cbiAgICAgICAgICB7b3B0aW9ucy5tYXAoKG9wdGlvbiwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGlzU2VsZWN0ZWQgPSBzZWxlY3RlZE9wdGlvbiA9PSBpbmRleDtcblxuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPGxpXG4gICAgICAgICAgICAgICAga2V5PXtvcHRpb24udmFsdWV9XG4gICAgICAgICAgICAgICAgaWQ9e29wdGlvbi52YWx1ZS50b1N0cmluZygpfVxuICAgICAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxuICAgICAgICAgICAgICAgIGFyaWEtc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9ezB9XG4gICAgICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlEb3duKGluZGV4KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbk9wdGlvbkNoYW5nZShpbmRleCl9XG4gICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93bk9wdGlvblN0eWxlcyh0aGVtZSwgaXNTZWxlY3RlZCl9XG4gICAgICAgICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBvcHRpb24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgICAgICAgICAgJ2RhdGEtdWllLXZhbHVlJzogb3B0aW9uLmxhYmVsLFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge29wdGlvbi5sYWJlbH1cbiAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cblxuICAgICAgeyFoYXNFcnJvciAmJiBoZWxwZXJUZXh0ICYmIChcbiAgICAgICAgPHAgY3NzPXt7Zm9udFNpemU6ICcxMnB4JywgZm9udFdlaWdodDogNDAwLCBjb2xvcjogQ09MT1JfVjIuR1JBWV84MCwgbWFyZ2luVG9wOiA4fX0+e2hlbHBlclRleHR9PC9wPlxuICAgICAgKX1cblxuICAgICAge2Vycm9yfVxuICAgIDwvZGl2PlxuICApO1xufTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
 var Select = function Select(_ref2) {
-  var label = _ref2.label,
-      children = _ref2.children,
+  var id = _ref2.id,
+      label = _ref2.label,
       error = _ref2.error,
       helperText = _ref2.helperText,
+      _ref2$options = _ref2.options,
+      options = _ref2$options === void 0 ? [] : _ref2$options,
+      _ref2$value = _ref2.value,
+      value = _ref2$value === void 0 ? null : _ref2$value,
+      onChange = _ref2.onChange,
+      required = _ref2.required,
+      markInvalid = _ref2.markInvalid,
+      dataUieName = _ref2.dataUieName,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  var selectContainerRef = (0, _react2.useRef)(null);
+
+  var _useState = (0, _react2.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isDropdownOpen = _useState2[0],
+      setIsDropdownOpen = _useState2[1];
+
+  var _useState3 = (0, _react2.useState)(function () {
+    return value ? options.indexOf(value) : null;
+  }),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedOption = _useState4[0],
+      setSelectedOption = _useState4[1];
+
+  var onToggleDropdown = function onToggleDropdown() {
+    return setIsDropdownOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+
+  var onOptionSelect = function onOptionSelect(idx) {
+    setSelectedOption(idx);
+    onChange(options[idx].value);
+  };
+
+  var onOptionChange = function onOptionChange(idx) {
+    onOptionSelect(idx);
+    setIsDropdownOpen(false);
+  };
+
+  var handleListKeyDown = function handleListKeyDown(e) {
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        setIsDropdownOpen(false);
+        break;
+
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        if (!isDropdownOpen) {
+          setIsDropdownOpen(true);
+        }
+
+        e.preventDefault();
+        onOptionSelect(selectedOption - 1 >= 0 ? selectedOption - 1 : options.length - 1);
+        break;
+
+      case 'ArrowDown':
+      case 'ArrowRight':
+        if (!isDropdownOpen) {
+          setIsDropdownOpen(true);
+        }
+
+        e.preventDefault();
+
+        if (selectedOption === null) {
+          onOptionSelect(0);
+        } else {
+          onOptionSelect(selectedOption === options.length - 1 ? 0 : selectedOption + 1);
+        }
+
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(index) {
+    return function (e) {
+      switch (e.key) {
+        case ' ':
+        case 'SpaceBar':
+        case 'Enter':
+          e.preventDefault();
+          onOptionChange(index);
+          break;
+
+        default:
+          break;
+      }
+    };
+  };
+
   var hasError = !!error;
+  var hasSelectedOption = options && !!options[selectedOption];
+
+  var handleOutsideClick = function handleOutsideClick(event) {
+    if (selectContainerRef.current && !selectContainerRef.current.contains(event.target)) {
+      setIsDropdownOpen(false);
+    }
+  };
+
+  (0, _react2.useEffect)(function () {
+    window.addEventListener('click', handleOutsideClick);
+    return function () {
+      window.removeEventListener('click', handleOutsideClick);
+    };
+  }, []);
   return (0, _react.jsx)("div", {
     css: /*#__PURE__*/(0, _react.css)({
-      marginBottom: props.markInvalid ? '2px' : '20px',
+      marginBottom: markInvalid ? '2px' : '20px',
       '&:focus-within label': {
         color: _Identity.COLOR_V2.BLUE
       }
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Select;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUZNIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7Q09MT1JfVjJ9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHMsIGlubGluZVNWR30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0lucHV0UHJvcHMsIGlucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IFJlYWN0LCB7UmVhY3RFbGVtZW50fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICcuL0lucHV0TGFiZWwnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFNlbGVjdFByb3BzPFQgPSBIVE1MU2VsZWN0RWxlbWVudD4gZXh0ZW5kcyBJbnB1dFByb3BzPFQ+IHtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xuICBlcnJvcj86IFJlYWN0RWxlbWVudDtcbn1cblxuY29uc3QgQXJyb3dEb3duID0gKHRoZW1lOiBUaGVtZSkgPT4gYFxuICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxNlwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIj5cbiAgICAgICAgPHBhdGggZmlsbD1cIiR7dGhlbWUuZ2VuZXJhbC5jb2xvcn1cIiBmaWxsLXJ1bGU9XCJldmVub2RkXCIgY2xpcC1ydWxlPVwiZXZlbm9kZFwiIGQ9XCJNNy45OTk2MyAxMi41NzExTDE1LjY1NjUgNC45MTQyMUwxNC4yNDIzIDMuNUw3Ljk5OTYzIDkuNzQyNjRMMS43NTY5OSAzLjVMMC4zNDI3NzMgNC45MTQyMUw3Ljk5OTYzIDEyLjU3MTFaXCIvPlxuICAgIDwvc3ZnPlxuYDtcbmV4cG9ydCBjb25zdCBzZWxlY3RTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgcHJvcHM6IFNlbGVjdFByb3BzPFQ+LCBlcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHtkaXNhYmxlZCA9IGZhbHNlLCBtYXJrSW52YWxpZCwgLi4ucHJvcHN9LFxuICBlcnJvciA9IGZhbHNlLFxuKSA9PiAoe1xuICAuLi5pbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyksXG4gICcmOi1tb3otZm9jdXNyaW5nJzoge1xuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIHRleHRTaGFkb3c6ICcwIDAgMCAjMDAwJyxcbiAgfSxcbiAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLkdSQVksXG4gIH0sXG4gIGFwcGVhcmFuY2U6ICdub25lJyxcbiAgYmFja2dyb3VuZDogZGlzYWJsZWRcbiAgICA/IGAke3RoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYFxuICAgIDogYCR7dGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYCxcbiAgYm94U2hhZG93OiBtYXJrSW52YWxpZCA/IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5SRUR9YCA6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzQwfWAsXG4gIGN1cnNvcjogZGlzYWJsZWQgPyAnbm9ybWFsJyA6ICdwb2ludGVyJyxcbiAgZm9udFNpemU6ICcxNnB4JyxcbiAgZm9udFdlaWdodDogMzAwLFxuICBwYWRkaW5nUmlnaHQ6ICczMHB4JyxcbiAgbWFyZ2luQm90dG9tOiBlcnJvciAmJiAnOHB4JyxcbiAgJyY6aW52YWxpZCwgb3B0aW9uOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLlJFRCxcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXInOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzYwfWAsXG4gICAgfSxcbiAgICAnJjpmb2N1cywgJjphY3RpdmUnOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5CTFVFfWAsXG4gICAgfSxcbiAgfSksXG59KTtcblxuY29uc3QgZmlsdGVyU2VsZWN0UHJvcHMgPSAocHJvcHM6IFNlbGVjdFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7bGFiZWwsIGNoaWxkcmVuLCBlcnJvciwgaGVscGVyVGV4dCwgLi4ucHJvcHN9OiBTZWxlY3RQcm9wcykgPT4ge1xuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e3tcbiAgICAgICAgbWFyZ2luQm90dG9tOiBwcm9wcy5tYXJrSW52YWxpZCA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICB9fVxuICAgID5cbiAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgIDxJbnB1dExhYmVsIGh0bWxGb3I9e3Byb3BzLmlkfSBpc1JlcXVpcmVkPXtwcm9wcy5yZXF1aXJlZH0gbWFya0ludmFsaWQ9e3Byb3BzLm1hcmtJbnZhbGlkfT5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvSW5wdXRMYWJlbD5cbiAgICAgICl9XG5cbiAgICAgIDxzZWxlY3QgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBzZWxlY3RTdHlsZSh0aGVtZSwgcHJvcHMsIGhhc0Vycm9yKX0gey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX0+XG4gICAgICAgIDxvcHRpb24gZGlzYWJsZWQgc2VsZWN0ZWQgaGlkZGVuPlxuICAgICAgICAgIC0gUGxlYXNlIHNlbGVjdCAtXG4gICAgICAgIDwvb3B0aW9uPlxuXG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvc2VsZWN0PlxuXG4gICAgICB7IWhhc0Vycm9yICYmIGhlbHBlclRleHQgJiYgKFxuICAgICAgICA8cCBjc3M9e3tmb250U2l6ZTogJzEycHgnLCBmb250V2VpZ2h0OiA0MDAsIGNvbG9yOiBDT0xPUl9WMi5HUkFZXzgwLCBtYXJnaW5Ub3A6IDh9fT57aGVscGVyVGV4dH08L3A+XG4gICAgICApfVxuXG4gICAgICB7ZXJyb3J9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuIl19 */")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Select;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc09NIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7Q09MT1JfVjJ9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHMsIGlubGluZVNWR30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge2lucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IFJlYWN0LCB7UmVhY3RFbGVtZW50LCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBJbnB1dExhYmVsIGZyb20gJy4vSW5wdXRMYWJlbCc7XG5cbnR5cGUgT3B0aW9uID0ge1xuICB2YWx1ZTogc3RyaW5nIHwgbnVtYmVyO1xuICBsYWJlbDogc3RyaW5nO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBTZWxlY3RQcm9wcyB7XG4gIGlkOiBzdHJpbmc7XG4gIG9uQ2hhbmdlOiAoc2VsZWN0ZWRPcHRpb246IHN0cmluZyB8IG51bWJlcikgPT4gdm9pZDtcbiAgZGF0YVVpZU5hbWU6IHN0cmluZztcbiAgb3B0aW9uczogT3B0aW9uW107XG4gIHZhbHVlPzogT3B0aW9uIHwgbnVsbDtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG4gIGVycm9yPzogUmVhY3RFbGVtZW50O1xufVxuXG5jb25zdCBBcnJvd0Rvd24gPSAodGhlbWU6IFRoZW1lKSA9PiBgXG4gICAgPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxNlwiIGhlaWdodD1cIjE2XCIgdmlld0JveD1cIjAgMCAxNiAxNlwiPlxuICAgICAgICA8cGF0aCBmaWxsPVwiJHt0aGVtZS5nZW5lcmFsLmNvbG9yfVwiIGZpbGwtcnVsZT1cImV2ZW5vZGRcIiBjbGlwLXJ1bGU9XCJldmVub2RkXCIgZD1cIk03Ljk5OTYzIDEyLjU3MTFMMTUuNjU2NSA0LjkxNDIxTDE0LjI0MjMgMy41TDcuOTk5NjMgOS43NDI2NEwxLjc1Njk5IDMuNUwwLjM0Mjc3MyA0LjkxNDIxTDcuOTk5NjMgMTIuNTcxMVpcIi8+XG4gICAgPC9zdmc+XG5gO1xuXG5leHBvcnQgY29uc3Qgc2VsZWN0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzLCBlcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHtkaXNhYmxlZCA9IGZhbHNlLCBtYXJrSW52YWxpZCwgLi4ucHJvcHN9LFxuICBlcnJvciA9IGZhbHNlLFxuKSA9PiAoe1xuICAuLi5pbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyksXG4gICcmOi1tb3otZm9jdXNyaW5nJzoge1xuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIHRleHRTaGFkb3c6ICcwIDAgMCAjMDAwJyxcbiAgfSxcbiAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLkdSQVksXG4gIH0sXG4gIGFwcGVhcmFuY2U6ICdub25lJyxcbiAgYmFja2dyb3VuZDogZGlzYWJsZWRcbiAgICA/IGAke3RoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYFxuICAgIDogYCR7dGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYCxcbiAgYm94U2hhZG93OiBtYXJrSW52YWxpZCA/IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5SRUR9YCA6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzQwfWAsXG4gIGN1cnNvcjogZGlzYWJsZWQgPyAnbm9ybWFsJyA6ICdwb2ludGVyJyxcbiAgZm9udFNpemU6ICcxNnB4JyxcbiAgZm9udFdlaWdodDogMzAwLFxuICBwYWRkaW5nUmlnaHQ6ICczMHB4JyxcbiAgdGV4dEFsaWduOiAnbGVmdCcsXG4gIG1hcmdpbkJvdHRvbTogZXJyb3IgJiYgJzhweCcsXG4gICcmOmludmFsaWQsIG9wdGlvbjpmaXJzdC1vZi10eXBlJzoge1xuICAgIGNvbG9yOiBDT0xPUl9WMi5SRUQsXG4gIH0sXG4gIC4uLighZGlzYWJsZWQgJiYge1xuICAgICcmOmhvdmVyJzoge1xuICAgICAgYm94U2hhZG93OiBgMCAwIDAgMXB4ICR7Q09MT1JfVjIuR1JBWV82MH1gLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMsICY6YWN0aXZlJzoge1xuICAgICAgYm94U2hhZG93OiBgMCAwIDAgMXB4ICR7Q09MT1JfVjIuQkxVRX1gLFxuICAgIH0sXG4gIH0pLFxufSk7XG5cbmNvbnN0IGRyb3Bkb3duU3R5bGVzID0gKHRoZW1lOiBUaGVtZSwgaXNEcm9wZG93bk9wZW46IGJvb2xlYW4pOiBDU1NPYmplY3QgPT4gKHtcbiAgaGVpZ2h0OiBpc0Ryb3Bkb3duT3BlbiA/ICdhdXRvJyA6IDAsXG4gIHZpc2liaWxpdHk6IGlzRHJvcGRvd25PcGVuID8gJ3Zpc2libGUnIDogJ2hpZGRlbicsXG4gIG1hcmdpbjogJzNweCAwIDAnLFxuICBwYWRkaW5nOiAwLFxuICBib3JkZXJSYWRpdXM6ICcxMHB4JyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7Q09MT1JfVjIuQkxVRX1gLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgdG9wOiAnMTAwJScsXG4gIGxlZnQ6IDAsXG4gIHdpZHRoOiAnMTAwJScsXG4gIHpJbmRleDogOSxcbn0pO1xuXG5jb25zdCBkcm9wZG93bk9wdGlvblN0eWxlcyA9ICh0aGVtZTogVGhlbWUsIGlzU2VsZWN0ZWQ6IGJvb2xlYW4pOiBDU1NPYmplY3QgPT4gKHtcbiAgYmFja2dyb3VuZDogaXNTZWxlY3RlZCA/IENPTE9SX1YyLkJMVUUgOiBDT0xPUl9WMi5XSElURSxcbiAgbGlzdFN0eWxlOiAnbm9uZScsXG4gIHBhZGRpbmc6ICcxMHB4IDIwcHggMTRweCcsXG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgbGV0dGVyU3BhY2luZzogJzAuMDVweCcsXG4gIGNvbG9yOiBpc1NlbGVjdGVkID8gQ09MT1JfVjIuV0hJVEUgOiBDT0xPUl9WMi5CTEFDSyxcbiAgJyY6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBib3JkZXJSYWRpdXM6ICcxMHB4IDEwcHggMCAwJyxcbiAgfSxcbiAgJyY6bGFzdC1vZi10eXBlJzoge1xuICAgIGJvcmRlclJhZGl1czogJzAgMCAxMHB4IDEwcHgnLFxuICB9LFxuICAnJjpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7Q09MT1JfVjIuR1JBWV80MH1gLFxuICB9LFxuICAnJjpob3ZlciwgJjphY3RpdmUsICY6Zm9jdXMnOiB7XG4gICAgYmFja2dyb3VuZDogQ09MT1JfVjIuQkxVRSxcbiAgICBib3JkZXJDb2xvcjogQ09MT1JfVjIuQkxVRSxcbiAgICBjb2xvcjogQ09MT1JfVjIuV0hJVEUsXG4gIH0sXG59KTtcblxuY29uc3QgZmlsdGVyU2VsZWN0UHJvcHMgPSBwcm9wcyA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuY29uc3QgcGxhY2Vob2xkZXJUZXh0ID0gJy0gUGxlYXNlIHNlbGVjdCAtJztcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7XG4gIGlkLFxuICBsYWJlbCxcbiAgZXJyb3IsXG4gIGhlbHBlclRleHQsXG4gIG9wdGlvbnMgPSBbXSxcbiAgdmFsdWUgPSBudWxsLFxuICBvbkNoYW5nZSxcbiAgcmVxdWlyZWQsXG4gIG1hcmtJbnZhbGlkLFxuICBkYXRhVWllTmFtZSxcbiAgLi4ucHJvcHNcbn06IFNlbGVjdFByb3BzKSA9PiB7XG4gIGNvbnN0IHNlbGVjdENvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IFtpc0Ryb3Bkb3duT3Blbiwgc2V0SXNEcm9wZG93bk9wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbc2VsZWN0ZWRPcHRpb24sIHNldFNlbGVjdGVkT3B0aW9uXSA9IHVzZVN0YXRlPG51bWJlciB8IG51bGw+KCgpID0+ICh2YWx1ZSA/IG9wdGlvbnMuaW5kZXhPZih2YWx1ZSkgOiBudWxsKSk7XG5cbiAgY29uc3Qgb25Ub2dnbGVEcm9wZG93biA9ICgpID0+IHNldElzRHJvcGRvd25PcGVuKHByZXZTdGF0ZSA9PiAhcHJldlN0YXRlKTtcblxuICBjb25zdCBvbk9wdGlvblNlbGVjdCA9IChpZHg6IG51bWJlcikgPT4ge1xuICAgIHNldFNlbGVjdGVkT3B0aW9uKGlkeCk7XG4gICAgb25DaGFuZ2Uob3B0aW9uc1tpZHhdLnZhbHVlKTtcbiAgfTtcblxuICBjb25zdCBvbk9wdGlvbkNoYW5nZSA9IChpZHg6IG51bWJlcikgPT4ge1xuICAgIG9uT3B0aW9uU2VsZWN0KGlkeCk7XG4gICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUxpc3RLZXlEb3duID0gZSA9PiB7XG4gICAgc3dpdGNoIChlLmtleSkge1xuICAgICAgY2FzZSAnRXNjYXBlJzpcbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBzZXRJc0Ryb3Bkb3duT3BlbihmYWxzZSk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dVcCc6XG4gICAgICBjYXNlICdBcnJvd0xlZnQnOlxuICAgICAgICBpZiAoIWlzRHJvcGRvd25PcGVuKSB7XG4gICAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4odHJ1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIG9uT3B0aW9uU2VsZWN0KHNlbGVjdGVkT3B0aW9uIC0gMSA+PSAwID8gc2VsZWN0ZWRPcHRpb24gLSAxIDogb3B0aW9ucy5sZW5ndGggLSAxKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdBcnJvd0Rvd24nOlxuICAgICAgY2FzZSAnQXJyb3dSaWdodCc6XG4gICAgICAgIGlmICghaXNEcm9wZG93bk9wZW4pIHtcbiAgICAgICAgICBzZXRJc0Ryb3Bkb3duT3Blbih0cnVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgaWYgKHNlbGVjdGVkT3B0aW9uID09PSBudWxsKSB7XG4gICAgICAgICAgb25PcHRpb25TZWxlY3QoMCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgb25PcHRpb25TZWxlY3Qoc2VsZWN0ZWRPcHRpb24gPT09IG9wdGlvbnMubGVuZ3RoIC0gMSA/IDAgOiBzZWxlY3RlZE9wdGlvbiArIDEpO1xuICAgICAgICB9XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSBpbmRleCA9PiBlID0+IHtcbiAgICBzd2l0Y2ggKGUua2V5KSB7XG4gICAgICBjYXNlICcgJzpcbiAgICAgIGNhc2UgJ1NwYWNlQmFyJzpcbiAgICAgIGNhc2UgJ0VudGVyJzpcbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBvbk9wdGlvbkNoYW5nZShpbmRleCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhc0Vycm9yID0gISFlcnJvcjtcblxuICBjb25zdCBoYXNTZWxlY3RlZE9wdGlvbiA9IG9wdGlvbnMgJiYgISFvcHRpb25zW3NlbGVjdGVkT3B0aW9uXTtcblxuICBjb25zdCBoYW5kbGVPdXRzaWRlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICBpZiAoc2VsZWN0Q29udGFpbmVyUmVmLmN1cnJlbnQgJiYgIXNlbGVjdENvbnRhaW5lclJlZi5jdXJyZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSkge1xuICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgIH1cbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZU91dHNpZGVDbGljayk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlT3V0c2lkZUNsaWNrKTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e3tcbiAgICAgICAgbWFyZ2luQm90dG9tOiBtYXJrSW52YWxpZCA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICB9fVxuICAgICAgZGF0YS11aWUtbmFtZT17ZGF0YVVpZU5hbWV9XG4gICAgICByZWY9e3NlbGVjdENvbnRhaW5lclJlZn1cbiAgICA+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8SW5wdXRMYWJlbCBodG1sRm9yPXtpZH0gaXNSZXF1aXJlZD17cmVxdWlyZWR9IG1hcmtJbnZhbGlkPXttYXJrSW52YWxpZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0lucHV0TGFiZWw+XG4gICAgICApfVxuXG4gICAgICA8ZGl2IGNzcz17e3Bvc2l0aW9uOiAncmVsYXRpdmUnfX0+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBhcmlhLWFjdGl2ZWRlc2NlbmRhbnQ9e2hhc1NlbGVjdGVkT3B0aW9uID8gb3B0aW9uc1tzZWxlY3RlZE9wdGlvbl0ubGFiZWwgOiAnJ31cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0Ryb3Bkb3duT3Blbn1cbiAgICAgICAgICBhcmlhLWhhc3BvcHVwPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgb25DbGljaz17b25Ub2dnbGVEcm9wZG93bn1cbiAgICAgICAgICBvbktleURvd249e2hhbmRsZUxpc3RLZXlEb3dufVxuICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gc2VsZWN0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX1cbiAgICAgICAgICBkYXRhLXVpZS1uYW1lPXtkYXRhVWllTmFtZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtoYXNTZWxlY3RlZE9wdGlvbiA/IG9wdGlvbnNbc2VsZWN0ZWRPcHRpb25dLmxhYmVsIDogcGxhY2Vob2xkZXJUZXh0fVxuICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICA8dWxcbiAgICAgICAgICByb2xlPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICB0YWJJbmRleD17LTF9XG4gICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVMaXN0S2V5RG93bn1cbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGRyb3Bkb3duU3R5bGVzKHRoZW1lLCBpc0Ryb3Bkb3duT3Blbil9XG4gICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBkcm9wZG93bi0ke2RhdGFVaWVOYW1lfWAsXG4gICAgICAgICAgfSl9XG4gICAgICAgID5cbiAgICAgICAgICB7b3B0aW9ucy5tYXAoKG9wdGlvbiwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGlzU2VsZWN0ZWQgPSBzZWxlY3RlZE9wdGlvbiA9PSBpbmRleDtcblxuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPGxpXG4gICAgICAgICAgICAgICAga2V5PXtvcHRpb24udmFsdWV9XG4gICAgICAgICAgICAgICAgaWQ9e29wdGlvbi52YWx1ZS50b1N0cmluZygpfVxuICAgICAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxuICAgICAgICAgICAgICAgIGFyaWEtc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9ezB9XG4gICAgICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlEb3duKGluZGV4KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbk9wdGlvbkNoYW5nZShpbmRleCl9XG4gICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93bk9wdGlvblN0eWxlcyh0aGVtZSwgaXNTZWxlY3RlZCl9XG4gICAgICAgICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBvcHRpb24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgICAgICAgICAgJ2RhdGEtdWllLXZhbHVlJzogb3B0aW9uLmxhYmVsLFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge29wdGlvbi5sYWJlbH1cbiAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cblxuICAgICAgeyFoYXNFcnJvciAmJiBoZWxwZXJUZXh0ICYmIChcbiAgICAgICAgPHAgY3NzPXt7Zm9udFNpemU6ICcxMnB4JywgZm9udFdlaWdodDogNDAwLCBjb2xvcjogQ09MT1JfVjIuR1JBWV84MCwgbWFyZ2luVG9wOiA4fX0+e2hlbHBlclRleHR9PC9wPlxuICAgICAgKX1cblxuICAgICAge2Vycm9yfVxuICAgIDwvZGl2PlxuICApO1xufTtcbiJdfQ== */"),
+    "data-uie-name": dataUieName,
+    ref: selectContainerRef
   }, label && (0, _react.jsx)(_InputLabel["default"], {
-    htmlFor: props.id,
-    isRequired: props.required,
-    markInvalid: props.markInvalid
-  }, label), (0, _react.jsx)("select", (0, _extends2["default"])({
+    htmlFor: id,
+    isRequired: required,
+    markInvalid: markInvalid
+  }, label), (0, _react.jsx)("div", {
+    css: _ref3
+  }, (0, _react.jsx)("button", (0, _extends2["default"])({
+    type: "button",
+    "aria-activedescendant": hasSelectedOption ? options[selectedOption].label : '',
+    "aria-expanded": isDropdownOpen,
+    "aria-haspopup": "listbox",
+    "aria-labelledby": id,
+    id: id,
+    onClick: onToggleDropdown,
+    onKeyDown: handleListKeyDown,
     css: function css(theme) {
       return selectStyle(theme, props, hasError);
     }
-  }, filterSelectProps(props)), (0, _react.jsx)("option", {
-    disabled: true,
-    selected: true,
-    hidden: true
-  }, "- Please select -"), children), !hasError && helperText && (0, _react.jsx)("p", {
+  }, filterSelectProps(props), {
+    "data-uie-name": dataUieName
+  }), hasSelectedOption ? options[selectedOption].label : placeholderText), (0, _react.jsx)("ul", (0, _extends2["default"])({
+    role: "listbox",
+    "aria-labelledby": id,
+    tabIndex: -1,
+    onKeyDown: handleListKeyDown,
+    css: function css(theme) {
+      return dropdownStyles(theme, isDropdownOpen);
+    }
+  }, dataUieName && {
+    'data-uie-name': "dropdown-".concat(dataUieName)
+  }), options.map(function (option, index) {
+    var isSelected = selectedOption == index;
+    return (0, _react.jsx)("li", (0, _extends2["default"])({
+      key: option.value,
+      id: option.value.toString(),
+      role: "option",
+      "aria-selected": isSelected,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown(index),
+      onClick: function onClick() {
+        return onOptionChange(index);
+      },
+      css: function css(theme) {
+        return dropdownOptionStyles(theme, isSelected);
+      }
+    }, dataUieName && {
+      'data-uie-name': "option-".concat(dataUieName),
+      'data-uie-value': option.label
+    }), option.label);
+  }))), !hasError && helperText && (0, _react.jsx)("p", {
     css: /*#__PURE__*/(0, _react.css)({
       fontSize: '12px',
       fontWeight: 400,
       color: _Identity.COLOR_V2.GRAY_80,
       marginTop: 8
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Select;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkdXIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7Q09MT1JfVjJ9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHMsIGlubGluZVNWR30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0lucHV0UHJvcHMsIGlucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IFJlYWN0LCB7UmVhY3RFbGVtZW50fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICcuL0lucHV0TGFiZWwnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFNlbGVjdFByb3BzPFQgPSBIVE1MU2VsZWN0RWxlbWVudD4gZXh0ZW5kcyBJbnB1dFByb3BzPFQ+IHtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xuICBlcnJvcj86IFJlYWN0RWxlbWVudDtcbn1cblxuY29uc3QgQXJyb3dEb3duID0gKHRoZW1lOiBUaGVtZSkgPT4gYFxuICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxNlwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIj5cbiAgICAgICAgPHBhdGggZmlsbD1cIiR7dGhlbWUuZ2VuZXJhbC5jb2xvcn1cIiBmaWxsLXJ1bGU9XCJldmVub2RkXCIgY2xpcC1ydWxlPVwiZXZlbm9kZFwiIGQ9XCJNNy45OTk2MyAxMi41NzExTDE1LjY1NjUgNC45MTQyMUwxNC4yNDIzIDMuNUw3Ljk5OTYzIDkuNzQyNjRMMS43NTY5OSAzLjVMMC4zNDI3NzMgNC45MTQyMUw3Ljk5OTYzIDEyLjU3MTFaXCIvPlxuICAgIDwvc3ZnPlxuYDtcbmV4cG9ydCBjb25zdCBzZWxlY3RTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgcHJvcHM6IFNlbGVjdFByb3BzPFQ+LCBlcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHtkaXNhYmxlZCA9IGZhbHNlLCBtYXJrSW52YWxpZCwgLi4ucHJvcHN9LFxuICBlcnJvciA9IGZhbHNlLFxuKSA9PiAoe1xuICAuLi5pbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyksXG4gICcmOi1tb3otZm9jdXNyaW5nJzoge1xuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIHRleHRTaGFkb3c6ICcwIDAgMCAjMDAwJyxcbiAgfSxcbiAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLkdSQVksXG4gIH0sXG4gIGFwcGVhcmFuY2U6ICdub25lJyxcbiAgYmFja2dyb3VuZDogZGlzYWJsZWRcbiAgICA/IGAke3RoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYFxuICAgIDogYCR7dGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYCxcbiAgYm94U2hhZG93OiBtYXJrSW52YWxpZCA/IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5SRUR9YCA6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzQwfWAsXG4gIGN1cnNvcjogZGlzYWJsZWQgPyAnbm9ybWFsJyA6ICdwb2ludGVyJyxcbiAgZm9udFNpemU6ICcxNnB4JyxcbiAgZm9udFdlaWdodDogMzAwLFxuICBwYWRkaW5nUmlnaHQ6ICczMHB4JyxcbiAgbWFyZ2luQm90dG9tOiBlcnJvciAmJiAnOHB4JyxcbiAgJyY6aW52YWxpZCwgb3B0aW9uOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLlJFRCxcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXInOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzYwfWAsXG4gICAgfSxcbiAgICAnJjpmb2N1cywgJjphY3RpdmUnOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5CTFVFfWAsXG4gICAgfSxcbiAgfSksXG59KTtcblxuY29uc3QgZmlsdGVyU2VsZWN0UHJvcHMgPSAocHJvcHM6IFNlbGVjdFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7bGFiZWwsIGNoaWxkcmVuLCBlcnJvciwgaGVscGVyVGV4dCwgLi4ucHJvcHN9OiBTZWxlY3RQcm9wcykgPT4ge1xuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e3tcbiAgICAgICAgbWFyZ2luQm90dG9tOiBwcm9wcy5tYXJrSW52YWxpZCA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICB9fVxuICAgID5cbiAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgIDxJbnB1dExhYmVsIGh0bWxGb3I9e3Byb3BzLmlkfSBpc1JlcXVpcmVkPXtwcm9wcy5yZXF1aXJlZH0gbWFya0ludmFsaWQ9e3Byb3BzLm1hcmtJbnZhbGlkfT5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvSW5wdXRMYWJlbD5cbiAgICAgICl9XG5cbiAgICAgIDxzZWxlY3QgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBzZWxlY3RTdHlsZSh0aGVtZSwgcHJvcHMsIGhhc0Vycm9yKX0gey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX0+XG4gICAgICAgIDxvcHRpb24gZGlzYWJsZWQgc2VsZWN0ZWQgaGlkZGVuPlxuICAgICAgICAgIC0gUGxlYXNlIHNlbGVjdCAtXG4gICAgICAgIDwvb3B0aW9uPlxuXG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvc2VsZWN0PlxuXG4gICAgICB7IWhhc0Vycm9yICYmIGhlbHBlclRleHQgJiYgKFxuICAgICAgICA8cCBjc3M9e3tmb250U2l6ZTogJzEycHgnLCBmb250V2VpZ2h0OiA0MDAsIGNvbG9yOiBDT0xPUl9WMi5HUkFZXzgwLCBtYXJnaW5Ub3A6IDh9fT57aGVscGVyVGV4dH08L3A+XG4gICAgICApfVxuXG4gICAgICB7ZXJyb3J9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuIl19 */")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Select;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMFNXIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7Q09MT1JfVjJ9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHMsIGlubGluZVNWR30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge2lucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IFJlYWN0LCB7UmVhY3RFbGVtZW50LCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBJbnB1dExhYmVsIGZyb20gJy4vSW5wdXRMYWJlbCc7XG5cbnR5cGUgT3B0aW9uID0ge1xuICB2YWx1ZTogc3RyaW5nIHwgbnVtYmVyO1xuICBsYWJlbDogc3RyaW5nO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBTZWxlY3RQcm9wcyB7XG4gIGlkOiBzdHJpbmc7XG4gIG9uQ2hhbmdlOiAoc2VsZWN0ZWRPcHRpb246IHN0cmluZyB8IG51bWJlcikgPT4gdm9pZDtcbiAgZGF0YVVpZU5hbWU6IHN0cmluZztcbiAgb3B0aW9uczogT3B0aW9uW107XG4gIHZhbHVlPzogT3B0aW9uIHwgbnVsbDtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG4gIGVycm9yPzogUmVhY3RFbGVtZW50O1xufVxuXG5jb25zdCBBcnJvd0Rvd24gPSAodGhlbWU6IFRoZW1lKSA9PiBgXG4gICAgPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxNlwiIGhlaWdodD1cIjE2XCIgdmlld0JveD1cIjAgMCAxNiAxNlwiPlxuICAgICAgICA8cGF0aCBmaWxsPVwiJHt0aGVtZS5nZW5lcmFsLmNvbG9yfVwiIGZpbGwtcnVsZT1cImV2ZW5vZGRcIiBjbGlwLXJ1bGU9XCJldmVub2RkXCIgZD1cIk03Ljk5OTYzIDEyLjU3MTFMMTUuNjU2NSA0LjkxNDIxTDE0LjI0MjMgMy41TDcuOTk5NjMgOS43NDI2NEwxLjc1Njk5IDMuNUwwLjM0Mjc3MyA0LjkxNDIxTDcuOTk5NjMgMTIuNTcxMVpcIi8+XG4gICAgPC9zdmc+XG5gO1xuXG5leHBvcnQgY29uc3Qgc2VsZWN0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzLCBlcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHtkaXNhYmxlZCA9IGZhbHNlLCBtYXJrSW52YWxpZCwgLi4ucHJvcHN9LFxuICBlcnJvciA9IGZhbHNlLFxuKSA9PiAoe1xuICAuLi5pbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyksXG4gICcmOi1tb3otZm9jdXNyaW5nJzoge1xuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIHRleHRTaGFkb3c6ICcwIDAgMCAjMDAwJyxcbiAgfSxcbiAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLkdSQVksXG4gIH0sXG4gIGFwcGVhcmFuY2U6ICdub25lJyxcbiAgYmFja2dyb3VuZDogZGlzYWJsZWRcbiAgICA/IGAke3RoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYFxuICAgIDogYCR7dGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYCxcbiAgYm94U2hhZG93OiBtYXJrSW52YWxpZCA/IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5SRUR9YCA6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzQwfWAsXG4gIGN1cnNvcjogZGlzYWJsZWQgPyAnbm9ybWFsJyA6ICdwb2ludGVyJyxcbiAgZm9udFNpemU6ICcxNnB4JyxcbiAgZm9udFdlaWdodDogMzAwLFxuICBwYWRkaW5nUmlnaHQ6ICczMHB4JyxcbiAgdGV4dEFsaWduOiAnbGVmdCcsXG4gIG1hcmdpbkJvdHRvbTogZXJyb3IgJiYgJzhweCcsXG4gICcmOmludmFsaWQsIG9wdGlvbjpmaXJzdC1vZi10eXBlJzoge1xuICAgIGNvbG9yOiBDT0xPUl9WMi5SRUQsXG4gIH0sXG4gIC4uLighZGlzYWJsZWQgJiYge1xuICAgICcmOmhvdmVyJzoge1xuICAgICAgYm94U2hhZG93OiBgMCAwIDAgMXB4ICR7Q09MT1JfVjIuR1JBWV82MH1gLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMsICY6YWN0aXZlJzoge1xuICAgICAgYm94U2hhZG93OiBgMCAwIDAgMXB4ICR7Q09MT1JfVjIuQkxVRX1gLFxuICAgIH0sXG4gIH0pLFxufSk7XG5cbmNvbnN0IGRyb3Bkb3duU3R5bGVzID0gKHRoZW1lOiBUaGVtZSwgaXNEcm9wZG93bk9wZW46IGJvb2xlYW4pOiBDU1NPYmplY3QgPT4gKHtcbiAgaGVpZ2h0OiBpc0Ryb3Bkb3duT3BlbiA/ICdhdXRvJyA6IDAsXG4gIHZpc2liaWxpdHk6IGlzRHJvcGRvd25PcGVuID8gJ3Zpc2libGUnIDogJ2hpZGRlbicsXG4gIG1hcmdpbjogJzNweCAwIDAnLFxuICBwYWRkaW5nOiAwLFxuICBib3JkZXJSYWRpdXM6ICcxMHB4JyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7Q09MT1JfVjIuQkxVRX1gLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgdG9wOiAnMTAwJScsXG4gIGxlZnQ6IDAsXG4gIHdpZHRoOiAnMTAwJScsXG4gIHpJbmRleDogOSxcbn0pO1xuXG5jb25zdCBkcm9wZG93bk9wdGlvblN0eWxlcyA9ICh0aGVtZTogVGhlbWUsIGlzU2VsZWN0ZWQ6IGJvb2xlYW4pOiBDU1NPYmplY3QgPT4gKHtcbiAgYmFja2dyb3VuZDogaXNTZWxlY3RlZCA/IENPTE9SX1YyLkJMVUUgOiBDT0xPUl9WMi5XSElURSxcbiAgbGlzdFN0eWxlOiAnbm9uZScsXG4gIHBhZGRpbmc6ICcxMHB4IDIwcHggMTRweCcsXG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgbGV0dGVyU3BhY2luZzogJzAuMDVweCcsXG4gIGNvbG9yOiBpc1NlbGVjdGVkID8gQ09MT1JfVjIuV0hJVEUgOiBDT0xPUl9WMi5CTEFDSyxcbiAgJyY6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBib3JkZXJSYWRpdXM6ICcxMHB4IDEwcHggMCAwJyxcbiAgfSxcbiAgJyY6bGFzdC1vZi10eXBlJzoge1xuICAgIGJvcmRlclJhZGl1czogJzAgMCAxMHB4IDEwcHgnLFxuICB9LFxuICAnJjpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7Q09MT1JfVjIuR1JBWV80MH1gLFxuICB9LFxuICAnJjpob3ZlciwgJjphY3RpdmUsICY6Zm9jdXMnOiB7XG4gICAgYmFja2dyb3VuZDogQ09MT1JfVjIuQkxVRSxcbiAgICBib3JkZXJDb2xvcjogQ09MT1JfVjIuQkxVRSxcbiAgICBjb2xvcjogQ09MT1JfVjIuV0hJVEUsXG4gIH0sXG59KTtcblxuY29uc3QgZmlsdGVyU2VsZWN0UHJvcHMgPSBwcm9wcyA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuY29uc3QgcGxhY2Vob2xkZXJUZXh0ID0gJy0gUGxlYXNlIHNlbGVjdCAtJztcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7XG4gIGlkLFxuICBsYWJlbCxcbiAgZXJyb3IsXG4gIGhlbHBlclRleHQsXG4gIG9wdGlvbnMgPSBbXSxcbiAgdmFsdWUgPSBudWxsLFxuICBvbkNoYW5nZSxcbiAgcmVxdWlyZWQsXG4gIG1hcmtJbnZhbGlkLFxuICBkYXRhVWllTmFtZSxcbiAgLi4ucHJvcHNcbn06IFNlbGVjdFByb3BzKSA9PiB7XG4gIGNvbnN0IHNlbGVjdENvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IFtpc0Ryb3Bkb3duT3Blbiwgc2V0SXNEcm9wZG93bk9wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbc2VsZWN0ZWRPcHRpb24sIHNldFNlbGVjdGVkT3B0aW9uXSA9IHVzZVN0YXRlPG51bWJlciB8IG51bGw+KCgpID0+ICh2YWx1ZSA/IG9wdGlvbnMuaW5kZXhPZih2YWx1ZSkgOiBudWxsKSk7XG5cbiAgY29uc3Qgb25Ub2dnbGVEcm9wZG93biA9ICgpID0+IHNldElzRHJvcGRvd25PcGVuKHByZXZTdGF0ZSA9PiAhcHJldlN0YXRlKTtcblxuICBjb25zdCBvbk9wdGlvblNlbGVjdCA9IChpZHg6IG51bWJlcikgPT4ge1xuICAgIHNldFNlbGVjdGVkT3B0aW9uKGlkeCk7XG4gICAgb25DaGFuZ2Uob3B0aW9uc1tpZHhdLnZhbHVlKTtcbiAgfTtcblxuICBjb25zdCBvbk9wdGlvbkNoYW5nZSA9IChpZHg6IG51bWJlcikgPT4ge1xuICAgIG9uT3B0aW9uU2VsZWN0KGlkeCk7XG4gICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUxpc3RLZXlEb3duID0gZSA9PiB7XG4gICAgc3dpdGNoIChlLmtleSkge1xuICAgICAgY2FzZSAnRXNjYXBlJzpcbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBzZXRJc0Ryb3Bkb3duT3BlbihmYWxzZSk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dVcCc6XG4gICAgICBjYXNlICdBcnJvd0xlZnQnOlxuICAgICAgICBpZiAoIWlzRHJvcGRvd25PcGVuKSB7XG4gICAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4odHJ1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIG9uT3B0aW9uU2VsZWN0KHNlbGVjdGVkT3B0aW9uIC0gMSA+PSAwID8gc2VsZWN0ZWRPcHRpb24gLSAxIDogb3B0aW9ucy5sZW5ndGggLSAxKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdBcnJvd0Rvd24nOlxuICAgICAgY2FzZSAnQXJyb3dSaWdodCc6XG4gICAgICAgIGlmICghaXNEcm9wZG93bk9wZW4pIHtcbiAgICAgICAgICBzZXRJc0Ryb3Bkb3duT3Blbih0cnVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgaWYgKHNlbGVjdGVkT3B0aW9uID09PSBudWxsKSB7XG4gICAgICAgICAgb25PcHRpb25TZWxlY3QoMCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgb25PcHRpb25TZWxlY3Qoc2VsZWN0ZWRPcHRpb24gPT09IG9wdGlvbnMubGVuZ3RoIC0gMSA/IDAgOiBzZWxlY3RlZE9wdGlvbiArIDEpO1xuICAgICAgICB9XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSBpbmRleCA9PiBlID0+IHtcbiAgICBzd2l0Y2ggKGUua2V5KSB7XG4gICAgICBjYXNlICcgJzpcbiAgICAgIGNhc2UgJ1NwYWNlQmFyJzpcbiAgICAgIGNhc2UgJ0VudGVyJzpcbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBvbk9wdGlvbkNoYW5nZShpbmRleCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhc0Vycm9yID0gISFlcnJvcjtcblxuICBjb25zdCBoYXNTZWxlY3RlZE9wdGlvbiA9IG9wdGlvbnMgJiYgISFvcHRpb25zW3NlbGVjdGVkT3B0aW9uXTtcblxuICBjb25zdCBoYW5kbGVPdXRzaWRlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICBpZiAoc2VsZWN0Q29udGFpbmVyUmVmLmN1cnJlbnQgJiYgIXNlbGVjdENvbnRhaW5lclJlZi5jdXJyZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSkge1xuICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgIH1cbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZU91dHNpZGVDbGljayk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlT3V0c2lkZUNsaWNrKTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e3tcbiAgICAgICAgbWFyZ2luQm90dG9tOiBtYXJrSW52YWxpZCA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICB9fVxuICAgICAgZGF0YS11aWUtbmFtZT17ZGF0YVVpZU5hbWV9XG4gICAgICByZWY9e3NlbGVjdENvbnRhaW5lclJlZn1cbiAgICA+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8SW5wdXRMYWJlbCBodG1sRm9yPXtpZH0gaXNSZXF1aXJlZD17cmVxdWlyZWR9IG1hcmtJbnZhbGlkPXttYXJrSW52YWxpZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0lucHV0TGFiZWw+XG4gICAgICApfVxuXG4gICAgICA8ZGl2IGNzcz17e3Bvc2l0aW9uOiAncmVsYXRpdmUnfX0+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBhcmlhLWFjdGl2ZWRlc2NlbmRhbnQ9e2hhc1NlbGVjdGVkT3B0aW9uID8gb3B0aW9uc1tzZWxlY3RlZE9wdGlvbl0ubGFiZWwgOiAnJ31cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0Ryb3Bkb3duT3Blbn1cbiAgICAgICAgICBhcmlhLWhhc3BvcHVwPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgb25DbGljaz17b25Ub2dnbGVEcm9wZG93bn1cbiAgICAgICAgICBvbktleURvd249e2hhbmRsZUxpc3RLZXlEb3dufVxuICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gc2VsZWN0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX1cbiAgICAgICAgICBkYXRhLXVpZS1uYW1lPXtkYXRhVWllTmFtZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtoYXNTZWxlY3RlZE9wdGlvbiA/IG9wdGlvbnNbc2VsZWN0ZWRPcHRpb25dLmxhYmVsIDogcGxhY2Vob2xkZXJUZXh0fVxuICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICA8dWxcbiAgICAgICAgICByb2xlPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICB0YWJJbmRleD17LTF9XG4gICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVMaXN0S2V5RG93bn1cbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGRyb3Bkb3duU3R5bGVzKHRoZW1lLCBpc0Ryb3Bkb3duT3Blbil9XG4gICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBkcm9wZG93bi0ke2RhdGFVaWVOYW1lfWAsXG4gICAgICAgICAgfSl9XG4gICAgICAgID5cbiAgICAgICAgICB7b3B0aW9ucy5tYXAoKG9wdGlvbiwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGlzU2VsZWN0ZWQgPSBzZWxlY3RlZE9wdGlvbiA9PSBpbmRleDtcblxuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPGxpXG4gICAgICAgICAgICAgICAga2V5PXtvcHRpb24udmFsdWV9XG4gICAgICAgICAgICAgICAgaWQ9e29wdGlvbi52YWx1ZS50b1N0cmluZygpfVxuICAgICAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxuICAgICAgICAgICAgICAgIGFyaWEtc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9ezB9XG4gICAgICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlEb3duKGluZGV4KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbk9wdGlvbkNoYW5nZShpbmRleCl9XG4gICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93bk9wdGlvblN0eWxlcyh0aGVtZSwgaXNTZWxlY3RlZCl9XG4gICAgICAgICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBvcHRpb24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgICAgICAgICAgJ2RhdGEtdWllLXZhbHVlJzogb3B0aW9uLmxhYmVsLFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge29wdGlvbi5sYWJlbH1cbiAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cblxuICAgICAgeyFoYXNFcnJvciAmJiBoZWxwZXJUZXh0ICYmIChcbiAgICAgICAgPHAgY3NzPXt7Zm9udFNpemU6ICcxMnB4JywgZm9udFdlaWdodDogNDAwLCBjb2xvcjogQ09MT1JfVjIuR1JBWV84MCwgbWFyZ2luVG9wOiA4fX0+e2hlbHBlclRleHR9PC9wPlxuICAgICAgKX1cblxuICAgICAge2Vycm9yfVxuICAgIDwvZGl2PlxuICApO1xufTtcbiJdfQ== */")
   }, helperText), error);
 };
 

package/src/Form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Select.tsx"],"names":["ArrowDown","theme","general","color","selectStyle","disabled","markInvalid","props","error","textShadow","COLOR_V2","GRAY","appearance","background","Input","backgroundColorDisabled","backgroundColor","boxShadow","RED","GRAY_40","cursor","fontSize","fontWeight","paddingRight","marginBottom","GRAY_60","BLUE","filterSelectProps","Select","label","children","helperText","hasError","id","required","GRAY_80","marginTop"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR_V2} from '../Identity';\nimport type {Theme} from '../Layout';\nimport {filterProps, inlineSVG} from '../util';\nimport {InputProps, inputStyle} from './Input';\nimport React, {ReactElement} from 'react';\nimport InputLabel from './InputLabel';\n\nexport interface SelectProps<T = HTMLSelectElement> extends InputProps<T> {\n  helperText?: string;\n  label?: string;\n  disabled?: boolean;\n  markInvalid?: boolean;\n  error?: ReactElement;\n}\n\nconst ArrowDown = (theme: Theme) => `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n        <path fill=\"${theme.general.color}\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z\"/>\n    </svg>\n`;\nexport const selectStyle: <T>(theme: Theme, props: SelectProps<T>, error?: boolean) => CSSObject = (\n  theme,\n  {disabled = false, markInvalid, ...props},\n  error = false,\n) => ({\n  ...inputStyle(theme, props),\n  '&:-moz-focusring': {\n    color: 'transparent',\n    textShadow: '0 0 0 #000',\n  },\n  '&:disabled': {\n    color: COLOR_V2.GRAY,\n  },\n  appearance: 'none',\n  background: disabled\n    ? `${theme.Input.backgroundColorDisabled} center right 16px no-repeat url(\"${inlineSVG(ArrowDown(theme))}\")`\n    : `${theme.Input.backgroundColor} center right 16px no-repeat url(\"${inlineSVG(ArrowDown(theme))}\")`,\n  boxShadow: markInvalid ? `0 0 0 1px ${COLOR_V2.RED}` : `0 0 0 1px ${COLOR_V2.GRAY_40}`,\n  cursor: disabled ? 'normal' : 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  paddingRight: '30px',\n  marginBottom: error && '8px',\n  '&:invalid, option:first-of-type': {\n    color: COLOR_V2.RED,\n  },\n  ...(!disabled && {\n    '&:hover': {\n      boxShadow: `0 0 0 1px ${COLOR_V2.GRAY_60}`,\n    },\n    '&:focus, &:active': {\n      boxShadow: `0 0 0 1px ${COLOR_V2.BLUE}`,\n    },\n  }),\n});\n\nconst filterSelectProps = (props: SelectProps) => filterProps(props, ['markInvalid']);\n\nexport const Select = ({label, children, error, helperText, ...props}: SelectProps) => {\n  const hasError = !!error;\n\n  return (\n    <div\n      css={{\n        marginBottom: props.markInvalid ? '2px' : '20px',\n        '&:focus-within label': {\n          color: COLOR_V2.BLUE,\n        },\n      }}\n    >\n      {label && (\n        <InputLabel htmlFor={props.id} isRequired={props.required} markInvalid={props.markInvalid}>\n          {label}\n        </InputLabel>\n      )}\n\n      <select css={(theme: Theme) => selectStyle(theme, props, hasError)} {...filterSelectProps(props)}>\n        <option disabled selected hidden>\n          - Please select -\n        </option>\n\n        {children}\n      </select>\n\n      {!hasError && helperText && (\n        <p css={{fontSize: '12px', fontWeight: 400, color: COLOR_V2.GRAY_80, marginTop: 8}}>{helperText}</p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}
+{"version":3,"sources":["Select.tsx"],"names":["ArrowDown","theme","general","color","selectStyle","disabled","markInvalid","props","error","textShadow","COLOR_V2","GRAY","appearance","background","Input","backgroundColorDisabled","backgroundColor","boxShadow","RED","GRAY_40","cursor","fontSize","fontWeight","paddingRight","textAlign","marginBottom","GRAY_60","BLUE","dropdownStyles","isDropdownOpen","height","visibility","margin","padding","borderRadius","border","position","top","left","width","zIndex","dropdownOptionStyles","isSelected","WHITE","listStyle","lineHeight","letterSpacing","BLACK","borderBottom","borderColor","filterSelectProps","placeholderText","Select","id","label","helperText","options","value","onChange","required","dataUieName","selectContainerRef","setIsDropdownOpen","indexOf","selectedOption","setSelectedOption","onToggleDropdown","prevState","onOptionSelect","idx","onOptionChange","handleListKeyDown","e","key","preventDefault","length","handleKeyDown","index","hasError","hasSelectedOption","handleOutsideClick","event","current","contains","target","window","addEventListener","removeEventListener","map","option","toString","GRAY_80","marginTop"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR_V2} from '../Identity';\nimport type {Theme} from '../Layout';\nimport {filterProps, inlineSVG} from '../util';\nimport {inputStyle} from './Input';\nimport React, {ReactElement, useEffect, useRef, useState} from 'react';\nimport InputLabel from './InputLabel';\n\ntype Option = {\n  value: string | number;\n  label: string;\n};\n\nexport interface SelectProps {\n  id: string;\n  onChange: (selectedOption: string | number) => void;\n  dataUieName: string;\n  options: Option[];\n  value?: Option | null;\n  helperText?: string;\n  label?: string;\n  disabled?: boolean;\n  required?: boolean;\n  markInvalid?: boolean;\n  error?: ReactElement;\n}\n\nconst ArrowDown = (theme: Theme) => `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n        <path fill=\"${theme.general.color}\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z\"/>\n    </svg>\n`;\n\nexport const selectStyle: <T>(theme: Theme, props, error?: boolean) => CSSObject = (\n  theme,\n  {disabled = false, markInvalid, ...props},\n  error = false,\n) => ({\n  ...inputStyle(theme, props),\n  '&:-moz-focusring': {\n    color: 'transparent',\n    textShadow: '0 0 0 #000',\n  },\n  '&:disabled': {\n    color: COLOR_V2.GRAY,\n  },\n  appearance: 'none',\n  background: disabled\n    ? `${theme.Input.backgroundColorDisabled} center right 16px no-repeat url(\"${inlineSVG(ArrowDown(theme))}\")`\n    : `${theme.Input.backgroundColor} center right 16px no-repeat url(\"${inlineSVG(ArrowDown(theme))}\")`,\n  boxShadow: markInvalid ? `0 0 0 1px ${COLOR_V2.RED}` : `0 0 0 1px ${COLOR_V2.GRAY_40}`,\n  cursor: disabled ? 'normal' : 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  paddingRight: '30px',\n  textAlign: 'left',\n  marginBottom: error && '8px',\n  '&:invalid, option:first-of-type': {\n    color: COLOR_V2.RED,\n  },\n  ...(!disabled && {\n    '&:hover': {\n      boxShadow: `0 0 0 1px ${COLOR_V2.GRAY_60}`,\n    },\n    '&:focus, &:active': {\n      boxShadow: `0 0 0 1px ${COLOR_V2.BLUE}`,\n    },\n  }),\n});\n\nconst dropdownStyles = (theme: Theme, isDropdownOpen: boolean): CSSObject => ({\n  height: isDropdownOpen ? 'auto' : 0,\n  visibility: isDropdownOpen ? 'visible' : 'hidden',\n  margin: '3px 0 0',\n  padding: 0,\n  borderRadius: '10px',\n  border: `1px solid ${COLOR_V2.BLUE}`,\n  position: 'absolute',\n  top: '100%',\n  left: 0,\n  width: '100%',\n  zIndex: 9,\n});\n\nconst dropdownOptionStyles = (theme: Theme, isSelected: boolean): CSSObject => ({\n  background: isSelected ? COLOR_V2.BLUE : COLOR_V2.WHITE,\n  listStyle: 'none',\n  padding: '10px 20px 14px',\n  cursor: 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  lineHeight: '24px',\n  letterSpacing: '0.05px',\n  color: isSelected ? COLOR_V2.WHITE : COLOR_V2.BLACK,\n  '&:first-of-type': {\n    borderRadius: '10px 10px 0 0',\n  },\n  '&:last-of-type': {\n    borderRadius: '0 0 10px 10px',\n  },\n  '&:not(:last-of-type)': {\n    borderBottom: `1px solid ${COLOR_V2.GRAY_40}`,\n  },\n  '&:hover, &:active, &:focus': {\n    background: COLOR_V2.BLUE,\n    borderColor: COLOR_V2.BLUE,\n    color: COLOR_V2.WHITE,\n  },\n});\n\nconst filterSelectProps = props => filterProps(props, ['markInvalid']);\n\nconst placeholderText = '- Please select -';\n\nexport const Select = ({\n  id,\n  label,\n  error,\n  helperText,\n  options = [],\n  value = null,\n  onChange,\n  required,\n  markInvalid,\n  dataUieName,\n  ...props\n}: SelectProps) => {\n  const selectContainerRef = useRef<HTMLDivElement>(null);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [selectedOption, setSelectedOption] = useState<number | null>(() => (value ? options.indexOf(value) : null));\n\n  const onToggleDropdown = () => setIsDropdownOpen(prevState => !prevState);\n\n  const onOptionSelect = (idx: number) => {\n    setSelectedOption(idx);\n    onChange(options[idx].value);\n  };\n\n  const onOptionChange = (idx: number) => {\n    onOptionSelect(idx);\n    setIsDropdownOpen(false);\n  };\n\n  const handleListKeyDown = e => {\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault();\n        setIsDropdownOpen(false);\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n\n        e.preventDefault();\n        onOptionSelect(selectedOption - 1 >= 0 ? selectedOption - 1 : options.length - 1);\n        break;\n      case 'ArrowDown':\n      case 'ArrowRight':\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n\n        e.preventDefault();\n        if (selectedOption === null) {\n          onOptionSelect(0);\n        } else {\n          onOptionSelect(selectedOption === options.length - 1 ? 0 : selectedOption + 1);\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleKeyDown = index => e => {\n    switch (e.key) {\n      case ' ':\n      case 'SpaceBar':\n      case 'Enter':\n        e.preventDefault();\n        onOptionChange(index);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const hasError = !!error;\n\n  const hasSelectedOption = options && !!options[selectedOption];\n\n  const handleOutsideClick = (event: MouseEvent) => {\n    if (selectContainerRef.current && !selectContainerRef.current.contains(event.target as Node)) {\n      setIsDropdownOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('click', handleOutsideClick);\n\n    return () => {\n      window.removeEventListener('click', handleOutsideClick);\n    };\n  }, []);\n\n  return (\n    <div\n      css={{\n        marginBottom: markInvalid ? '2px' : '20px',\n        '&:focus-within label': {\n          color: COLOR_V2.BLUE,\n        },\n      }}\n      data-uie-name={dataUieName}\n      ref={selectContainerRef}\n    >\n      {label && (\n        <InputLabel htmlFor={id} isRequired={required} markInvalid={markInvalid}>\n          {label}\n        </InputLabel>\n      )}\n\n      <div css={{position: 'relative'}}>\n        <button\n          type=\"button\"\n          aria-activedescendant={hasSelectedOption ? options[selectedOption].label : ''}\n          aria-expanded={isDropdownOpen}\n          aria-haspopup=\"listbox\"\n          aria-labelledby={id}\n          id={id}\n          onClick={onToggleDropdown}\n          onKeyDown={handleListKeyDown}\n          css={(theme: Theme) => selectStyle(theme, props, hasError)}\n          {...filterSelectProps(props)}\n          data-uie-name={dataUieName}\n        >\n          {hasSelectedOption ? options[selectedOption].label : placeholderText}\n        </button>\n\n        <ul\n          role=\"listbox\"\n          aria-labelledby={id}\n          tabIndex={-1}\n          onKeyDown={handleListKeyDown}\n          css={(theme: Theme) => dropdownStyles(theme, isDropdownOpen)}\n          {...(dataUieName && {\n            'data-uie-name': `dropdown-${dataUieName}`,\n          })}\n        >\n          {options.map((option, index) => {\n            const isSelected = selectedOption == index;\n\n            return (\n              <li\n                key={option.value}\n                id={option.value.toString()}\n                role=\"option\"\n                aria-selected={isSelected}\n                tabIndex={0}\n                onKeyDown={handleKeyDown(index)}\n                onClick={() => onOptionChange(index)}\n                css={(theme: Theme) => dropdownOptionStyles(theme, isSelected)}\n                {...(dataUieName && {\n                  'data-uie-name': `option-${dataUieName}`,\n                  'data-uie-value': option.label,\n                })}\n              >\n                {option.label}\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n\n      {!hasError && helperText && (\n        <p css={{fontSize: '12px', fontWeight: 400, color: COLOR_V2.GRAY_80, marginTop: 8}}>{helperText}</p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}

package/src/Form/Select.md

@@ -4,17 +4,25 @@ Demo:
 import {Fragment} from 'react';
 import {Columns, Column, ErrorMessage, Select} from '@wireapp/react-ui-kit';
 
+const options = [
+  {value: '1', label: 'Option 1'},
+  {value: '2', label: 'Option 2'},
+  {value: '3', label: 'Option 3'},
+];
+
 <Fragment>
   <Columns>
     <Column>Select</Column>
 
     <Column>
-      <Select label="Select" id="firstSelect">
-        <option>a</option>
-        <option>b</option>
-        <option>c</option>
-        <option>d</option>
-      </Select>
+      <Select
+        label="Select"
+        id="firstSelect"
+        options={options}
+        value={options[0]}
+        onChange={selectedOption => console.log('Selected option', selectedOption)}
+        dataUieName="select"
+      />
     </Column>
   </Columns>
 
@@ -22,9 +30,14 @@ import {Columns, Column, ErrorMessage, Select} from '@wireapp/react-ui-kit';
     <Column>Disabled Select</Column>
 
     <Column>
-      <Select disabled label="Disabled select" id="disabledSelect">
-        <option>a</option>
-      </Select>
+      <Select
+        disabled
+        label="Disabled select"
+        id="disabledSelect"
+        options={options}
+        onChange={selectedOption => console.log('Selected option', selectedOption)}
+        dataUieName="disabled-select"
+      />
     </Column>
   </Columns>
 
@@ -32,9 +45,14 @@ import {Columns, Column, ErrorMessage, Select} from '@wireapp/react-ui-kit';
     <Column>Required Select</Column>
 
     <Column>
-      <Select label="Required select" required id="requiredSelect">
-        <option>a</option>
-      </Select>
+      <Select
+        label="Required select"
+        required
+        id="requiredSelect"
+        options={options}
+        onChange={selectedOption => console.log('Selected option', selectedOption)}
+        dataUieName="required-select"
+      />
     </Column>
   </Columns>
 
@@ -48,9 +66,10 @@ import {Columns, Column, ErrorMessage, Select} from '@wireapp/react-ui-kit';
         id="invalidSelect"
         required
         error={<ErrorMessage>Error message</ErrorMessage>}
-      >
-        <option>a</option>
-      </Select>
+        options={options}
+        onChange={selectedOption => console.log('Selected option', selectedOption)}
+        dataUieName="invalid-select"
+      />
     </Column>
   </Columns>
 </Fragment>;