meticulous-ui 3.7.11 → 3.7.13

package/cjs/components/Input/Textarea/Textarea.cjs

@@ -1,79 +1,19 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const white = require("../../../colors/white.cjs");
-const grey = require("../../../colors/grey.cjs");
-const SvgIcon = require("./SvgIcon.cjs");
-const styled = require("styled-components");
-const black = require("../../../colors/black.cjs");
-const red = require("../../../colors/red.cjs");
-const blue = require("../../../colors/blue.cjs");
-const green = require("../../../colors/green.cjs");
-const yellow = require("../../../colors/yellow.cjs");
-const orange = require("../../../colors/orange.cjs");
-const violet = require("../../../colors/violet.cjs");
-const teal = require("../../../colors/teal.cjs");
-const purple = require("../../../colors/purple.cjs");
-const pink = require("../../../colors/pink.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const COLOR_SHADE_MAP = {
-  blue: blue.blue.m500,
-  red: red.default.m500,
-  green: green.default.m500,
-  yellow: yellow.default.m500,
-  orange: orange.default.m500,
-  black: black.black.m500,
-  grey: grey.default.m500,
-  violet: violet.default.m500,
-  teal: teal.default.m500,
-  purple: purple.default.m500,
-  pink: pink.default.m500
-};
-const getColor = (clr) => {
-  var _a;
-  return (_a = COLOR_SHADE_MAP[clr]) != null ? _a : grey.default.m500;
-};
-const getCssShade = ({
-  $hasError,
-  $shade,
-  $isFocused,
-  value,
-  $onlyPh
-}) => {
-  if ($hasError) {
-    return typeof value === "string" && !value && !$isFocused ? grey.default.m500 : red.default.m400;
-  }
-  if ($isFocused && !$onlyPh) {
-    return $shade;
-  }
-  return grey.default.m500;
-};
-const TextareaBox = styled__default.default.textarea`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),F=require("react"),K=require("../../../colors/white.cjs"),i=require("../../../colors/grey.cjs"),R=require("./SvgIcon.cjs"),a=require("styled-components"),I=require("../../../colors/black.cjs"),v=require("../../../colors/red.cjs"),Q=require("../../../colors/blue.cjs"),U=require("../../../colors/green.cjs"),V=require("../../../colors/yellow.cjs"),X=require("../../../colors/orange.cjs"),Y=require("../../../colors/violet.cjs"),Z=require("../../../colors/teal.cjs"),ee=require("../../../colors/purple.cjs"),te=require("../../../colors/pink.cjs"),re=e=>e&&e.__esModule?e:{default:e},s=re(a),oe={blue:Q.blue.m500,red:v.default.m500,green:U.default.m500,yellow:V.default.m500,orange:X.default.m500,black:I.black.m500,grey:i.default.m500,violet:Y.default.m500,teal:Z.default.m500,purple:ee.default.m500,pink:te.default.m500},ne=e=>{var t;return(t=oe[e])!=null?t:i.default.m500},$=({$hasError:e,$shade:t,$isFocused:r,value:l,$onlyPh:c})=>e?typeof l=="string"&&!l&&!r?i.default.m500:v.default.m400:r&&!c?t:i.default.m500,se=s.default.textarea`
   border-radius: 0.64rem;
   font-size: 2.24rem;
-  border: 2px solid ${({
-  $hasError
-}) => $hasError ? red.default.m400 : black.black.m200};
+  border: 2px solid ${({$hasError:e})=>e?v.default.m400:I.black.m200};
   padding: 0.96rem;
   font-weight: 400;
   transition: border-color 0.3s ease;
-  background-color: ${({
-  $background
-}) => $background} !important;
+  background-color: ${({$background:e})=>e} !important;
   min-height: 2.24rem;
   min-width: 4.8rem;
 
-  ${({
-  $isResizeNone
-}) => $isResizeNone && /*@__PURE__*/styled.css`
+  ${({$isResizeNone:e})=>e&&a.css`
       resize: none;
     `}
 
-  ${({
-  $isDynamic
-}) => $isDynamic && /*@__PURE__*/styled.css`
+  ${({$isDynamic:e})=>e&&a.css`
       resize: none;
     `}
 
@@ -87,52 +27,38 @@ const TextareaBox = styled__default.default.textarea`
   }
 
   &::placeholder {
-    color: ${grey.default.m500};
+    color: ${i.default.m500};
     font-weight: 300;
     font-size: 2.24rem;
-    background-color: ${({
-  $background
-}) => $background};
+    background-color: ${({$background:e})=>e};
     pointer-events: none;
   }
 
   &:focus {
     border: 2px solid
-      ${({
-  $shade,
-  $hasError
-}) => getCssShade({
-  $shade,
-  $hasError,
-  $isFocused: true
-})};
+      ${({$shade:e,$hasError:t})=>$({$shade:e,$hasError:t,$isFocused:!0})};
     outline: none;
   }
-`;
-const HelperText = styled__default.default.p`
+`,ie=s.default.p`
   margin-top: 0.64rem;
   margin-left: 0.64rem;
   font-size: 1.28rem;
-  color: ${getCssShade};
-`;
-const Wrapper = styled__default.default.div`
+  color: ${$};
+`,ae=s.default.div`
   position: relative;
   width: fit-content;
-`;
-const Label = styled__default.default.div`
+`,le=s.default.div`
   position: absolute;
   top: -0.64rem;
   left: 0.8rem;
   font-size: 1.28rem;
-  background-color: ${({
-  $outerBackground
-}) => $outerBackground};
+  background-color: ${({$outerBackground:e})=>e};
   border-radius: 0.64rem;
   margin: 0 0.64rem;
   transition: 0.25s;
   font-weight: 400;
   pointer-events: none;
-  color: ${getCssShade};
+  color: ${$};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -140,129 +66,24 @@ const Label = styled__default.default.div`
   max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
   max-width: stretch; /* Modern Standard */
 
-  ${({
-  $isFocused,
-  $value,
-  $onlyPh
-}) => !$onlyPh && ($isFocused || $value) ? /*@__PURE__*/styled.css`
+  ${({$isFocused:e,$value:t,$onlyPh:r})=>!r&&(e||t)?a.css`
           top: -0.64rem;
           left: 0.8rem;
           padding: 0 0.64rem;
           margin: 0;
-        ` : /*@__PURE__*/styled.css`
+        `:a.css`
           top: 1.28rem;
           left: 0.8rem;
           font-size: 2.24rem;
         `}
-`;
-const Parent = styled__default.default.div`
+`,de=s.default.div`
   overflow: hidden;
-`;
-const LeftIconWrapper = styled__default.default.div`
+`,ue=s.default.div`
   position: absolute;
   top: 1.28rem;
   left: 0.96rem;
-`;
-const RightIconWrapper = styled__default.default.div`
+`,ce=s.default.div`
   position: absolute;
   top: 1.28rem;
   right: 0.96rem;
-`;
-const Textarea = ({
-  label,
-  onChange,
-  value,
-  type,
-  hasError,
-  name = "textarea",
-  color = "blue",
-  helperText = "",
-  background = "transparent",
-  outerBackground = white.default,
-  isDynamic,
-  isResizeNone,
-  rows = "2",
-  cols = "20",
-  leftIcon,
-  rightIcon,
-  placeholder,
-  ...params
-}) => {
-  const [$isFocused, setIsFocused] = react.useState(false);
-  const $shade = getColor(color);
-  const textAreaRef = react.useRef(null);
-  const resizeToContent = (element) => {
-    element.style.height = "";
-    const overflow = element.scrollHeight - element.clientHeight;
-    if (overflow > 0) {
-      const currentHeight = parseFloat(window.getComputedStyle(element).height);
-      element.style.height = `${currentHeight + overflow}px`;
-    }
-  };
-  const handleFocus = () => setIsFocused(true);
-  const handleBlur = () => setIsFocused(false);
-  const handleChange = (e) => {
-    if (isDynamic && textAreaRef.current) {
-      resizeToContent(textAreaRef.current);
-    }
-    onChange(e);
-  };
-  const iconStyles = {
-    color: grey.default.m500,
-    size: 20
-  };
-  const $hasLeftIcon = !!leftIcon;
-  const $hasRightIcon = !!rightIcon;
-  const $hasError = hasError;
-  const $isDynamic = isDynamic;
-  const $background = background;
-  const rowsObj = {
-    rows
-  };
-  const textareaId = `textarea-${name}`;
-  const helperId = helperText ? `${textareaId}-helper` : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TextareaBox, { ...{
-      type,
-      name,
-      $hasError,
-      value,
-      $isFocused,
-      $shade,
-      $isDynamic,
-      $background,
-      cols,
-      $hasLeftIcon,
-      $hasRightIcon,
-      $isResizeNone: isResizeNone,
-      ...rowsObj
-    }, id: textareaId, "aria-invalid": $hasError ? true : void 0, "aria-describedby": helperId, ref: textAreaRef, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ...params }),
-    leftIcon && /* @__PURE__ */ jsxRuntime.jsx(LeftIconWrapper, { "aria-hidden": "true", style: {
-      top: "1.2rem",
-      transform: "none"
-    }, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon.default, { svgIcon: leftIcon, iconStyles }) }),
-    rightIcon && /* @__PURE__ */ jsxRuntime.jsx(RightIconWrapper, { "aria-hidden": "true", style: {
-      top: "1.2rem",
-      transform: "none"
-    }, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon.default, { svgIcon: rightIcon, iconStyles }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Parent, { children: [
-      (label || placeholder && !value) && /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "label", htmlFor: textareaId, ...{
-        $hasError,
-        $isFocused,
-        $shade,
-        $value: value,
-        $outerBackground: $isFocused || !!value ? outerBackground : background,
-        $hasLeftIcon,
-        $hasRightIcon,
-        $onlyPh: placeholder && !label
-      }, children: label || placeholder }),
-      helperText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { id: helperId, ...{
-        $hasError,
-        $isFocused,
-        $shade,
-        $hasLeftIcon
-      }, children: helperText })
-    ] })
-  ] });
-};
-exports.default = Textarea;
+`,fe=({label:e,onChange:t,value:r,type:l,hasError:c,name:k="textarea",color:H="blue",helperText:f="",background:q="transparent",outerBackground:M=K.default,isDynamic:y,isResizeNone:B,rows:L="2",cols:O="20",leftIcon:m,rightIcon:h,placeholder:p,...P})=>{const[d,j]=F.useState(!1),g=ne(H),b=F.useRef(null),A=n=>{n.style.height="";const C=n.scrollHeight-n.clientHeight;if(C>0){const J=parseFloat(window.getComputedStyle(n).height);n.style.height=`${J+C}px`}},E=()=>j(!0),T=()=>j(!1),W=n=>{y&&b.current&&A(b.current),t(n)},z={color:i.default.m500,size:20},x=!!m,S=!!h,u=c,D=y,N=q,G={rows:L},w=`textarea-${k}`,_=f?`${w}-helper`:void 0;return o.jsxs(ae,{children:[o.jsx(se,{type:l,name:k,$hasError:u,value:r,$isFocused:d,$shade:g,$isDynamic:D,$background:N,cols:O,$hasLeftIcon:x,$hasRightIcon:S,$isResizeNone:B,...G,id:w,"aria-invalid":u?!0:void 0,"aria-describedby":_,ref:b,onFocus:E,onBlur:T,onChange:W,...P}),m&&o.jsx(ue,{"aria-hidden":"true",style:{top:"1.2rem",transform:"none"},children:o.jsx(R.default,{svgIcon:m,iconStyles:z})}),h&&o.jsx(ce,{"aria-hidden":"true",style:{top:"1.2rem",transform:"none"},children:o.jsx(R.default,{svgIcon:h,iconStyles:z})}),o.jsxs(de,{children:[(e||p&&!r)&&o.jsx(le,{as:"label",htmlFor:w,$hasError:u,$isFocused:d,$shade:g,$value:r,$outerBackground:d||r?M:q,$hasLeftIcon:x,$hasRightIcon:S,$onlyPh:p&&!e,children:e||p}),f&&o.jsx(ie,{id:_,$hasError:u,$isFocused:d,$shade:g,$hasLeftIcon:x,children:f})]})]})};exports.default=fe;

package/cjs/components/Input/Textarea/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Textarea = require("./Textarea.cjs");
-exports.default = Textarea.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Textarea.cjs");exports.default=e.default;

package/cjs/components/Loader/Loader.cjs

@@ -1,41 +1,4 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const constants = require("./constants.cjs");
-const PropTypes = require("prop-types");
-const styled = require("styled-components");
-const blue = require("../../colors/blue.cjs");
-const green = require("../../colors/green.cjs");
-const red = require("../../colors/red.cjs");
-const yellow = require("../../colors/yellow.cjs");
-const orange = require("../../colors/orange.cjs");
-const black = require("../../colors/black.cjs");
-const grey = require("../../colors/grey.cjs");
-const violet = require("../../colors/violet.cjs");
-const teal = require("../../colors/teal.cjs");
-const purple = require("../../colors/purple.cjs");
-const pink = require("../../colors/pink.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const COLOR_SHADE_MAP = {
-  blue: blue.blue,
-  green: green.default,
-  red: red.default,
-  yellow: yellow.default,
-  orange: orange.default,
-  black: black.black,
-  grey: grey.default,
-  violet: violet.default,
-  teal: teal.default,
-  purple: purple.default,
-  pink: pink.default
-};
-const getTheme = (clr) => {
-  var _a;
-  return (_a = COLOR_SHADE_MAP[clr]) != null ? _a : blue.blue;
-};
-const pulse = /*@__PURE__*/styled.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),t=require("./constants.cjs"),M=require("prop-types"),a=require("styled-components"),d=require("../../colors/blue.cjs"),$=require("../../colors/green.cjs"),k=require("../../colors/red.cjs"),D=require("../../colors/yellow.cjs"),x=require("../../colors/orange.cjs"),S=require("../../colors/black.cjs"),T=require("../../colors/grey.cjs"),A=require("../../colors/violet.cjs"),H=require("../../colors/teal.cjs"),w=require("../../colors/purple.cjs"),v=require("../../colors/pink.cjs"),f=e=>e&&e.__esModule?e:{default:e},s=f(M),l=f(a),I={blue:d.blue,green:$.default,red:k.default,yellow:D.default,orange:x.default,black:S.black,grey:T.default,violet:A.default,teal:H.default,purple:w.default,pink:v.default},L=e=>{var n;return(n=I[e])!=null?n:d.blue},j=a.keyframes`
   0% {
     transform: scale(1);
     animation-timing-function: ease-out;
@@ -47,8 +10,7 @@ const pulse = /*@__PURE__*/styled.keyframes`
   40%, 100% {
     transform: scale(1);
   }
-`;
-const bounce = /*@__PURE__*/styled.keyframes`
+`,P=a.keyframes`
   0%, 100% {
     transform: translateY(0) scale(1);
     animation-timing-function: ease-in;
@@ -57,15 +19,11 @@ const bounce = /*@__PURE__*/styled.keyframes`
     transform: translateY(-160%) scale(1.4);
     animation-timing-function: ease-out;
   }
-`;
-const LoaderWrapper = styled__default.default.div`
+`,O=l.default.div`
   display: inline-flex;
   align-items: center;
-  gap: ${({
-  $gap
-}) => $gap};
-`;
-const VisuallyHidden = styled__default.default.span`
+  gap: ${({$gap:e})=>e};
+`,U=l.default.span`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -75,68 +33,20 @@ const VisuallyHidden = styled__default.default.span`
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-`;
-const Dot = styled__default.default.span`
+`,Y=l.default.span`
   display: inline-block;
-  width: ${({
-  $size
-}) => $size};
-  height: ${({
-  $size
-}) => $size};
+  width: ${({$size:e})=>e};
+  height: ${({$size:e})=>e};
   border-radius: 50%;
-  background-color: ${({
-  $color
-}) => $color};
+  background-color: ${({$color:e})=>e};
   flex-shrink: 0;
 
-  ${({
-  $delay,
-  $isBounce
-}) => /*@__PURE__*/styled.css`
-    animation: ${$isBounce ? bounce : pulse} ${$isBounce ? 1.2 : 1.3}s ease-in-out infinite;
-    animation-delay: ${$delay}s;
+  ${({$delay:e,$isBounce:n})=>a.css`
+    animation: ${n?P:j} ${n?1.2:1.3}s ease-in-out infinite;
+    animation-delay: ${e}s;
 
     @media (prefers-reduced-motion: reduce) {
       animation: none;
     }
   `}
-`;
-const Loader = ({
-  size = constants.MEDIUM,
-  theme = constants.BLUE,
-  isBounce,
-  isMini,
-  isMiniDark,
-  ...rest
-}) => {
-  const {
-    dot,
-    gap
-  } = constants.SIZE[size] || constants.SIZE[constants.MEDIUM];
-  const colorPallette = getTheme(theme);
-  const delays = constants.ANIMATION_DELAYS;
-  const shades = isMiniDark ? constants.THEME_SHADE.slice(2, 6) : isMini ? constants.THEME_SHADE.slice(0, 3) : constants.THEME_SHADE;
-  const colors = shades.map((shade) => {
-    var _a;
-    return (_a = colorPallette[shade]) != null ? _a : colorPallette.m500;
-  });
-  const dots = delays.map(() => dot);
-  return /* @__PURE__ */ jsxRuntime.jsxs(LoaderWrapper, { role: "status", $gap: gap, ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { children: "Loading" }),
-    dots.map((dotSize, i) => /* @__PURE__ */ jsxRuntime.jsx(Dot, { "aria-hidden": "true", $size: dotSize, $color: colors[i], $delay: delays[i], $isBounce: isBounce }, `dot-${i}`))
-  ] });
-};
-Loader.propTypes = {
-  /** Loader size: `'small'`, `'medium'`, or `'large'`. Defaults to `'medium'` */
-  size: PropTypes__default.default.string,
-  /** Color theme key. Defaults to `'blue'` */
-  theme: PropTypes__default.default.string,
-  /** Switches dots to a bounce animation instead of fade */
-  isBounce: PropTypes__default.default.bool,
-  /** Renders a compact 3-dot variant */
-  isMini: PropTypes__default.default.bool,
-  /** Renders a compact dark 3-dot variant */
-  isMiniDark: PropTypes__default.default.bool
-};
-exports.default = Loader;
+`,p=({size:e=t.MEDIUM,theme:n=t.BLUE,isBounce:m,isMini:g,isMiniDark:b,...y})=>{const{dot:h,gap:E}=t.SIZE[e]||t.SIZE[t.MEDIUM],u=L(n),c=t.ANIMATION_DELAYS,q=(b?t.THEME_SHADE.slice(2,6):g?t.THEME_SHADE.slice(0,3):t.THEME_SHADE).map(i=>{var o;return(o=u[i])!=null?o:u.m500}),_=c.map(()=>h);return r.jsxs(O,{role:"status",$gap:E,...y,children:[r.jsx(U,{children:"Loading"}),_.map((i,o)=>r.jsx(Y,{"aria-hidden":"true",$size:i,$color:q[o],$delay:c[o],$isBounce:m},`dot-${o}`))]})};p.propTypes={size:s.default.string,theme:s.default.string,isBounce:s.default.bool,isMini:s.default.bool,isMiniDark:s.default.bool};exports.default=p;

package/cjs/components/Loader/constants.cjs

@@ -1,29 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const SMALL = "small";
-const MEDIUM = "medium";
-const LARGE = "large";
-const SIZE = {
-  [SMALL]: {
-    dot: "0.8rem",
-    gap: "0.48rem"
-  },
-  [MEDIUM]: {
-    dot: "1.2rem",
-    gap: "0.8rem"
-  },
-  [LARGE]: {
-    dot: "1.6rem",
-    gap: "1.12rem"
-  }
-};
-const BLUE = "blue";
-const THEME_SHADE = ["m200", "m300", "m400", "m600", "m800"];
-const ANIMATION_DELAYS = [0, 0.17, 0.34, 0.51, 0.68];
-exports.ANIMATION_DELAYS = ANIMATION_DELAYS;
-exports.BLUE = BLUE;
-exports.LARGE = LARGE;
-exports.MEDIUM = MEDIUM;
-exports.SIZE = SIZE;
-exports.SMALL = SMALL;
-exports.THEME_SHADE = THEME_SHADE;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="small",t="medium",E="large",m={[e]:{dot:"0.8rem",gap:"0.48rem"},[t]:{dot:"1.2rem",gap:"0.8rem"},[E]:{dot:"1.6rem",gap:"1.12rem"}},o="blue",A=["m200","m300","m400","m600","m800"],r=[0,.17,.34,.51,.68];exports.ANIMATION_DELAYS=r;exports.BLUE=o;exports.LARGE=E;exports.MEDIUM=t;exports.SIZE=m;exports.SMALL=e;exports.THEME_SHADE=A;

package/cjs/components/Loader/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Loader = require("./Loader.cjs");
-exports.default = Loader.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Loader.cjs");exports.default=e.default;

package/cjs/components/MenuItem/MenuItem.cjs

@@ -1,97 +1,18 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const grey = require("../../colors/grey.cjs");
-const blue = require("../../colors/blue.cjs");
-const white = require("../../colors/white.cjs");
-const styled = require("styled-components");
-const P = require("../Typography/P/P.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const Wrapper = styled__default.default.div`
-  width: ${({
-  $width
-}) => $width};
-  background-color: ${({
-  $isSelected,
-  $defaultColor,
-  $isHighlighted,
-  $hoverColor,
-  $selectedColor
-}) => $isSelected ? $selectedColor : $isHighlighted ? $hoverColor : $defaultColor};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),n=require("../../colors/grey.cjs"),i=require("../../colors/blue.cjs"),C=require("../../colors/white.cjs"),_=require("styled-components"),b=require("../Typography/P/P.cjs"),q=e=>e&&e.__esModule?e:{default:e},a=q(_),x=a.default.div`
+  width: ${({$width:e})=>e};
+  background-color: ${({$isSelected:e,$defaultColor:t,$isHighlighted:r,$hoverColor:l,$selectedColor:o})=>e?o:r?l:t};
 
-  cursor: ${({
-  $isSelected,
-  $isDisabled
-}) => $isSelected ? "auto" : $isDisabled ? "not-allowed" : "pointer"};
+  cursor: ${({$isSelected:e,$isDisabled:t})=>e?"auto":t?"not-allowed":"pointer"};
   padding: 0.96rem 0 1.28rem 1.6rem;
   margin-top: 0.16rem;
-  pointer-events: ${({
-  $isDisabled
-}) => $isDisabled ? "none" : "auto"};
+  pointer-events: ${({$isDisabled:e})=>e?"none":"auto"};
 
   &:active {
-    background-color: ${({
-  $isSelected,
-  $activeColor,
-  $selectedColor
-}) => $isSelected ? $selectedColor : $activeColor};
+    background-color: ${({$isSelected:e,$activeColor:t,$selectedColor:r})=>e?r:t};
   }
-`;
-const PWrapper = styled__default.default(P.default)`
+`,j=a.default(b.default)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({
-  $width
-}) => $width} - 3.2rem);
-`;
-const getColor = ({
-  isSelected,
-  isDisabled
-}) => {
-  if (isSelected) {
-    return grey.default.m700;
-  }
-  if (isDisabled) {
-    return grey.default.m300;
-  }
-  return grey.default.m500;
-};
-const MenuItem = ({
-  id,
-  value,
-  label,
-  width = "32rem",
-  isSelected,
-  defaultColor = white.default,
-  selectedColor = blue.blue.m200,
-  hoverColor = blue.blue.m50,
-  activeColor = blue.blue.m100,
-  isHighlighted,
-  size = "1.92rem",
-  onSelect,
-  isDisabled,
-  onMouseEnter,
-  ...rest
-}) => {
-  const handleClick = () => {
-    if (!isDisabled) {
-      onSelect(value);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...{
-    $isSelected: isSelected,
-    $width: width,
-    $defaultColor: defaultColor,
-    $selectedColor: selectedColor,
-    $hoverColor: hoverColor,
-    $activeColor: activeColor,
-    $isDisabled: isDisabled,
-    $isHighlighted: isHighlighted
-  }, id, role: "option", ...rest, "aria-selected": isSelected, "aria-disabled": isDisabled || void 0, onClick: handleClick, onMouseEnter, title: label, children: /* @__PURE__ */ jsxRuntime.jsx(PWrapper, { size, color: getColor({
-    isSelected,
-    isDisabled
-  }), $width: width, children: label }) });
-};
-exports.default = MenuItem;
+  max-width: calc(${({$width:e})=>e} - 3.2rem);
+`,k=({isSelected:e,isDisabled:t})=>e?n.default.m700:t?n.default.m300:n.default.m500,y=({id:e,value:t,label:r,width:l="32rem",isSelected:o,defaultColor:c=C.default,selectedColor:s=i.blue.m200,hoverColor:f=i.blue.m50,activeColor:m=i.blue.m100,isHighlighted:$,size:p="1.92rem",onSelect:h,isDisabled:u,onMouseEnter:g,...v})=>{const w=()=>{u||h(t)};return d.jsx(x,{$isSelected:o,$width:l,$defaultColor:c,$selectedColor:s,$hoverColor:f,$activeColor:m,$isDisabled:u,$isHighlighted:$,id:e,role:"option",...v,"aria-selected":o,"aria-disabled":u||void 0,onClick:w,onMouseEnter:g,title:r,children:d.jsx(j,{size:p,color:k({isSelected:o,isDisabled:u}),$width:l,children:r})})};exports.default=y;