@pedidopago/ui 1.1.3 → 1.2.0

package/dist/components/Rating/components/GradientIcon/utils/allIcons.d.ts

@@ -1,9 +1,9 @@
-export declare const allIcons: {
-    name: string;
-    width: number;
-    height: number;
-    viewBox: string;
-    html: string;
-    xmlns: string;
-}[];
+export declare const allIcons: {
+    name: string;
+    width: number;
+    height: number;
+    viewBox: string;
+    html: string;
+    xmlns: string;
+}[];
 //# sourceMappingURL=allIcons.d.ts.map

package/dist/components/Rating/components/RatingWithMultipleValues/RatingWithMultipleValues.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { RatingWithMultipleValuesProps } from './types';
-export declare function RatingWithMultipleValues({ disabled, iconsQuantity, defaultValue, readOnly, name, onChange, size, primaryColor, secondaryColor, strokeColor, onChangeValue, precision, value, }: RatingWithMultipleValuesProps): JSX.Element;
+/// <reference types="react" />
+import { RatingWithMultipleValuesProps } from './types';
+export declare function RatingWithMultipleValues({ disabled, iconsQuantity, defaultValue, readOnly, name, onChange, size, primaryColor, secondaryColor, strokeColor, onChangeValue, precision, value, }: RatingWithMultipleValuesProps): JSX.Element;
 //# sourceMappingURL=RatingWithMultipleValues.d.ts.map

package/dist/components/Rating/components/RatingWithMultipleValues/styles.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { IStyleProps } from '../../types';
-export declare const RatingWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const RatingWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Rating/components/RatingWithMultipleValues/types.d.ts

@@ -1,17 +1,17 @@
-import { GradientIconName } from '../GradientIcon/types';
-export interface RatingWithMultipleValuesProps {
-    disabled: boolean;
-    iconsQuantity: number;
-    defaultValue: number;
-    readOnly: boolean;
-    size: string | number;
-    primaryColor?: string;
-    secondaryColor?: string;
-    strokeColor?: string;
-    name: GradientIconName;
-    precision: '1' | '0.5';
-    value: number;
-    onChange?: (value: number) => void;
-    onChangeValue?: (value: number) => void;
-}
+import { GradientIconName } from '../GradientIcon/types';
+export interface RatingWithMultipleValuesProps {
+    disabled: boolean;
+    iconsQuantity: number;
+    defaultValue: number;
+    readOnly: boolean;
+    size: string | number;
+    primaryColor?: string;
+    secondaryColor?: string;
+    strokeColor?: string;
+    name: GradientIconName;
+    precision: '1' | '0.5';
+    value: number;
+    onChange?: (value: number) => void;
+    onChangeValue?: (value: number) => void;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/RatingWithSingleValue.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { RatingWithSingleValueProps } from './types';
-export declare function RatingWithSingleValue({ disabled, size, onChangeValue, primaryColor, secondaryColor, }: RatingWithSingleValueProps): JSX.Element;
+/// <reference types="react" />
+import { RatingWithSingleValueProps } from './types';
+export declare function RatingWithSingleValue({ disabled, size, onChangeValue, primaryColor, secondaryColor, }: RatingWithSingleValueProps): JSX.Element;
 //# sourceMappingURL=RatingWithSingleValue.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/icons/0.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare const _default: import("react").ReactSVGElement;
-export default _default;
+/// <reference types="react" />
+declare const _default: import("react").ReactSVGElement;
+export default _default;
 //# sourceMappingURL=0.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/icons/1.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare const _default: import("react").ReactSVGElement;
-export default _default;
+/// <reference types="react" />
+declare const _default: import("react").ReactSVGElement;
+export default _default;
 //# sourceMappingURL=1.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/icons/2.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare const _default: import("react").ReactSVGElement;
-export default _default;
+/// <reference types="react" />
+declare const _default: import("react").ReactSVGElement;
+export default _default;
 //# sourceMappingURL=2.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/icons/3.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare const _default: import("react").ReactSVGElement;
-export default _default;
+/// <reference types="react" />
+declare const _default: import("react").ReactSVGElement;
+export default _default;
 //# sourceMappingURL=3.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/icons/4.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare const _default: import("react").ReactSVGElement;
-export default _default;
+/// <reference types="react" />
+declare const _default: import("react").ReactSVGElement;
+export default _default;
 //# sourceMappingURL=4.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/icons/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-export declare const icons: {
-    id: number;
-    icon: import("react").ReactSVGElement;
-    selected: boolean;
-}[];
+/// <reference types="react" />
+export declare const icons: {
+    id: number;
+    icon: import("react").ReactSVGElement;
+    selected: boolean;
+}[];
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/styles.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { IStyleProps } from '../../types';
-export declare const RatingWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const RatingWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Rating/components/RatingWithSingleValue/types.d.ts

@@ -1,11 +1,11 @@
-export interface RatingWithSingleValueProps {
-    disabled: boolean;
-    primaryColor?: string;
-    secondaryColor?: string;
-    strokeColor?: string;
-    readOnly: boolean;
-    size: string | number;
-    onChange?: (value: number) => void;
-    onChangeValue?: (value: number) => void;
-}
+export interface RatingWithSingleValueProps {
+    disabled: boolean;
+    primaryColor?: string;
+    secondaryColor?: string;
+    strokeColor?: string;
+    readOnly: boolean;
+    size: string | number;
+    onChange?: (value: number) => void;
+    onChangeValue?: (value: number) => void;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Rating/index.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IInputProps } from './types';
-declare const RatingComponent: FC<IInputProps>;
-export default RatingComponent;
+import { FC } from 'react';
+import { IInputProps } from './types';
+declare const RatingComponent: FC<IInputProps>;
+export default RatingComponent;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Rating/rating.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 //# sourceMappingURL=rating.test.d.ts.map

package/dist/components/Rating/types.d.ts

@@ -1,29 +1,29 @@
-import { ExtendThemeProps } from '../../shared/theme';
-import { GradientIconName } from './components/GradientIcon/types';
-export declare type SizeType = 'small' | 'medium' | 'large';
-export declare type IStyleProps = {
-    primaryColor?: string;
-    secondaryColor?: string;
-    theme?: ExtendThemeProps;
-    disabled?: boolean;
-    active?: boolean;
-    size?: SizeType;
-    isActive?: boolean;
-    SwitchType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-};
-export declare type IInputProps = {
-    name: GradientIconName;
-    value?: number;
-    defaultValue?: number;
-    iconsQuantity?: number;
-    precision?: '1' | '0.5';
-    size?: SizeType;
-    readOnly?: boolean;
-    disabled?: boolean;
-    primaryColor?: string;
-    secondaryColor?: string;
-    strokeColor?: string;
-    onChangeValue?: (value: number) => void;
-    onChange?: (value: number) => void;
-};
+import { ExtendThemeProps } from '../../shared/theme';
+import { GradientIconName } from './components/GradientIcon/types';
+export declare type SizeType = 'small' | 'medium' | 'large';
+export declare type IStyleProps = {
+    primaryColor?: string;
+    secondaryColor?: string;
+    theme?: ExtendThemeProps;
+    disabled?: boolean;
+    active?: boolean;
+    size?: SizeType;
+    isActive?: boolean;
+    SwitchType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+};
+export declare type IInputProps = {
+    name: GradientIconName;
+    value?: number;
+    defaultValue?: number;
+    iconsQuantity?: number;
+    precision?: '1' | '0.5';
+    size?: SizeType;
+    readOnly?: boolean;
+    disabled?: boolean;
+    primaryColor?: string;
+    secondaryColor?: string;
+    strokeColor?: string;
+    onChangeValue?: (value: number) => void;
+    onChange?: (value: number) => void;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Rating/utils/IconObjectsController.d.ts

@@ -1,10 +1,10 @@
-import { fillStateType } from '../components/GradientIcon/types';
-export interface IIconsObject {
-    id: number;
-    fillState: 'filled' | 'halfFilled' | 'empty';
-}
-export declare function createIconObjects(stars: number, defaultValue?: number): IIconsObject[];
-export declare function makeIconEmptyById(icons: IIconsObject[], id: number): IIconsObject[];
-export declare function controlIconsFillState(icons: IIconsObject[], id: number, fillState: fillStateType): IIconsObject[];
-export declare function convertFillStateToValue(icons: IIconsObject[]): number;
+import { fillStateType } from '../components/GradientIcon/types';
+export interface IIconsObject {
+    id: number;
+    fillState: 'filled' | 'halfFilled' | 'empty';
+}
+export declare function createIconObjects(stars: number, defaultValue?: number): IIconsObject[];
+export declare function makeIconEmptyById(icons: IIconsObject[], id: number): IIconsObject[];
+export declare function controlIconsFillState(icons: IIconsObject[], id: number, fillState: fillStateType): IIconsObject[];
+export declare function convertFillStateToValue(icons: IIconsObject[]): number;
 //# sourceMappingURL=IconObjectsController.d.ts.map

package/dist/components/Rating/utils/svgDataTratamentFunction.d.ts

@@ -1,10 +1,10 @@
-import { MouseEvent } from 'react';
-import { fillStateType } from '../components/GradientIcon/types';
-interface svgDataTratamentFunctionReturn {
-    fillState: fillStateType;
-    isMouseLeave: boolean;
-    isMouseMove: boolean;
-}
-export declare function svgDataTratamentFunction(e: MouseEvent<SVGSVGElement>, precision: '1' | '0.5'): svgDataTratamentFunctionReturn;
-export {};
+import { MouseEvent } from 'react';
+import { fillStateType } from '../components/GradientIcon/types';
+interface svgDataTratamentFunctionReturn {
+    fillState: fillStateType;
+    isMouseLeave: boolean;
+    isMouseMove: boolean;
+}
+export declare function svgDataTratamentFunction(e: MouseEvent<SVGSVGElement>, precision: '1' | '0.5'): svgDataTratamentFunctionReturn;
+export {};
 //# sourceMappingURL=svgDataTratamentFunction.d.ts.map

package/dist/components/Select/index.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'react';
+import { SelectProps } from './types';
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+export default Select;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAStC,QAAA,MAAM,MAAM,kJAqGX,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/dist/components/Select/index.js

@@ -0,0 +1,181 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var S = _interopRequireWildcard(require("./styles"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Modal = require("../Modal");
+
+var _List = _interopRequireDefault(require("../List"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["label", "options", "alert", "helperText"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4;
+
+  var label = _ref.label,
+      options = _ref.options,
+      alert = _ref.alert,
+      helperText = _ref.helperText,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var containerRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      optionsMenuOpen = _useState2[0],
+      setOptionsMenuOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedOption = _useState4[0],
+      setSelectedOption = _useState4[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return inputRef.current;
+  });
+
+  function selectOption(option) {
+    if (inputRef.current) {
+      var _nativeInputValueSett;
+
+      var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+      nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(inputRef.current, options[option].value);
+      var event = new Event('input', {
+        bubbles: true
+      });
+      inputRef.current.dispatchEvent(event);
+    }
+
+    setSelectedOption(option);
+    setOptionsMenuOpen(false);
+  }
+
+  (0, _react.useEffect)(function () {
+    // Sets default value
+    if (rest.defaultValue) {
+      var defaultOptionIndex = options.findIndex(function (c) {
+        return c.value === rest.defaultValue;
+      });
+      if (defaultOptionIndex >= 0) selectOption(defaultOptionIndex);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(S.SelectContainer, {
+      ref: containerRef,
+      alert: alert,
+      disabled: !!rest.disabled,
+      tabIndex: rest.disabled ? -1 : 0,
+      onFocus: function onFocus() {
+        if (!rest.disabled) setOptionsMenuOpen(true);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "xxs",
+            variant: "span",
+            color: "inherit",
+            children: label
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          fontSize: "xs",
+          fontWeight: "500",
+          color: "inherit",
+          children: selectedOption === undefined ? '' : options[selectedOption].label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: "chevron-down"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              fontSize: "xxs",
+              variant: "span",
+              children: label
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              fontSize: "xxs",
+              variant: "span",
+              children: label
+            })
+          })
+        })]
+      }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        fontSize: "xxs",
+        children: helperText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
+        ref: inputRef,
+        tabIndex: -1
+      }, rest))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      open: optionsMenuOpen,
+      left: "".concat((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().left, "px"),
+      top: "".concat((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top, "px"),
+      anchorX: "left",
+      anchorY: "top",
+      offsetY: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().height, "px"),
+      maxWidth: "".concat((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().width, "px"),
+      hideOverlay: true,
+      onClose: function onClose() {
+        return setOptionsMenuOpen(false);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
+        children: options.map(function (option, i) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
+            item: true,
+            onClick: function onClick() {
+              return selectOption(i);
+            },
+            children: option.label
+          }, option.value);
+        })
+      })
+    })]
+  });
+});
+Select.displayName = 'Select';
+var _default = Select;
+exports.default = _default;

package/dist/components/Select/select.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=select.test.d.ts.map

package/dist/components/Select/select.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.test.d.ts","sourceRoot":"","sources":["../../../src/components/Select/select.test.tsx"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC"}

package/dist/components/Select/select.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+
+var _react = require("@testing-library/react");
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _ = _interopRequireDefault(require("."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  return _objectSpread({}, (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props))));
+};
+
+describe('Select', function () {
+  it('should render the select component', function () {
+    var _setup = setup({
+      label: 'Select',
+      options: [{
+        label: 'Option 1',
+        value: 'option-1'
+      }]
+    }),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should select an option', function () {
+    var container = setup({
+      label: 'Select',
+      options: [{
+        label: 'Option 1',
+        value: 'option-1'
+      }]
+    });
+    var option = container.getByText('Option 1');
+    var input = container.baseElement.querySelector('input');
+
+    _react.fireEvent.click(option);
+
+    expect(input === null || input === void 0 ? void 0 : input.value).toBe('option-1');
+  });
+});

package/dist/components/Select/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SelectContainerProps } from './types';
+export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SelectContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Select/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAoK1B,CAAC"}

package/dist/components/Select/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectContainer = void 0;
+
+var _react = require("@emotion/react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var SelectContainer = _styled.default.div(function (props) {
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n\n    width: 100%;\n\n    ", "\n\n    & > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n\n      border-radius: ", ";\n      padding: 0 20px;\n\n      width: 100%;\n      height: 56px;\n\n      position: relative;\n\n      cursor: pointer;\n\n      color: ", ";\n\n      transition: background-color ease;\n      transition-duration: ", ";\n\n      ", "\n\n      ", "\n\n      & > label {\n        position: absolute;\n        left: 20px;\n        top: -2px;\n        transform: translateY(-50%);\n\n        color: ", ";\n\n        transition: color ease;\n        transition-duration: ", ";\n      }\n\n      // Chevron Down icon\n      & > svg {\n        flex-shrink: 0;\n\n        transform: rotate(0deg);\n\n        color: ", ";\n\n        transition: transform ease;\n        transition-duration: ", ";\n      }\n\n      & > fieldset {\n        border: 2px solid;\n        border-color: ", ";\n        border-radius: ", ";\n        padding: 0 16px;\n\n        position: absolute;\n        left: 0px;\n        right: 0px;\n        top: 0px;\n        bottom: 0px;\n\n        pointer-events: none;\n\n        transition: border-color ease;\n        transition-duration: ", ";\n\n        &:last-of-type {\n          border-radius: calc(", " + 2px);\n          padding: 0 18px;\n\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          line-height: 2px;\n          user-select: none;\n          padding: 0 4px;\n\n          & > span {\n            color: transparent;\n          }\n        }\n      }\n    }\n\n    // Helper text\n    & > p {\n      margin: 8px 20px;\n\n      ", "\n    }\n\n    & > input {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:hover {\n        & > div {\n          color: ", ";\n\n          & > label {\n            color: ", ";\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n\n      &:focus {\n        & > div {\n          color: ", ";\n\n          & > svg {\n            transform: rotate(180deg);\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n            &:last-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n    "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background: ", "33;\n      "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background: ", ";\n        cursor: default;\n      "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.disabled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), props.theme.colors.neutral.neutral3));
+});
+
+exports.SelectContainer = SelectContainer;

package/dist/components/Select/types.d.ts

@@ -0,0 +1,16 @@
+export declare type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectProps {
+    label: string;
+    options: SelectOption[];
+    helperText?: string;
+    alert?: SelectAlertType;
+}
+export interface SelectContainerProps {
+    alert?: SelectAlertType;
+    disabled: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Select/types.js

@@ -0,0 +1 @@
+"use strict";