colibri-ui 0.7.24 → 0.7.26

package/Button/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var styles = require('./styles.js');
 
-var Button = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var className = _a.className,
     _b = _a.fullWidth,
     fullWidth = _b === void 0 ? false : _b,

package/Button/index.props.d.ts

@@ -25,10 +25,10 @@ export type ButtonBase = {
     base: BaseStyles;
 };
 export type ButtonVariant = {
-    "primary": VariantStates;
-    "secondary": VariantStates;
-    "pseudo": VariantStates;
-    "clear": VariantStates;
+    primary: VariantStates;
+    secondary: VariantStates;
+    pseudo: VariantStates;
+    clear: VariantStates;
 };
 export type ButtonSize = "xs" | "s" | "m" | "l";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

package/ClickOutside/index.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 declare const ClickOutside: FC<{
     onClick: (e: MouseEvent | TouchEvent) => void;
     children: ReactNode;

package/ClickOutside/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../hooks/useOnClickOutside/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var ClickOutside = function ClickOutside(_a) {
+  var children = _a.children,
+    onClick = _a.onClick;
+  var childRef = React.useRef();
+  index.default(childRef, onClick);
+  if (! /*#__PURE__*/React__default.default.isValidElement(children)) return null;
+  return /*#__PURE__*/React__default.default.cloneElement(children, {
+    // @ts-expect-error expected
+    ref: function ref(node) {
+      childRef.current = node;
+      // @ts-expect-error expected
+      var ref = children.ref;
+      // @ts-expect-error expected
+      if (typeof children.ref === "function") {
+        ref(node);
+      }
+    }
+  });
+};
+
+exports.default = ClickOutside;

package/Counter/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var index = require('../Button/index.js');
 var Minus = require('../Icons/Minus.js');
 var Plus = require('../Icons/Plus.js');
@@ -19,7 +19,7 @@ var Counter = function Counter(_a) {
     onChange = _a.onChange,
     disabled = _a.disabled,
     className = _a.className;
-  var lastNumValue = react.useRef(value);
+  var lastNumValue = React.useRef(value);
   var minusDisabled = disabled || value <= min;
   var plusDisabled = disabled || value >= max;
   return jsxRuntime.jsx(styles.Root, {

package/Dropdown/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { IDropdownProps } from "./index.props";
+declare const Dropdown: React.FC<IDropdownProps>;
+export default Dropdown;

package/Dropdown/index.js

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactPopper = require('react-popper');
+var index = require('../Portal/index.js');
+var on = require('../helpers/on.js');
+var index$1 = require('../ClickOutside/index.js');
+var styles = require('./styles.js');
+
+var Dropdown = function Dropdown(_a) {
+  var children = _a.children,
+    zIndex = _a.zIndex,
+    disabled = _a.disabled,
+    onVisibleChange = _a.onVisibleChange,
+    overlay = _a.overlay,
+    _b = _a.placement,
+    placement = _b === void 0 ? "bottom-start" : _b,
+    _c = _a.strategy,
+    strategy = _c === void 0 ? "absolute" : _c,
+    _d = _a.trigger,
+    trigger = _d === void 0 ? ["hover"] : _d,
+    _e = _a.visible,
+    visibleProp = _e === void 0 ? true : _e,
+    _f = _a.preventOverflow,
+    preventOverflow = _f === void 0 ? false : _f,
+    _g = _a.samewidth,
+    samewidth = _g === void 0 ? false : _g;
+  var _h = React.useState(null),
+    controlElement = _h[0],
+    setControlElement = _h[1];
+  var _j = React.useState(null),
+    popperElement = _j[0],
+    setPopperElement = _j[1];
+  var _k = React.useState(false),
+    visible = _k[0],
+    setVisible = _k[1];
+  var isVisible = visibleProp && visible && !disabled;
+  var _l = reactPopper.usePopper(controlElement, popperElement, {
+      placement: placement,
+      strategy: strategy,
+      modifiers: [{
+        name: "flip",
+        enabled: false
+      }, {
+        name: "preventOverflow",
+        enabled: preventOverflow
+      }]
+    }),
+    styles$1 = _l.styles,
+    attributes = _l.attributes,
+    update = _l.update;
+  var isNotComponent = typeof children === "string";
+  var reference = React.useMemo(function () {
+    return React.Children.only(isNotComponent ? jsxRuntime.jsx("button", {
+      children: children
+    }) : children);
+  }, [children, isNotComponent]);
+  var onToggle = React.useCallback(function (e) {
+    e.stopPropagation();
+    setVisible(function (state) {
+      return !state;
+    });
+  }, [setVisible]);
+  var onShow = React.useCallback(function () {
+    setVisible(true);
+  }, [setVisible]);
+  var onHide = React.useCallback(function () {
+    setVisible(false);
+  }, [setVisible]);
+  var onClickOutside = React.useCallback(function (e) {
+    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(e.target)) return;
+    onHide();
+  }, [onHide, controlElement]);
+  var onClickOverlay = React.useCallback(function (e) {
+    e.stopPropagation();
+    onHide();
+  }, [onHide]);
+  React.useEffect(function () {
+    var unsubscribes = [];
+    if (trigger.includes("click")) {
+      unsubscribes.push(on.on(controlElement, "click", onToggle, false));
+    }
+    if (trigger.includes("hover")) {
+      unsubscribes.push(on.on(controlElement, "mouseenter", onShow, false));
+      unsubscribes.push(on.on(controlElement, "mouseleave", onHide, false));
+      unsubscribes.push(on.on(popperElement, "mouseenter", onShow, false));
+      unsubscribes.push(on.on(popperElement, "mouseleave", onHide, false));
+    }
+    if (trigger.includes("focus")) {
+      var onFocusOut = function onFocusOut() {
+        requestAnimationFrame(function () {
+          if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(document.activeElement)) return;
+          if (popperElement === null || popperElement === void 0 ? void 0 : popperElement.contains(document.activeElement)) return;
+          onHide();
+        });
+      };
+      unsubscribes.push(on.on(controlElement, "focusin", onShow, false));
+      unsubscribes.push(on.on(controlElement, "focusout", onFocusOut, false));
+      unsubscribes.push(on.on(popperElement, "focusin", onShow, false));
+      unsubscribes.push(on.on(popperElement, "focusout", onFocusOut, false));
+    }
+    return function () {
+      return unsubscribes.forEach(function (un) {
+        return un();
+      });
+    };
+  }, [controlElement, popperElement, onToggle, onShow, onHide]);
+  React.useEffect(function () {
+    if (onVisibleChange) onVisibleChange(visible);
+  }, [onVisibleChange, visible]);
+  React.useEffect(function () {
+    if (update) update();
+  }, [update, visible]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(reference.type, tslib.__assign({
+      ref: setControlElement,
+      tabIndex: 0
+    }, reference.props)), isVisible && jsxRuntime.jsx(index.default, {
+      children: jsxRuntime.jsx(index$1.default, {
+        onClick: onClickOutside,
+        children: jsxRuntime.jsx(styles.PopperContainer, tslib.__assign({
+          ref: setPopperElement,
+          style: tslib.__assign(tslib.__assign(tslib.__assign({}, styles$1.popper), {
+            zIndex: zIndex,
+            minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
+          }), samewidth && {
+            maxWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
+          }),
+          tabIndex: 0
+        }, attributes.popper, {
+          children: jsxRuntime.jsx(styles.OverlayContainer, {
+            onClick: onClickOverlay,
+            children: overlay
+          })
+        }))
+      })
+    })]
+  });
+};
+
+exports.default = Dropdown;

package/Dropdown/index.props.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { PositioningStrategy } from "@popperjs/core";
+import type { Placement as PopperPlacement } from "@popperjs/core";
+export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end">;
+export type Trigger = "click" | "hover" | "focus";
+export interface IDropdownProps {
+    children: ReactNode;
+    zIndex?: number;
+    disabled?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    overlay: ReactNode;
+    placement?: Placement;
+    strategy?: PositioningStrategy;
+    trigger?: [Trigger, ...Trigger[]];
+    visible?: boolean;
+    preventOverflow?: boolean;
+    samewidth?: boolean;
+}

package/Dropdown/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Dropdown/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Dropdown/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const PopperContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OverlayContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/Dropdown/styles.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+var react = require('@emotion/react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var PopperContainer = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e8fc5x21"
+} : {
+  target: "e8fc5x21",
+  label: "PopperContainer"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  padding-top: 2px;\n  padding-bottom: 2px;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5leHBvcnQgdmFyIFBvcHBlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgcGFkZGluZy10b3A6IDJweDtcXG4gIHBhZGRpbmctYm90dG9tOiAycHg7XFxuXCJdLCBbXCJcXG4gIHBhZGRpbmctdG9wOiAycHg7XFxuICBwYWRkaW5nLWJvdHRvbTogMnB4O1xcblwiXSkpKTtcbmV4cG9ydCB2YXIgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMyB8fCAodGVtcGxhdGVPYmplY3RfMyA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgYm9yZGVyLXdpZHRoOiAxcHg7XFxuICBib3JkZXItc3R5bGU6IHNvbGlkO1xcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcXG5cXG4gIFwiLCBcIlxcblwiXSwgW1wiXFxuICBib3JkZXItd2lkdGg6IDFweDtcXG4gIGJvcmRlci1zdHlsZTogc29saWQ7XFxuICBib3JkZXItcmFkaXVzOiA0cHg7XFxuICBvdmVyZmxvdzogaGlkZGVuO1xcblxcbiAgXCIsIFwiXFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiBjc3ModGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICBib3JkZXItY29sb3I6IFwiLCBcIjtcXG4gICAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgXCJdLCBbXCJcXG4gICAgYm9yZGVyLWNvbG9yOiBcIiwgXCI7XFxuICAgIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG4gIFwiXSkpLCB0aGVtZS5wYWxldHRlLkJHXzIsIHRoZW1lLnBhbGV0dGUuV0hJVEUpO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMztcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  padding-top: 2px;\n  padding-bottom: 2px;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5leHBvcnQgdmFyIFBvcHBlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgcGFkZGluZy10b3A6IDJweDtcXG4gIHBhZGRpbmctYm90dG9tOiAycHg7XFxuXCJdLCBbXCJcXG4gIHBhZGRpbmctdG9wOiAycHg7XFxuICBwYWRkaW5nLWJvdHRvbTogMnB4O1xcblwiXSkpKTtcbmV4cG9ydCB2YXIgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMyB8fCAodGVtcGxhdGVPYmplY3RfMyA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgYm9yZGVyLXdpZHRoOiAxcHg7XFxuICBib3JkZXItc3R5bGU6IHNvbGlkO1xcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcXG5cXG4gIFwiLCBcIlxcblwiXSwgW1wiXFxuICBib3JkZXItd2lkdGg6IDFweDtcXG4gIGJvcmRlci1zdHlsZTogc29saWQ7XFxuICBib3JkZXItcmFkaXVzOiA0cHg7XFxuICBvdmVyZmxvdzogaGlkZGVuO1xcblxcbiAgXCIsIFwiXFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiBjc3ModGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICBib3JkZXItY29sb3I6IFwiLCBcIjtcXG4gICAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgXCJdLCBbXCJcXG4gICAgYm9yZGVyLWNvbG9yOiBcIiwgXCI7XFxuICAgIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG4gIFwiXSkpLCB0aGVtZS5wYWxldHRlLkJHXzIsIHRoZW1lLnBhbGV0dGUuV0hJVEUpO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMztcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])));
+var OverlayContainer = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e8fc5x20"
+} : {
+  target: "e8fc5x20",
+  label: "OverlayContainer"
+})(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  overflow: hidden;\n\n  ", "\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJOEIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5leHBvcnQgdmFyIFBvcHBlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgcGFkZGluZy10b3A6IDJweDtcXG4gIHBhZGRpbmctYm90dG9tOiAycHg7XFxuXCJdLCBbXCJcXG4gIHBhZGRpbmctdG9wOiAycHg7XFxuICBwYWRkaW5nLWJvdHRvbTogMnB4O1xcblwiXSkpKTtcbmV4cG9ydCB2YXIgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMyB8fCAodGVtcGxhdGVPYmplY3RfMyA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgYm9yZGVyLXdpZHRoOiAxcHg7XFxuICBib3JkZXItc3R5bGU6IHNvbGlkO1xcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcXG5cXG4gIFwiLCBcIlxcblwiXSwgW1wiXFxuICBib3JkZXItd2lkdGg6IDFweDtcXG4gIGJvcmRlci1zdHlsZTogc29saWQ7XFxuICBib3JkZXItcmFkaXVzOiA0cHg7XFxuICBvdmVyZmxvdzogaGlkZGVuO1xcblxcbiAgXCIsIFwiXFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiBjc3ModGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICBib3JkZXItY29sb3I6IFwiLCBcIjtcXG4gICAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgXCJdLCBbXCJcXG4gICAgYm9yZGVyLWNvbG9yOiBcIiwgXCI7XFxuICAgIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG4gIFwiXSkpLCB0aGVtZS5wYWxldHRlLkJHXzIsIHRoZW1lLnBhbGV0dGUuV0hJVEUpO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMztcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  overflow: hidden;\n\n  ", "\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJOEIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5leHBvcnQgdmFyIFBvcHBlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgcGFkZGluZy10b3A6IDJweDtcXG4gIHBhZGRpbmctYm90dG9tOiAycHg7XFxuXCJdLCBbXCJcXG4gIHBhZGRpbmctdG9wOiAycHg7XFxuICBwYWRkaW5nLWJvdHRvbTogMnB4O1xcblwiXSkpKTtcbmV4cG9ydCB2YXIgT3ZlcmxheUNvbnRhaW5lciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMyB8fCAodGVtcGxhdGVPYmplY3RfMyA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgYm9yZGVyLXdpZHRoOiAxcHg7XFxuICBib3JkZXItc3R5bGU6IHNvbGlkO1xcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcXG5cXG4gIFwiLCBcIlxcblwiXSwgW1wiXFxuICBib3JkZXItd2lkdGg6IDFweDtcXG4gIGJvcmRlci1zdHlsZTogc29saWQ7XFxuICBib3JkZXItcmFkaXVzOiA0cHg7XFxuICBvdmVyZmxvdzogaGlkZGVuO1xcblxcbiAgXCIsIFwiXFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiBjc3ModGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICBib3JkZXItY29sb3I6IFwiLCBcIjtcXG4gICAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgXCJdLCBbXCJcXG4gICAgYm9yZGVyLWNvbG9yOiBcIiwgXCI7XFxuICAgIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG4gIFwiXSkpLCB0aGVtZS5wYWxldHRlLkJHXzIsIHRoZW1lLnBhbGV0dGUuV0hJVEUpO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMiwgdGVtcGxhdGVPYmplY3RfMztcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])), function (_a) {
+  var theme = _a.theme;
+  return /*#__PURE__*/react.css(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n    border-color: ", ";\n    background-color: ", ";\n  " + (process.env.NODE_ENV === "production" ? "" : ";label:OverlayContainer;") + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNVyIsImZpbGUiOiJzdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gXCJ0c2xpYlwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmV4cG9ydCB2YXIgUG9wcGVyQ29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBwYWRkaW5nLXRvcDogMnB4O1xcbiAgcGFkZGluZy1ib3R0b206IDJweDtcXG5cIl0sIFtcIlxcbiAgcGFkZGluZy10b3A6IDJweDtcXG4gIHBhZGRpbmctYm90dG9tOiAycHg7XFxuXCJdKSkpO1xuZXhwb3J0IHZhciBPdmVybGF5Q29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8zIHx8ICh0ZW1wbGF0ZU9iamVjdF8zID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBib3JkZXItd2lkdGg6IDFweDtcXG4gIGJvcmRlci1zdHlsZTogc29saWQ7XFxuICBib3JkZXItcmFkaXVzOiA0cHg7XFxuICBvdmVyZmxvdzogaGlkZGVuO1xcblxcbiAgXCIsIFwiXFxuXCJdLCBbXCJcXG4gIGJvcmRlci13aWR0aDogMXB4O1xcbiAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcXG4gIGJvcmRlci1yYWRpdXM6IDRweDtcXG4gIG92ZXJmbG93OiBoaWRkZW47XFxuXFxuICBcIiwgXCJcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIHRoZW1lID0gX2EudGhlbWU7XG4gICAgcmV0dXJuIGNzcyh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIGJvcmRlci1jb2xvcjogXCIsIFwiO1xcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBcIl0sIFtcIlxcbiAgICBib3JkZXItY29sb3I6IFwiLCBcIjtcXG4gICAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgXCJdKSksIHRoZW1lLnBhbGV0dGUuQkdfMiwgdGhlbWUucGFsZXR0ZS5XSElURSk7XG59KTtcbnZhciB0ZW1wbGF0ZU9iamVjdF8xLCB0ZW1wbGF0ZU9iamVjdF8yLCB0ZW1wbGF0ZU9iamVjdF8zO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */")], ["\n    border-color: ", ";\n    background-color: ", ";\n  " + (process.env.NODE_ENV === "production" ? "" : ";label:OverlayContainer;") + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNVyIsImZpbGUiOiJzdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gXCJ0c2xpYlwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmV4cG9ydCB2YXIgUG9wcGVyQ29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBwYWRkaW5nLXRvcDogMnB4O1xcbiAgcGFkZGluZy1ib3R0b206IDJweDtcXG5cIl0sIFtcIlxcbiAgcGFkZGluZy10b3A6IDJweDtcXG4gIHBhZGRpbmctYm90dG9tOiAycHg7XFxuXCJdKSkpO1xuZXhwb3J0IHZhciBPdmVybGF5Q29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8zIHx8ICh0ZW1wbGF0ZU9iamVjdF8zID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBib3JkZXItd2lkdGg6IDFweDtcXG4gIGJvcmRlci1zdHlsZTogc29saWQ7XFxuICBib3JkZXItcmFkaXVzOiA0cHg7XFxuICBvdmVyZmxvdzogaGlkZGVuO1xcblxcbiAgXCIsIFwiXFxuXCJdLCBbXCJcXG4gIGJvcmRlci13aWR0aDogMXB4O1xcbiAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcXG4gIGJvcmRlci1yYWRpdXM6IDRweDtcXG4gIG92ZXJmbG93OiBoaWRkZW47XFxuXFxuICBcIiwgXCJcXG5cIl0pKSwgZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIHRoZW1lID0gX2EudGhlbWU7XG4gICAgcmV0dXJuIGNzcyh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIGJvcmRlci1jb2xvcjogXCIsIFwiO1xcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBcIl0sIFtcIlxcbiAgICBib3JkZXItY29sb3I6IFwiLCBcIjtcXG4gICAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgXCJdKSksIHRoZW1lLnBhbGV0dGUuQkdfMiwgdGhlbWUucGFsZXR0ZS5XSElURSk7XG59KTtcbnZhciB0ZW1wbGF0ZU9iamVjdF8xLCB0ZW1wbGF0ZU9iamVjdF8yLCB0ZW1wbGF0ZU9iamVjdF8zO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */")])), theme.palette.BG_2, theme.palette.WHITE);
+});
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.OverlayContainer = OverlayContainer;
+exports.PopperContainer = PopperContainer;

package/Icons/Chevron.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var Chevron = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var Chevron = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
     _c = _a.width,

package/Icons/Close.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var Close = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var Close = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.width,
     width = _b === void 0 ? 24 : _b,
     _c = _a.height,

package/Icons/EyeClosed.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var EyeClosed = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var EyeClosed = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
     _c = _a.width,

package/Icons/EyeOpen.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var EyeOpen = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var EyeOpen = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
     _c = _a.width,

package/Icons/Help.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var Help = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var Help = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.width,
     width = _b === void 0 ? 24 : _b,
     _c = _a.height,

package/Icons/Info.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var Info = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var Info = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
     _c = _a.width,

package/Icons/Minus.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var MinusIcon = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var MinusIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
     _c = _a.width,

package/Icons/More.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var More = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var More = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
     _c = _a.width,

package/Icons/Plus.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var PlusIcon = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var PlusIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
     _c = _a.width,

package/Icons/Trash.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var Trash = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var Trash = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
     _c = _a.width,

package/Icons/User.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
-var User = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var User = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.width,
     width = _b === void 0 ? 24 : _b,
     _c = _a.height,

package/Image/index.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var generateUniqID = require('../helpers/generateUniqID.js');
 var styles = require('./styles.js');
 
 var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
-var Image = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var className = _a.className,
     _b = _a.loading,
     loading = _b === void 0 ? "lazy" : _b,
@@ -27,7 +27,7 @@ var Image = /*#__PURE__*/react.forwardRef(function (_a, ref) {
     width = _a.width,
     height = _a.height,
     props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "data-testid", "alt", "width", "height"]);
-  var _e = react.useState(false),
+  var _e = React.useState(false),
     isFailed = _e[0],
     setFailed = _e[1];
   var imageSrc = src || emptyImage;
@@ -39,7 +39,7 @@ var Image = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   if (height !== undefined) {
     sizeAttrs.height = height;
   }
-  var handleError = react.useCallback(function () {
+  var handleError = React.useCallback(function () {
     setFailed(true);
   }, []);
   return jsxRuntime.jsxs(styles.BasePicture, {

package/Input/index.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var index = require('../base/FormField/index.js');
 var index$1 = require('../base/InputRoot/index.js');
 var styles = require('../base/InputRoot/styles.js');
 
-var Input = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var className = _a.className,
     startIcon = _a.startIcon,
     endIcon = _a.endIcon,

package/Menu/components/MenuItem/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
-import { MenuItemProps } from "./index.props";
+import type { FC } from "react";
+import type { MenuItemProps } from "./index.props";
 declare const MenuItem: FC<MenuItemProps>;
 export default MenuItem;

package/Menu/components/MenuItem/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('./styles.js');
+
+var MenuItem = function MenuItem(_a) {
+  var className = _a.className,
+    _b = _a.isSelected,
+    isSelected = _b === void 0 ? false : _b,
+    _c = _a.variant,
+    variant = _c === void 0 ? "primary" : _c,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    children = _a.children;
+  return jsxRuntime.jsx(styles.Item, {
+    isSelected: isSelected,
+    disabled: disabled,
+    variant: variant,
+    onClick: onClick,
+    className: className,
+    children: children
+  });
+};
+
+exports.default = MenuItem;

package/Menu/components/MenuItem/index.props.d.ts

@@ -1,6 +1,6 @@
-import { CSSObject } from "@emotion/react";
-import { ReactNode, MouseEvent } from "react";
-import { MenuVariant } from "../../index.props";
+import type { CSSObject } from "@emotion/react";
+import type { ReactNode, MouseEvent } from "react";
+import type { MenuVariant } from "../../index.props";
 interface IStylesProps {
     color?: CSSObject["color"];
     backgroundColor: CSSObject["backgroundColor"];

package/Menu/components/MenuItem/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MenuVariant } from "../../index.props";
+import type { MenuVariant } from "../../index.props";
 export declare const Item: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;