welcome-ui 7.3.0 → 8.0.0-alpha.0

package/dist/InputText.mjs

@@ -1,81 +1,78 @@
 "use client";
 import r from "react";
-import { d as S, F as T } from "./field-styles-DLIhqG_8.mjs";
-import { c as W } from "./create-event-rXDe5aCQ.mjs";
-import c, { css as $, system as g } from "@xstyled/styled-components";
-import { shouldForwardProp as B, forwardRef as N } from "./System.mjs";
-import { ClearButton as k } from "./ClearButton.mjs";
-import { IconWrapper as A, IconGroupWrapper as C } from "./Field.mjs";
-const D = c("input").withConfig({ shouldForwardProp: B })(
-  ({ iconPlacement: s, isClearable: p, size: l, transparent: t, variant: e }) => $`
-    ${S({
-    size: l,
+import { d as _, F as y } from "./field-styles-DLIhqG_8.mjs";
+import { c as S } from "./create-event-rXDe5aCQ.mjs";
+import T, { css as g } from "@xstyled/styled-components";
+import { shouldForwardProp as N, forwardRef as W } from "./System.mjs";
+import { ClearButton as $ } from "./ClearButton.mjs";
+import { IconWrapper as k, IconGroupWrapper as A } from "./Field.mjs";
+import { Box as C } from "./Box.mjs";
+const D = T.inputBox.withConfig({ shouldForwardProp: N })(
+  ({ iconPlacement: s, isClearable: p, size: i, transparent: t, variant: e }) => g`
+    ${_({
+    size: i,
     variant: e,
     transparent: t,
     isClearable: p,
     iconPlacement: s
   })};
     text-overflow: ellipsis;
-
-    ${g};
   `
-), G = c.div`
-  position: relative;
-`, L = N(
+), G = W(
   ({
     autoFocus: s,
     dataTestId: p,
-    disabled: l,
+    disabled: i,
     icon: t,
     iconPlacement: e = "left",
-    isClearable: n,
-    name: i,
+    isClearable: m,
+    name: l,
     onBlur: f,
-    onChange: m,
-    onFocus: u,
-    onKeyDown: E,
-    placeholder: I,
+    onChange: n,
+    onFocus: c,
+    onKeyDown: u,
+    placeholder: E,
     size: a = "md",
-    transparent: h,
+    transparent: I,
     type: x = "text",
     value: d,
-    variant: _,
+    variant: h,
     ...v
   }, w) => {
-    const y = n && e === "right", z = t && e, o = T[a], F = () => {
-      const R = W({
-        name: i,
+    const z = m && e === "right", B = t && e, o = y[a], F = () => {
+      const R = S({
+        name: l,
         value: ""
       });
-      m && m(R);
+      n && n(R);
     };
-    return /* @__PURE__ */ r.createElement(G, null, /* @__PURE__ */ r.createElement(
+    return /* @__PURE__ */ r.createElement(C, { position: "relative" }, /* @__PURE__ */ r.createElement(
       D,
       {
         autoFocus: s,
         "data-testid": p,
-        disabled: l,
+        disabled: i,
         iconPlacement: !!t && e,
-        id: i,
-        isClearable: n,
-        name: i,
+        id: l,
+        isClearable: m,
+        name: l,
         onBlur: f,
-        onChange: m,
-        onFocus: u,
-        onKeyDown: E,
-        placeholder: I,
+        onChange: n,
+        onFocus: c,
+        onKeyDown: u,
+        placeholder: E,
         ref: w,
         size: a,
-        transparent: h,
+        transparent: I,
         type: x,
         value: d,
-        variant: _,
+        variant: h,
         ...v
       }
-    ), z && !y && /* @__PURE__ */ r.createElement(A, { iconPlacement: e, size: o }, r.cloneElement(t, { ...t.props, size: o })), n && /* @__PURE__ */ r.createElement(C, { size: o }, d && /* @__PURE__ */ r.createElement(k, { onClick: F }), e === "right" && r.cloneElement(t, { ...t.props, size: o })));
+    ), B && !z && /* @__PURE__ */ r.createElement(k, { iconPlacement: e, size: o }, r.cloneElement(t, { ...t.props, size: o })), m && /* @__PURE__ */ r.createElement(A, { size: o }, d && /* @__PURE__ */ r.createElement($, { onClick: F }), e === "right" && r.cloneElement(t, { ...t.props, size: o })));
   }
 );
-L.displayName = "InputText";
+G.displayName = "InputText";
 export {
-  L as InputText
+  G as InputText
 };

package/dist/Label.mjs

@@ -1,13 +1,13 @@
 "use client";
 import e from "react";
 import { w as u } from "./wrap-children-aq69jtFP.mjs";
-import o, { css as s, th as g, system as y } from "@xstyled/styled-components";
-import { shouldForwardProp as w, forwardRef as b } from "./System.mjs";
+import o, { css as n, th as g } from "@xstyled/styled-components";
+import { shouldForwardProp as w, forwardRef as y } from "./System.mjs";
 import "./Icon.mjs";
 import { L as x } from "./index-BQtDgQBH.mjs";
-import { VariantIcon as L } from "./VariantIcon.mjs";
-const n = o("label").withConfig({ shouldForwardProp: w })(
-  ({ required: t }) => s`
+import { VariantIcon as b } from "./VariantIcon.mjs";
+const s = o.labelBox.withConfig({ shouldForwardProp: w })(
+  ({ required: t }) => n`
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -15,7 +15,6 @@ const n = o("label").withConfig({ shouldForwardProp: w })(
     align-items: center;
     line-height: lg;
     ${g("labels")};
-    ${y};
     user-select: none;
 
     > * {
@@ -24,11 +23,11 @@ const n = o("label").withConfig({ shouldForwardProp: w })(
       }
 
       :last-child {
-        ${t && E};
+        ${t && L};
       }
     }
   `
-), E = s`
+), L = n`
   &::after {
     content: '*';
     margin-left: xs;
@@ -39,41 +38,41 @@ const n = o("label").withConfig({ shouldForwardProp: w })(
     font-weight: bold;
     color: primary-40;
   }
-`, _ = o.div`
+`, E = o.div`
   display: inline-flex;
   margin-right: xs;
-`, $ = b(
+`, v = y(
   ({
     checkableField: t,
     children: a,
     dataTestId: m,
-    disabled: l,
-    disabledIcon: r,
+    disabled: r,
+    disabledIcon: i,
     icon: c,
-    variant: i,
+    variant: l,
     withDisabledIcon: p = !0,
-    ...f
-  }, h) => {
+    ...h
+  }, f) => {
     const d = u(a);
     return /* @__PURE__ */ e.createElement(
-      n,
+      s,
       {
         "data-testid": m,
-        disabled: l,
-        disabledIcon: r,
-        ref: h,
-        variant: i,
-        ...f
+        disabled: r,
+        disabledIcon: i,
+        ref: f,
+        variant: l,
+        ...h
       },
-      !t && /* @__PURE__ */ e.createElement(L, { icon: c, size: "sm", variant: i }),
-      l && p && /* @__PURE__ */ e.createElement(_, null, r || /* @__PURE__ */ e.createElement(x, { size: "sm" })),
+      !t && /* @__PURE__ */ e.createElement(b, { icon: c, size: "sm", variant: l }),
+      r && p && /* @__PURE__ */ e.createElement(E, null, i || /* @__PURE__ */ e.createElement(x, { size: "sm" })),
       d
     );
   }
 );
-$.displayName = "Label";
-const q = n;
+v.displayName = "Label";
+const _ = s;
 export {
-  $ as Label,
-  q as StyledLabel
+  v as Label,
+  _ as StyledLabel
 };

package/dist/Link.mjs

@@ -1,11 +1,11 @@
 "use client";
 import i from "react";
-import h, { css as x, th as e, typography as g, system as y } from "@xstyled/styled-components";
+import h, { css as x, th as e, typography as g } from "@xstyled/styled-components";
 import { UniversalLink as k } from "./UniversalLink.mjs";
-import { shouldForwardProp as $, forwardRef as w } from "./System.mjs";
+import { shouldForwardProp as y, forwardRef as $ } from "./System.mjs";
 import "./Icon.mjs";
-import { E } from "./index-DqBUFsqP.mjs";
-const L = h(k).withConfig({ shouldForwardProp: $ })(
+import { E as w } from "./index-DqBUFsqP.mjs";
+const E = h(k).withConfig({ shouldForwardProp: y })(
   ({ isExternal: t, variant: n = "primary" }) => x`
     display: inline-flex;
     flex-direction: row;
@@ -43,13 +43,11 @@ const L = h(k).withConfig({ shouldForwardProp: $ })(
       pointer-events: none;
     }
 
-    ${y};
-
     & > *:not(:only-child):not(:last-child) {
       margin-right: xs;
     }
   `
-), W = (t) => {
+), L = (t) => {
   var n, r, o;
   return (
     // <span />
@@ -57,10 +55,10 @@ const L = h(k).withConfig({ shouldForwardProp: $ })(
     ((n = t == null ? void 0 : t.props) == null ? void 0 : n.as) === "span" || // <FormattedMessage />
     ((r = t == null ? void 0 : t.props) == null ? void 0 : r.tagName) === "span" || ((o = t == null ? void 0 : t.props) == null ? void 0 : o["data-wui-link"]) === !0
   );
-}, a = (t) => typeof t == "object" ? W(t) : typeof t == "string", d = ({ children: t, isExternal: n }) => /* @__PURE__ */ i.createElement("span", { className: "wui-text" }, t, n && /* @__PURE__ */ i.createElement(E, { mb: "-2px", ml: "sm", size: "sm" })), b = w((t, n) => {
+}, a = (t) => typeof t == "object" ? L(t) : typeof t == "string", d = ({ children: t, isExternal: n }) => /* @__PURE__ */ i.createElement("span", { className: "wui-text" }, t, n && /* @__PURE__ */ i.createElement(w, { mb: "-2px", ml: "sm", size: "sm" })), W = $((t, n) => {
   const { children: r, dataTestId: o, disabled: m, isExternal: s, variant: c = "primary", ...l } = t, f = a(r) ? /* @__PURE__ */ i.createElement(d, { isExternal: s }, r) : i.Children.map(r, (p) => a(p) ? /* @__PURE__ */ i.createElement(d, { isExternal: s }, p) : p);
   return /* @__PURE__ */ i.createElement(
-    L,
+    E,
     {
       "data-testid": o,
       disabled: m,
@@ -72,7 +70,7 @@ const L = h(k).withConfig({ shouldForwardProp: $ })(
     f
   );
 });
-b.displayName = "Link";
+W.displayName = "Link";
 export {
-  b as Link
+  W as Link
 };

package/dist/Loader.mjs

@@ -4,7 +4,7 @@ import l, { keyframes as m, css as c, system as s } from "@xstyled/styled-compon
 import { Shape as d } from "./Shape.mjs";
 import { shouldForwardProp as f, forwardRef as p } from "./System.mjs";
 import { Box as h } from "./Box.mjs";
-const u = m`
+const y = m`
   0%, 100% {
     opacity: .5;
     transform: scale3d(.8, .8, 1);
@@ -13,8 +13,8 @@ const u = m`
     opacity: 1;
     transform: scale3d(1, 1, 1);
   }
-`, y = c`
-  animation: ${u} 1.5s cubic-bezier(0.86, 0, 0.07, 1) infinite;
+`, u = c`
+  animation: ${y} 1.5s cubic-bezier(0.86, 0, 0.07, 1) infinite;
 `, n = l(d).withConfig({ shouldForwardProp: f })(
   ({ size: a, theme: o }) => {
     var r;
@@ -24,7 +24,7 @@ const u = m`
       height: ${t};
       background-color: currentColor;
       ${s}
-      ${y};
+      ${u};
       &:not(:first-child) {
         margin-left: calc(${t} / 2);
       }

package/dist/Logo.mjs

@@ -1,9 +1,7 @@
 "use client";
 import c, { forwardRef as Z } from "react";
-import o, { system as h, useTheme as t } from "@xstyled/styled-components";
-const a = o.svg`
-  ${h}
-`, r = Z((e, l) => {
+import o, { useTheme as t } from "@xstyled/styled-components";
+const a = o.svgBox``, n = Z((e, l) => {
   const m = t();
   return /* @__PURE__ */ c.createElement(a, { role: "img", ...e, ref: l, viewBox: "0 0 100 100" }, /* @__PURE__ */ c.createElement("title", null, "Welcome to the jungle symbol"), /* @__PURE__ */ c.createElement(
     "path",
@@ -12,7 +10,7 @@ const a = o.svg`
       fill: m.colors["neutral-90"]
     }
   ));
-}), s = Z((e, l) => {
+}), r = Z((e, l) => {
   const m = t();
   return /* @__PURE__ */ c.createElement(a, { role: "img", ...e, ref: l, viewBox: "0 0 100 24" }, /* @__PURE__ */ c.createElement("title", null, "Welcome to the jungle solutions symbol"), /* @__PURE__ */ c.createElement(
     "path",
@@ -21,7 +19,7 @@ const a = o.svg`
       fill: m.colors["neutral-90"]
     }
   ));
-}), M = Z((e, l) => {
+}), s = Z((e, l) => {
   const m = t();
   return /* @__PURE__ */ c.createElement(a, { role: "img", ...e, ref: l, viewBox: "0 0 100 56" }, /* @__PURE__ */ c.createElement("title", null, "Welcome UI logo"), /* @__PURE__ */ c.createElement(
     "path",
@@ -30,7 +28,7 @@ const a = o.svg`
       fill: m.colors["neutral-90"]
     }
   ));
-}), i = (e) => {
+}), M = (e) => {
   const l = t();
   return /* @__PURE__ */ c.createElement(a, { role: "img", ...e, viewBox: "0 0 100 26" }, /* @__PURE__ */ c.createElement("title", null, "Welcome to the jungle logo"), /* @__PURE__ */ c.createElement(
     "path",
@@ -41,8 +39,8 @@ const a = o.svg`
   ));
 };
 export {
-  i as Logo,
-  s as SolutionsSymbol,
-  r as Symbol,
-  M as WelcomeUILogo
+  M as Logo,
+  r as SolutionsSymbol,
+  n as Symbol,
+  s as WelcomeUILogo
 };

package/dist/Modal.mjs

@@ -1,10 +1,10 @@
 "use client";
-import o, { useState as J, useMemo as K, Children as D, useEffect as L, cloneElement as F } from "react";
-import i, { css as f, th as l, system as H, up as Q, useTheme as v } from "@xstyled/styled-components";
+import o, { useState as G, useMemo as J, Children as D, useEffect as K, cloneElement as F } from "react";
+import i, { css as f, th as l, up as L, useTheme as v, system as Q } from "@xstyled/styled-components";
 import { Text as p } from "./Text.mjs";
 import { Box as $ } from "./Box.mjs";
 import { CloseButton as U } from "./CloseButton.mjs";
-import { D as S } from "./SYRFVSLH-cVmYtx36.mjs";
+import { D as H } from "./SYRFVSLH-cVmYtx36.mjs";
 import { forwardRef as c } from "./System.mjs";
 import { StyledSwiper as X } from "./Swiper.mjs";
 import { IconsFont as Y } from "./IconsFont.mjs";
@@ -12,7 +12,7 @@ import { Button as Z } from "./Button.mjs";
 import { Shape as ee } from "./Shape.mjs";
 import { u as te, D as oe } from "./JC64G2H7-Dey-8h60.mjs";
 import { D as ne } from "./AXB53BZF-CGoc4K3d.mjs";
-const W = i.divBox.withConfig({
+const S = i.divBox.withConfig({
   shouldForwardProp: (e) => !["hideOnInteractOutside"].includes(e)
 })(
   ({ hideOnInteractOutside: e }) => f`
@@ -24,7 +24,6 @@ const W = i.divBox.withConfig({
     bottom: 0;
     opacity: 0;
     transition: opacity 150ms ease-in-out;
-    ${H};
 
     ${e && f`
       cursor: pointer;
@@ -61,7 +60,7 @@ const W = i.divBox.withConfig({
       margin-top: 0;
     }
 
-    ${Q(
+    ${L(
     "md",
     f`
         height: fit-content;
@@ -91,10 +90,10 @@ const W = i.divBox.withConfig({
   ${l("modals.footer.children")};
 `, ce = i.divBox`
   ${l("modals.footer.information")};
-`, M = ({ isOnHeader: e, ...t }) => {
+`, W = ({ isOnHeader: e, ...t }) => {
   const n = v();
   return /* @__PURE__ */ o.createElement(
-    S,
+    H,
     {
       render: /* @__PURE__ */ o.createElement(
         U,
@@ -109,13 +108,13 @@ const W = i.divBox.withConfig({
       )
     }
   );
-}, N = c(({ icon: e, subtitle: t, title: n, ...r }, s) => /* @__PURE__ */ o.createElement(ie, { ref: s, textAlign: e ? "center" : null, w: "100%", ...r }, /* @__PURE__ */ o.createElement(M, { isOnHeader: !0 }), e, /* @__PURE__ */ o.createElement(p, { mb: t ? "lg" : 0, mt: e ? "xl" : 0, variant: "h4" }, n), t && /* @__PURE__ */ o.createElement(le, null, t)));
-N.displayName = "Header";
-const T = c(({ children: e, information: t, ...n }, r) => /* @__PURE__ */ o.createElement(se, { ref: r, w: "100%", ...n }, e && /* @__PURE__ */ o.createElement(me, null, e), t && /* @__PURE__ */ o.createElement(ce, null, /* @__PURE__ */ o.createElement(p, { color: "neutral-90", fontWeight: "bold", variant: "subtitle-sm" }, t.title), /* @__PURE__ */ o.createElement(p, { color: "neutral-90", mb: "0", mt: "md", variant: "sm" }, t.subtitle))));
-T.displayName = "Footer";
-const z = c(
+}, M = c(({ icon: e, subtitle: t, title: n, ...r }, s) => /* @__PURE__ */ o.createElement(ie, { ref: s, textAlign: e ? "center" : null, w: "100%", ...r }, /* @__PURE__ */ o.createElement(W, { isOnHeader: !0 }), e, /* @__PURE__ */ o.createElement(p, { mb: t ? "lg" : 0, mt: e ? "xl" : 0, variant: "h4" }, n), t && /* @__PURE__ */ o.createElement(le, null, t)));
+M.displayName = "Header";
+const N = c(({ children: e, information: t, ...n }, r) => /* @__PURE__ */ o.createElement(se, { ref: r, w: "100%", ...n }, e && /* @__PURE__ */ o.createElement(me, null, e), t && /* @__PURE__ */ o.createElement(ce, null, /* @__PURE__ */ o.createElement(p, { color: "neutral-90", fontWeight: "bold", variant: "subtitle-sm" }, t.title), /* @__PURE__ */ o.createElement(p, { color: "neutral-90", mb: "0", mt: "md", variant: "sm" }, t.subtitle))));
+N.displayName = "Footer";
+const T = c(
   ({ children: e, store: t, withClosingButton: n = !0, ...r }, s) => {
-    const { borderWidths: u, space: d } = v(), [y, h] = J(!1), g = t.useState("contentElement"), B = t.useState("open"), m = K(
+    const { borderWidths: u, space: d } = v(), [y, h] = G(!1), g = t.useState("contentElement"), B = t.useState("open"), m = J(
       () => D.map(e, (a) => {
         if (o.isValidElement(a)) {
           const x = a.type;
@@ -124,7 +123,7 @@ const z = c(
         return "";
       }),
       [e]
-    ), q = !m.includes("Header") && n, G = (a) => a === "Header" ? {
+    ), V = !m.includes("Header") && n, q = (a) => a === "Header" ? {
       // if the Modal have a Body but not a Footer || have a Footer but not a Body
       pb: m.includes("Body") && !m.includes("Footer") || m.includes("Footer") && !m.includes("Body") ? d.lg : d.xxl
     } : a === "Body" ? {
@@ -134,34 +133,34 @@ const z = c(
       pt: m.includes("Header") || m.includes("Body") ? null : d.lg,
       borderWidth: y ? u.sm : "0"
     } : {};
-    return L(() => {
+    return K(() => {
       B ? g && h(g.scrollHeight > g.offsetHeight) : h(!1);
-    }, [t, B, g]), /* @__PURE__ */ o.createElement($, { ref: s, ...r }, q ? /* @__PURE__ */ o.createElement(M, null) : null, D.map(e, (a) => {
+    }, [t, B, g]), /* @__PURE__ */ o.createElement($, { ref: s, ...r }, V ? /* @__PURE__ */ o.createElement(W, null) : null, D.map(e, (a) => {
       var k, C;
       if (!a) return null;
       const x = ((k = a == null ? void 0 : a.type) == null ? void 0 : k.displayName) || ((C = a == null ? void 0 : a.type) == null ? void 0 : C.name);
       return F(a, {
-        ...G(x),
+        ...q(x),
         ...a.props
       });
     }));
   }
 );
-z.displayName = "Content";
-const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(100vh - 2 * 5rem);", A = f`
+T.displayName = "Content";
+const z = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", _ = "calc(100vh - 2 * 5rem);", j = f`
   width: ${I};
-  max-height: ${j};
+  max-height: ${_};
 
   @media (min-width: md) {
-    width: ${_};
+    width: ${z};
   }
 
   /* for big screens */
   @media (min-width: 1700px) {
     max-width: 1600;
   }
-`, O = i.div`
-  ${A};
+`, A = i.div`
+  ${j};
   flex: 1;
 
   @media (min-width: md) {
@@ -178,10 +177,10 @@ const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(10
   > img,
   > div {
     max-width: ${I};
-    max-height: ${j};
+    max-height: ${_};
 
     @media (min-width: md) {
-      max-width: ${_};
+      max-width: ${z};
     }
 
     /* for big screens */
@@ -202,7 +201,7 @@ const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(10
   transition: opacity 250ms ease-in-out;
 
   &:has(${X}) {
-    ${A};
+    ${j};
   }
 
   ${E} {
@@ -216,7 +215,7 @@ const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(10
       margin-top: 0;
     }
   }
-`, R = i(p).attrs({ lines: 2, variant: "h4" })`
+`, O = i(p).attrs({ lines: 2, variant: "h4" })`
   margin: 0;
 `, b = "4rem", w = "6rem", ue = i.divBox`
   display: flex;
@@ -235,7 +234,7 @@ const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(10
     }
   }
 
-  ${O} {
+  ${A} {
     background-color: neutral-90;
     max-height: calc(100vh - 2 * 5rem - ${b});
 
@@ -259,7 +258,7 @@ const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(10
     },
     t,
     !t && n && /* @__PURE__ */ o.createElement(p, { variant: "subtitle-sm" }, n),
-    !t && r && /* @__PURE__ */ o.createElement(R, null, r)
+    !t && r && /* @__PURE__ */ o.createElement(O, null, r)
   ))
 ), fe = i(Z)`
   position: absolute;
@@ -275,10 +274,10 @@ const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(10
     background-color: neutral-40;
   }
 
-  ${H}
-`, P = c(
+  ${Q}
+`, R = c(
   ({ hideOnInteractOutside: e, ...t }, n) => /* @__PURE__ */ o.createElement(
-    W,
+    S,
     {
       backgroundColor: "rgba(0, 0, 0, 0.9)",
       hideOnInteractOutside: e,
@@ -286,20 +285,20 @@ const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(10
       ref: n
     },
     /* @__PURE__ */ o.createElement(
-      S,
+      H,
       {
         render: /* @__PURE__ */ o.createElement(fe, { shape: "circle", variant: "secondary" }, /* @__PURE__ */ o.createElement(Y.Cross, null))
       }
     )
   )
 );
-P.displayName = "Backdrop";
-const he = ({ children: e }) => /* @__PURE__ */ o.createElement(O, null, /* @__PURE__ */ o.createElement($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 } }, e)), ge = Object.assign(de, {
+R.displayName = "Backdrop";
+const he = ({ children: e }) => /* @__PURE__ */ o.createElement(A, null, /* @__PURE__ */ o.createElement($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 } }, e)), ge = Object.assign(de, {
   AssetWithTitle: pe,
-  Backdrop: P,
+  Backdrop: R,
   Content: E,
   Iframe: he,
-  Title: R
+  Title: O
 });
 function Te(e) {
   const { onClose: t, setOpen: n, ...r } = e || {};
@@ -312,7 +311,7 @@ function Te(e) {
   });
 }
 const xe = c(
-  ({ backdrop: e, hideOnInteractOutside: t, ...n }, r) => e === !0 ? /* @__PURE__ */ o.createElement(W, { hideOnInteractOutside: t, ref: r, ...n }) : F(e, { hideOnInteractOutside: t, ref: r, ...n })
+  ({ backdrop: e, hideOnInteractOutside: t, ...n }, r) => e === !0 ? /* @__PURE__ */ o.createElement(S, { hideOnInteractOutside: t, ref: r, ...n }) : F(e, { hideOnInteractOutside: t, ref: r, ...n })
 ), $e = c(
   ({
     ariaLabel: e,
@@ -337,8 +336,8 @@ const xe = c(
     },
     r
   )
-), V = c((e, t) => /* @__PURE__ */ o.createElement(ae, { ref: t, ...e }));
-V.displayName = "Body";
+), P = c((e, t) => /* @__PURE__ */ o.createElement(ae, { ref: t, ...e }));
+P.displayName = "Body";
 const ye = (e) => {
   const { modals: t } = v();
   return /* @__PURE__ */ o.createElement("div", null, /* @__PURE__ */ o.createElement(ee, { ...t.cover, ...e }));
@@ -352,14 +351,14 @@ const ye = (e) => {
   }
 )), ze = Object.assign($e, {
   Trigger: Ee,
-  Content: z,
-  Header: N,
-  Body: V,
-  Footer: T,
+  Content: T,
+  Header: M,
+  Body: P,
+  Footer: N,
   Cover: ye
-}), _e = ge;
+}), Ie = ge;
 export {
-  _e as AssetModal,
+  Ie as AssetModal,
   ze as Modal,
   Te as useModal
 };