colibri-ui 0.7.35 → 0.7.36

package/Icons/Minus.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 var MinusIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
@@ -14,17 +17,15 @@ var MinusIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _d = _a.height,
     height = _d === void 0 ? 24 : _d,
     props = tslib.__rest(_a, ["fill", "width", "height"]);
-  return jsxRuntime.jsx("svg", tslib.__assign({
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
     width: width,
     height: height,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props, {
-    children: jsxRuntime.jsx("path", {
-      fill: fill,
-      d: "M4 13h16v-2H4z",
-      fillRule: "evenodd"
-    })
+  }, props), /*#__PURE__*/React__default.default.createElement("path", {
+    fill: fill,
+    d: "M4 13h16v-2H4z",
+    fillRule: "evenodd"
   }));
 });
 

package/Icons/More.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { Props } from "./index.props";
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
 export default _default;

package/Icons/More.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 var More = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
@@ -14,27 +17,26 @@ var More = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _d = _a.height,
     height = _d === void 0 ? 24 : _d,
     props = tslib.__rest(_a, ["fill", "width", "height"]);
-  return jsxRuntime.jsxs("svg", tslib.__assign({
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
     xmlns: "http://www.w3.org/2000/svg",
     fill: fill,
     width: width,
     height: height,
     ref: ref
   }, props, {
-    viewBox: "0 0 24 24",
-    children: [jsxRuntime.jsx("circle", {
-      cx: "5",
-      cy: "12",
-      r: "1.75"
-    }), jsxRuntime.jsx("circle", {
-      cx: "12",
-      cy: "12",
-      r: "1.75"
-    }), jsxRuntime.jsx("circle", {
-      cx: "19",
-      cy: "12",
-      r: "1.75"
-    })]
+    viewBox: "0 0 24 24"
+  }), /*#__PURE__*/React__default.default.createElement("circle", {
+    cx: "5",
+    cy: "12",
+    r: "1.75"
+  }), /*#__PURE__*/React__default.default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "1.75"
+  }), /*#__PURE__*/React__default.default.createElement("circle", {
+    cx: "19",
+    cy: "12",
+    r: "1.75"
   }));
 });
 

package/Icons/Plus.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { Props } from "./index.props";
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
 export default _default;

package/Icons/Plus.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 var PlusIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
@@ -14,24 +17,22 @@ var PlusIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _d = _a.height,
     height = _d === void 0 ? 24 : _d,
     props = tslib.__rest(_a, ["fill", "width", "height"]);
-  return jsxRuntime.jsx("svg", tslib.__assign({
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
     xmlns: "http://www.w3.org/2000/svg",
     fill: fill,
     width: width,
     height: height,
     ref: ref
   }, props, {
-    viewBox: "0 0 24 24",
-    children: jsxRuntime.jsxs("g", {
-      fill: fill,
-      fillRule: "evenodd",
-      children: [jsxRuntime.jsx("path", {
-        d: "M4 13h16v-2H4z"
-      }), jsxRuntime.jsx("path", {
-        d: "M11 4v16h2V4z"
-      })]
-    })
-  }));
+    viewBox: "0 0 24 24"
+  }), /*#__PURE__*/React__default.default.createElement("g", {
+    fill: fill,
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M4 13h16v-2H4z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M11 4v16h2V4z"
+  })));
 });
 
 exports.default = PlusIcon;

package/Icons/Trash.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { Props } from "./index.props";
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
 export default _default;

package/Icons/Trash.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 var Trash = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
@@ -14,20 +17,19 @@ var Trash = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _d = _a.height,
     height = _d === void 0 ? 24 : _d,
     props = tslib.__rest(_a, ["fill", "width", "height"]);
-  return jsxRuntime.jsx("svg", tslib.__assign({
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     width: width,
     height: height,
     ref: ref
   }, props, {
-    viewBox: "0 0 24 24",
-    children: jsxRuntime.jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12.663 1.5h-1.326c-1.069 0-1.49.09-1.921.27-.432.181-.792.453-1.084.82-.292.365-.493.746-.784 1.774L7.368 5H5a1 1 0 0 0 0 2h.5l.844 12.666A2.5 2.5 0 0 0 8.84 22h6.322a2.5 2.5 0 0 0 2.495-2.334L18.5 7.001V7h.5a1 1 0 1 0 0-2h-2.367l-.18-.636c-.292-1.028-.493-1.409-.785-1.775a2.694 2.694 0 0 0-1.084-.819c-.431-.18-.852-.27-1.92-.27zm1.89 3.5l-.025-.09c-.203-.717-.29-.905-.424-1.074a.696.696 0 0 0-.292-.221c-.2-.084-.404-.115-1.149-.115h-1.326c-.745 0-.95.031-1.149.115a.696.696 0 0 0-.292.221c-.135.169-.221.357-.424 1.074L9.446 5h5.108zm1.943 2H7.505l.835 12.533a.5.5 0 0 0 .499.467h6.322a.5.5 0 0 0 .499-.467L16.496 7zM9.4 9.63a.85.85 0 0 1 1.699-.059l.272 7.795a.85.85 0 1 1-1.7.06L9.4 9.63zm4.381-.879a.85.85 0 0 0-.88.82l-.271 7.795a.85.85 0 1 0 1.699.06L14.6 9.63a.85.85 0 0 0-.82-.88z",
-      fill: fill
-    })
+    viewBox: "0 0 24 24"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.663 1.5h-1.326c-1.069 0-1.49.09-1.921.27-.432.181-.792.453-1.084.82-.292.365-.493.746-.784 1.774L7.368 5H5a1 1 0 0 0 0 2h.5l.844 12.666A2.5 2.5 0 0 0 8.84 22h6.322a2.5 2.5 0 0 0 2.495-2.334L18.5 7.001V7h.5a1 1 0 1 0 0-2h-2.367l-.18-.636c-.292-1.028-.493-1.409-.785-1.775a2.694 2.694 0 0 0-1.084-.819c-.431-.18-.852-.27-1.92-.27zm1.89 3.5l-.025-.09c-.203-.717-.29-.905-.424-1.074a.696.696 0 0 0-.292-.221c-.2-.084-.404-.115-1.149-.115h-1.326c-.745 0-.95.031-1.149.115a.696.696 0 0 0-.292.221c-.135.169-.221.357-.424 1.074L9.446 5h5.108zm1.943 2H7.505l.835 12.533a.5.5 0 0 0 .499.467h6.322a.5.5 0 0 0 .499-.467L16.496 7zM9.4 9.63a.85.85 0 0 1 1.699-.059l.272 7.795a.85.85 0 1 1-1.7.06L9.4 9.63zm4.381-.879a.85.85 0 0 0-.88.82l-.271 7.795a.85.85 0 1 0 1.699.06L14.6 9.63a.85.85 0 0 0-.82-.88z",
+    fill: fill
   }));
 });
 

package/Icons/User.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { Props } from "./index.props";
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
 export default _default;

package/Icons/User.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 var User = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.fill,
     fill = _b === void 0 ? "currentColor" : _b,
@@ -14,25 +17,24 @@ var User = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _d = _a.height,
     height = _d === void 0 ? 24 : _d,
     props = tslib.__rest(_a, ["fill", "width", "height"]);
-  return jsxRuntime.jsxs("svg", tslib.__assign({
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
     height: height,
     viewBox: "0 0 24 24",
     ref: ref
   }, props, {
-    fill: "none",
-    children: [jsxRuntime.jsx("path", {
-      stroke: fill,
-      strokeLinecap: "round",
-      strokeWidth: "1.6",
-      d: "M21.936 23.026a10.286 10.286 0 0 0-19.872 0"
-    }), jsxRuntime.jsx("path", {
-      stroke: fill,
-      strokeLinecap: "round",
-      strokeWidth: "1.6",
-      d: "M12 15.086a6.857 6.857 0 1 0 0-13.714 6.857 6.857 0 0 0 0 13.714Z"
-    })]
+    fill: "none"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    stroke: fill,
+    strokeLinecap: "round",
+    strokeWidth: "1.6",
+    d: "M21.936 23.026a10.286 10.286 0 0 0-19.872 0"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    stroke: fill,
+    strokeLinecap: "round",
+    strokeWidth: "1.6",
+    d: "M12 15.086a6.857 6.857 0 1 0 0-13.714 6.857 6.857 0 0 0 0 13.714Z"
   }));
 });
 

package/Image/Image.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Image-module_root__56rgX {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.Image-module_root__56rgX img {\n  width: 100%;\n  height: 100%;\n  visibility: visible;\n  font: 0/0 a;\n  border: 0;\n  object-fit: cover;\n  text-indent: -100rem;\n}\n.Image-module_root__56rgX img :-moz-broken {\n  opacity: 0;\n}";
+var styles = {"root":"Image-module_root__56rgX"};
+var stylesheet=".Image-module_root__56rgX {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.Image-module_root__56rgX img {\n  width: 100%;\n  height: 100%;\n  visibility: visible;\n  font: 0/0 a;\n  border: 0;\n  object-fit: cover;\n  text-indent: -100rem;\n}\n.Image-module_root__56rgX img :-moz-broken {\n  opacity: 0;\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/Image/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { ImageProps } from "./index.props";
-declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export default Image;

package/Image/index.js

@@ -3,10 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
+var classNames = require('classnames');
 var generateUniqID = require('../helpers/generateUniqID.js');
-var styles = require('./styles.js');
+var Image_module = require('./Image.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
 var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -21,12 +26,11 @@ var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ariaLabel = _a.ariaLabel,
     _c = _a.sources,
     sources = _c === void 0 ? [] : _c,
-    testId = _a["data-testid"],
     _d = _a.alt,
     alt = _d === void 0 ? src : _d,
     width = _a.width,
     height = _a.height,
-    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "data-testid", "alt", "width", "height"]);
+    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height"]);
   var _e = React.useState(false),
     isFailed = _e[0],
     setFailed = _e[1];
@@ -42,25 +46,26 @@ var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var handleError = React.useCallback(function () {
     setFailed(true);
   }, []);
-  return jsxRuntime.jsxs(styles.BasePicture, {
-    "data-testid": testId,
+  return /*#__PURE__*/React__default.default.createElement("picture", {
     ref: ref,
-    children: [!!sources.length && sources.map(function (source, index) {
-      return jsxRuntime.jsx("source", tslib.__assign({}, source), generateUniqID.default(index));
-    }), jsxRuntime.jsx("img", tslib.__assign({
-      alt: alt,
-      style: sizeAttrs,
-      className: className,
-      loading: loading,
-      "aria-hidden": ariaLabel ? "false" : "true",
-      "aria-label": ariaLabel,
-      onClick: onClick,
-      onError: handleError,
-      src: isFailed && fallbackSrc ? fallbackSrc : imageSrc,
-      srcSet: imageSrcSet,
-      sizes: sizes
-    }, props))]
-  });
+    className: classNames__default.default(Image_module.default.root)
+  }, !!sources.length && sources.map(function (source, index) {
+    return /*#__PURE__*/React__default.default.createElement("source", tslib.__assign({
+      key: generateUniqID.default(index)
+    }, source));
+  }), /*#__PURE__*/React__default.default.createElement("img", tslib.__assign({
+    alt: alt,
+    style: sizeAttrs,
+    className: classNames__default.default(className),
+    loading: loading,
+    "aria-hidden": ariaLabel ? "false" : "true",
+    "aria-label": ariaLabel,
+    onClick: onClick,
+    onError: handleError,
+    src: isFailed && fallbackSrc ? fallbackSrc : imageSrc,
+    srcSet: imageSrcSet,
+    sizes: sizes
+  }, props)));
 });
 
 exports.default = Image;

package/Input/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { InputProps } from "./index.props";
-declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/Input/index.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
+var classNames = require('classnames');
 var index = require('../base/FormField/index.js');
 var index$1 = require('../base/InputRoot/index.js');
-var styles = require('../base/InputRoot/styles.js');
+var index$2 = require('../base/BaseInput/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var className = _a.className,
@@ -22,29 +27,22 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
-  var onChangeHandler = function onChangeHandler(e) {
-    if (onChange) onChange(e, e.target.value);
-  };
-  return jsxRuntime.jsx(index.default, {
-    className: className,
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    className: classNames__default.default(className),
     label: label,
     hint: hint,
-    error: error,
-    children: jsxRuntime.jsx(index$1.default, {
-      ref: ref,
-      startIcon: startIcon,
-      endIcon: endIcon,
-      variant: variant,
-      size: size,
-      disabled: !!props.disabled,
-      error: error,
-      children: jsxRuntime.jsx(styles.BaseInput, tslib.__assign({
-        as: "input",
-        onChange: onChangeHandler,
-        type: "text"
-      }, props))
-    })
-  });
+    error: error
+  }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    ref: ref,
+    startIcon: startIcon,
+    endIcon: endIcon,
+    variant: variant,
+    size: size,
+    disabled: !!props.disabled,
+    error: error
+  }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
+    onChange: onChange
+  })));
 });
 
 exports.default = Input;

package/Input/index.props.d.ts

@@ -1,10 +1,10 @@
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
-import type { InputSize, InputVariant } from "../base/InputRoot/index.props";
+import type { Size, Variant } from "../base/InputRoot/index.props";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
     onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
-    variant?: keyof InputVariant;
-    size?: InputSize;
+    variant?: Variant;
+    size?: Size;
     startIcon?: ReactNode;
     endIcon?: ReactNode;
     label?: ReactNode;

package/Menu/Menu.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Menu-module_menu__ZGJ-- {\n  margin: 0;\n  text-align: left;\n  padding: 0;\n  user-select: none;\n  color: var(--palette-black);\n  background: var(--palette-white);\n}";
+var styles = {"menu":"Menu-module_menu__ZGJ--"};
+var stylesheet=".Menu-module_menu__ZGJ-- {\n  margin: 0;\n  text-align: left;\n  padding: 0;\n  user-select: none;\n  color: var(--palette-black);\n  background: var(--palette-white);\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/Menu/components/MenuItem/MenuItem.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".MenuItem-module_item__mGGLQ {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  list-style: none;\n  padding: 8px 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 22px;\n}\n.MenuItem-module_item__mGGLQ > * {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.MenuItem-module_variant_primary__k1zJe {\n  background-color: var(--palette-white);\n}\n.MenuItem-module_variant_primary__k1zJe:hover {\n  background-color: var(--palette-primary-2);\n}\n.MenuItem-module_variant_primary__k1zJe:active {\n  background-color: var(--palette-primary-2);\n}\n.MenuItem-module_variant_primary__k1zJe:focus, .MenuItem-module_variant_primary__k1zJe:focus-within {\n  background-color: var(--palette-primary-2);\n}\n\n.MenuItem-module_disabled__h3vqB {\n  cursor: not-allowed;\n  pointer-events: none;\n  color: var(--palette-bg-2);\n  background-color: var(--palette-white);\n}";
+var styles = {"item":"MenuItem-module_item__mGGLQ","variant_primary":"MenuItem-module_variant_primary__k1zJe","disabled":"MenuItem-module_disabled__h3vqB"};
+var stylesheet=".MenuItem-module_item__mGGLQ {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  list-style: none;\n  padding: 8px 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 22px;\n}\n.MenuItem-module_item__mGGLQ > * {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.MenuItem-module_variant_primary__k1zJe {\n  background-color: var(--palette-white);\n}\n.MenuItem-module_variant_primary__k1zJe:hover {\n  background-color: var(--palette-primary-2);\n}\n.MenuItem-module_variant_primary__k1zJe:active {\n  background-color: var(--palette-primary-2);\n}\n.MenuItem-module_variant_primary__k1zJe:focus, .MenuItem-module_variant_primary__k1zJe:focus-within {\n  background-color: var(--palette-primary-2);\n}\n\n.MenuItem-module_disabled__h3vqB {\n  cursor: not-allowed;\n  pointer-events: none;\n  color: var(--palette-bg-2);\n  background-color: var(--palette-white);\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/Menu/components/MenuItem/index.js

@@ -2,26 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var styles = require('./styles.js');
+var React = require('react');
+var classNames = require('classnames/bind');
+var MenuItem_module = require('./MenuItem.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(MenuItem_module.default);
 var MenuItem = function MenuItem(_a) {
+  var _b;
   var className = _a.className,
-    _b = _a.isSelected,
-    isSelected = _b === void 0 ? false : _b,
-    _c = _a.variant,
-    variant = _c === void 0 ? "primary" : _c,
+    _c = _a.isSelected,
+    isSelected = _c === void 0 ? false : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? "primary" : _d,
     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
-  });
+  return /*#__PURE__*/React__default.default.createElement("li", {
+    style: {
+      backgroundColor: isSelected ? "#B8D2FF" : ""
+    },
+    className: clx((_b = {
+      item: true,
+      disabled: disabled
+    }, _b["variant_".concat(variant)] = !!variant, _b), className),
+    onClick: onClick
+  }, children);
 };
 
 exports.default = MenuItem;

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

@@ -1,23 +1,10 @@
-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"];
-}
-export interface MenuItemPalette {
-    normal: IStylesProps;
-    hovered?: IStylesProps;
-    focused?: IStylesProps;
-    selected?: IStylesProps;
-    disabled?: IStylesProps;
-}
 export interface MenuItemProps {
     children: ReactNode;
     className?: string;
     isSelected?: boolean;
     onClick?: (e: MouseEvent) => void;
-    variant?: keyof MenuVariant;
+    variant?: MenuVariant;
     disabled?: boolean;
 }
-export {};

package/Menu/index.js

@@ -2,10 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
+var classNames = require('classnames');
 var index = require('./components/MenuItem/index.js');
-var styles = require('./styles.js');
+var Menu_module = require('./Menu.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 var Menu = function Menu(_a) {
   var selected = _a.selected,
@@ -30,10 +35,9 @@ var Menu = function Menu(_a) {
       return child;
     });
   }, [children, selected, onClick]);
-  return jsxRuntime.jsx(styles.MenuList, {
-    className: className,
-    children: renderChild
-  });
+  return /*#__PURE__*/React__default.default.createElement("ul", {
+    className: classNames__default.default(Menu_module.default.menu, className)
+  }, renderChild);
 };
 Menu.Item = index.default;
 

package/Menu/index.props.d.ts

@@ -1,28 +1,10 @@
-import type { CSSObject } from "@emotion/react";
 import type { ReactElement, MouseEvent, FC } from "react";
 import type MenuItem from "./components/MenuItem";
-import type { MenuItemProps, MenuItemPalette } from "./components/MenuItem/index.props";
-export interface MenuPalette {
-    backgroundColor: CSSObject["backgroundColor"];
-    item: MenuItemPalette;
-}
-type VariantStyles = {
-    color?: CSSObject["color"];
-    backgroundColor?: CSSObject["backgroundColor"];
-};
-type VariantStates = {
-    normal?: VariantStyles;
-    hovered?: VariantStyles;
-    focused?: VariantStyles;
-    selected?: VariantStyles;
-    disabled?: VariantStyles;
-};
-export type MenuVariant = {
-    primary: VariantStates;
-};
+import type { MenuItemProps } from "./components/MenuItem/index.props";
+export type MenuVariant = "primary";
 type Props = {
     selected?: string[];
-    variant?: keyof MenuVariant;
+    variant?: MenuVariant;
     className?: string;
     onClick?: (key: string, e: MouseEvent) => void;
     children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];