colibri-ui 0.8.1 → 0.8.3

package/Icons/Setting.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var Setting = (function (_a) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({}, props, {
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: fill,
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    stroke: "none",
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"
+  }));
+});
+
+exports.default = Setting;

package/Icons/Trash.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const _default: ({ fill, width, height, ref, ...props }: Props) => React.JSX.Element;
+export default _default;

package/Icons/Trash.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var Trash = (function (_a) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
+  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"
+  }), /*#__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
+  }));
+});
+
+exports.default = Trash;

package/Icons/User.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const _default: ({ fill, width, height, ref, ...props }: Props) => React.JSX.Element;
+export default _default;

package/Icons/User.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var User = (function (_a) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
+  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"
+  }), /*#__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"
+  }));
+});
+
+exports.default = User;

package/Icons/index.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var ArrowNext = require('./ArrowNext.js');
+var Cart = require('./Cart.js');
+var Chevron = require('./Chevron.js');
+var Close = require('./Close.js');
+var CrossFill = require('./CrossFill.js');
+var Edit = require('./Edit.js');
+var Exit = require('./Exit.js');
+var EyeOpen = require('./EyeOpen.js');
+var EyeClosed = require('./EyeClosed.js');
+var Help = require('./Help.js');
+var Info = require('./Info.js');
+var Minus = require('./Minus.js');
+var More = require('./More.js');
+var Plus = require('./Plus.js');
+var Setting = require('./Setting.js');
+var Trash = require('./Trash.js');
+var User = require('./User.js');
+
+
+
+exports.ArrowNext = ArrowNext.default;
+exports.Cart = Cart.default;
+exports.Chevron = Chevron.default;
+exports.Close = Close.default;
+exports.CrossFill = CrossFill.default;
+exports.Edit = Edit.default;
+exports.Exit = Exit.default;
+exports.EyeOpen = EyeOpen.default;
+exports.EyeClosed = EyeClosed.default;
+exports.Help = Help.default;
+exports.Info = Info.default;
+exports.Minus = Minus.default;
+exports.More = More.default;
+exports.Plus = Plus.default;
+exports.Setting = Setting.default;
+exports.Trash = Trash.default;
+exports.User = User.default;

package/{src/components/Icons/index.props.ts → Icons/index.props.d.ts}

@@ -1,8 +1,7 @@
 import type { HTMLAttributes } from "react";
-
 export interface Props extends HTMLAttributes<SVGElement> {
-  width?: number;
-  height?: number;
-  fill?: string;
-  ref?: React.Ref<SVGSVGElement>;
+    width?: number;
+    height?: number;
+    fill?: string;
+    ref?: React.Ref<SVGSVGElement>;
 }

package/Icons/package.json

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

package/Image/Image.module.css

@@ -0,0 +1,14 @@
+.root {
+  height: 100%;
+  width: 100%;
+}
+.root img {
+  height: 100%;
+  object-fit: cover;
+  text-indent: -100rem;
+  visibility: visible;
+  width: 100%;
+}
+.root img :-moz-broken {
+  opacity: 0;
+}

package/Image/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ImageProps } from "./index.props";
+declare const Image: ({ className, loading, src, fallbackSrc, onClick, srcSet, sizes, ariaLabel, sources, alt, width, height, ref, ...props }: ImageProps) => React.JSX.Element;
+export default Image;

package/Image/index.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames');
+var styles = require('./Image.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+var Image = function Image(_a) {
+  var className = _a.className,
+    _b = _a.loading,
+    loading = _b === void 0 ? "lazy" : _b,
+    src = _a.src,
+    fallbackSrc = _a.fallbackSrc,
+    onClick = _a.onClick,
+    srcSet = _a.srcSet,
+    sizes = _a.sizes,
+    ariaLabel = _a.ariaLabel,
+    _c = _a.sources,
+    sources = _c === void 0 ? [] : _c,
+    _d = _a.alt,
+    alt = _d === void 0 ? src : _d,
+    width = _a.width,
+    height = _a.height,
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height", "ref"]);
+  var _e = React.useState(false),
+    isFailed = _e[0],
+    setFailed = _e[1];
+  var imageSrc = src || emptyImage;
+  var imageSrcSet = srcSet;
+  var sizeAttrs = {};
+  if (width !== undefined) {
+    sizeAttrs.width = width;
+  }
+  if (height !== undefined) {
+    sizeAttrs.height = height;
+  }
+  var handleError = React.useCallback(function () {
+    setFailed(true);
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement("picture", {
+    ref: ref,
+    className: classNames__default.default(styles__default.default.root)
+  }, !!sources.length && sources.map(function (source, index) {
+    return /*#__PURE__*/React__default.default.createElement("source", tslib.__assign({
+      key: "item-".concat(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/Image/index.props.d.ts

@@ -0,0 +1,10 @@
+import type React from "react";
+export interface BaseImageContainerProps {
+    fallbackSrc?: string;
+    ariaLabel?: string;
+    sources?: React.SourceHTMLAttributes<HTMLSourceElement>[];
+    "data-testid"?: string;
+}
+export interface ImageProps extends BaseImageContainerProps, React.ImgHTMLAttributes<HTMLImageElement> {
+    ref?: React.Ref<HTMLImageElement>;
+}

package/Image/package.json

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

package/Input/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { InputProps } from "./index.props";
+declare const Input: ({ className, startIcon, endIcon, label, hint, hasError, required, onChange, inputRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;
+export default Input;

package/Input/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames');
+var index = require('../base/FormField/index.js');
+var index$1 = require('../base/InputRoot/index.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 = function Input(_a) {
+  var className = _a.className,
+    startIcon = _a.startIcon,
+    endIcon = _a.endIcon,
+    label = _a.label,
+    hint = _a.hint,
+    hasError = _a.hasError,
+    required = _a.required,
+    onChange = _a.onChange,
+    inputRef = _a.inputRef,
+    disabled = _a.disabled,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "m" : _c,
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "inputRef", "disabled", "variant", "size", "ref"]);
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    className: classNames__default.default(className),
+    label: label,
+    required: required,
+    hint: hint,
+    hasError: hasError
+  }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    ref: ref,
+    startIcon: startIcon,
+    endIcon: endIcon,
+    variant: variant,
+    size: size,
+    disabled: !!disabled,
+    hasError: hasError
+  }, /*#__PURE__*/React__default.default.createElement(index$2.default, tslib.__assign({
+    ref: inputRef,
+    onChange: onChange,
+    type: "text"
+  }, props))));
+};
+
+exports.default = Input;

package/Input/index.props.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode, Ref } from "react";
+import type { FormFieldProps } from "../base/FormField/index.props";
+import type { Size, Variant } from "../base/InputRoot/index.props";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
+    endIcon?: ReactNode;
+    hasError?: boolean;
+    hint?: ReactNode;
+    inputRef?: ForwardedRef<HTMLInputElement>;
+    label?: ReactNode;
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
+    ref?: Ref<HTMLInputElement>;
+    required?: boolean;
+    size?: Size;
+    startIcon?: ReactNode;
+    variant?: Variant;
+}

package/Input/package.json

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

package/InputRadio/InputRadio.module.css

@@ -0,0 +1,95 @@
+.label {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+.text {
+  flex: 1 1 auto;
+  line-height: 18px;
+  margin-inline-start: 8px;
+}
+
+.icon {
+  background-color: var(--palette-white);
+  block-size: 16px;
+  border: solid 1px var(--palette-bg-3);
+  border-radius: 100%;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  inline-size: 16px;
+  margin-block-start: 1px;
+  position: relative;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.container {
+  align-items: flex-start;
+  cursor: pointer;
+  display: flex;
+  padding: 3px 0;
+}
+.container_disabled {
+  cursor: inherit;
+}
+.container_error .text {
+  color: var(--palette-alert);
+}
+.container_error .icon {
+  border-color: var(--palette-alert);
+  box-shadow: 0 0 0 2px var(--palette-tretiary-2);
+}
+
+.input {
+  block-size: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.input_checked + .icon {
+  background-color: var(--palette-black);
+  border: 4px solid var(--input-radio-bg-checked);
+}
+.input_disabled + .icon {
+  border-radius: 50%;
+}
+.input_disabled + .icon::after {
+  background-color: rgba(246, 246, 246, 0.8);
+  border-radius: 50%;
+  content: "";
+  display: block;
+  inset: 0;
+  margin: -1px;
+  position: absolute;
+}
+.input:not(.input_disabled, .input_error):hover + .icon {
+  border-color: var(--input-radio-bg-hovered);
+}
+.input:not(.input_disabled, .input_error):focus + .icon {
+  box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
+}
+.input:not(.input_disabled, .input_error):active + .icon {
+  background-color: var(--input-radio-bg-focused);
+  border-color: var(--input-radio-border-color-focused);
+  box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
+}
+.input:not(.input_disabled, .input_error) .input_checked:hover + .icon {
+  border-color: var(--input-radio-bg-hovered);
+}
+.input:not(.input_disabled, .input_error) .input_checked:active + .icon {
+  background-color: var(--palette-black);
+  border: 4px solid var(--input-radio-bg-checked);
+}
+.input_checked:disabled + .icon::after {
+  margin: -4px;
+}
+
+.note {
+  color: var(--palette-bg-5);
+  margin-block-start: 4px;
+  padding-inline-start: 24px;
+}

package/InputRadio/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { FC, CSSProperties, PropsWithChildren, FocusEvent, ChangeEvent } from "react";
+type InputRadioProps = {
+    checked?: boolean;
+    className?: string;
+    containerClassName?: string;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    name?: string;
+    note?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    style?: CSSProperties;
+    text?: string;
+    value: string | number;
+    testid?: string;
+};
+declare const InputRadio: FC<PropsWithChildren<InputRadioProps>>;
+export default InputRadio;

package/InputRadio/index.js

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../Typography/index.js');
+var styles = require('./InputRadio.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var InputRadio = /*#__PURE__*/React.memo(function (_a) {
+  var checked = _a.checked,
+    children = _a.children,
+    className = _a.className,
+    containerClassName = _a.containerClassName,
+    disabled = _a.disabled,
+    error = _a.error,
+    id = _a.id,
+    name = _a.name,
+    note = _a.note,
+    onBlur = _a.onBlur,
+    onFocus = _a.onFocus,
+    onChange = _a.onChange,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    style = _a.style,
+    text = _a.text,
+    value = _a.value,
+    testid = _a.testid,
+    rest = tslib.__rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default.default.createElement("label", {
+      className: clx(styles__default.default.label, className),
+      htmlFor: id,
+      style: style,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      "data-testid": testid
+    }, /*#__PURE__*/React__default.default.createElement("div", {
+      className: clx(styles__default.default.container, {
+        container_disabled: !!disabled,
+        container_error: !!error
+      }, containerClassName)
+    }, /*#__PURE__*/React__default.default.createElement("input", tslib.__assign({
+      type: "radio",
+      id: id,
+      value: value,
+      name: name,
+      className: clx(styles__default.default.input, {
+        input_error: !!error,
+        input_checked: !!checked,
+        input_disabled: !!disabled
+      }),
+      checked: checked,
+      disabled: disabled,
+      onChange: onChange,
+      onFocus: onFocus,
+      onBlur: onBlur
+    }, rest)), /*#__PURE__*/React__default.default.createElement("span", {
+      className: clx(styles__default.default.icon)
+    }), /*#__PURE__*/React__default.default.createElement("span", {
+      className: clx(styles__default.default.text)
+    }, !children && text, !text && children)), !!note && (/*#__PURE__*/React__default.default.createElement(index.default, {
+      tag: "p",
+      size: "s",
+      className: clx(styles__default.default.note)
+    }, note)))
+  );
+});
+
+exports.default = InputRadio;

package/InputRadio/package.json

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

package/{src/components/Menu/Menu.module.scss → Menu/Menu.module.css}

@@ -5,4 +5,4 @@
   padding: 0;
   text-align: left;
   user-select: none;
-}
+}

package/Menu/components/MenuItem/MenuItem.module.css

@@ -0,0 +1,35 @@
+.item {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-size: 1em;
+  font-style: normal;
+  font-weight: 400;
+  justify-content: space-between;
+  line-height: 1.5;
+  list-style: none;
+  padding: 8px 6px;
+}
+.item_disabled {
+  background-color: var(--palette-white);
+  color: var(--palette-bg-2);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.item_variant_primary {
+  background-color: var(--palette-white);
+}
+.item_variant_primary:hover {
+  background-color: var(--palette-bg-2);
+}
+.item_variant_primary:active {
+  background-color: var(--palette-bg-2);
+}
+.item_variant_primary:focus, .item_variant_primary:focus-within {
+  background-color: var(--palette-bg-2);
+}
+.item > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { PropsWithChildren } from "react";
+import type { MenuItemProps } from "./index.props";
+declare const MenuItem: ({ className, isSelected, variant, disabled, onClick, children, ref, }: PropsWithChildren<MenuItemProps>) => React.JSX.Element;
+export default MenuItem;