welcome-ui 7.1.1 → 7.2.0

package/README.md

@@ -72,19 +72,13 @@ export default function Root() {
 yarn
 ```
 
-2. Start a watch on all packages to rebuild them easily
+2. Start documentation website
 
 ```bash
 yarn start
 ```
 
-3. Start documentation website
-
-```bash
-yarn website
-```
-
-4. and go to http://localhost:3020
+3. and go to http://localhost:3020
 
 ## How to release
 

package/dist/Accordion.mjs

@@ -19,16 +19,16 @@ const w = r.div`
   ${o("accordions.icon")};
   transform: rotate3d(0);
   transition: medium;
-  width: 24;
-  height: 24;
+  width: 32;
+  height: 32;
   color: inherit;
   display: flex;
-  border-radius: 12;
+  border-radius: 16;
 
   & *:first-child {
     margin: auto;
   }
-`, x = r(p)`
+`, E = r(p)`
   ${o("accordions.title")};
   width: 100%;
   padding: ${o("accordions.padding")};
@@ -37,7 +37,7 @@ const w = r.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: xxl;
+  gap: lg;
 
   &[aria-expanded='true'] {
     ${n} {
@@ -59,7 +59,7 @@ const w = r.div`
       color: inherit;
     }
   }
-`, E = r(f)`
+`, v = r(f)`
   display: grid;
   grid-template-rows: 0fr;
   transition-property: grid-template-rows;
@@ -75,13 +75,13 @@ const w = r.div`
   &[data-enter] {
     grid-template-rows: 1fr;
   }
-`, v = r.div`
+`, y = r.div`
   ${o("accordions.content")};
   padding: ${o("accordions.padding")};
   padding-top: 0;
   color: neutral-70;
 `, A = $(
-  ({ children: i, dataTestId: e, icon: c = /* @__PURE__ */ t.createElement(h, null), store: a, title: d, ...s }, l) => /* @__PURE__ */ t.createElement(w, { "data-testid": e, ref: l, ...s }, /* @__PURE__ */ t.createElement(x, { "data-testid": e ? `${e}-title` : void 0, store: a }, d, /* @__PURE__ */ t.createElement(n, null, m(c, { size: "sm" }))), /* @__PURE__ */ t.createElement(E, { "data-testid": e ? `${e}-content` : void 0, store: a }, /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(v, null, i))))
+  ({ children: i, dataTestId: e, icon: c = /* @__PURE__ */ t.createElement(h, null), store: a, title: d, ...s }, l) => /* @__PURE__ */ t.createElement(w, { "data-testid": e, ref: l, ...s }, /* @__PURE__ */ t.createElement(E, { "data-testid": e ? `${e}-title` : void 0, store: a }, d, /* @__PURE__ */ t.createElement(n, null, m(c, { size: "sm" }))), /* @__PURE__ */ t.createElement(v, { "data-testid": e ? `${e}-content` : void 0, store: a }, /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(y, null, i))))
 );
 function j(i) {
   return g({ animated: !0, ...i });

package/dist/Alert.mjs

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

package/dist/Button.mjs

@@ -1,21 +1,24 @@
 "use client";
 import r from "react";
-import h, { css as i, th as t, system as b } from "@xstyled/styled-components";
-import { B as p } from "./X5NMLKT6-uFSu0Lii.mjs";
-import { h as y } from "./hide-focus-rings-root-BNyva1yb.mjs";
-import { shouldForwardProp as w, forwardRef as g } from "./System.mjs";
-import { Loader as x } from "./Loader.mjs";
-import { Box as d } from "./Box.mjs";
-const B = (e, s = "square") => i`
-  width: ${t(`buttons.sizes.${e}.height`)};
+import h, { css as e, th as t, system as p } from "@xstyled/styled-components";
+import { B as y } from "./X5NMLKT6-uFSu0Lii.mjs";
+import { h as w } from "./hide-focus-rings-root-BNyva1yb.mjs";
+import { shouldForwardProp as g, forwardRef as x } from "./System.mjs";
+import { Loader as B } from "./Loader.mjs";
+import { Box as c } from "./Box.mjs";
+const E = (i, s = "square") => e`
+  width: ${t(`buttons.sizes.${i}.height`)};
   padding: 0;
-  ${s === "circle" && i`
-    border-radius: ${t(`buttons.sizes.${e}.height`)};
+  ${s === "circle" && e`
+    border-radius: ${t(`buttons.sizes.${i}.height`)};
   `};
-`, a = h(p).withConfig({ shouldForwardProp: w })(
-  ({ danger: e, disabled: s, shape: l, size: n = "md", variant: o = "primary" }) => i`
+`, d = h(y).withConfig({ shouldForwardProp: g })(
+  ({ ai: i, danger: s, disabled: u, shape: $, size: n = "md", variant: o = "primary" }) => e`
     ${t(`buttons.${o}`)};
-    ${e && i`
+    ${i && e`
+      ${t(`buttons.ai.${o}`)};
+    `}
+    ${s && e`
       ${t(`buttons.danger.${o}`)};
     `}
     position: relative;
@@ -34,8 +37,8 @@ const B = (e, s = "square") => i`
     appearance: none;
     overflow: hidden;
     transition: medium;
-    ${l && B(n, l)};
-    ${b};
+    ${$ && E(n, $)};
+    ${p};
 
     & > svg.wui-icon,
     & > i.wui-icon-font {
@@ -57,25 +60,34 @@ const B = (e, s = "square") => i`
       margin-right: sm;
     }
 
-    ${!s && i`
-      [${y}] &:focus {
+    ${!u && e`
+      [${w}] &:focus {
         box-shadow: none;
       }
       &:focus {
         ${t(`buttons.focus.${o}`)};
-        ${e && i`
+        ${i && e`
+          ${t(`buttons.focus.ai.${o}`)};
+        `}
+        ${s && e`
           ${t(`buttons.focus.danger.${o}`)};
         `}
       }
       &:hover {
         ${t(`buttons.hover.${o}`)};
-        ${e && i`
+        ${i && e`
+          ${t(`buttons.hover.ai.${o}`)};
+        `}
+        ${s && e`
           ${t(`buttons.hover.danger.${o}`)};
         `}
       }
       &:active {
         ${t(`buttons.active.${o}`)};
-        ${e && i`
+        ${i && e`
+          ${t(`buttons.active.ai.${o}`)};
+        `}
+        ${s && e`
           ${t(`buttons.active.danger.${o}`)};
         `}
       }
@@ -85,32 +97,34 @@ const B = (e, s = "square") => i`
       cursor: not-allowed;
     }
   `
-), E = g(
+), _ = x(
   ({
-    children: e,
-    danger: s,
-    dataTestId: l,
+    ai: i,
+    children: s,
+    danger: u,
+    dataTestId: $,
     disabled: n,
     isLoading: o,
-    size: c = "md",
-    variant: $ = "primary",
-    ...m
-  }, f) => {
-    const u = n || o;
+    size: a = "md",
+    variant: m = "primary",
+    ...f
+  }, b) => {
+    const l = n || o;
     return /* @__PURE__ */ r.createElement(
-      a,
+      d,
       {
-        danger: s,
+        ai: i,
+        danger: u,
         "data-loading": o,
-        "data-testid": l,
-        disabled: u,
-        ref: f,
-        size: c,
-        variant: u ? "disabled" : $,
-        ...m
+        "data-testid": $,
+        disabled: l,
+        ref: b,
+        size: a,
+        variant: l ? "disabled" : m,
+        ...f
       },
       o && /* @__PURE__ */ r.createElement("div", null, /* @__PURE__ */ r.createElement(
-        d,
+        c,
         {
           alignItems: "center",
           bottom: 0,
@@ -122,15 +136,15 @@ const B = (e, s = "square") => i`
           right: 0,
           top: 0
         },
-        /* @__PURE__ */ r.createElement(x, { size: "xs" })
-      ), /* @__PURE__ */ r.createElement(d, { opacity: "0" }, e)),
-      !o && e
+        /* @__PURE__ */ r.createElement(B, { size: "xs" })
+      ), /* @__PURE__ */ r.createElement(c, { opacity: "0" }, s)),
+      !o && s
     );
   }
 );
-E.displayName = "Button";
-const S = a;
+_.displayName = "Button";
+const q = d;
 export {
-  E as Button,
-  S as StyledButton
+  _ as Button,
+  q as StyledButton
 };