colibri-ui 0.7.24 → 0.7.26

package/esm/Select/index.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
+import { BaseInput, BasePlaceholder } from '../base/InputRoot/styles.js';
+import Dropdown from '../Dropdown/index.js';
+import Menu from '../Menu/index.js';
+import { StyledFormField, MenuWrapper, StyledBaseInputRoot, SelectIcon } from './styles.js';
+
+var Select = function Select(_a) {
+  var _b = _a.options,
+    options = _b === void 0 ? [] : _b,
+    value = _a.value,
+    zIndex = _a.zIndex,
+    label = _a.label,
+    hint = _a.hint,
+    error = _a.error,
+    placeholder = _a.placeholder,
+    disabled = _a.disabled,
+    _c = _a.listHeight,
+    listHeight = _c === void 0 ? 130 : _c,
+    _d = _a.fullWidth,
+    fullWidth = _d === void 0 ? false : _d,
+    onChange = _a.onChange;
+  var _e = useState(false),
+    isOpen = _e[0],
+    setIsOpen = _e[1];
+  var preparedOptions = useMemo(function () {
+    return options.map(function (_a) {
+      var lvalue = _a.value,
+        llabel = _a.label;
+      return {
+        value: lvalue,
+        label: llabel,
+        selected: value === lvalue
+      };
+    });
+  }, [value, options]);
+  var prepraredLabel = useMemo(function () {
+    var _a;
+    return (_a = preparedOptions.find(function (_a) {
+      var selected = _a.selected;
+      return selected;
+    })) === null || _a === void 0 ? void 0 : _a.label;
+  }, [preparedOptions]);
+  var handleSelect = useCallback(function (_a) {
+    var lvalue = _a.value;
+    onChange(lvalue);
+  }, [onChange]);
+  return jsx(StyledFormField, {
+    fullWidth: fullWidth,
+    label: label,
+    hint: hint,
+    error: error,
+    children: jsx(Dropdown, {
+      placement: "bottom-start",
+      onVisibleChange: setIsOpen,
+      trigger: ["click"],
+      zIndex: zIndex,
+      disabled: !!disabled,
+      overlay: jsx(MenuWrapper, {
+        listHeight: listHeight,
+        children: jsx(Menu, {
+          children: preparedOptions.map(function (option, i) {
+            return jsx(Menu.Item, {
+              onClick: function onClick() {
+                return handleSelect(option);
+              },
+              isSelected: option.selected,
+              children: option.label
+            }, "".concat(option.label, "-").concat(i));
+          })
+        })
+      }),
+      samewidth: true,
+      children: jsxs(StyledBaseInputRoot, {
+        error: error,
+        endIcon: jsx(SelectIcon, {
+          isOpen: isOpen
+        }),
+        disabled: !!disabled,
+        children: [jsx(BaseInput, {
+          children: prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : jsx(BasePlaceholder, {
+            children: placeholder
+          })
+        }), jsx("input", {
+          type: "hidden",
+          tabIndex: -1,
+          value: value
+        })]
+      })
+    })
+  });
+};
+
+export { Select as default };

package/esm/Select/index.props.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { FormFieldProps } from "../base/FormField/index.props";
+export interface IOption<T extends string | number> {
+    value: T;
+    label: ReactNode;
+}
+export interface SelectProps<T extends string | number> extends Omit<FormFieldProps, "children"> {
+    options: IOption<T>[];
+    value?: T;
+    zIndex?: number;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    fullWidth?: boolean;
+    listHeight?: number;
+}

package/esm/Select/styles.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const MenuWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    listHeight?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SelectIcon: import("@emotion/styled").StyledComponent<import("../Icons/index.props").Props & import("react").RefAttributes<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    isOpen: boolean;
+}, {}, {}>;
+export declare const StyledBaseInputRoot: import("@emotion/styled").StyledComponent<import("../base/InputRoot/index.props").InputProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledFormField: import("@emotion/styled").StyledComponent<import("../base/FormField/index.props").FormFieldProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    fullWidth?: boolean | undefined;
+}, {}, {}>;

package/esm/Select/styles.js

@@ -0,0 +1,48 @@
+import _styled from '@emotion/styled/base';
+import { __makeTemplateObject } from 'tslib';
+import Chevron from '../Icons/Chevron.js';
+import InputRoot from '../base/InputRoot/index.js';
+import FormField from '../base/FormField/index.js';
+
+var MenuWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1pym4mv3"
+} : {
+  target: "e1pym4mv3",
+  label: "MenuWrapper"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: 140px;\n  ", ";\n  overflow-y: auto;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IENoZXZyb24gZnJvbSBcIi4uL0ljb25zL0NoZXZyb25cIjtcbmltcG9ydCBJbnB1dFJvb3QgZnJvbSBcIi4uL2Jhc2UvSW5wdXRSb290XCI7XG5pbXBvcnQgRm9ybUZpZWxkIGZyb20gXCIuLi9iYXNlL0Zvcm1GaWVsZFwiO1xuZXhwb3J0IHZhciBNZW51V3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgbWF4LWhlaWdodDogMTQwcHg7XFxuICBcIiwgXCI7XFxuICBvdmVyZmxvdy15OiBhdXRvO1xcblwiXSwgW1wiXFxuICBtYXgtaGVpZ2h0OiAxNDBweDtcXG4gIFwiLCBcIjtcXG4gIG92ZXJmbG93LXk6IGF1dG87XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciBsaXN0SGVpZ2h0ID0gX2EubGlzdEhlaWdodDtcbiAgICByZXR1cm4gbGlzdEhlaWdodCAmJiBcIm1heC1oZWlnaHQ6IFwiLmNvbmNhdChsaXN0SGVpZ2h0LCBcInB4O1wiKTtcbn0pO1xuZXhwb3J0IHZhciBTZWxlY3RJY29uID0gc3R5bGVkKENoZXZyb24sIHtcbiAgICBzaG91bGRGb3J3YXJkUHJvcDogZnVuY3Rpb24gKHByb3ApIHsgcmV0dXJuICFbXCJpc09wZW5cIl0uaW5jbHVkZXMocHJvcCk7IH0sXG59KSh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBcIiwgXCI7XFxuXCJdLCBbXCJcXG4gIFwiLCBcIjtcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIGlzT3BlbiA9IF9hLmlzT3BlbjtcbiAgICByZXR1cm4gaXNPcGVuICYmIFwidHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKVwiO1xufSk7XG5leHBvcnQgdmFyIFN0eWxlZEJhc2VJbnB1dFJvb3QgPSBzdHlsZWQoSW5wdXRSb290KSh0ZW1wbGF0ZU9iamVjdF8zIHx8ICh0ZW1wbGF0ZU9iamVjdF8zID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBjdXJzb3I6IHBvaW50ZXI7XFxuXCJdLCBbXCJcXG4gIGN1cnNvcjogcG9pbnRlcjtcXG5cIl0pKSk7XG5leHBvcnQgdmFyIFN0eWxlZEZvcm1GaWVsZCA9IHN0eWxlZChGb3JtRmllbGQpKHRlbXBsYXRlT2JqZWN0XzQgfHwgKHRlbXBsYXRlT2JqZWN0XzQgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIFwiLCBcIjtcXG5cIl0sIFtcIlxcbiAgXCIsIFwiO1xcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgZnVsbFdpZHRoID0gX2EuZnVsbFdpZHRoO1xuICAgIHJldHVybiBmdWxsV2lkdGggJiYgXCJ3aWR0aDogMTAwJVwiO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMywgdGVtcGxhdGVPYmplY3RfNDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  max-height: 140px;\n  ", ";\n  overflow-y: auto;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IENoZXZyb24gZnJvbSBcIi4uL0ljb25zL0NoZXZyb25cIjtcbmltcG9ydCBJbnB1dFJvb3QgZnJvbSBcIi4uL2Jhc2UvSW5wdXRSb290XCI7XG5pbXBvcnQgRm9ybUZpZWxkIGZyb20gXCIuLi9iYXNlL0Zvcm1GaWVsZFwiO1xuZXhwb3J0IHZhciBNZW51V3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgbWF4LWhlaWdodDogMTQwcHg7XFxuICBcIiwgXCI7XFxuICBvdmVyZmxvdy15OiBhdXRvO1xcblwiXSwgW1wiXFxuICBtYXgtaGVpZ2h0OiAxNDBweDtcXG4gIFwiLCBcIjtcXG4gIG92ZXJmbG93LXk6IGF1dG87XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciBsaXN0SGVpZ2h0ID0gX2EubGlzdEhlaWdodDtcbiAgICByZXR1cm4gbGlzdEhlaWdodCAmJiBcIm1heC1oZWlnaHQ6IFwiLmNvbmNhdChsaXN0SGVpZ2h0LCBcInB4O1wiKTtcbn0pO1xuZXhwb3J0IHZhciBTZWxlY3RJY29uID0gc3R5bGVkKENoZXZyb24sIHtcbiAgICBzaG91bGRGb3J3YXJkUHJvcDogZnVuY3Rpb24gKHByb3ApIHsgcmV0dXJuICFbXCJpc09wZW5cIl0uaW5jbHVkZXMocHJvcCk7IH0sXG59KSh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBcIiwgXCI7XFxuXCJdLCBbXCJcXG4gIFwiLCBcIjtcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIGlzT3BlbiA9IF9hLmlzT3BlbjtcbiAgICByZXR1cm4gaXNPcGVuICYmIFwidHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKVwiO1xufSk7XG5leHBvcnQgdmFyIFN0eWxlZEJhc2VJbnB1dFJvb3QgPSBzdHlsZWQoSW5wdXRSb290KSh0ZW1wbGF0ZU9iamVjdF8zIHx8ICh0ZW1wbGF0ZU9iamVjdF8zID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBjdXJzb3I6IHBvaW50ZXI7XFxuXCJdLCBbXCJcXG4gIGN1cnNvcjogcG9pbnRlcjtcXG5cIl0pKSk7XG5leHBvcnQgdmFyIFN0eWxlZEZvcm1GaWVsZCA9IHN0eWxlZChGb3JtRmllbGQpKHRlbXBsYXRlT2JqZWN0XzQgfHwgKHRlbXBsYXRlT2JqZWN0XzQgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIFwiLCBcIjtcXG5cIl0sIFtcIlxcbiAgXCIsIFwiO1xcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgZnVsbFdpZHRoID0gX2EuZnVsbFdpZHRoO1xuICAgIHJldHVybiBmdWxsV2lkdGggJiYgXCJ3aWR0aDogMTAwJVwiO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMywgdGVtcGxhdGVPYmplY3RfNDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])), function (_a) {
+  var listHeight = _a.listHeight;
+  return listHeight && "max-height: ".concat(listHeight, "px;");
+});
+var SelectIcon = /*#__PURE__*/_styled(Chevron, process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !["isOpen"].includes(prop);
+  },
+  target: "e1pym4mv2"
+} : {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !["isOpen"].includes(prop);
+  },
+  target: "e1pym4mv2",
+  label: "SelectIcon"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IENoZXZyb24gZnJvbSBcIi4uL0ljb25zL0NoZXZyb25cIjtcbmltcG9ydCBJbnB1dFJvb3QgZnJvbSBcIi4uL2Jhc2UvSW5wdXRSb290XCI7XG5pbXBvcnQgRm9ybUZpZWxkIGZyb20gXCIuLi9iYXNlL0Zvcm1GaWVsZFwiO1xuZXhwb3J0IHZhciBNZW51V3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgbWF4LWhlaWdodDogMTQwcHg7XFxuICBcIiwgXCI7XFxuICBvdmVyZmxvdy15OiBhdXRvO1xcblwiXSwgW1wiXFxuICBtYXgtaGVpZ2h0OiAxNDBweDtcXG4gIFwiLCBcIjtcXG4gIG92ZXJmbG93LXk6IGF1dG87XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciBsaXN0SGVpZ2h0ID0gX2EubGlzdEhlaWdodDtcbiAgICByZXR1cm4gbGlzdEhlaWdodCAmJiBcIm1heC1oZWlnaHQ6IFwiLmNvbmNhdChsaXN0SGVpZ2h0LCBcInB4O1wiKTtcbn0pO1xuZXhwb3J0IHZhciBTZWxlY3RJY29uID0gc3R5bGVkKENoZXZyb24sIHtcbiAgICBzaG91bGRGb3J3YXJkUHJvcDogZnVuY3Rpb24gKHByb3ApIHsgcmV0dXJuICFbXCJpc09wZW5cIl0uaW5jbHVkZXMocHJvcCk7IH0sXG59KSh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBcIiwgXCI7XFxuXCJdLCBbXCJcXG4gIFwiLCBcIjtcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIGlzT3BlbiA9IF9hLmlzT3BlbjtcbiAgICByZXR1cm4gaXNPcGVuICYmIFwidHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKVwiO1xufSk7XG5leHBvcnQgdmFyIFN0eWxlZEJhc2VJbnB1dFJvb3QgPSBzdHlsZWQoSW5wdXRSb290KSh0ZW1wbGF0ZU9iamVjdF8zIHx8ICh0ZW1wbGF0ZU9iamVjdF8zID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBjdXJzb3I6IHBvaW50ZXI7XFxuXCJdLCBbXCJcXG4gIGN1cnNvcjogcG9pbnRlcjtcXG5cIl0pKSk7XG5leHBvcnQgdmFyIFN0eWxlZEZvcm1GaWVsZCA9IHN0eWxlZChGb3JtRmllbGQpKHRlbXBsYXRlT2JqZWN0XzQgfHwgKHRlbXBsYXRlT2JqZWN0XzQgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIFwiLCBcIjtcXG5cIl0sIFtcIlxcbiAgXCIsIFwiO1xcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgZnVsbFdpZHRoID0gX2EuZnVsbFdpZHRoO1xuICAgIHJldHVybiBmdWxsV2lkdGggJiYgXCJ3aWR0aDogMTAwJVwiO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMywgdGVtcGxhdGVPYmplY3RfNDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  ", ";\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IENoZXZyb24gZnJvbSBcIi4uL0ljb25zL0NoZXZyb25cIjtcbmltcG9ydCBJbnB1dFJvb3QgZnJvbSBcIi4uL2Jhc2UvSW5wdXRSb290XCI7XG5pbXBvcnQgRm9ybUZpZWxkIGZyb20gXCIuLi9iYXNlL0Zvcm1GaWVsZFwiO1xuZXhwb3J0IHZhciBNZW51V3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgbWF4LWhlaWdodDogMTQwcHg7XFxuICBcIiwgXCI7XFxuICBvdmVyZmxvdy15OiBhdXRvO1xcblwiXSwgW1wiXFxuICBtYXgtaGVpZ2h0OiAxNDBweDtcXG4gIFwiLCBcIjtcXG4gIG92ZXJmbG93LXk6IGF1dG87XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciBsaXN0SGVpZ2h0ID0gX2EubGlzdEhlaWdodDtcbiAgICByZXR1cm4gbGlzdEhlaWdodCAmJiBcIm1heC1oZWlnaHQ6IFwiLmNvbmNhdChsaXN0SGVpZ2h0LCBcInB4O1wiKTtcbn0pO1xuZXhwb3J0IHZhciBTZWxlY3RJY29uID0gc3R5bGVkKENoZXZyb24sIHtcbiAgICBzaG91bGRGb3J3YXJkUHJvcDogZnVuY3Rpb24gKHByb3ApIHsgcmV0dXJuICFbXCJpc09wZW5cIl0uaW5jbHVkZXMocHJvcCk7IH0sXG59KSh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBcIiwgXCI7XFxuXCJdLCBbXCJcXG4gIFwiLCBcIjtcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIGlzT3BlbiA9IF9hLmlzT3BlbjtcbiAgICByZXR1cm4gaXNPcGVuICYmIFwidHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKVwiO1xufSk7XG5leHBvcnQgdmFyIFN0eWxlZEJhc2VJbnB1dFJvb3QgPSBzdHlsZWQoSW5wdXRSb290KSh0ZW1wbGF0ZU9iamVjdF8zIHx8ICh0ZW1wbGF0ZU9iamVjdF8zID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBjdXJzb3I6IHBvaW50ZXI7XFxuXCJdLCBbXCJcXG4gIGN1cnNvcjogcG9pbnRlcjtcXG5cIl0pKSk7XG5leHBvcnQgdmFyIFN0eWxlZEZvcm1GaWVsZCA9IHN0eWxlZChGb3JtRmllbGQpKHRlbXBsYXRlT2JqZWN0XzQgfHwgKHRlbXBsYXRlT2JqZWN0XzQgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIFwiLCBcIjtcXG5cIl0sIFtcIlxcbiAgXCIsIFwiO1xcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgZnVsbFdpZHRoID0gX2EuZnVsbFdpZHRoO1xuICAgIHJldHVybiBmdWxsV2lkdGggJiYgXCJ3aWR0aDogMTAwJVwiO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMywgdGVtcGxhdGVPYmplY3RfNDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])), function (_a) {
+  var isOpen = _a.isOpen;
+  return isOpen && "transform: rotate(180deg)";
+});
+var StyledBaseInputRoot = /*#__PURE__*/_styled(InputRoot, process.env.NODE_ENV === "production" ? {
+  target: "e1pym4mv1"
+} : {
+  target: "e1pym4mv1",
+  label: "StyledBaseInputRoot"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlaUMiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IENoZXZyb24gZnJvbSBcIi4uL0ljb25zL0NoZXZyb25cIjtcbmltcG9ydCBJbnB1dFJvb3QgZnJvbSBcIi4uL2Jhc2UvSW5wdXRSb290XCI7XG5pbXBvcnQgRm9ybUZpZWxkIGZyb20gXCIuLi9iYXNlL0Zvcm1GaWVsZFwiO1xuZXhwb3J0IHZhciBNZW51V3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgbWF4LWhlaWdodDogMTQwcHg7XFxuICBcIiwgXCI7XFxuICBvdmVyZmxvdy15OiBhdXRvO1xcblwiXSwgW1wiXFxuICBtYXgtaGVpZ2h0OiAxNDBweDtcXG4gIFwiLCBcIjtcXG4gIG92ZXJmbG93LXk6IGF1dG87XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciBsaXN0SGVpZ2h0ID0gX2EubGlzdEhlaWdodDtcbiAgICByZXR1cm4gbGlzdEhlaWdodCAmJiBcIm1heC1oZWlnaHQ6IFwiLmNvbmNhdChsaXN0SGVpZ2h0LCBcInB4O1wiKTtcbn0pO1xuZXhwb3J0IHZhciBTZWxlY3RJY29uID0gc3R5bGVkKENoZXZyb24sIHtcbiAgICBzaG91bGRGb3J3YXJkUHJvcDogZnVuY3Rpb24gKHByb3ApIHsgcmV0dXJuICFbXCJpc09wZW5cIl0uaW5jbHVkZXMocHJvcCk7IH0sXG59KSh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBcIiwgXCI7XFxuXCJdLCBbXCJcXG4gIFwiLCBcIjtcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIGlzT3BlbiA9IF9hLmlzT3BlbjtcbiAgICByZXR1cm4gaXNPcGVuICYmIFwidHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKVwiO1xufSk7XG5leHBvcnQgdmFyIFN0eWxlZEJhc2VJbnB1dFJvb3QgPSBzdHlsZWQoSW5wdXRSb290KSh0ZW1wbGF0ZU9iamVjdF8zIHx8ICh0ZW1wbGF0ZU9iamVjdF8zID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBjdXJzb3I6IHBvaW50ZXI7XFxuXCJdLCBbXCJcXG4gIGN1cnNvcjogcG9pbnRlcjtcXG5cIl0pKSk7XG5leHBvcnQgdmFyIFN0eWxlZEZvcm1GaWVsZCA9IHN0eWxlZChGb3JtRmllbGQpKHRlbXBsYXRlT2JqZWN0XzQgfHwgKHRlbXBsYXRlT2JqZWN0XzQgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIFwiLCBcIjtcXG5cIl0sIFtcIlxcbiAgXCIsIFwiO1xcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgZnVsbFdpZHRoID0gX2EuZnVsbFdpZHRoO1xuICAgIHJldHVybiBmdWxsV2lkdGggJiYgXCJ3aWR0aDogMTAwJVwiO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMywgdGVtcGxhdGVPYmplY3RfNDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  cursor: pointer;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlaUMiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IENoZXZyb24gZnJvbSBcIi4uL0ljb25zL0NoZXZyb25cIjtcbmltcG9ydCBJbnB1dFJvb3QgZnJvbSBcIi4uL2Jhc2UvSW5wdXRSb290XCI7XG5pbXBvcnQgRm9ybUZpZWxkIGZyb20gXCIuLi9iYXNlL0Zvcm1GaWVsZFwiO1xuZXhwb3J0IHZhciBNZW51V3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgbWF4LWhlaWdodDogMTQwcHg7XFxuICBcIiwgXCI7XFxuICBvdmVyZmxvdy15OiBhdXRvO1xcblwiXSwgW1wiXFxuICBtYXgtaGVpZ2h0OiAxNDBweDtcXG4gIFwiLCBcIjtcXG4gIG92ZXJmbG93LXk6IGF1dG87XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciBsaXN0SGVpZ2h0ID0gX2EubGlzdEhlaWdodDtcbiAgICByZXR1cm4gbGlzdEhlaWdodCAmJiBcIm1heC1oZWlnaHQ6IFwiLmNvbmNhdChsaXN0SGVpZ2h0LCBcInB4O1wiKTtcbn0pO1xuZXhwb3J0IHZhciBTZWxlY3RJY29uID0gc3R5bGVkKENoZXZyb24sIHtcbiAgICBzaG91bGRGb3J3YXJkUHJvcDogZnVuY3Rpb24gKHByb3ApIHsgcmV0dXJuICFbXCJpc09wZW5cIl0uaW5jbHVkZXMocHJvcCk7IH0sXG59KSh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBcIiwgXCI7XFxuXCJdLCBbXCJcXG4gIFwiLCBcIjtcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIGlzT3BlbiA9IF9hLmlzT3BlbjtcbiAgICByZXR1cm4gaXNPcGVuICYmIFwidHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKVwiO1xufSk7XG5leHBvcnQgdmFyIFN0eWxlZEJhc2VJbnB1dFJvb3QgPSBzdHlsZWQoSW5wdXRSb290KSh0ZW1wbGF0ZU9iamVjdF8zIHx8ICh0ZW1wbGF0ZU9iamVjdF8zID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBjdXJzb3I6IHBvaW50ZXI7XFxuXCJdLCBbXCJcXG4gIGN1cnNvcjogcG9pbnRlcjtcXG5cIl0pKSk7XG5leHBvcnQgdmFyIFN0eWxlZEZvcm1GaWVsZCA9IHN0eWxlZChGb3JtRmllbGQpKHRlbXBsYXRlT2JqZWN0XzQgfHwgKHRlbXBsYXRlT2JqZWN0XzQgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIFwiLCBcIjtcXG5cIl0sIFtcIlxcbiAgXCIsIFwiO1xcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgZnVsbFdpZHRoID0gX2EuZnVsbFdpZHRoO1xuICAgIHJldHVybiBmdWxsV2lkdGggJiYgXCJ3aWR0aDogMTAwJVwiO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMywgdGVtcGxhdGVPYmplY3RfNDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])));
+var StyledFormField = /*#__PURE__*/_styled(FormField, process.env.NODE_ENV === "production" ? {
+  target: "e1pym4mv0"
+} : {
+  target: "e1pym4mv0",
+  label: "StyledFormField"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQjZCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IF9fbWFrZVRlbXBsYXRlT2JqZWN0IH0gZnJvbSBcInRzbGliXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBDaGV2cm9uIGZyb20gXCIuLi9JY29ucy9DaGV2cm9uXCI7XG5pbXBvcnQgSW5wdXRSb290IGZyb20gXCIuLi9iYXNlL0lucHV0Um9vdFwiO1xuaW1wb3J0IEZvcm1GaWVsZCBmcm9tIFwiLi4vYmFzZS9Gb3JtRmllbGRcIjtcbmV4cG9ydCB2YXIgTWVudVdyYXBwZXIgPSBzdHlsZWQuZGl2KHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIG1heC1oZWlnaHQ6IDE0MHB4O1xcbiAgXCIsIFwiO1xcbiAgb3ZlcmZsb3cteTogYXV0bztcXG5cIl0sIFtcIlxcbiAgbWF4LWhlaWdodDogMTQwcHg7XFxuICBcIiwgXCI7XFxuICBvdmVyZmxvdy15OiBhdXRvO1xcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgbGlzdEhlaWdodCA9IF9hLmxpc3RIZWlnaHQ7XG4gICAgcmV0dXJuIGxpc3RIZWlnaHQgJiYgXCJtYXgtaGVpZ2h0OiBcIi5jb25jYXQobGlzdEhlaWdodCwgXCJweDtcIik7XG59KTtcbmV4cG9ydCB2YXIgU2VsZWN0SWNvbiA9IHN0eWxlZChDaGV2cm9uLCB7XG4gICAgc2hvdWxkRm9yd2FyZFByb3A6IGZ1bmN0aW9uIChwcm9wKSB7IHJldHVybiAhW1wiaXNPcGVuXCJdLmluY2x1ZGVzKHByb3ApOyB9LFxufSkodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgXCIsIFwiO1xcblwiXSwgW1wiXFxuICBcIiwgXCI7XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciBpc09wZW4gPSBfYS5pc09wZW47XG4gICAgcmV0dXJuIGlzT3BlbiAmJiBcInRyYW5zZm9ybTogcm90YXRlKDE4MGRlZylcIjtcbn0pO1xuZXhwb3J0IHZhciBTdHlsZWRCYXNlSW5wdXRSb290ID0gc3R5bGVkKElucHV0Um9vdCkodGVtcGxhdGVPYmplY3RfMyB8fCAodGVtcGxhdGVPYmplY3RfMyA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgY3Vyc29yOiBwb2ludGVyO1xcblwiXSwgW1wiXFxuICBjdXJzb3I6IHBvaW50ZXI7XFxuXCJdKSkpO1xuZXhwb3J0IHZhciBTdHlsZWRGb3JtRmllbGQgPSBzdHlsZWQoRm9ybUZpZWxkKSh0ZW1wbGF0ZU9iamVjdF80IHx8ICh0ZW1wbGF0ZU9iamVjdF80ID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBcIiwgXCI7XFxuXCJdLCBbXCJcXG4gIFwiLCBcIjtcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIGZ1bGxXaWR0aCA9IF9hLmZ1bGxXaWR0aDtcbiAgICByZXR1cm4gZnVsbFdpZHRoICYmIFwid2lkdGg6IDEwMCVcIjtcbn0pO1xudmFyIHRlbXBsYXRlT2JqZWN0XzEsIHRlbXBsYXRlT2JqZWN0XzIsIHRlbXBsYXRlT2JqZWN0XzMsIHRlbXBsYXRlT2JqZWN0XzQ7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")], ["\n  ", ";\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQjZCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IF9fbWFrZVRlbXBsYXRlT2JqZWN0IH0gZnJvbSBcInRzbGliXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBDaGV2cm9uIGZyb20gXCIuLi9JY29ucy9DaGV2cm9uXCI7XG5pbXBvcnQgSW5wdXRSb290IGZyb20gXCIuLi9iYXNlL0lucHV0Um9vdFwiO1xuaW1wb3J0IEZvcm1GaWVsZCBmcm9tIFwiLi4vYmFzZS9Gb3JtRmllbGRcIjtcbmV4cG9ydCB2YXIgTWVudVdyYXBwZXIgPSBzdHlsZWQuZGl2KHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIG1heC1oZWlnaHQ6IDE0MHB4O1xcbiAgXCIsIFwiO1xcbiAgb3ZlcmZsb3cteTogYXV0bztcXG5cIl0sIFtcIlxcbiAgbWF4LWhlaWdodDogMTQwcHg7XFxuICBcIiwgXCI7XFxuICBvdmVyZmxvdy15OiBhdXRvO1xcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgbGlzdEhlaWdodCA9IF9hLmxpc3RIZWlnaHQ7XG4gICAgcmV0dXJuIGxpc3RIZWlnaHQgJiYgXCJtYXgtaGVpZ2h0OiBcIi5jb25jYXQobGlzdEhlaWdodCwgXCJweDtcIik7XG59KTtcbmV4cG9ydCB2YXIgU2VsZWN0SWNvbiA9IHN0eWxlZChDaGV2cm9uLCB7XG4gICAgc2hvdWxkRm9yd2FyZFByb3A6IGZ1bmN0aW9uIChwcm9wKSB7IHJldHVybiAhW1wiaXNPcGVuXCJdLmluY2x1ZGVzKHByb3ApOyB9LFxufSkodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgXCIsIFwiO1xcblwiXSwgW1wiXFxuICBcIiwgXCI7XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciBpc09wZW4gPSBfYS5pc09wZW47XG4gICAgcmV0dXJuIGlzT3BlbiAmJiBcInRyYW5zZm9ybTogcm90YXRlKDE4MGRlZylcIjtcbn0pO1xuZXhwb3J0IHZhciBTdHlsZWRCYXNlSW5wdXRSb290ID0gc3R5bGVkKElucHV0Um9vdCkodGVtcGxhdGVPYmplY3RfMyB8fCAodGVtcGxhdGVPYmplY3RfMyA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgY3Vyc29yOiBwb2ludGVyO1xcblwiXSwgW1wiXFxuICBjdXJzb3I6IHBvaW50ZXI7XFxuXCJdKSkpO1xuZXhwb3J0IHZhciBTdHlsZWRGb3JtRmllbGQgPSBzdHlsZWQoRm9ybUZpZWxkKSh0ZW1wbGF0ZU9iamVjdF80IHx8ICh0ZW1wbGF0ZU9iamVjdF80ID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBcIiwgXCI7XFxuXCJdLCBbXCJcXG4gIFwiLCBcIjtcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIGZ1bGxXaWR0aCA9IF9hLmZ1bGxXaWR0aDtcbiAgICByZXR1cm4gZnVsbFdpZHRoICYmIFwid2lkdGg6IDEwMCVcIjtcbn0pO1xudmFyIHRlbXBsYXRlT2JqZWN0XzEsIHRlbXBsYXRlT2JqZWN0XzIsIHRlbXBsYXRlT2JqZWN0XzMsIHRlbXBsYXRlT2JqZWN0XzQ7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")])), function (_a) {
+  var fullWidth = _a.fullWidth;
+  return fullWidth && "width: 100%";
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { MenuWrapper, SelectIcon, StyledBaseInputRoot, StyledFormField };

package/esm/Theme/index.props.d.ts

@@ -1,3 +1,4 @@
+import type { MenuVariant } from "../Menu/index.props";
 import type { InputVariant, PlaceholderProps } from "../base/InputRoot/index.props";
 import type { CheckboxVariant } from "../Checkbox/index.props";
 import type { ColorsTheme } from "./color";
@@ -5,7 +6,6 @@ import type { BreakpointsTheme } from "./breakpoints";
 import type { ButtonBase, ButtonVariant } from "../Button/index.props";
 import type { TypographyVariant } from "../Typography/index.props";
 import type { SwitchStates } from "../Switch/index.props";
-import { MenuVariant } from "../Menu/index.props";
 export type ThemeProps = {
     button: ButtonVariant & ButtonBase;
     menu: MenuVariant;

package/esm/Theme/themes/buenos_aires.d.ts

@@ -1,6 +1,6 @@
+import type { MenuVariant } from "../../Menu/index.props";
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
-import { MenuVariant } from "../../Menu/index.props";
 export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
 export declare const InputThemeBA: {
     placeholder: {

package/esm/Theme/themes/default.d.ts

@@ -1,6 +1,6 @@
+import type { MenuVariant } from "../../Menu/index.props";
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
-import { MenuVariant } from "../../Menu/index.props";
 export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
 export declare const InputThemeDefault: {
     placeholder: {

package/esm/helpers/on.d.ts

@@ -0,0 +1 @@
+export declare const on: <K extends keyof HTMLElementEventMap>(element: HTMLElement | null | undefined, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions) => () => void;

package/esm/helpers/on.js

@@ -0,0 +1,8 @@
+var on = function on(element, type, listener, options) {
+  element === null || element === void 0 ? void 0 : element.addEventListener(type, listener, options);
+  return function () {
+    element === null || element === void 0 ? void 0 : element.removeEventListener(type, listener, options);
+  };
+};
+
+export { on };

package/esm/hooks/useOnClickOutside/index.d.ts

@@ -1,3 +1,3 @@
-import { MutableRefObject, RefObject } from "react";
+import type { MutableRefObject, RefObject } from "react";
 declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T> | MutableRefObject<T | undefined>, handler: (e: MouseEvent | TouchEvent) => void): void;
 export default useOnClickOutside;

package/esm/hooks/useOnClickOutside/index.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+var element = {
+  current: undefined
+};
+function useOnClickOutside(ref, handler) {
+  useEffect(function () {
+    var previous = element;
+    element = ref;
+    var listener = function listener(event) {
+      var _a;
+      if ((ref === null || ref === void 0 ? void 0 : ref.current) !== (element === null || element === void 0 ? void 0 : element.current)) return;
+      if ((_a = element.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener, false);
+    document.addEventListener("touchstart", listener, false);
+    return function () {
+      document.removeEventListener("mousedown", listener, false);
+      document.removeEventListener("touchstart", listener, false);
+      element = previous;
+    };
+  }, [handler, ref]);
+}
+
+export { useOnClickOutside as default };

package/esm/index.d.ts

@@ -2,10 +2,13 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Counter } from "./Counter";
 export { default as DotsLoader } from "./DotsLoader";
+export { default as Dropdown } from "./Dropdown";
 export { default as Grid } from "./Grid";
 export { default as GridItem } from "./Grid/Item";
 export { default as Image } from "./Image";
 export { default as Input } from "./Input";
+export { default as Menu } from "./Menu";
+export { default as Select } from "./Select";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES, ThemeProvider } from "./Theme";

package/esm/index.js

@@ -2,10 +2,13 @@ export { default as Button } from './Button/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as Counter } from './Counter/index.js';
 export { default as DotsLoader } from './DotsLoader/index.js';
+export { default as Dropdown } from './Dropdown/index.js';
 export { default as Grid } from './Grid/index.js';
 export { default as GridItem } from './Grid/Item/index.js';
 export { default as Image } from './Image/index.js';
 export { default as Input } from './Input/index.js';
+export { default as Menu } from './Menu/index.js';
+export { default as Select } from './Select/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { default as Switch } from './Switch/index.js';
 export { THEMES, ThemeProvider } from './Theme/index.js';

package/helpers/on.d.ts

@@ -0,0 +1 @@
+export declare const on: <K extends keyof HTMLElementEventMap>(element: HTMLElement | null | undefined, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions) => () => void;

package/helpers/on.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var on = function on(element, type, listener, options) {
+  element === null || element === void 0 ? void 0 : element.addEventListener(type, listener, options);
+  return function () {
+    element === null || element === void 0 ? void 0 : element.removeEventListener(type, listener, options);
+  };
+};
+
+exports.on = on;

package/hooks/useOnClickOutside/index.d.ts

@@ -1,3 +1,3 @@
-import { MutableRefObject, RefObject } from "react";
+import type { MutableRefObject, RefObject } from "react";
 declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T> | MutableRefObject<T | undefined>, handler: (e: MouseEvent | TouchEvent) => void): void;
 export default useOnClickOutside;

package/hooks/useOnClickOutside/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var element = {
+  current: undefined
+};
+function useOnClickOutside(ref, handler) {
+  React.useEffect(function () {
+    var previous = element;
+    element = ref;
+    var listener = function listener(event) {
+      var _a;
+      if ((ref === null || ref === void 0 ? void 0 : ref.current) !== (element === null || element === void 0 ? void 0 : element.current)) return;
+      if ((_a = element.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener, false);
+    document.addEventListener("touchstart", listener, false);
+    return function () {
+      document.removeEventListener("mousedown", listener, false);
+      document.removeEventListener("touchstart", listener, false);
+      element = previous;
+    };
+  }, [handler, ref]);
+}
+
+exports.default = useOnClickOutside;

package/index.d.ts

@@ -2,10 +2,13 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Counter } from "./Counter";
 export { default as DotsLoader } from "./DotsLoader";
+export { default as Dropdown } from "./Dropdown";
 export { default as Grid } from "./Grid";
 export { default as GridItem } from "./Grid/Item";
 export { default as Image } from "./Image";
 export { default as Input } from "./Input";
+export { default as Menu } from "./Menu";
+export { default as Select } from "./Select";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES, ThemeProvider } from "./Theme";

package/index.js

@@ -4,14 +4,17 @@ var index = require('./Button/index.js');
 var index$1 = require('./Checkbox/index.js');
 var index$2 = require('./Counter/index.js');
 var index$3 = require('./DotsLoader/index.js');
-var index$4 = require('./Grid/index.js');
-var index$5 = require('./Grid/Item/index.js');
-var index$6 = require('./Image/index.js');
-var index$7 = require('./Input/index.js');
-var index$8 = require('./Skeleton/index.js');
-var index$9 = require('./Switch/index.js');
-var index$a = require('./Theme/index.js');
-var index$b = require('./Typography/index.js');
+var index$4 = require('./Dropdown/index.js');
+var index$5 = require('./Grid/index.js');
+var index$6 = require('./Grid/Item/index.js');
+var index$7 = require('./Image/index.js');
+var index$8 = require('./Input/index.js');
+var index$9 = require('./Menu/index.js');
+var index$a = require('./Select/index.js');
+var index$b = require('./Skeleton/index.js');
+var index$c = require('./Switch/index.js');
+var index$d = require('./Theme/index.js');
+var index$e = require('./Typography/index.js');
 require('./Icons/index.js');
 var Chevron = require('./Icons/Chevron.js');
 var Close = require('./Icons/Close.js');
@@ -31,16 +34,19 @@ exports.Button = index.default;
 exports.Checkbox = index$1.default;
 exports.Counter = index$2.default;
 exports.DotsLoader = index$3.default;
-exports.Grid = index$4.default;
-exports.GridItem = index$5.default;
-exports.Image = index$6.default;
-exports.Input = index$7.default;
-exports.SkeletonRect = index$8.SkeletonRect;
-exports.SkeletonText = index$8.SkeletonText;
-exports.Switch = index$9.default;
-exports.THEMES = index$a.THEMES;
-exports.ThemeProvider = index$a.ThemeProvider;
-exports.Typography = index$b.default;
+exports.Dropdown = index$4.default;
+exports.Grid = index$5.default;
+exports.GridItem = index$6.default;
+exports.Image = index$7.default;
+exports.Input = index$8.default;
+exports.Menu = index$9.default;
+exports.Select = index$a.default;
+exports.SkeletonRect = index$b.SkeletonRect;
+exports.SkeletonText = index$b.SkeletonText;
+exports.Switch = index$c.default;
+exports.THEMES = index$d.THEMES;
+exports.ThemeProvider = index$d.ThemeProvider;
+exports.Typography = index$e.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
 exports.EyeOpen = EyeOpen.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.24",
+  "version": "0.7.26",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},
@@ -25,8 +25,10 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@popperjs/core": "^2.11.8",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-popper": "^2.3.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "7.24.3",