welcome-ui 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/Alert.mjs

@@ -1,7 +1,120 @@
-import "react";
-import { A as i } from "./index-0MPAX4B5.mjs";
-import "./System.mjs";
-import "./Box.mjs";
+"use client";
+import r, { Children as E, cloneElement as i } from "react";
+import { CloseButton as D } from "./CloseButton.mjs";
+import { Button as B } from "./Button.mjs";
+import { forwardRef as d } from "./System.mjs";
+import { Box as p } from "./Box.mjs";
+import c, { css as m, th as l, system as w } from "@xstyled/styled-components";
+import { Text as R } from "./Text.mjs";
+import { VariantIcon as O } from "./VariantIcon.mjs";
+const $ = c.divBox`
+  flex: 1;
+`, A = c(O)`
+  position: absolute;
+  align-self: flex-start;
+`, q = c.divBox(({ icon: e, isFullWidth: n, size: o, variant: s }) => m`
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    max-width: ${n ? "100%" : "max-content"};
+    ${l("alerts.default")};
+    ${l(`alerts.${s}`)};
+    ${l(`alerts.sizes.${o}`)};
+    ${w};
+
+    ${e !== null && o === "sm" && m`
+      ${$} {
+        margin-left: calc(${l("icons.sm")} + ${l("space.md")});
+      }
+    `}
+
+    ${e !== null && o === "md" && m`
+      ${$} {
+        margin-left: calc(${l("icons.md")} + ${l("space.lg")});
+      }
+
+      ${A} {
+        margin-top: -3;
+      }
+    `}
+  `), F = c(R)(({ variant: e }) => m`
+    font-weight: medium;
+    ${l("alerts.title.default")};
+    ${l(`alerts.title.sizes.${e}`)};
+    ${w};
+  `), b = ({ children: e, dataTestId: n, variant: o }) => /* @__PURE__ */ r.createElement(F, { "data-testid": n, variant: o }, e), G = d(
+  ({
+    children: e,
+    cta: n,
+    dataTestId: o,
+    handleClose: s,
+    icon: f,
+    isFullWidth: I,
+    size: a = "sm",
+    variant: u = "default",
+    ...S
+  }, _) => {
+    const k = o ? `${o}-close-button` : void 0, T = u === "beige" ? "default" : u, V = E.toArray(e).map((t) => t.type === b ? i(t, { variant: a }) : t), x = (t) => {
+      var y;
+      if (t) {
+        if (t.type === v) return i(t, { size: a });
+        if (t.type === C) return i(t, { size: a });
+        if ((y = t.props) != null && y.children)
+          return i(t, {
+            ...t.props,
+            children: E.map(
+              t.props.children,
+              (j) => x(j)
+            )
+          });
+      }
+      return t;
+    }, g = r.isValidElement(n) ? x(n) : n;
+    return /* @__PURE__ */ r.createElement(
+      q,
+      {
+        "data-testid": o,
+        icon: f,
+        isFullWidth: I,
+        ref: _,
+        size: a,
+        variant: u,
+        ...S
+      },
+      !!s && /* @__PURE__ */ r.createElement(
+        D,
+        {
+          dataTestId: k,
+          onClick: s,
+          position: "absolute",
+          right: "sm",
+          size: "xs",
+          top: "sm"
+        }
+      ),
+      f !== null && /* @__PURE__ */ r.createElement(A, { icon: f, size: a, variant: T }),
+      /* @__PURE__ */ r.createElement($, null, /* @__PURE__ */ r.createElement(
+        p,
+        {
+          alignItems: "flex-start",
+          display: "flex",
+          flexDirection: "column",
+          gap: "md",
+          justifyContent: "space-between"
+        },
+        /* @__PURE__ */ r.createElement(p, { flex: 1 }, V),
+        !!g && /* @__PURE__ */ r.createElement(p, { alignItems: "center", display: "flex", gap: "sm" }, g)
+      ))
+    );
+  }
+), v = d((e, n) => /* @__PURE__ */ r.createElement(B, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: "secondary" })), C = d(
+  (e, n) => /* @__PURE__ */ r.createElement(B, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: "tertiary" })
+), U = Object.assign(G, {
+  Title: b,
+  Button: v,
+  SecondaryButton: C
+});
 export {
-  i as Alert
+  U as Alert
 };

package/dist/AspectRatio.mjs

@@ -1,9 +1,9 @@
 "use client";
 import i from "react";
 import { forwardRef as r } from "./System.mjs";
-import a, { css as c } from "@xstyled/styled-components";
-const n = a.divBox(
-  ({ ratio: t }) => c`
+import s, { css as a } from "@xstyled/styled-components";
+const c = s.divBox(
+  ({ ratio: t }) => a`
     position: relative;
 
     & > * {
@@ -32,10 +32,10 @@ const n = a.divBox(
       padding-bottom: ${1 / t * 100}%;
     }
   `
-), s = r(
-  ({ ratio: t = 4 / 3, ...e }, o) => /* @__PURE__ */ i.createElement(n, { ratio: t, ref: o, ...e })
+), n = r(
+  ({ ratio: t = 4 / 3, ...e }, o) => /* @__PURE__ */ i.createElement(c, { ratio: t, ref: o, ...e })
 );
-s.displayName = "AspectRatio";
+n.displayName = "AspectRatio";
 export {
-  s as AspectRatio
+  n as AspectRatio
 };

package/dist/Avatar.js

@@ -1,5 +1,5 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("@xstyled/styled-components"),y=require("./System.js"),S=require("./Box.js"),m=require("./index-V28zHt_Z.js");function b(o,e=""){const t=Object.keys(o).filter(r=>r.startsWith("secondary-")),n=e.length%t.length;return t[n]}function A(o=""){const[e,t]=o.split(" ");return e&&t?`${e.charAt(0).toUpperCase()}${t.charAt(0).toUpperCase()}`:e.substring(0,2).toUpperCase()}const C=s(m.Shape2)`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("@xstyled/styled-components"),y=require("./System.js"),x=require("./Box.js"),S=require("./Shape.js"),b=require("./Text.js");function q(o,e=""){const t=Object.keys(o).filter(r=>r.startsWith("secondary-")),n=e.length%t.length;return t[n]}function A(o=""){const[e,t]=o.split(" ");return e&&t?`${e.charAt(0).toUpperCase()}${t.charAt(0).toUpperCase()}`:e.substring(0,2).toUpperCase()}const C=s(S.Shape)`
   flex-shrink: 0;
-`,q=s(m.Text2)`
+`,$=s(b.Text)`
   ${s.th("avatars.text")};
-`,g=a.memo(y.forwardRef(({color:o,fontSize:e,getInitials:t=A,h:n,name:r,shape:h="circle",size:d="md",src:c,w:i,...f},p)=>{const l=s.useTheme(),v=o||b(l.colors,r),u=l.avatars.sizes[d],x=e||`calc(${i?l.toRem(i):u} / 2.5)`;return a.createElement(C,{"aria-label":r,backgroundColor:v,h:n||u,ref:p,role:"img",shape:h,w:i||u,...f},c&&a.createElement("img",{alt:r,src:c}),!c&&a.createElement(S.Box,null,a.createElement(q,{fontSize:x,m:0},t(r))))}));g.displayName="Avatar";exports.Avatar=g;
+`,h=a.memo(y.forwardRef(({color:o,fontSize:e,getInitials:t=A,h:n,name:r,shape:m="circle",size:g="md",src:c,w:i,...d},p)=>{const l=s.useTheme(),f=o||q(l.colors,r),u=l.avatars.sizes[g],v=e||`calc(${i?l.toRem(i):u} / 2.5)`;return a.createElement(C,{"aria-label":r,backgroundColor:f,h:n||u,ref:p,role:"img",shape:m,w:i||u,...d},c&&a.createElement("img",{alt:r,src:c}),!c&&a.createElement(x.Box,null,a.createElement($,{fontSize:v,m:0},t(r))))}));h.displayName="Avatar";exports.Avatar=h;

package/dist/Avatar.mjs

@@ -1,27 +1,28 @@
 "use client";
-import a, { memo as v } from "react";
-import m, { th as x, useTheme as C } from "@xstyled/styled-components";
-import { forwardRef as S } from "./System.mjs";
-import { Box as b } from "./Box.mjs";
-import { S as y, T as A } from "./index-Du8Nrf16.mjs";
-function $(o, t = "") {
+import a, { memo as x } from "react";
+import m, { th as v, useTheme as y } from "@xstyled/styled-components";
+import { forwardRef as C } from "./System.mjs";
+import { Box as $ } from "./Box.mjs";
+import { Shape as b } from "./Shape.mjs";
+import { Text as A } from "./Text.mjs";
+function z(o, t = "") {
   const e = Object.keys(o).filter((r) => r.startsWith("secondary-")), s = t.length % e.length;
   return e[s];
 }
-function z(o = "") {
+function E(o = "") {
   const [t, e] = o.split(" ");
   return t && e ? `${t.charAt(0).toUpperCase()}${e.charAt(0).toUpperCase()}` : t.substring(0, 2).toUpperCase();
 }
-const E = m(y)`
+const S = m(b)`
   flex-shrink: 0;
 `, T = m(A)`
-  ${x("avatars.text")};
-`, _ = v(
-  S(
+  ${v("avatars.text")};
+`, _ = x(
+  C(
     ({
       color: o,
       fontSize: t,
-      getInitials: e = z,
+      getInitials: e = E,
       h: s,
       name: r,
       shape: f = "circle",
@@ -30,9 +31,9 @@ const E = m(y)`
       w: l,
       ...u
     }, h) => {
-      const i = C(), d = o || $(i.colors, r), c = i.avatars.sizes[p], g = t || `calc(${l ? i.toRem(l) : c} / 2.5)`;
+      const i = y(), d = o || z(i.colors, r), c = i.avatars.sizes[p], g = t || `calc(${l ? i.toRem(l) : c} / 2.5)`;
       return /* @__PURE__ */ a.createElement(
-        E,
+        S,
         {
           "aria-label": r,
           backgroundColor: d,
@@ -44,7 +45,7 @@ const E = m(y)`
           ...u
         },
         n && /* @__PURE__ */ a.createElement("img", { alt: r, src: n }),
-        !n && /* @__PURE__ */ a.createElement(b, null, /* @__PURE__ */ a.createElement(T, { fontSize: g, m: 0 }, e(r)))
+        !n && /* @__PURE__ */ a.createElement($, null, /* @__PURE__ */ a.createElement(T, { fontSize: g, m: 0 }, e(r)))
       );
     }
   )