@dotss/ui 1.2.1 → 1.2.2

package/Select/Select.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),i=require("react"),P=require("../Backdrop/Backdrop.cjs"),T=require("../Box/Box.cjs"),K=require("../Flexbox/Flexbox.cjs"),U=require("../Icon/Icon.cjs"),X=require("@emotion/styled"),E=require("../utils/getSibling/getSibling.cjs"),G=e=>e&&e.__esModule?e:{default:e},m=G(X),J=m.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),r=require("react"),P=require("../Backdrop/Backdrop.cjs"),T=require("../Box/Box.cjs"),K=require("../Flexbox/Flexbox.cjs"),U=require("../Icon/Icon.cjs"),X=require("@emotion/styled"),E=require("../utils/getSibling/getSibling.cjs"),G=e=>e&&e.__esModule?e:{default:e},S=G(X),J=S.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -12,12 +12,12 @@
     color: inherit;
   }
 
-  ${({theme:{palette:{grey:e,background:r}},variant:g})=>{let s={};switch(g){case"outlined":s={border:`1px solid ${e[50]}`,"&[disabled]":{backgroundColor:e[10],border:`1px solid ${e[30]}`,color:e[30],pointerEvents:"none"}};break;case"filled":s={border:"1px solid transparent",backgroundColor:r.primary,"&[disabled]":{backgroundColor:e[10],color:e[30],pointerEvents:"none"}};break}return s}}
+  ${({theme:{palette:{grey:e,background:i}},variant:h})=>{let s={};switch(h){case"outlined":s={border:`1px solid ${e[50]}`,"&[disabled]":{backgroundColor:e[10],border:`1px solid ${e[30]}`,color:e[30],cursor:"not-allowed"}};break;case"filled":s={border:"1px solid transparent",backgroundColor:i.primary,"&[disabled]":{backgroundColor:e[10],color:e[30],cursor:"not-allowed"}};break}return s}}
 
-  ${({theme:{palette:{brand:e}},isFocused:r})=>r?{border:`1px solid ${e.primary.line}`}:{}}
+  ${({theme:{palette:{brand:e}},isFocused:i})=>i?{border:`1px solid ${e.primary.line}`}:{}}
   
-  ${({size:e})=>{let r={};switch(e){case"large":r={height:"48px"};break;case"xLarge":r={height:"56px"};break}return r}}
-`,N=m.default.div`
+  ${({size:e})=>{let i={};switch(e){case"large":i={height:"48px"};break;case"xLarge":i={height:"56px"};break}return i}}
+`,N=S.default.div`
   display: flex;
   width: calc(100% - 24px - 8px);
   gap: ${({theme:e})=>`${e.spacing.content(2)}px`};
@@ -25,18 +25,18 @@
     color: inherit;
   }
 
-  ${({theme:{typography:e,palette:{grey:r}},value:g})=>{const s={fontSize:e.b2R.size,fontWeight:e.b2R.size,lineHeight:e.b2R.lineHeight,letterSpacing:e.b2R.letterSpacing,"&[disabled]":{color:r[30]}};return g?{...s,color:r[100]}:{...s,color:r[50]}}}
-`,Q=m.default.div`
+  ${({theme:{typography:e,palette:{grey:i}},value:h})=>{const s={fontSize:e.b2R.size,fontWeight:e.b2R.size,lineHeight:e.b2R.lineHeight,letterSpacing:e.b2R.letterSpacing,"&[disabled]":{color:i[30]}};return h?{...s,color:i[100]}:{...s,color:i[50]}}}
+`,Q=S.default.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`,Y=m.default.div`
+`,Y=S.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
   transform: ${({isFocused:e})=>e?"rotate(180deg)":"rotate(0deg)"};
   transition: transform 200ms linear;
-`,Z=m.default.ul`
+`,Z=S.default.ul`
   position: fixed;
   max-height: 476px;
   overflow-y: auto;
@@ -50,4 +50,4 @@
   box-shadow: ${({theme:{elevation:e}})=>e[4]};
   transition: opacity 200ms linear;
   opacity: ${({isFocused:e})=>e?1:0};
-`,ee=i.forwardRef(function({value:r,onChange:g,open:s,onOpen:v,onClose:C,variant:O="outlined",size:q="large",startAdornment:j,placeholder:W="TEXT",disabled:k=!1,fullWidth:D,children:h,inlineCSS:z,...S},V){const _=i.useId(),b=i.useRef(null),w=i.useRef(null),x=i.useRef(""),[d,u]=i.useState(s||!1),[f,c]=i.useState(""),[$,y]=i.useState({top:0,bottom:0,left:0,width:0}),p=(S==null?void 0:S.id)||_,H=()=>{s===void 0?u(t=>!t):s===!1&&v&&typeof v=="function"&&v()},I=t=>()=>{g(t.toString()),R()},R=()=>{s===void 0?(u(!1),c("")):s===!0&&C&&typeof C=="function"&&C()},B=t=>{if(t.preventDefault(),t.code==="Escape"&&u(!1),t.code==="Space"||t.code==="Enter")if(x.current?c(x.current):f||c(`${p}-0`),d){if(f){const n=document.querySelector(`#${CSS.escape(f)}`);n&&n.hasAttribute("value")&&(x.current=n==null?void 0:n.id,I(n.value)())}u(!1)}else u(!0);if(t.code==="ArrowDown"||t.code==="ArrowUp"){if(d||u(!0),x.current?c(x.current):c(`${p}-0`),!w.current||!f)return;const n=w.current.querySelector(`#${CSS.escape(f)}`);if(!n)return;if(t.code==="ArrowDown"){const o=E.default(n,"next",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=w.current.firstElementChild;l&&(c(l.id),l.scrollIntoView({block:"start"}))}}if(t.code==="ArrowUp"){const o=E.default(n,"prev",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=w.current.lastElementChild;l&&(c(l.id),l.scrollIntoView({block:"end"}))}}}if(t.code==="Home"&&c(`${p}-0`),t.code==="End"){const n=i.Children.count(h);c(`${p}-${n-1}`)}},L=t=>{const n=i.Children.map(t,o=>i.isValidElement(o)&&o&&o.props.value===r?o.props.children:null);return n&&n.length?n[0]:""};return i.useEffect(()=>{const t=()=>{if(b.current){const n=b.current.getBoundingClientRect(),o=i.Children.count(h),l=40,A=24,F=l*o>476?476:l*o,M=b.current.getBoundingClientRect().bottom+F+A>window.innerHeight;y(M?{bottom:24,left:n.left,width:b.current.offsetWidth}:{top:n.top+n.height,left:n.left,width:b.current.offsetWidth})}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[h]),i.useEffect(()=>{s!==void 0&&u(s)},[s]),a.jsxs(T.default,{ref:V,inlineCSS:{position:"relative"},children:[a.jsxs(J,{role:"combobox",ref:b,tabIndex:0,variant:O,size:q,disabled:k,fullWidth:D,isFocused:d,onClick:H,onKeyDown:B,"aria-controls":p,"aria-expanded":d,"aria-haspopup":"listbox","aria-activedescendant":f,...S,css:z,children:[a.jsxs(N,{value:r==="0"||!!r,disabled:k,children:[j&&a.jsx(K.default,{justifyContent:"center",alignItems:"center",children:j}),a.jsx(Q,{children:L(h)||W})]}),a.jsx(Y,{isFocused:d,children:a.jsx(U.default,{name:"ChevronDownLine",size:"small",color:k?"grey.30":"grey.100"})})]}),a.jsx(P.default,{open:d,onClose:R,inlineCSS:{backgroundColor:"transparent"},children:a.jsx(Z,{id:p,role:"listbox",ref:w,tabIndex:-1,isFocused:d,style:{top:$.top,bottom:$.bottom,left:$.left,width:$.width},children:i.Children.map(h,(t,n)=>{if(!i.isValidElement(t)||!t.props.value)return null;const o=`${p}-${n}`,l=r===t.props.value;return l&&(x.current=o),i.cloneElement(t,{id:o,selected:l,focused:o===f,onClick:I(t.props.value),...t.props})})})})]})});exports.default=ee;
+`,ee=r.forwardRef(function({value:i,onChange:h,open:s,onOpen:C,onClose:k,variant:O="outlined",size:q="large",startAdornment:j,placeholder:W="TEXT",disabled:d=!1,fullWidth:D,children:w,inlineCSS:z,...$},V){const _=r.useId(),g=r.useRef(null),m=r.useRef(null),b=r.useRef(""),[u,f]=r.useState(s||!1),[p,c]=r.useState(""),[v,y]=r.useState({top:0,bottom:0,left:0,width:0}),x=($==null?void 0:$.id)||_,H=()=>{d||(s===void 0?f(t=>!t):s===!1&&C&&typeof C=="function"&&C())},I=t=>()=>{d||(h(t.toString()),R())},R=()=>{d||(s===void 0?(f(!1),c("")):s===!0&&k&&typeof k=="function"&&k())},B=t=>{if(!d){if(t.preventDefault(),t.code==="Escape"&&f(!1),t.code==="Space"||t.code==="Enter")if(b.current?c(b.current):p||c(`${x}-0`),u){if(p){const n=document.querySelector(`#${CSS.escape(p)}`);n&&n.hasAttribute("value")&&(b.current=n==null?void 0:n.id,I(n.value)())}f(!1)}else f(!0);if(t.code==="ArrowDown"||t.code==="ArrowUp"){if(u||f(!0),b.current?c(b.current):c(`${x}-0`),!m.current||!p)return;const n=m.current.querySelector(`#${CSS.escape(p)}`);if(!n)return;if(t.code==="ArrowDown"){const o=E.default(n,"next",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=m.current.firstElementChild;l&&(c(l.id),l.scrollIntoView({block:"start"}))}}if(t.code==="ArrowUp"){const o=E.default(n,"prev",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=m.current.lastElementChild;l&&(c(l.id),l.scrollIntoView({block:"end"}))}}}if(t.code==="Home"&&c(`${x}-0`),t.code==="End"){const n=r.Children.count(w);c(`${x}-${n-1}`)}}},L=t=>{const n=r.Children.map(t,o=>r.isValidElement(o)&&o&&o.props.value===i?o.props.children:null);return n&&n.length?n[0]:""};return r.useEffect(()=>{const t=()=>{if(g.current){const n=g.current.getBoundingClientRect(),o=r.Children.count(w),l=40,A=24,F=l*o>476?476:l*o,M=g.current.getBoundingClientRect().bottom+F+A>window.innerHeight;y(M?{bottom:24,left:n.left,width:g.current.offsetWidth}:{top:n.top+n.height,left:n.left,width:g.current.offsetWidth})}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[w]),r.useEffect(()=>{s!==void 0&&f(s)},[s]),a.jsxs(T.default,{ref:V,inlineCSS:{position:"relative"},children:[a.jsxs(J,{role:"combobox",ref:g,tabIndex:0,variant:O,size:q,disabled:d,fullWidth:D,isFocused:u,onClick:H,onKeyDown:B,"aria-controls":x,"aria-expanded":u,"aria-haspopup":"listbox","aria-activedescendant":p,"aria-disabled":d,...$,css:z,children:[a.jsxs(N,{value:i==="0"||!!i,disabled:d,children:[j&&a.jsx(K.default,{justifyContent:"center",alignItems:"center",children:j}),a.jsx(Q,{children:L(w)||W})]}),a.jsx(Y,{isFocused:u,children:a.jsx(U.default,{name:"ChevronDownLine",size:"small",color:d?"grey.30":"grey.100"})})]}),a.jsx(P.default,{open:u,onClose:R,inlineCSS:{backgroundColor:"transparent"},children:a.jsx(Z,{id:x,role:"listbox",ref:m,tabIndex:-1,isFocused:u,style:{top:v.top,bottom:v.bottom,left:v.left,width:v.width},children:r.Children.map(w,(t,n)=>{if(!r.isValidElement(t)||!t.props.value)return null;const o=`${x}-${n}`,l=i===t.props.value;return l&&(b.current=o),r.cloneElement(t,{id:o,selected:l,focused:o===p,onClick:I(t.props.value),...t.props})})})})]})});exports.default=ee;

package/Select/Select.es.js

@@ -1,12 +1,12 @@
-import { jsxs as I, jsx as b } from "@emotion/react/jsx-runtime";
-import { forwardRef as J, useId as N, useRef as y, useState as E, useEffect as z, Children as v, isValidElement as D, cloneElement as Q } from "react";
+import { jsxs as I, jsx as g } from "@emotion/react/jsx-runtime";
+import { forwardRef as J, useId as N, useRef as y, useState as R, useEffect as z, Children as v, isValidElement as D, cloneElement as Q } from "react";
 import Y from "../Backdrop/Backdrop.es.js";
 import Z from "../Box/Box.es.js";
 import _ from "../Flexbox/Flexbox.es.js";
 import ee from "../Icon/Icon.es.js";
-import h from "@emotion/styled";
+import w from "@emotion/styled";
 import H from "../utils/getSibling/getSibling.es.js";
-const te = h.div`
+const te = w.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -22,64 +22,64 @@ const te = h.div`
 
   ${({
   theme: {
-    palette: { grey: e, background: i }
+    palette: { grey: e, background: r }
   },
-  variant: m
+  variant: b
 }) => {
-  let r = {};
-  switch (m) {
+  let i = {};
+  switch (b) {
     case "outlined":
-      r = {
+      i = {
         border: `1px solid ${e[50]}`,
         "&[disabled]": {
           backgroundColor: e[10],
           border: `1px solid ${e[30]}`,
           color: e[30],
-          pointerEvents: "none"
+          cursor: "not-allowed"
         }
       };
       break;
     case "filled":
-      r = {
+      i = {
         border: "1px solid transparent",
-        backgroundColor: i.primary,
+        backgroundColor: r.primary,
         "&[disabled]": {
           backgroundColor: e[10],
           color: e[30],
-          pointerEvents: "none"
+          cursor: "not-allowed"
         }
       };
       break;
   }
-  return r;
+  return i;
 }}
 
   ${({
   theme: {
     palette: { brand: e }
   },
-  isFocused: i
-}) => i ? {
+  isFocused: r
+}) => r ? {
   border: `1px solid ${e.primary.line}`
 } : {}}
   
   ${({ size: e }) => {
-  let i = {};
+  let r = {};
   switch (e) {
     case "large":
-      i = {
+      r = {
         height: "48px"
       };
       break;
     case "xLarge":
-      i = {
+      r = {
         height: "56px"
       };
       break;
   }
-  return i;
+  return r;
 }}
-`, ne = h.div`
+`, oe = w.div`
   display: flex;
   width: calc(100% - 24px - 8px);
   gap: ${({ theme: e }) => `${e.spacing.content(2)}px`};
@@ -90,38 +90,38 @@ const te = h.div`
   ${({
   theme: {
     typography: e,
-    palette: { grey: i }
+    palette: { grey: r }
   },
-  value: m
+  value: b
 }) => {
-  const r = {
+  const i = {
     fontSize: e.b2R.size,
     fontWeight: e.b2R.size,
     lineHeight: e.b2R.lineHeight,
     letterSpacing: e.b2R.letterSpacing,
     "&[disabled]": {
-      color: i[30]
+      color: r[30]
     }
   };
-  return m ? {
-    ...r,
-    color: i[100]
+  return b ? {
+    ...i,
+    color: r[100]
   } : {
-    ...r,
-    color: i[50]
+    ...i,
+    color: r[50]
   };
 }}
-`, oe = h.div`
+`, ne = w.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`, ie = h.div`
+`, re = w.div`
   display: flex;
   align-items: center;
   justify-content: center;
   transform: ${({ isFocused: e }) => e ? "rotate(180deg)" : "rotate(0deg)"};
   transition: transform 200ms linear;
-`, re = h.ul`
+`, ie = w.ul`
   position: fixed;
   max-height: 476px;
   overflow-y: auto;
@@ -135,150 +135,153 @@ const te = h.div`
   box-shadow: ${({ theme: { elevation: e } }) => e[4]};
   transition: opacity 200ms linear;
   opacity: ${({ isFocused: e }) => e ? 1 : 0};
-`, be = J(function({
-  value: i,
-  onChange: m,
-  open: r,
-  onOpen: S,
-  onClose: C,
+`, me = J(function({
+  value: r,
+  onChange: b,
+  open: i,
+  onOpen: C,
+  onClose: k,
   variant: V = "outlined",
   size: B = "large",
-  startAdornment: R,
+  startAdornment: E,
   placeholder: L = "TEXT",
-  disabled: k = !1,
+  disabled: c = !1,
   fullWidth: A,
-  children: g,
+  children: x,
   inlineCSS: F,
-  ...w
+  ...$
 }, q) {
-  const K = N(), f = y(null), x = y(null), u = y(""), [c, a] = E(r || !1), [d, l] = E(""), [$, O] = E({ top: 0, bottom: 0, left: 0, width: 0 }), p = (w == null ? void 0 : w.id) || K, P = () => {
-    r === void 0 ? a((t) => !t) : r === !1 && S && typeof S == "function" && S();
+  const K = N(), u = y(null), h = y(null), m = y(""), [a, d] = R(i || !1), [f, s] = R(""), [S, O] = R({ top: 0, bottom: 0, left: 0, width: 0 }), p = ($ == null ? void 0 : $.id) || K, P = () => {
+    c || (i === void 0 ? d((t) => !t) : i === !1 && C && typeof C == "function" && C());
   }, W = (t) => () => {
-    m(t.toString()), j();
+    c || (b(t.toString()), j());
   }, j = () => {
-    r === void 0 ? (a(!1), l("")) : r === !0 && C && typeof C == "function" && C();
+    c || (i === void 0 ? (d(!1), s("")) : i === !0 && k && typeof k == "function" && k());
   }, T = (t) => {
-    if (t.preventDefault(), t.code === "Escape" && a(!1), t.code === "Space" || t.code === "Enter")
-      if (u.current ? l(u.current) : d || l(`${p}-0`), c) {
-        if (d) {
-          const n = document.querySelector(
-            `#${CSS.escape(d)}`
-          );
-          n && n.hasAttribute("value") && (u.current = n == null ? void 0 : n.id, W(n.value)());
+    if (!c) {
+      if (t.preventDefault(), t.code === "Escape" && d(!1), t.code === "Space" || t.code === "Enter")
+        if (m.current ? s(m.current) : f || s(`${p}-0`), a) {
+          if (f) {
+            const o = document.querySelector(
+              `#${CSS.escape(f)}`
+            );
+            o && o.hasAttribute("value") && (m.current = o == null ? void 0 : o.id, W(o.value)());
+          }
+          d(!1);
+        } else
+          d(!0);
+      if (t.code === "ArrowDown" || t.code === "ArrowUp") {
+        if (a || d(!0), m.current ? s(m.current) : s(`${p}-0`), !h.current || !f) return;
+        const o = h.current.querySelector(
+          `#${CSS.escape(f)}`
+        );
+        if (!o) return;
+        if (t.code === "ArrowDown") {
+          const n = H(o, "next", { skipDisabled: !0 });
+          if (n && n.id)
+            s(n.id), n.scrollIntoView({ block: "end" });
+          else {
+            const l = h.current.firstElementChild;
+            l && (s(l.id), l.scrollIntoView({ block: "start" }));
+          }
         }
-        a(!1);
-      } else
-        a(!0);
-    if (t.code === "ArrowDown" || t.code === "ArrowUp") {
-      if (c || a(!0), u.current ? l(u.current) : l(`${p}-0`), !x.current || !d) return;
-      const n = x.current.querySelector(
-        `#${CSS.escape(d)}`
-      );
-      if (!n) return;
-      if (t.code === "ArrowDown") {
-        const o = H(n, "next", { skipDisabled: !0 });
-        if (o && o.id)
-          l(o.id), o.scrollIntoView({ block: "end" });
-        else {
-          const s = x.current.firstElementChild;
-          s && (l(s.id), s.scrollIntoView({ block: "start" }));
+        if (t.code === "ArrowUp") {
+          const n = H(o, "prev", { skipDisabled: !0 });
+          if (n && n.id)
+            s(n.id), n.scrollIntoView({ block: "end" });
+          else {
+            const l = h.current.lastElementChild;
+            l && (s(l.id), l.scrollIntoView({ block: "end" }));
+          }
         }
       }
-      if (t.code === "ArrowUp") {
-        const o = H(n, "prev", { skipDisabled: !0 });
-        if (o && o.id)
-          l(o.id), o.scrollIntoView({ block: "end" });
-        else {
-          const s = x.current.lastElementChild;
-          s && (l(s.id), s.scrollIntoView({ block: "end" }));
-        }
+      if (t.code === "Home" && s(`${p}-0`), t.code === "End") {
+        const o = v.count(x);
+        s(`${p}-${o - 1}`);
       }
     }
-    if (t.code === "Home" && l(`${p}-0`), t.code === "End") {
-      const n = v.count(g);
-      l(`${p}-${n - 1}`);
-    }
   }, U = (t) => {
-    const n = v.map(t, (o) => D(o) && o && o.props.value === i ? o.props.children : null);
-    return n && n.length ? n[0] : "";
+    const o = v.map(t, (n) => D(n) && n && n.props.value === r ? n.props.children : null);
+    return o && o.length ? o[0] : "";
   };
   return z(() => {
     const t = () => {
-      if (f.current) {
-        const n = f.current.getBoundingClientRect(), o = v.count(g), s = 40, M = 24, X = s * o > 476 ? 476 : s * o, G = f.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
+      if (u.current) {
+        const o = u.current.getBoundingClientRect(), n = v.count(x), l = 40, M = 24, X = l * n > 476 ? 476 : l * n, G = u.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
         O(G ? {
           bottom: 24,
-          left: n.left,
-          width: f.current.offsetWidth
+          left: o.left,
+          width: u.current.offsetWidth
         } : {
-          top: n.top + n.height,
-          left: n.left,
-          width: f.current.offsetWidth
+          top: o.top + o.height,
+          left: o.left,
+          width: u.current.offsetWidth
         });
       }
     };
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }, [g]), z(() => {
-    r !== void 0 && a(r);
-  }, [r]), /* @__PURE__ */ I(Z, { ref: q, inlineCSS: { position: "relative" }, children: [
+  }, [x]), z(() => {
+    i !== void 0 && d(i);
+  }, [i]), /* @__PURE__ */ I(Z, { ref: q, inlineCSS: { position: "relative" }, children: [
     /* @__PURE__ */ I(
       te,
       {
         role: "combobox",
-        ref: f,
+        ref: u,
         tabIndex: 0,
         variant: V,
         size: B,
-        disabled: k,
+        disabled: c,
         fullWidth: A,
-        isFocused: c,
+        isFocused: a,
         onClick: P,
         onKeyDown: T,
         "aria-controls": p,
-        "aria-expanded": c,
+        "aria-expanded": a,
         "aria-haspopup": "listbox",
-        "aria-activedescendant": d,
-        ...w,
+        "aria-activedescendant": f,
+        "aria-disabled": c,
+        ...$,
         css: F,
         children: [
-          /* @__PURE__ */ I(ne, { value: i === "0" || !!i, disabled: k, children: [
-            R && /* @__PURE__ */ b(_, { justifyContent: "center", alignItems: "center", children: R }),
-            /* @__PURE__ */ b(oe, { children: U(g) || L })
+          /* @__PURE__ */ I(oe, { value: r === "0" || !!r, disabled: c, children: [
+            E && /* @__PURE__ */ g(_, { justifyContent: "center", alignItems: "center", children: E }),
+            /* @__PURE__ */ g(ne, { children: U(x) || L })
           ] }),
-          /* @__PURE__ */ b(ie, { isFocused: c, children: /* @__PURE__ */ b(ee, { name: "ChevronDownLine", size: "small", color: k ? "grey.30" : "grey.100" }) })
+          /* @__PURE__ */ g(re, { isFocused: a, children: /* @__PURE__ */ g(ee, { name: "ChevronDownLine", size: "small", color: c ? "grey.30" : "grey.100" }) })
         ]
       }
     ),
-    /* @__PURE__ */ b(
+    /* @__PURE__ */ g(
       Y,
       {
-        open: c,
+        open: a,
         onClose: j,
         inlineCSS: { backgroundColor: "transparent" },
-        children: /* @__PURE__ */ b(
-          re,
+        children: /* @__PURE__ */ g(
+          ie,
           {
             id: p,
             role: "listbox",
-            ref: x,
+            ref: h,
             tabIndex: -1,
-            isFocused: c,
+            isFocused: a,
             style: {
-              top: $.top,
-              bottom: $.bottom,
-              left: $.left,
-              width: $.width
+              top: S.top,
+              bottom: S.bottom,
+              left: S.left,
+              width: S.width
             },
-            children: v.map(g, (t, n) => {
+            children: v.map(x, (t, o) => {
               if (!D(t) || !t.props.value)
                 return null;
-              const o = `${p}-${n}`, s = i === t.props.value;
-              return s && (u.current = o), Q(t, {
-                id: o,
-                selected: s,
-                focused: o === d,
+              const n = `${p}-${o}`, l = r === t.props.value;
+              return l && (m.current = n), Q(t, {
+                id: n,
+                selected: l,
+                focused: n === f,
                 onClick: W(t.props.value),
                 ...t.props
               });
@@ -290,5 +293,5 @@ const te = h.div`
   ] });
 });
 export {
-  be as default
+  me as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",