@recursica/mui-adapter 0.4.0 → 0.5.0

package/dist/mui-adapter.js

@@ -1,9 +1,9 @@
-import { jsx as r, jsxs as P, Fragment as L } from "react/jsx-runtime";
-import z, { forwardRef as u, useEffect as w } from "react";
-import { Box as k, Button as O, Container as G, Stack as R, Link as D, Typography as V } from "@mui/material";
-const me = (e) => /* @__PURE__ */ r("div", { ...e, children: "Accordion" }), fe = (e) => /* @__PURE__ */ r("div", { ...e, children: "AssistiveElement" }), he = (e) => /* @__PURE__ */ r("div", { ...e, children: "Avatar" }), _e = (e) => /* @__PURE__ */ r("div", { ...e, children: "Badge" }), ye = u(function(t, n) {
-  return /* @__PURE__ */ r(k, { ref: n, ...t });
-}), ve = (e) => /* @__PURE__ */ r("div", { ...e, children: "Breadcrumb" }), M = [
+import { jsx as r, jsxs as R, Fragment as F } from "react/jsx-runtime";
+import O, { forwardRef as u, useEffect as G } from "react";
+import { Box as A, Button as V, Container as D, Stack as B, Link as M, Typography as U } from "@mui/material";
+const he = (e) => /* @__PURE__ */ r("div", { ...e, children: "Accordion" }), _e = (e) => /* @__PURE__ */ r("div", { ...e, children: "AssistiveElement" }), ye = (e) => /* @__PURE__ */ r("div", { ...e, children: "Autocomplete" }), ve = (e) => /* @__PURE__ */ r("div", { ...e, children: "Avatar" }), be = (e) => /* @__PURE__ */ r("div", { ...e, children: "Badge" }), ge = u(function(t, n) {
+  return /* @__PURE__ */ r(A, { ref: n, ...t });
+}), xe = (e) => /* @__PURE__ */ r("div", { ...e, children: "Breadcrumb" }), Y = [
   "className",
   "classes",
   // MUI specific nested class overrides
@@ -32,7 +32,7 @@ const me = (e) => /* @__PURE__ */ r("div", { ...e, children: "Accordion" }), fe
   "display",
   "position",
   "zIndex"
-], U = /* @__PURE__ */ new Set([
+], j = /* @__PURE__ */ new Set([
   "m",
   "my",
   "mx",
@@ -54,7 +54,7 @@ const me = (e) => /* @__PURE__ */ r("div", { ...e, children: "Accordion" }), fe
   "left",
   "bottom",
   "right"
-]), c = {
+]), l = {
   "rec-none": "var(--recursica_brand_dimensions_general_none)",
   "rec-sm": "var(--recursica_brand_dimensions_general_sm)",
   "rec-default": "var(--recursica_brand_dimensions_general_default)",
@@ -63,7 +63,7 @@ const me = (e) => /* @__PURE__ */ r("div", { ...e, children: "Accordion" }), fe
   "rec-xl": "var(--recursica_brand_dimensions_general_xl)",
   "rec-2xl": "var(--recursica_brand_dimensions_general_2xl)"
 };
-function g(e) {
+function x(e) {
   const t = { ...e };
   return "sx" in t && delete t.sx, t;
 }
@@ -71,32 +71,32 @@ function v(e, t) {
   if (t)
     return e;
   const n = { ...e };
-  for (const o of M)
+  for (const o of Y)
     o in n && delete n[o];
   for (const [o, s] of Object.entries(n))
-    typeof s == "string" && s.startsWith("rec-") && U.has(o) && s in c && (n[o] = c[s]);
+    typeof s == "string" && s.startsWith("rec-") && j.has(o) && s in l && (n[o] = l[s]);
   return n;
 }
-const Y = "Loader-module__root___6iYOP", S = {
-  root: Y
-}, F = u(function({ variant: t = "oval", size: n = "default", overStyled: o = !1, ...s }, a) {
-  const l = {
+const H = "Loader-module__root___6iYOP", L = {
+  root: H
+}, I = u(function({ variant: t = "oval", size: n = "default", overStyled: o = !1, ...s }, a) {
+  const c = {
     sm: "small",
     md: "default",
     lg: "large",
     small: "small",
     default: "default",
     large: "large"
-  }[n] || "default", d = v(s, o), p = d.className, f = p ? `${S.root} ${p}` : S.root;
+  }[n] || "default", d = v(s, o), p = d.className, f = p ? `${L.root} ${p}` : L.root;
   return /* @__PURE__ */ r(
     "span",
     {
       ref: a,
       "data-variant": t,
-      "data-size": l,
+      "data-size": c,
       ...d,
       className: f,
-      children: t === "bars" || t === "dots" ? /* @__PURE__ */ P(L, { children: [
+      children: t === "bars" || t === "dots" ? /* @__PURE__ */ R(F, { children: [
         /* @__PURE__ */ r("span", {}),
         /* @__PURE__ */ r("span", {}),
         /* @__PURE__ */ r("span", {})
@@ -104,16 +104,16 @@ const Y = "Loader-module__root___6iYOP", S = {
     }
   );
 });
-F.displayName = "Loader";
-const j = "Button-module__root___Q2R8-", H = "Button-module__labelText___rFV5p", K = "Button-module__iconWrapper___uEKPa", _ = {
-  root: j,
-  labelText: H,
-  iconWrapper: K
+I.displayName = "Loader";
+const K = "Button-module__root___Q2R8-", q = "Button-module__labelText___rFV5p", Q = "Button-module__iconWrapper___uEKPa", _ = {
+  root: K,
+  labelText: q,
+  iconWrapper: Q
 };
-function q(e) {
+function J(e) {
   return e == null || e === "" ? !1 : typeof e == "string" ? e.trim() !== "" : !0;
 }
-const Q = u(
+const X = u(
   function({
     variant: t = "solid",
     size: n = "default",
@@ -121,31 +121,32 @@ const Q = u(
     children: s,
     overStyled: a = !1,
     loaderVariant: i = "oval",
-    loaderSize: l,
+    loaderSize: c,
     useRecursicaLoader: d = !0,
     ...p
   }, f) {
     const b = v(p, a), m = b;
     delete m.fullWidth, delete m.color;
-    const A = !!o || !!m.startIcon, I = !!m.endIcon, T = (A || I) && !q(s);
-    typeof process < "u" && process.env.NODE_ENV !== "production" && T && !m["aria-label"] && console.warn(
+    const N = !!o || !!m.startIcon, C = !!m.endIcon, E = J(s), S = (N || C) && !E;
+    let g = "label";
+    S ? g = "icon-only" : (N || C) && (g = "icon-label"), typeof process < "u" && process.env.NODE_ENV !== "production" && S && !m["aria-label"] && console.warn(
       '[Recursica Button] Icon-only buttons must provide an accessible name. Pass aria-label (e.g. aria-label="Submit").'
     );
-    const N = m.className, W = N ? `${_.root} ${N}` : _.root, E = l ?? (n === "small" ? "small" : "default");
-    let C = m.loadingIndicator;
-    return d && (C = /* @__PURE__ */ r(F, { variant: i, size: E })), /* @__PURE__ */ r(
-      O,
+    const $ = m.className, z = $ ? `${_.root} ${$}` : _.root, w = c ?? (n === "small" ? "small" : "default");
+    let P = m.loadingIndicator;
+    return d && (P = /* @__PURE__ */ r(I, { variant: i, size: w })), /* @__PURE__ */ r(
+      V,
       {
         ref: f,
         disableRipple: !0,
         disableElevation: !0,
-        className: W,
+        className: z,
         loading: !!m.loading,
-        loadingIndicator: C,
+        loadingIndicator: P,
         startIcon: o != null ? /* @__PURE__ */ r("span", { className: _.iconWrapper, "aria-hidden": !0, children: o }) : void 0,
         "data-variant": t,
         "data-size": n,
-        ...T ? { "data-icon-only": "" } : {},
+        "data-content": g,
         ...m.loading ? { "data-loading": "true" } : {},
         ...b,
         disabled: !!m.disabled || !!m.loading,
@@ -154,8 +155,8 @@ const Q = u(
     );
   }
 );
-Q.displayName = "Button";
-const be = (e) => /* @__PURE__ */ r("div", { ...e, children: "Card" }), ge = (e) => /* @__PURE__ */ r("div", { ...e, children: "Checkbox" }), xe = (e) => /* @__PURE__ */ r("div", { ...e, children: "Chip" }), J = u(
+X.displayName = "Button";
+const Te = (e) => /* @__PURE__ */ r("div", { ...e, children: "Card" }), Ne = (e) => /* @__PURE__ */ r("div", { ...e, children: "Checkbox" }), Ce = (e) => /* @__PURE__ */ r("div", { ...e, children: "Chip" }), Z = u(
   function({ children: t, size: n, ...o }, s) {
     const a = {
       "rec-sm": "sm",
@@ -166,7 +167,7 @@ const be = (e) => /* @__PURE__ */ r("div", { ...e, children: "Card" }), ge = (e)
       "rec-2xl": "xl"
     }, i = typeof n == "string" && a[n] ? a[n] : n;
     return /* @__PURE__ */ r(
-      G,
+      D,
       {
         ref: s,
         maxWidth: i,
@@ -176,15 +177,15 @@ const be = (e) => /* @__PURE__ */ r("div", { ...e, children: "Card" }), ge = (e)
     );
   }
 );
-J.displayName = "Container";
-const Te = (e) => /* @__PURE__ */ r("div", { ...e, children: "DatePicker" }), Ne = (e) => /* @__PURE__ */ r("div", { ...e, children: "Dropdown" }), Ce = (e) => /* @__PURE__ */ r("div", { ...e, children: "FileInput" }), Se = (e) => /* @__PURE__ */ r("div", { ...e, children: "FileUpload" }), X = u(function({ children: t, gap: n = "rec-default", rowGap: o, columnGap: s, ...a }, i) {
-  const l = g(a), d = typeof n == "string" && n in c ? c[n] : n, p = typeof o == "string" && o in c ? c[o] : o, f = typeof s == "string" && s in c ? c[s] : s;
+Z.displayName = "Container";
+const Se = (e) => /* @__PURE__ */ r("div", { ...e, children: "DatePicker" }), $e = (e) => /* @__PURE__ */ r("div", { ...e, children: "Dropdown" }), Pe = (e) => /* @__PURE__ */ r("div", { ...e, children: "FileInput" }), Le = (e) => /* @__PURE__ */ r("div", { ...e, children: "FileUpload" }), ee = u(function({ children: t, gap: n = "rec-default", rowGap: o, columnGap: s, ...a }, i) {
+  const c = x(a), d = typeof n == "string" && n in l ? l[n] : n, p = typeof o == "string" && o in l ? l[o] : o, f = typeof s == "string" && s in l ? l[s] : s;
   return /* @__PURE__ */ r(
-    k,
+    A,
     {
       ref: i,
       display: "flex",
-      ...l,
+      ...c,
       gap: d,
       rowGap: p,
       columnGap: f,
@@ -192,11 +193,11 @@ const Te = (e) => /* @__PURE__ */ r("div", { ...e, children: "DatePicker" }), Ne
     }
   );
 });
-X.displayName = "Flex";
-const $e = (e) => /* @__PURE__ */ r("div", { ...e, children: "FormControlLayout" }), Pe = (e) => /* @__PURE__ */ r("div", { ...e, children: "FormControlWrapper" }), Z = u(function({ children: t, gap: n = "rec-default", rowGap: o, columnGap: s, ...a }, i) {
-  const l = g(a), d = typeof n == "string" && n in c ? c[n] : n, p = typeof o == "string" && o in c ? c[o] : o, f = typeof s == "string" && s in c ? c[s] : s;
+ee.displayName = "Flex";
+const ke = (e) => /* @__PURE__ */ r("div", { ...e, children: "FormControlLayout" }), Re = (e) => /* @__PURE__ */ r("div", { ...e, children: "FormControlWrapper" }), re = u(function({ children: t, gap: n = "rec-default", rowGap: o, columnGap: s, ...a }, i) {
+  const c = x(a), d = typeof n == "string" && n in l ? l[n] : n, p = typeof o == "string" && o in l ? l[o] : o, f = typeof s == "string" && s in l ? l[s] : s;
   return /* @__PURE__ */ r(
-    R,
+    B,
     {
       ref: i,
       direction: "row",
@@ -206,20 +207,20 @@ const $e = (e) => /* @__PURE__ */ r("div", { ...e, children: "FormControlLayout"
         ...p ? { rowGap: p } : {},
         ...f ? { columnGap: f } : {}
       },
-      ...l,
+      ...c,
       children: t
     }
   );
 });
-Z.displayName = "Group";
-const Le = (e) => /* @__PURE__ */ r("div", { ...e, children: "HoverCard" }), ke = (e) => /* @__PURE__ */ r("div", { ...e, children: "Label" }), ee = "Link-module__root___I0VGE", re = "Link-module__iconWrapper___W-LlF", ne = "Link-module__labelText___wSvUy", y = {
-  root: ee,
-  iconWrapper: re,
-  labelText: ne
-}, te = u(function({ icon: t, children: n, overStyled: o = !1, ...s }, a) {
+re.displayName = "Group";
+const Fe = (e) => /* @__PURE__ */ r("div", { ...e, children: "HoverCard" }), Ae = (e) => /* @__PURE__ */ r("div", { ...e, children: "Label" }), ne = "Link-module__root___I0VGE", te = "Link-module__iconWrapper___W-LlF", oe = "Link-module__labelText___wSvUy", y = {
+  root: ne,
+  iconWrapper: te,
+  labelText: oe
+}, se = u(function({ icon: t, children: n, overStyled: o = !1, ...s }, a) {
   const i = v(s, o), d = i.className, p = d ? `${y.root} ${d}` : y.root;
-  return /* @__PURE__ */ P(
-    D,
+  return /* @__PURE__ */ R(
+    M,
     {
       ref: a,
       className: p,
@@ -233,17 +234,17 @@ const Le = (e) => /* @__PURE__ */ r("div", { ...e, children: "HoverCard" }), ke
     }
   );
 });
-te.displayName = "Link";
-const Re = (e) => /* @__PURE__ */ r("div", { ...e, children: "Menu" }), Fe = (e) => /* @__PURE__ */ r("div", { ...e, children: "Modal" }), Be = (e) => /* @__PURE__ */ r("div", { ...e, children: "NumberInput" }), Ae = (e) => /* @__PURE__ */ r("div", { ...e, children: "Pagination" }), Ie = (e) => /* @__PURE__ */ r("div", { ...e, children: "Panel" }), We = (e) => /* @__PURE__ */ r("div", { ...e, children: "Radio" }), Ee = (e) => /* @__PURE__ */ r("div", { ...e, children: "ReadOnlyField" }), ze = (e) => /* @__PURE__ */ r("div", { ...e, children: "SegmentedControl" }), we = (e) => /* @__PURE__ */ r("div", { ...e, children: "Slider" }), oe = u(function({ children: t, gap: n = "rec-default", ...o }, s) {
-  const a = g(o), i = typeof n == "string" && n in c ? c[n] : n;
-  return /* @__PURE__ */ r(R, { ref: s, spacing: i, ...a, children: t });
+se.displayName = "Link";
+const Be = (e) => /* @__PURE__ */ r("div", { ...e, children: "Menu" }), Ie = (e) => /* @__PURE__ */ r("div", { ...e, children: "Modal" }), We = (e) => /* @__PURE__ */ r("div", { ...e, children: "NumberInput" }), Ee = (e) => /* @__PURE__ */ r("div", { ...e, children: "Pagination" }), ze = (e) => /* @__PURE__ */ r("div", { ...e, children: "Panel" }), we = (e) => /* @__PURE__ */ r("div", { ...e, children: "Radio" }), Oe = (e) => /* @__PURE__ */ r("div", { ...e, children: "ReadOnlyField" }), Ge = (e) => /* @__PURE__ */ r("div", { ...e, children: "SegmentedControl" }), Ve = (e) => /* @__PURE__ */ r("div", { ...e, children: "Slider" }), ae = u(function({ children: t, gap: n = "rec-default", ...o }, s) {
+  const a = x(o), i = typeof n == "string" && n in l ? l[n] : n;
+  return /* @__PURE__ */ r(B, { ref: s, spacing: i, ...a, children: t });
 });
-oe.displayName = "Stack";
-const Oe = (e) => /* @__PURE__ */ r("div", { ...e, children: "Stepper" }), Ge = (e) => /* @__PURE__ */ r("div", { ...e, children: "Switch" }), De = (e) => /* @__PURE__ */ r("div", { ...e, children: "Table" }), Ve = (e) => /* @__PURE__ */ r("div", { ...e, children: "Tabs" }), x = u(
+ae.displayName = "Stack";
+const De = (e) => /* @__PURE__ */ r("div", { ...e, children: "Stepper" }), Me = (e) => /* @__PURE__ */ r("div", { ...e, children: "Switch" }), Ue = (e) => /* @__PURE__ */ r("div", { ...e, children: "Table" }), Ye = (e) => /* @__PURE__ */ r("div", { ...e, children: "Tabs" }), T = u(
   function({ typographyClass: t, overStyled: n = !1, ...o }, s) {
-    const a = v(o, n), l = a.className, d = l ? `${t} ${l}` : t;
+    const a = v(o, n), c = a.className, d = c ? `${t} ${c}` : t;
     return /* @__PURE__ */ r(
-      V,
+      U,
       {
         ref: s,
         className: d,
@@ -253,16 +254,16 @@ const Oe = (e) => /* @__PURE__ */ r("div", { ...e, children: "Stepper" }), Ge =
     );
   }
 );
-x.displayName = "Typography";
-const se = u(function({ variant: t = "body", ...n }, o) {
+T.displayName = "Typography";
+const ie = u(function({ variant: t = "body", ...n }, o) {
   const s = `recursica_brand_typography_${t}`;
-  return /* @__PURE__ */ r(x, { ref: o, typographyClass: s, ...n });
+  return /* @__PURE__ */ r(T, { ref: o, typographyClass: s, ...n });
 });
-se.displayName = "Text";
-const Me = (e) => /* @__PURE__ */ r("div", { ...e, children: "TextArea" }), Ue = (e) => /* @__PURE__ */ r("div", { ...e, children: "TextField" }), Ye = (e) => /* @__PURE__ */ r("div", { ...e, children: "TimePicker" }), je = (e) => /* @__PURE__ */ r("div", { ...e, children: "Timeline" }), ae = u(function({ order: t = 1, component: n, ...o }, s) {
+ie.displayName = "Text";
+const je = (e) => /* @__PURE__ */ r("div", { ...e, children: "TextArea" }), He = (e) => /* @__PURE__ */ r("div", { ...e, children: "TextField" }), Ke = (e) => /* @__PURE__ */ r("div", { ...e, children: "TimePicker" }), qe = (e) => /* @__PURE__ */ r("div", { ...e, children: "Timeline" }), le = u(function({ order: t = 1, component: n, ...o }, s) {
   const a = `recursica_brand_typography_h${t}`, i = `h${t}`;
   return /* @__PURE__ */ r(
-    x,
+    T,
     {
       ref: s,
       typographyClass: a,
@@ -271,17 +272,17 @@ const Me = (e) => /* @__PURE__ */ r("div", { ...e, children: "TextArea" }), Ue =
     }
   );
 });
-ae.displayName = "Title";
-const He = (e) => /* @__PURE__ */ r("div", { ...e, children: "Toast" }), Ke = (e) => /* @__PURE__ */ r("div", { ...e, children: "Tooltip" }), qe = (e) => /* @__PURE__ */ r("div", { ...e, children: "TransferList" }), ie = "_root_1qhn7_3", ce = "_contents_1qhn7_18", h = {
-  root: ie,
-  contents: ce
-}, le = u(function({ layer: e, contentsOnly: t, children: n, className: o, style: s, ...a }, i) {
-  const l = t ? o ? `${h.root} ${h.contents} ${o}` : `${h.root} ${h.contents}` : o ? `${h.root} ${o}` : h.root;
+le.displayName = "Title";
+const Qe = (e) => /* @__PURE__ */ r("div", { ...e, children: "Toast" }), Je = (e) => /* @__PURE__ */ r("div", { ...e, children: "Tooltip" }), Xe = (e) => /* @__PURE__ */ r("div", { ...e, children: "TransferList" }), ce = "_root_1qhn7_3", de = "_contents_1qhn7_18", h = {
+  root: ce,
+  contents: de
+}, ue = u(function({ layer: e, contentsOnly: t, children: n, className: o, style: s, ...a }, i) {
+  const c = t ? o ? `${h.root} ${h.contents} ${o}` : `${h.root} ${h.contents}` : o ? `${h.root} ${o}` : h.root;
   return /* @__PURE__ */ r(
     "div",
     {
       ref: i,
-      className: l,
+      className: c,
       style: s,
       ...t ? {} : { "data-recursica-layer": String(e) },
       ...a,
@@ -289,71 +290,72 @@ const He = (e) => /* @__PURE__ */ r("div", { ...e, children: "Toast" }), Ke = (e
     }
   );
 });
-le.displayName = "Layer";
-const B = ({ emptyText: e = "N/A" }) => /* @__PURE__ */ r(z.Fragment, { children: e });
-B.displayName = "EmptyValueRenderer";
-B.check = (e) => e == null || e === "" || Array.isArray(e) && e.length === 0;
-const $ = "data-recursica-theme";
-function Qe({
+ue.displayName = "Layer";
+const W = ({ emptyText: e = "N/A" }) => /* @__PURE__ */ r(O.Fragment, { children: e });
+W.displayName = "EmptyValueRenderer";
+W.check = (e) => e == null || e === "" || Array.isArray(e) && e.length === 0;
+const k = "data-recursica-theme";
+function Ze({
   children: e,
   theme: t = "light"
 }) {
-  return w(() => {
+  return G(() => {
     const n = document.documentElement;
-    return n.setAttribute($, t), () => {
-      n.removeAttribute($);
+    return n.setAttribute(k, t), () => {
+      n.removeAttribute(k);
     };
-  }, [t]), /* @__PURE__ */ r(L, { children: e });
+  }, [t]), /* @__PURE__ */ r(F, { children: e });
 }
 export {
-  me as Accordion,
-  fe as AssistiveElement,
-  he as Avatar,
-  _e as Badge,
-  ye as Box,
-  ve as Breadcrumb,
-  Q as Button,
-  be as Card,
-  ge as Checkbox,
-  xe as Chip,
-  J as Container,
-  Te as DatePicker,
-  Ne as Dropdown,
-  B as EmptyValueRenderer,
-  Ce as FileInput,
-  Se as FileUpload,
-  X as Flex,
-  $e as FormControlLayout,
-  Pe as FormControlWrapper,
-  Z as Group,
-  Le as HoverCard,
-  ke as Label,
-  le as Layer,
-  te as Link,
-  F as Loader,
-  Re as Menu,
-  Fe as Modal,
-  Be as NumberInput,
-  Ae as Pagination,
-  Ie as Panel,
-  We as Radio,
-  Ee as ReadOnlyField,
-  Qe as RecursicaThemeProvider,
-  ze as SegmentedControl,
-  we as Slider,
-  oe as Stack,
-  Oe as Stepper,
-  Ge as Switch,
-  De as Table,
-  Ve as Tabs,
-  se as Text,
-  Me as TextArea,
-  Ue as TextField,
-  Ye as TimePicker,
-  je as Timeline,
-  ae as Title,
-  He as Toast,
-  Ke as Tooltip,
-  qe as TransferList
+  he as Accordion,
+  _e as AssistiveElement,
+  ye as Autocomplete,
+  ve as Avatar,
+  be as Badge,
+  ge as Box,
+  xe as Breadcrumb,
+  X as Button,
+  Te as Card,
+  Ne as Checkbox,
+  Ce as Chip,
+  Z as Container,
+  Se as DatePicker,
+  $e as Dropdown,
+  W as EmptyValueRenderer,
+  Pe as FileInput,
+  Le as FileUpload,
+  ee as Flex,
+  ke as FormControlLayout,
+  Re as FormControlWrapper,
+  re as Group,
+  Fe as HoverCard,
+  Ae as Label,
+  ue as Layer,
+  se as Link,
+  I as Loader,
+  Be as Menu,
+  Ie as Modal,
+  We as NumberInput,
+  Ee as Pagination,
+  ze as Panel,
+  we as Radio,
+  Oe as ReadOnlyField,
+  Ze as RecursicaThemeProvider,
+  Ge as SegmentedControl,
+  Ve as Slider,
+  ae as Stack,
+  De as Stepper,
+  Me as Switch,
+  Ue as Table,
+  Ye as Tabs,
+  ie as Text,
+  je as TextArea,
+  He as TextField,
+  Ke as TimePicker,
+  qe as Timeline,
+  le as Title,
+  Qe as Toast,
+  Je as Tooltip,
+  Xe as TransferList
 };
 //# sourceMappingURL=mui-adapter.js.map