meticulous-ui 3.7.12 → 3.7.13

package/components/Image/Image.js

@@ -5,35 +5,23 @@ import s from "styled-components";
 const j = s.span`
   position: relative;
   display: inline-block;
-  width: ${({
-  $width: e
-}) => e};
-  height: ${({
-  $height: e
-}) => e};
-  border-radius: ${({
-  $borderRadius: e
-}) => e};
+  width: ${({ $width: e }) => e};
+  height: ${({ $height: e }) => e};
+  border-radius: ${({ $borderRadius: e }) => e};
   overflow: hidden;
 `, I = s.img`
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: ${({
-  $borderRadius: e
-}) => e};
-  opacity: ${({
-  $loaded: e
-}) => e ? 1 : 0};
+  border-radius: ${({ $borderRadius: e }) => e};
+  opacity: ${({ $loaded: e }) => e ? 1 : 0};
   transition: opacity 0.5s ease-in-out;
 `, k = s.div`
   position: absolute;
   inset: 0;
   z-index: 2;
-  opacity: ${({
-  $loaded: e
-}) => e ? 0 : 1};
+  opacity: ${({ $loaded: e }) => e ? 0 : 1};
   transition: opacity 0.35s ease-out;
   pointer-events: none;
 `, S = s.img`
@@ -45,13 +33,8 @@ const j = s.span`
   height: 100%;
   object-fit: cover;
   transform: scale(1.05);
-  filter: ${({
-  $loaded: e
-}) => e ? "blur(0px)" : "blur(12px)"};
-  opacity: ${({
-  $lowLoaded: e,
-  $loaded: t
-}) => e && !t ? 1 : 0};
+  filter: ${({ $loaded: e }) => e ? "blur(0px)" : "blur(12px)"};
+  opacity: ${({ $lowLoaded: e, $loaded: t }) => e && !t ? 1 : 0};
   transition:
     opacity 0.5s ease-in-out,
     filter 0.5s ease-in-out;
@@ -71,8 +54,31 @@ const j = s.span`
   const [m, $] = d(!1), [n, f] = d(!1), [a, y] = d(!1), b = () => $(!0), g = () => f(!0), L = () => y(!0), w = c ? m : n;
   return /* @__PURE__ */ x(j, { $width: o(p), $height: o(u), $borderRadius: o(i), children: [
     !a && /* @__PURE__ */ r(k, { $loaded: w, children: /* @__PURE__ */ r(v, { borderRadius: i }) }),
-    c && l && !a && /* @__PURE__ */ r(S, { src: l, alt: "", "aria-hidden": "true", $lowLoaded: m, $loaded: n, $borderRadius: o(i), onLoad: b }),
-    !a && /* @__PURE__ */ r(I, { src: e, alt: t, "aria-hidden": t === "" ? "true" : void 0, $loaded: n, $borderRadius: o(i), onLoad: g, onError: L, ...h })
+    c && l && !a && /* @__PURE__ */ r(
+      S,
+      {
+        src: l,
+        alt: "",
+        "aria-hidden": "true",
+        $lowLoaded: m,
+        $loaded: n,
+        $borderRadius: o(i),
+        onLoad: b
+      }
+    ),
+    !a && /* @__PURE__ */ r(
+      I,
+      {
+        src: e,
+        alt: t,
+        "aria-hidden": t === "" ? "true" : void 0,
+        $loaded: n,
+        $borderRadius: o(i),
+        onLoad: g,
+        onError: L,
+        ...h
+      }
+    )
   ] });
 };
 export {

package/components/Input/Checkbox/Checkbox.js

@@ -39,41 +39,28 @@ const J = {
   width: max-content;
   position: relative;
 
-  ${({
-  $disabled: o
-}) => o && q`
+  ${({ $disabled: o }) => o && q`
       pointer-events: none;
       opacity: 0.4;
     `}
 `, U = f(G)`
   width: 1.92rem;
   height: 1.92rem;
-  border: 1px solid ${({
-  $value: o,
-  $outerShade: r
-}) => o ? r : l.m800};
+  border: 1px solid ${({ $value: o, $outerShade: r }) => o ? r : l.m800};
   border-radius: 0.32rem;
-  background-color: ${({
-  $value: o,
-  $innerShade: r
-}) => o ? r : "transparent"};
+  background-color: ${({ $value: o, $innerShade: r }) => o ? r : "transparent"};
   transition:
     background-color 0.5s ease,
     border-color 0.5s ease,
     box-shadow 0.5s ease;
   flex-shrink: 0;
-  box-shadow: 0 0 0 1px ${({
-  $focused: o,
-  $outerShade: r
-}) => o ? r : "transparent"};
+  box-shadow: 0 0 0 1px ${({ $focused: o, $outerShade: r }) => o ? r : "transparent"};
 
   path {
     stroke-width: 3;
     transform-box: fill-box;
     transform-origin: center;
-    transform: scale(${({
-  $value: o
-}) => o ? 1 : 0});
+    transform: scale(${({ $value: o }) => o ? 1 : 0});
     transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
 `, V = f.input`
@@ -114,8 +101,31 @@ const J = {
     t.key === "Escape" && m(!1);
   }, d = (t) => () => m(t);
   return /* @__PURE__ */ E(Q, { as: "label", $disabled: u, ...$, children: [
-    /* @__PURE__ */ p(V, { type: "checkbox", checked: r, onChange: H, onKeyDown: z, onFocus: d(!0), onBlur: d(!1), disabled: u, tabIndex: w }),
-    /* @__PURE__ */ p(U, { $value: r, $focused: C, size: 6, color: B, $innerShade: D, $outerShade: P, "aria-hidden": "true" }),
+    /* @__PURE__ */ p(
+      V,
+      {
+        type: "checkbox",
+        checked: r,
+        onChange: H,
+        onKeyDown: z,
+        onFocus: d(!0),
+        onBlur: d(!1),
+        disabled: u,
+        tabIndex: w
+      }
+    ),
+    /* @__PURE__ */ p(
+      U,
+      {
+        $value: r,
+        $focused: C,
+        size: 6,
+        color: B,
+        $innerShade: D,
+        $outerShade: P,
+        "aria-hidden": "true"
+      }
+    ),
     /* @__PURE__ */ p(A, { color: y, size: "1.92rem", children: o })
   ] });
 };

package/components/Input/FileUploader/FileUploader.js

@@ -12,17 +12,12 @@ import { SIZE as L, MEDIUM as O } from "./constants.js";
 import l, { css as f } from "styled-components";
 import Y from "../../Typography/P/P.js";
 const Z = l.div`
-  height: ${({
-  $height: e
-}) => e}rem;
+  height: ${({ $height: e }) => e}rem;
   display: inline-block;
   position: relative;
   border-radius: 0.96rem;
 
-  ${({
-  disabled: e,
-  $isLoading: o
-}) => !(e || o) && f`
+  ${({ disabled: e, $isLoading: o }) => !(e || o) && f`
       box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
       transition:
         transform 0.2s,
@@ -35,12 +30,8 @@ const Z = l.div`
       }
     `};
 `, q = l.label`
-  height: ${({
-  $height: e
-}) => `${e}rem`};
-  width: ${({
-  $width: e
-}) => `${e}rem`};
+  height: ${({ $height: e }) => `${e}rem`};
+  width: ${({ $width: e }) => `${e}rem`};
   border-radius: 0.96rem;
   border: none;
   padding: 0 0.8rem;
@@ -50,54 +41,32 @@ const Z = l.div`
   outline: none;
   position: relative;
   overflow: hidden;
-  background-color: ${({
-  $selectedColor: e,
-  disabled: o
-}) => o ? k.m500 : e};
-  cursor: ${({
-  disabled: e,
-  $isLoading: o
-}) => e ? "not-allowed" : o ? "auto" : "pointer"};
+  background-color: ${({ $selectedColor: e, disabled: o }) => o ? k.m500 : e};
+  cursor: ${({ disabled: e, $isLoading: o }) => e ? "not-allowed" : o ? "auto" : "pointer"};
 
-  ${({
-  $isLoading: e
-}) => e && f`
+  ${({ $isLoading: e }) => e && f`
       pointer-events: none;
     `};
 
-  ${({
-  disabled: e,
-  $isLoading: o
-}) => !(e || o) && f`
+  ${({ disabled: e, $isLoading: o }) => !(e || o) && f`
       &:hover {
-        background-color: ${({
-  $hoverColor: i
-}) => i};
+        background-color: ${({ $hoverColor: i }) => i};
       }
 
       &:active {
-        background-color: ${({
-  $activeColor: i
-}) => i};
+        background-color: ${({ $activeColor: i }) => i};
       }
     `};
 `, A = l(Y)`
-  color: ${({
-  color: e
-}) => e};
-  font-size: ${({
-  size: e
-}) => e};
+  color: ${({ color: e }) => e};
+  font-size: ${({ size: e }) => e};
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: calc(
     100%
-      ${({
-  $prefixIcon: e,
-  $iconSize: o
-}) => e ? ` - ${o}px - 0.8rem` : ""}${({
+      ${({ $prefixIcon: e, $iconSize: o }) => e ? ` - ${o}px - 0.8rem` : ""}${({
   $suffixIcon: e,
   $iconSize: o
 }) => e ? ` - ${o}px - 0.8rem` : ""}
@@ -108,9 +77,7 @@ const Z = l.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: ${({
-  $isLoading: e
-}) => e ? 1 : 0};
+  opacity: ${({ $isLoading: e }) => e ? 1 : 0};
   transition: opacity 0.3s ease;
   pointer-events: none;
 `, J = l.div`
@@ -119,9 +86,7 @@ const Z = l.div`
   gap: 0.8rem;
   flex: 1;
   min-width: 0;
-  opacity: ${({
-  $isLoading: e
-}) => e ? 0 : 1};
+  opacity: ${({ $isLoading: e }) => e ? 0 : 1};
   transition: opacity 0.3s ease;
 `, N = l.input`
   position: absolute;
@@ -133,10 +98,7 @@ const Z = l.div`
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
-`, Q = ({
-  theme: e,
-  children: o
-}) => /* @__PURE__ */ t(H, { rippleColor: e.m100, children: o }), V = ({
+`, Q = ({ theme: e, children: o }) => /* @__PURE__ */ t(H, { rippleColor: e.m100, children: o }), V = ({
   label: e,
   labelColor: o,
   theme: i = C,
@@ -153,34 +115,63 @@ const Z = l.div`
   ...W
 }) => {
   var g;
-  const h = v(null), {
-    m400: j,
-    m500: E,
-    m600: M
-  } = (g = F[i]) != null ? g : C, {
-    height: $,
-    width: P,
-    font: p
-  } = L[z] || {}, a = o || ["white", "yellow"].includes(i) ? k.m600 : S, u = v(0), w = /* @__PURE__ */ x(q, { $selectedColor: j, $hoverColor: E, $height: $, $width: I || P, $activeColor: M, disabled: s, $isLoading: n, tabIndex: 0, "aria-disabled": s, onKeyDown: (c) => {
-    var y;
-    if (c.key === "Enter" || c.key === " ") {
-      c.preventDefault();
-      const b = Date.now();
-      if (b - u.current < 500) {
-        c.stopPropagation();
-        return;
-      }
-      u.current = b, !s && !n && ((y = h.current) == null || y.click());
+  const h = v(null), { m400: j, m500: E, m600: M } = (g = F[i]) != null ? g : C, { height: $, width: P, font: p } = L[z] || {}, a = o || ["white", "yellow"].includes(i) ? k.m600 : S, u = v(0), w = /* @__PURE__ */ x(
+    q,
+    {
+      $selectedColor: j,
+      $hoverColor: E,
+      $height: $,
+      $width: I || P,
+      $activeColor: M,
+      disabled: s,
+      $isLoading: n,
+      tabIndex: 0,
+      "aria-disabled": s,
+      onKeyDown: (c) => {
+        var y;
+        if (c.key === "Enter" || c.key === " ") {
+          c.preventDefault();
+          const b = Date.now();
+          if (b - u.current < 500) {
+            c.stopPropagation();
+            return;
+          }
+          u.current = b, !s && !n && ((y = h.current) == null || y.click());
+        }
+      },
+      children: [
+        /* @__PURE__ */ t(
+          N,
+          {
+            ref: h,
+            type: D,
+            accept: R,
+            multiple: T,
+            disabled: s,
+            onChange: K,
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ t(G, { $isLoading: n, children: /* @__PURE__ */ t(U, { size: "small", color: a }) }),
+        /* @__PURE__ */ x(J, { $isLoading: n, children: [
+          m && /* @__PURE__ */ t(m, { color: a, size: p + 19 }),
+          /* @__PURE__ */ t(
+            A,
+            {
+              color: a,
+              size: `${p}rem`,
+              $prefixIcon: !!m,
+              $suffixIcon: !!d,
+              $iconSize: p + 19,
+              title: e,
+              children: e
+            }
+          ),
+          d && /* @__PURE__ */ t(d, { color: a, size: p + 19 })
+        ] })
+      ]
     }
-  }, children: [
-    /* @__PURE__ */ t(N, { ref: h, type: D, accept: R, multiple: T, disabled: s, onChange: K, tabIndex: -1 }),
-    /* @__PURE__ */ t(G, { $isLoading: n, children: /* @__PURE__ */ t(U, { size: "small", color: a }) }),
-    /* @__PURE__ */ x(J, { $isLoading: n, children: [
-      m && /* @__PURE__ */ t(m, { color: a, size: p + 19 }),
-      /* @__PURE__ */ t(A, { color: a, size: `${p}rem`, $prefixIcon: !!m, $suffixIcon: !!d, $iconSize: p + 19, title: e, children: e }),
-      d && /* @__PURE__ */ t(d, { color: a, size: p + 19 })
-    ] })
-  ] });
+  );
   return /* @__PURE__ */ t(Z, { $height: $, disabled: s, $isLoading: n, ...W, children: n || s ? w : /* @__PURE__ */ t(Q, { theme: i, children: w }) });
 };
 V.propTypes = {
@@ -193,7 +184,7 @@ V.propTypes = {
   /** Button size variant: 'small', 'medium', 'large', or 'ex-large'. Defaults to 'medium' */
   size: r.string,
   /** Override the button width */
-  width: /* @__PURE__ */ r.oneOfType([r.string, r.number]),
+  width: r.oneOfType([r.string, r.number]),
   /** Shows a spinner and disables interaction while true */
   isLoading: r.bool,
   /** Disables the file uploader */

package/components/Input/Input/Input.js

@@ -29,28 +29,15 @@ const V = {
 }, X = (o) => {
   var r;
   return (r = V[o]) != null ? r : m.m500;
-}, $ = ({
-  $hasError: o,
-  $shade: r,
-  $isFocused: e,
-  value: t,
-  $onlyPh: l
-}) => o ? typeof t == "string" && !t && !e ? m.m500 : h.m400 : e && !l ? r : m.m500, Y = ({
-  $hasLeftIcon: o,
-  $hasRightIcon: r
-}) => o && r ? "0 3.84rem" : o ? "0 0.96rem 0 3.84rem" : r ? "0 3.84rem 0 0.96rem" : "0 0.96rem", Z = n.input`
+}, $ = ({ $hasError: o, $shade: r, $isFocused: e, value: t, $onlyPh: l }) => o ? typeof t == "string" && !t && !e ? m.m500 : h.m400 : e && !l ? r : m.m500, Y = ({ $hasLeftIcon: o, $hasRightIcon: r }) => o && r ? "0 3.84rem" : o ? "0 0.96rem 0 3.84rem" : r ? "0 3.84rem 0 0.96rem" : "0 0.96rem", Z = n.input`
   height: 4.8rem;
   border-radius: 0.64rem;
   font-size: 2.24rem;
-  border: 2px solid ${({
-  $hasError: o
-}) => o ? h.m400 : F.m200};
+  border: 2px solid ${({ $hasError: o }) => o ? h.m400 : F.m200};
   padding: ${Y};
   font-weight: 400;
   transition: border-color 0.3s ease;
-  background-color: ${({
-  $background: o
-}) => o} !important;
+  background-color: ${({ $background: o }) => o} !important;
   overflow: hidden;
 
   &:-webkit-autofill,
@@ -66,22 +53,13 @@ const V = {
     color: ${m.m500};
     font-weight: 300;
     font-size: 2.24rem;
-    background-color: ${({
-  $background: o
-}) => o};
+    background-color: ${({ $background: o }) => o};
     pointer-events: none;
   }
 
   &:focus {
     border: 2px solid
-      ${({
-  $shade: o,
-  $hasError: r
-}) => $({
-  $shade: o,
-  $hasError: r,
-  $isFocused: !0
-})};
+      ${({ $shade: o, $hasError: r }) => $({ $shade: o, $hasError: r, $isFocused: !0 })};
     outline: none;
   }
 `, T = n.p`
@@ -110,9 +88,7 @@ const to = n.div`
   top: -0.64rem;
   left: 0.8rem;
   font-size: 1.28rem;
-  background-color: ${({
-  $outerBackground: o
-}) => o};
+  background-color: ${({ $outerBackground: o }) => o};
   border-radius: 0.64rem;
   margin: 0 0.64rem;
   transition: 0.25s;
@@ -120,22 +96,14 @@ const to = n.div`
   pointer-events: none;
   color: ${$};
 
-  ${({
-  $isFocused: o,
-  value: r,
-  $onlyPh: e
-}) => !e && (o || r) ? C`
+  ${({ $isFocused: o, value: r, $onlyPh: e }) => !e && (o || r) ? C`
           top: -0.64rem;
-          left: ${({
-  $hasLeftIcon: t
-}) => t ? 3.52 : 0.8}rem;
+          left: ${({ $hasLeftIcon: t }) => t ? 3.52 : 0.8}rem;
           padding: 0 0.64rem;
           margin: 0;
         ` : C`
           top: 1.28rem;
-          left: ${({
-  $hasLeftIcon: t
-}) => t ? 3.52 : 0.8}rem;
+          left: ${({ $hasLeftIcon: t }) => t ? 3.52 : 0.8}rem;
           font-size: 2.24rem;
         `}
 `, ko = ({
@@ -158,15 +126,49 @@ const to = n.div`
 }) => {
   const [s, k] = _(!1), f = X(S), j = () => k(!0), A = () => k(!1), E = (O) => {
     r(O);
-  }, x = {
-    color: m.m500,
-    size: 22
-  }, g = !!d, y = !!c, a = l, H = w, b = `input-${v}`, z = p ? `${b}-helper` : void 0;
+  }, x = { color: m.m500, size: 22 }, g = !!d, y = !!c, a = l, H = w, b = `input-${v}`, z = p ? `${b}-helper` : void 0;
   return /* @__PURE__ */ R(oo, { children: [
-    /* @__PURE__ */ i(Z, { type: t, name: v, $hasError: a, size: B, value: e, $isFocused: s, $shade: f, $background: H, $hasLeftIcon: g, $hasRightIcon: y, id: b, "aria-invalid": a ? !0 : void 0, "aria-describedby": z, onFocus: j, onBlur: A, onChange: E, autoComplete: L ? "off" : "on", ...W }),
+    /* @__PURE__ */ i(
+      Z,
+      {
+        type: t,
+        name: v,
+        $hasError: a,
+        size: B,
+        value: e,
+        $isFocused: s,
+        $shade: f,
+        $background: H,
+        $hasLeftIcon: g,
+        $hasRightIcon: y,
+        id: b,
+        "aria-invalid": a ? !0 : void 0,
+        "aria-describedby": z,
+        onFocus: j,
+        onBlur: A,
+        onChange: E,
+        autoComplete: L ? "off" : "on",
+        ...W
+      }
+    ),
     d && /* @__PURE__ */ i(ro, { "aria-hidden": "true", children: /* @__PURE__ */ i(I, { svgIcon: d, iconStyles: x }) }),
     c && /* @__PURE__ */ i(eo, { "aria-hidden": "true", children: /* @__PURE__ */ i(I, { svgIcon: c, iconStyles: x }) }),
-    (o || u && !e) && /* @__PURE__ */ i(to, { as: "label", htmlFor: b, $hasError: a, $isFocused: s, $shade: f, value: e, $outerBackground: s || e ? P : w, $hasLeftIcon: g, $hasRightIcon: y, $onlyPh: u && !o, children: o || u }),
+    (o || u && !e) && /* @__PURE__ */ i(
+      to,
+      {
+        as: "label",
+        htmlFor: b,
+        $hasError: a,
+        $isFocused: s,
+        $shade: f,
+        value: e,
+        $outerBackground: s || e ? P : w,
+        $hasLeftIcon: g,
+        $hasRightIcon: y,
+        $onlyPh: u && !o,
+        children: o || u
+      }
+    ),
     p && /* @__PURE__ */ i(T, { id: z, $hasError: a, $isFocused: s, $shade: f, $hasLeftIcon: g, children: p })
   ] });
 };

package/components/Input/Radio/Radio.js

@@ -11,18 +11,12 @@ const k = i.div`
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  background-color: ${({
-  $isSelected: e,
-  $shade: t
-}) => e ? t : "transparent"};
+  background-color: ${({ $isSelected: e, $shade: t }) => e ? t : "transparent"};
   transition: background-color 0.35s ease;
 `, f = i.div`
   width: 1.76rem;
   height: 1.76rem;
-  border: 1px solid ${({
-  $isSelected: e,
-  $shade: t
-}) => e ? t : u.m900};
+  border: 1px solid ${({ $isSelected: e, $shade: t }) => e ? t : u.m900};
   border-radius: 50%;
   position: relative;
   transition:
@@ -45,14 +39,10 @@ const k = i.div`
   width: max-content;
 
   &:focus-within ${f} {
-    box-shadow: 0 0 0 1px ${({
-  $focusShade: e
-}) => e || u.m900};
+    box-shadow: 0 0 0 1px ${({ $focusShade: e }) => e || u.m900};
   }
 
-  ${({
-  $disabled: e
-}) => e ? l`
+  ${({ $disabled: e }) => e ? l`
           pointer-events: none;
           opacity: 0.4;
           cursor: not-allowed;
@@ -73,9 +63,20 @@ const k = i.div`
   var p, h;
   const x = (p = r == null ? void 0 : r.m500) != null ? p : m.m500, d = (h = r == null ? void 0 : r.m800) != null ? h : m.m800;
   return /* @__PURE__ */ $(D, { $disabled: s, $focusShade: d, ...g, children: [
-    /* @__PURE__ */ n(v, { type: "radio", name: w, value: t, checked: o, disabled: s, onChange: () => a(t), onKeyDown: (c) => {
-      c.key === "Enter" && (c.preventDefault(), s || a(t));
-    } }),
+    /* @__PURE__ */ n(
+      v,
+      {
+        type: "radio",
+        name: w,
+        value: t,
+        checked: o,
+        disabled: s,
+        onChange: () => a(t),
+        onKeyDown: (c) => {
+          c.key === "Enter" && (c.preventDefault(), s || a(t));
+        }
+      }
+    ),
     /* @__PURE__ */ n(f, { "aria-hidden": "true", $isSelected: o, $shade: d, children: /* @__PURE__ */ n(k, { $isSelected: o, $shade: x }) }),
     /* @__PURE__ */ n(y, { color: b, size: "1.92rem", children: e })
   ] });

package/components/Input/RadioGroup/RadioGroup.js

@@ -34,13 +34,9 @@ const E = {
   padding: 0;
   margin: 0;
   display: flex;
-  flex-direction: ${({
-  $isHorizonatal: e
-}) => e ? "row" : "column"};
+  flex-direction: ${({ $isHorizonatal: e }) => e ? "row" : "column"};
 
-  ${({
-  $isHorizonatal: e
-}) => e ? m`
+  ${({ $isHorizonatal: e }) => e ? m`
           flex-wrap: wrap;
           justify-content: space-between;
         ` : m`
@@ -59,19 +55,40 @@ const E = {
 }) => {
   const d = L(i), g = (o) => {
     o !== a && l(o);
-  }, u = (o) => /* @__PURE__ */ h(x, { ...o, key: o == null ? void 0 : o.value, name: f, color: d, isSelected: a === (o == null ? void 0 : o.value), onChange: g });
-  return /* @__PURE__ */ y(P, { role: "radiogroup", "aria-label": n ? void 0 : p, $isHorizonatal: s, ...c, children: [
-    n && /* @__PURE__ */ b("legend", { children: n }),
-    e.map(u)
-  ] });
+  }, u = (o) => /* @__PURE__ */ h(
+    x,
+    {
+      ...o,
+      key: o == null ? void 0 : o.value,
+      name: f,
+      color: d,
+      isSelected: a === (o == null ? void 0 : o.value),
+      onChange: g
+    }
+  );
+  return /* @__PURE__ */ y(
+    P,
+    {
+      role: "radiogroup",
+      "aria-label": n ? void 0 : p,
+      $isHorizonatal: s,
+      ...c,
+      children: [
+        n && /* @__PURE__ */ b("legend", { children: n }),
+        e.map(u)
+      ]
+    }
+  );
 };
 S.propTypes = {
   /** Array of option objects, each with { value, label, disabled? } */
-  options: /* @__PURE__ */ r.arrayOf(/* @__PURE__ */ r.shape({
-    value: r.any,
-    label: r.string,
-    disabled: r.bool
-  })),
+  options: r.arrayOf(
+    r.shape({
+      value: r.any,
+      label: r.string,
+      disabled: r.bool
+    })
+  ),
   /** Currently selected value */
   value: r.any,
   /** Called with the selected value when a radio is clicked */

package/components/Input/Textarea/SvgIcon.js

@@ -1,12 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Suspense as n } from "react";
-const c = ({
-  svgIcon: t,
-  iconStyles: r
-}) => t ? /* @__PURE__ */ e(n, { fallback: /* @__PURE__ */ e("div", { style: {
-  width: "1em",
-  height: "1em"
-} }), children: /* @__PURE__ */ e(t, { ...r }) }) : null;
+const c = ({ svgIcon: t, iconStyles: r }) => t ? /* @__PURE__ */ e(n, { fallback: /* @__PURE__ */ e("div", { style: { width: "1em", height: "1em" } }), children: /* @__PURE__ */ e(t, { ...r }) }) : null;
 export {
   c as default
 };