meticulous-ui 2.6.2 → 2.8.0

package/README.md

@@ -65,6 +65,7 @@ import blue from 'meticulous-ui/colors/blue';
 | `Timer`        | Renders analog / digital clock with alarm                |
 | `OtpInput`     | Gives inputs to enter and edit OTP                       |
 | `VideoPlayer`  | Renders video with keyboard shortcuts                    |
+| `Image`        | Renders image with shimmer, lower resolution             |
 | `Input`        | Renders input box to let user enter input                |
 | `Checkbox`     | Renders checkbox to let user give boolean value          |
 | `RadioGroup`   | Renders radio options in a group to let user select      |

package/components/Dropdown/Dropdown.js

@@ -1,12 +1,12 @@
 import { jsxs as C, jsx as u } from "react/jsx-runtime";
-import { useState as $, useId as ie, useRef as v, useMemo as le, useEffect as h, useLayoutEffect as ae, useCallback as ue, createElement as fe } from "react";
+import { useState as $, useId as le, useRef as v, useMemo as ae, useEffect as h, useLayoutEffect as ue, useCallback as fe, createElement as de } from "react";
 import E from "../../colors/grey.js";
-import de from "../MenuItem/MenuItem.js";
-import pe from "../../colors/index.js";
-import me from "../../colors/blue.js";
+import pe from "../MenuItem/MenuItem.js";
+import me from "../../colors/index.js";
+import he from "../../colors/blue.js";
 import K from "../Spinner/Spinner.js";
-import { DropdownWrapper as he, Box as be, PWrapper as we, ChevronDownWrapper as xe, OptionWrapper as ge, SearchContainer as Ie, SearchIcon as ke, SearchInput as Se, OptionsList as Ce, LoadMoreSentinel as $e, SpinnerWrapper as ve } from "./styles.js";
-const ye = (n) => {
+import { DropdownWrapper as be, Box as we, PWrapper as xe, ChevronDownWrapper as ge, OptionWrapper as Ie, SearchContainer as ke, SearchIcon as Se, SearchInput as Ce, OptionsList as $e, LoadMoreSentinel as ve, SpinnerWrapper as ye } from "./styles.js";
+const Ee = (n) => {
   if (typeof n != "string") return n;
   if (n.endsWith("px")) return parseFloat(n);
   if (n.endsWith("rem")) {
@@ -14,7 +14,7 @@ const ye = (n) => {
     return O * s;
   }
   return parseFloat(n);
-}, Pe = ({
+}, He = ({
   options: n,
   onChange: O,
   value: s,
@@ -29,12 +29,13 @@ const ye = (n) => {
   onLoadMore: c,
   hasMore: I = !1,
   isLoadingMore: f = !1,
-  searchPh: R = "Search..."
+  searchPh: R = "Search...",
+  ...q
 }) => {
   var j;
-  const [r, d] = $(!1), [q, W] = $(!1), [N, T] = $("bottom"), [k, A] = $(""), [i, p] = $(-1), y = ie(), m = v(null), S = v(null), D = v(null), B = v(null), G = v(!0), J = () => !w && !x && d((e) => !e), P = (e) => {
+  const [r, d] = $(!1), [N, W] = $(!1), [T, G] = $("bottom"), [k, A] = $(""), [i, p] = $(-1), y = le(), m = v(null), S = v(null), D = v(null), B = v(null), J = v(!0), X = () => !w && !x && d((e) => !e), P = (e) => {
     e !== s && (O(e), d(!1));
-  }, l = le(() => {
+  }, l = ae(() => {
     if (!g || !k.trim()) return n;
     const e = k.toLowerCase();
     return n.filter(({ label: t }) => t.toLowerCase().includes(e));
@@ -61,35 +62,35 @@ const ye = (n) => {
   }, [i, r]), h(() => {
     r && g && D.current && D.current.focus();
   }, [r, g]), h(() => {
-    r || (G.current = !0);
+    r || (J.current = !0);
   }, [r]), h(() => {
     const e = (t) => {
       m.current && !m.current.contains(t.target) && d(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), ae(() => {
+  }, []), ue(() => {
     if (r && S.current && m.current) {
-      const e = m.current.getBoundingClientRect(), t = window.innerHeight, o = ye(F), a = t - e.bottom;
-      T(
+      const e = m.current.getBoundingClientRect(), t = window.innerHeight, o = Ee(F), a = t - e.bottom;
+      G(
         a < o + 8 && e.top > a ? "top" : "bottom"
       );
     }
   }, [r, F]);
-  const X = (e) => {
+  const Y = (e) => {
     let t = e + 1;
     for (; t < l.length; ) {
       if (!l[t].disabled) return t;
       t++;
     }
     return e;
-  }, Y = (e) => {
+  }, Z = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
       if (!l[t].disabled) return t;
       t--;
     }
     return e;
-  }, Z = (e) => {
+  }, _ = (e) => {
     if (!(w || x)) {
       if (!r) {
         (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d(!0));
@@ -98,11 +99,11 @@ const ye = (n) => {
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          const t = X(i);
+          const t = Y(i);
           t === i && I && !f && (c == null || c()), p(t);
           break;
         case "ArrowUp":
-          e.preventDefault(), p((a) => Y(a));
+          e.preventDefault(), p((a) => Z(a));
           break;
         case "Enter":
           e.preventDefault();
@@ -114,7 +115,7 @@ const ye = (n) => {
           break;
       }
     }
-  }, H = ue(() => {
+  }, H = fe(() => {
     I && !f && c && c();
   }, [I, f, c]);
   h(() => {
@@ -135,44 +136,45 @@ const ye = (n) => {
     return t.observe(e), () => t.disconnect();
   }, [H, c, I, f]);
   const {
-    m50: _,
-    m100: L,
-    m200: M,
-    m500: ee
-  } = pe[U] ?? me, te = (e, t) => () => !e && p(t), V = (e) => `${y}-opt-${e}`, re = ({ value: e, label: t, disabled: o }, a) => /* @__PURE__ */ fe(
-    de,
+    m50: L,
+    m100: M,
+    m200: ee,
+    m500: te
+  } = me[U] ?? he, re = (e, t) => () => !e && p(t), V = (e) => `${y}-opt-${e}`, ne = ({ value: e, label: t, disabled: o }, a) => /* @__PURE__ */ de(
+    pe,
     {
       value: e,
       label: t,
       isDisabled: o,
       onSelect: P,
-      onMouseEnter: te(o, a),
+      onMouseEnter: re(o, a),
       isSelected: e === s,
       isHighlighted: a === i,
       key: e,
       id: V(a),
       width: b,
-      selectedColor: M,
-      hoverColor: _,
-      activeColor: L
+      selectedColor: ee,
+      hoverColor: L,
+      activeColor: M
     }
-  ), ne = (e) => () => {
+  ), oe = (e) => () => {
     W(e);
-  }, oe = (e) => {
+  }, se = (e) => {
     var t;
     W(!1), (t = m.current) != null && t.contains(e.relatedTarget) || d(!1);
-  }, se = (e) => {
-    A(e.target.value);
   }, ce = (e) => {
+    A(e.target.value);
+  }, ie = (e) => {
     e.stopPropagation();
   };
   return /* @__PURE__ */ C(
-    he,
+    be,
     {
       ref: m,
       $width: b,
+      ...q,
       tabIndex: x || w ? -1 : 0,
-      onKeyDown: Z,
+      onKeyDown: _,
       $isLoading: w,
       $isDisabled: x,
       role: "combobox",
@@ -181,32 +183,32 @@ const ye = (n) => {
       "aria-controls": y,
       "aria-disabled": x || void 0,
       "aria-activedescendant": i !== -1 ? V(i) : void 0,
-      onFocus: ne(!0),
-      onBlur: oe,
+      onFocus: oe(!0),
+      onBlur: se,
       children: [
         /* @__PURE__ */ C(
-          be,
+          we,
           {
             $width: b,
-            onClick: J,
+            onClick: X,
             $isOpen: r,
-            $border: ee,
-            $isFocused: q && !r,
+            $border: te,
+            $isFocused: N && !r,
             children: [
-              /* @__PURE__ */ u(we, { $width: b, color: s ? E.m700 : E.m500, size: "1.2rem", children: s ? (j = n.find(({ value: e }) => s === e)) == null ? void 0 : j.label : Q }),
-              /* @__PURE__ */ u(xe, { color: E.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
+              /* @__PURE__ */ u(xe, { $width: b, color: s ? E.m700 : E.m500, size: "1.2rem", children: s ? (j = n.find(({ value: e }) => s === e)) == null ? void 0 : j.label : Q }),
+              /* @__PURE__ */ u(ge, { color: E.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }
         ),
-        /* @__PURE__ */ C(ge, { $isOpen: r, $width: b, $height: F, $top: N === "top", children: [
-          g && /* @__PURE__ */ C(Ie, { onClick: ce, children: [
-            /* @__PURE__ */ u(ke, { size: 20, color: E.m600, "aria-hidden": !0 }),
+        /* @__PURE__ */ C(Ie, { $isOpen: r, $width: b, $height: F, $top: T === "top", children: [
+          g && /* @__PURE__ */ C(ke, { onClick: ie, children: [
+            /* @__PURE__ */ u(Se, { size: 20, color: E.m600, "aria-hidden": !0 }),
             /* @__PURE__ */ u(
-              Se,
+              Ce,
               {
                 ref: D,
                 value: k,
-                onChange: se,
+                onChange: ce,
                 placeholder: R,
                 "aria-label": R,
                 "aria-controls": y,
@@ -217,16 +219,16 @@ const ye = (n) => {
               }
             )
           ] }),
-          /* @__PURE__ */ C(Ce, { ref: S, role: "listbox", id: y, tabIndex: -1, children: [
-            l.map(re),
-            c && /* @__PURE__ */ u($e, { ref: B, children: f && /* @__PURE__ */ u(K, { size: "small", color: z }) })
+          /* @__PURE__ */ C($e, { ref: S, role: "listbox", id: y, tabIndex: -1, children: [
+            l.map(ne),
+            c && /* @__PURE__ */ u(ve, { ref: B, children: f && /* @__PURE__ */ u(K, { size: "small", color: z }) })
           ] })
         ] }),
-        w && /* @__PURE__ */ u(ve, { children: /* @__PURE__ */ u(K, { size: "small", color: z }) })
+        w && /* @__PURE__ */ u(ye, { children: /* @__PURE__ */ u(K, { size: "small", color: z }) })
       ]
     }
   );
 };
 export {
-  Pe as default
+  He as default
 };

package/components/Glass/Glass.js

@@ -1,6 +1,6 @@
-import { jsx as s } from "react/jsx-runtime";
-import { GlassWrapper as a } from "./styles.js";
-const t = ({ border: r = "none", borderRadius: o = 0 }) => /* @__PURE__ */ s(a, { $border: r, $borderRadius: o });
+import { jsx as a } from "react/jsx-runtime";
+import { GlassWrapper as e } from "./styles.js";
+const d = ({ border: r = "none", borderRadius: o = 0, ...s }) => /* @__PURE__ */ a(e, { $border: r, $borderRadius: o, ...s });
 export {
-  t as default
+  d as default
 };

package/components/Image/Image.js

@@ -0,0 +1,49 @@
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { useState as a } from "react";
+import y from "../Shimmer/Shimmer.js";
+import { ImageWrapper as S, ShimmerOverlay as j, LowResImage as E, StyledImage as R } from "./styles.js";
+const o = (e) => {
+  if (e != null)
+    return typeof e == "number" ? `${e}rem` : e;
+}, k = ({
+  src: e,
+  alt: l = "",
+  width: c = "100%",
+  height: f = "100%",
+  borderRadius: r = "0.4rem",
+  loadLow: m = !1,
+  lowSrc: n,
+  ...u
+}) => {
+  const [i, $] = a(!1), [d, h] = a(!1), [s, L] = a(!1), p = () => $(!0), g = () => h(!0), w = () => L(!0), I = m ? i : d;
+  return /* @__PURE__ */ x(S, { $width: o(c), $height: o(f), $borderRadius: o(r), children: [
+    !s && /* @__PURE__ */ t(j, { $loaded: I, children: /* @__PURE__ */ t(y, { borderRadius: r }) }),
+    m && n && !s && /* @__PURE__ */ t(
+      E,
+      {
+        src: n,
+        alt: "",
+        "aria-hidden": "true",
+        $lowLoaded: i,
+        $loaded: d,
+        $borderRadius: o(r),
+        onLoad: p
+      }
+    ),
+    !s && /* @__PURE__ */ t(
+      R,
+      {
+        src: e,
+        alt: l,
+        $loaded: d,
+        $borderRadius: o(r),
+        onLoad: g,
+        onError: w,
+        ...u
+      }
+    )
+  ] });
+};
+export {
+  k as default
+};

package/components/Image/index.js

@@ -0,0 +1,4 @@
+import e from "./Image.js";
+export {
+  e as default
+};

package/components/Image/styles.js

@@ -0,0 +1,44 @@
+import t from "styled-components";
+const s = t.span`
+  position: relative;
+  display: inline-block;
+  width: ${({ $width: i }) => i};
+  height: ${({ $height: i }) => i};
+  border-radius: ${({ $borderRadius: i }) => i};
+  overflow: hidden;
+`, a = t.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: ${({ $borderRadius: i }) => i};
+  opacity: ${({ $loaded: i }) => i ? 1 : 0};
+  transition: opacity 0.5s ease-in-out;
+`, n = t.div`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  opacity: ${({ $loaded: i }) => i ? 0 : 1};
+  transition: opacity 0.35s ease-out;
+  pointer-events: none;
+`, r = t.img`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.05);
+  filter: ${({ $loaded: i }) => i ? "blur(0px)" : "blur(12px)"};
+  opacity: ${({ $lowLoaded: i, $loaded: e }) => i && !e ? 1 : 0};
+  transition:
+    opacity 0.5s ease-in-out,
+    filter 0.5s ease-in-out;
+`;
+export {
+  s as ImageWrapper,
+  r as LowResImage,
+  n as ShimmerOverlay,
+  a as StyledImage
+};

package/components/Input/Checkbox/Checkbox.js

@@ -1,23 +1,24 @@
-import { jsxs as D, jsx as s } from "react/jsx-runtime";
-import { useState as $, useRef as g } from "react";
-import H from "../../../colors/grey.js";
-import P from "../../Typography/P/P.js";
-import j from "../../../colors/white.js";
+import { jsxs as $, jsx as s } from "react/jsx-runtime";
+import { useState as g, useRef as H } from "react";
+import P from "../../../colors/grey.js";
+import j from "../../Typography/P/P.js";
+import z from "../../../colors/white.js";
 import m from "../../../colors/blue.js";
-import { Wrapper as z, CbInput as B, Box as C } from "./styles.js";
-import { getColor as E } from "./helpers.js";
-const G = ({
+import { Wrapper as B, CbInput as C, Box as E } from "./styles.js";
+import { getColor as F } from "./helpers.js";
+const J = ({
   label: u,
   value: o,
   color: l = "blue",
-  textColor: p = H.m700,
+  textColor: p = P.m700,
   disabled: c,
   onChange: t,
   tabIndex: d,
   innerShade: h,
-  outerShade: k
+  outerShade: k,
+  ...y
 }) => {
-  const [y, n] = $(!1), r = E(l), S = h ?? (r == null ? void 0 : r.m500) ?? m.m500, b = k ?? (r == null ? void 0 : r.m600) ?? m.m600, a = g(0), x = (e) => t(e.target.checked), w = (e) => {
+  const [S, n] = g(!1), r = F(l), b = h ?? (r == null ? void 0 : r.m500) ?? m.m500, x = k ?? (r == null ? void 0 : r.m600) ?? m.m600, a = H(0), w = (e) => t(e.target.checked), D = (e) => {
     if (e.key === "Enter" || e.key === " ") {
       const i = Date.now();
       if (i - a.current < 500) {
@@ -32,14 +33,14 @@ const G = ({
     }
     e.key === "Escape" && n(!1);
   }, f = (e) => () => n(e);
-  return /* @__PURE__ */ D(z, { as: "label", $disabled: c, children: [
+  return /* @__PURE__ */ $(B, { as: "label", $disabled: c, ...y, children: [
     /* @__PURE__ */ s(
-      B,
+      C,
       {
         type: "checkbox",
         checked: o,
-        onChange: x,
-        onKeyDown: w,
+        onChange: w,
+        onKeyDown: D,
         onFocus: f(!0),
         onBlur: f(!1),
         disabled: c,
@@ -47,20 +48,20 @@ const G = ({
       }
     ),
     /* @__PURE__ */ s(
-      C,
+      E,
       {
         $value: o,
-        $focused: y,
+        $focused: S,
         size: 6,
-        color: j,
-        $innerShade: S,
-        $outerShade: b,
+        color: z,
+        $innerShade: b,
+        $outerShade: x,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ s(P, { color: p, size: "1.2rem", children: u })
+    /* @__PURE__ */ s(j, { color: p, size: "1.2rem", children: u })
   ] });
 };
 export {
-  G as default
+  J as default
 };

package/components/Input/Checkbox/styles.js

@@ -11,7 +11,7 @@ const c = e.div`
 
   ${({ $disabled: r }) => r && t`
       pointer-events: none;
-      opacity: 0.7;
+      opacity: 0.4;
     `}
 `, d = e(i)`
   width: 1.2rem;

package/components/Input/FileUploader/FileUploader.js

@@ -1,36 +1,37 @@
-import { jsx as o, jsxs as U } from "react/jsx-runtime";
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
 import { useRef as C } from "react";
-import { UploadBtnContainer as g, Wrapper as j, HiddenInput as M, PWrapper as W } from "./styles.js";
-import b from "../../../colors/white.js";
+import { UploadBtnContainer as j, Wrapper as M, HiddenInput as W, PWrapper as b } from "./styles.js";
+import B from "../../../colors/white.js";
 import x from "../../../colors/blue.js";
-import B from "../../../colors/grey.js";
-import F from "../../Icons/Link/Link.js";
-import H from "../../../colors/index.js";
-import P from "../../Ripple/Ripple.js";
-import { SIZE as Z, MEDIUM as q } from "./constants.js";
-const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(P, { rippleColor: e.m100, children: l }), L = ({
+import F from "../../../colors/grey.js";
+import H from "../../Icons/Link/Link.js";
+import P from "../../../colors/index.js";
+import Z from "../../Ripple/Ripple.js";
+import { SIZE as q, MEDIUM as A } from "./constants.js";
+const G = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m100, children: l }), oo = ({
   label: e,
   labelColor: l,
   theme: p = x,
-  size: D = q,
+  size: D = A,
   width: s,
   isLoading: t,
   disabled: r,
-  prefixIcon: c = F,
+  prefixIcon: c = H,
   suffixIcon: m,
   type: I = "file",
   accept: R,
   isMultiple: k,
-  onChange: z
+  onChange: z,
+  ...K
 }) => {
-  const u = C(null), { m400: K, m500: v, m600: E } = H[p] ?? x, { height: h, width: a, font: n } = Z[D] || {}, f = l || ["white", "yellow"].includes(p) ? B.m600 : b, $ = C(0), w = /* @__PURE__ */ U(
-    j,
+  const u = C(null), { m400: v, m500: E, m600: U } = P[p] ?? x, { height: h, width: a, font: n } = q[D] || {}, f = l || ["white", "yellow"].includes(p) ? F.m600 : B, $ = C(0), w = /* @__PURE__ */ g(
+    M,
     {
-      $selectedColor: K,
-      $hoverColor: v,
+      $selectedColor: v,
+      $hoverColor: E,
       $height: h,
       $width: s || a,
-      $activeColor: E,
+      $activeColor: U,
       disabled: r,
       $isLoading: t,
       role: "button",
@@ -51,7 +52,7 @@ const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(P, { rippleColor: e.m
       },
       children: [
         /* @__PURE__ */ o(
-          M,
+          W,
           {
             ref: u,
             type: I,
@@ -64,7 +65,7 @@ const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(P, { rippleColor: e.m
         ),
         c && /* @__PURE__ */ o(c, { color: f, size: n + 19 }),
         /* @__PURE__ */ o(
-          W,
+          b,
           {
             color: f,
             size: `${n}rem`,
@@ -79,8 +80,18 @@ const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(P, { rippleColor: e.m
       ]
     }
   );
-  return /* @__PURE__ */ o(g, { $height: h, $width: s || a, disabled: r, $isLoading: t, children: t || r ? w : /* @__PURE__ */ o(A, { theme: p, children: w }) });
+  return /* @__PURE__ */ o(
+    j,
+    {
+      $height: h,
+      $width: s || a,
+      disabled: r,
+      $isLoading: t,
+      ...K,
+      children: t || r ? w : /* @__PURE__ */ o(G, { theme: p, children: w })
+    }
+  );
 };
 export {
-  L as default
+  oo as default
 };

package/components/Input/Radio/Radio.js

@@ -1,12 +1,22 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import u from "../../Typography/P/P.js";
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import $ from "../../Typography/P/P.js";
 import m from "../../../colors/blue.js";
-import { Wrapper as $, HiddenInput as y, CircleBorder as D, Circle as w } from "./styles.js";
-const k = ({ label: s, value: r, name: p, color: e, textColor: f, isSelected: d, disabled: t, onChange: i }) => {
-  const c = (e == null ? void 0 : e.m500) ?? m.m500, a = (e == null ? void 0 : e.m800) ?? m.m800;
-  return /* @__PURE__ */ o($, { $disabled: t, $focusShade: a, children: [
+import { Wrapper as y, HiddenInput as D, CircleBorder as w, Circle as x } from "./styles.js";
+const C = ({
+  label: s,
+  value: r,
+  name: p,
+  color: e,
+  textColor: f,
+  isSelected: d,
+  disabled: t,
+  onChange: i,
+  ...c
+}) => {
+  const o = (e == null ? void 0 : e.m500) ?? m.m500, a = (e == null ? void 0 : e.m800) ?? m.m800;
+  return /* @__PURE__ */ u(y, { $disabled: t, $focusShade: a, ...c, children: [
     /* @__PURE__ */ n(
-      y,
+      D,
       {
         type: "radio",
         name: p,
@@ -19,10 +29,10 @@ const k = ({ label: s, value: r, name: p, color: e, textColor: f, isSelected: d,
         }
       }
     ),
-    /* @__PURE__ */ n(D, { "aria-hidden": "true", $isSelected: d, $shade: a, children: /* @__PURE__ */ n(w, { $isSelected: d, $shade: c }) }),
-    /* @__PURE__ */ n(u, { color: f, size: "1.2rem", children: s })
+    /* @__PURE__ */ n(w, { "aria-hidden": "true", $isSelected: d, $shade: a, children: /* @__PURE__ */ n(x, { $isSelected: d, $shade: o }) }),
+    /* @__PURE__ */ n($, { color: f, size: "1.2rem", children: s })
   ] });
 };
 export {
-  k as default
+  C as default
 };

package/components/Input/RadioGroup/RadioGroup.js

@@ -1,9 +1,9 @@
-import { jsxs as f, jsx as u } from "react/jsx-runtime";
-import { createElement as g } from "react";
-import { getColor as h } from "../Checkbox/helpers.js";
-import x from "../Radio/Radio.js";
-import { Wrapper as j } from "./styles.js";
-const v = ({
+import { jsxs as u, jsx as g } from "react/jsx-runtime";
+import { createElement as h } from "react";
+import { getColor as x } from "../Checkbox/helpers.js";
+import j from "../Radio/Radio.js";
+import { Wrapper as k } from "./styles.js";
+const y = ({
   options: i,
   color: n = "blue",
   value: o,
@@ -11,34 +11,36 @@ const v = ({
   isHorizonatal: d,
   label: e,
   ariaLabel: m,
-  name: c
+  name: c,
+  ...l
 }) => {
-  const l = h(n), s = (r) => {
+  const s = x(n), t = (r) => {
     r !== o && a(r);
-  }, t = (r) => /* @__PURE__ */ g(
-    x,
+  }, f = (r) => /* @__PURE__ */ h(
+    j,
     {
       ...r,
       key: r == null ? void 0 : r.value,
       name: c,
-      color: l,
+      color: s,
       isSelected: o === (r == null ? void 0 : r.value),
-      onChange: s
+      onChange: t
     }
   );
-  return /* @__PURE__ */ f(
-    j,
+  return /* @__PURE__ */ u(
+    k,
     {
       role: "radiogroup",
       "aria-label": e ? void 0 : m,
       $isHorizonatal: d,
+      ...l,
       children: [
-        e && /* @__PURE__ */ u("legend", { children: e }),
-        i.map(t)
+        e && /* @__PURE__ */ g("legend", { children: e }),
+        i.map(f)
       ]
     }
   );
 };
 export {
-  v as default
+  y as default
 };