welcome-ui 8.2.1 → 8.3.0

package/dist/Alert.mjs

@@ -18,23 +18,23 @@ const x = c.divBox`
 `, A = c(q)`
   position: absolute;
   align-self: flex-start;
-`, F = c.divBox(({ icon: n, isFullWidth: o, size: e, variant: l }) => f`
+`, F = c.divBox(({ icon: o, isFullWidth: e, size: n, variant: i }) => f`
     position: relative;
     display: flex;
     align-items: flex-start;
     width: 100%;
-    max-width: ${o ? "100%" : "max-content"};
+    max-width: ${e ? "100%" : "max-content"};
     ${r("alerts.default")};
-    ${r(`alerts.${l}`)};
-    ${r(`alerts.sizes.${e}`)};
+    ${r(`alerts.${i}`)};
+    ${r(`alerts.sizes.${n}`)};
 
-    ${n !== null && e === "sm" && f`
+    ${o !== null && n === "sm" && f`
       ${x} {
         margin-left: calc(${r("icons.sm")} + ${r("space.md")});
       }
     `}
 
-    ${n !== null && e === "md" && f`
+    ${o !== null && n === "md" && f`
       ${x} {
         margin-left: calc(${r("icons.md")} + ${r("space.lg")});
         gap: ${r("space.lg")};
@@ -45,36 +45,42 @@ const x = c.divBox`
         margin-top: -3;
       }
     `}
-  `), G = c(O)(({ variant: n }) => f`
+  `), G = c(O)(({ hasCloseButton: o, variant: e }) => f`
     font-weight: medium;
     ${r("alerts.title.default")};
-    ${r(`alerts.title.sizes.${n}`)};
+    ${r(`alerts.title.sizes.${e}`)};
+    margin-right: ${o ? "xl" : void 0};
     ${D};
-  `), b = ({ children: n, dataTestId: o, variant: e }) => /* @__PURE__ */ s.jsx(G, { "data-testid": o, variant: e, children: n }), H = d(
+  `), b = ({
+  children: o,
+  dataTestId: e,
+  hasCloseButton: n,
+  variant: i
+}) => /* @__PURE__ */ s.jsx(G, { "data-testid": e, hasCloseButton: n, variant: i, children: o }), H = d(
   ({
-    children: n,
-    cta: o,
-    dataTestId: e,
-    handleClose: l,
+    children: o,
+    cta: e,
+    dataTestId: n,
+    handleClose: i,
     icon: p,
-    isFullWidth: h,
-    size: i = "sm",
+    isFullWidth: S,
+    size: l = "sm",
     variant: a = "default",
     ...C
   }, I) => {
-    const k = e ? `${e}-close-button` : void 0, E = a === "beige" ? "default" : a, u = a === "ai", T = j.toArray(n).map((t) => t.type === b ? m(t, { variant: i }) : t), $ = (t) => {
+    const k = n ? `${n}-close-button` : void 0, E = a === "beige" ? "default" : a, u = a === "ai", T = j.toArray(o).map((t) => t.type === b ? m(t, { hasCloseButton: !!i, variant: l }) : t), $ = (t) => {
       var y;
       if (t) {
         if (t.type === v)
           return m(t, {
             ai: u,
-            size: i,
+            size: l,
             variant: u ? "primary" : void 0
           });
-        if (t.type === S)
+        if (t.type === h)
           return m(t, {
             ai: u,
-            size: i
+            size: l
           });
         if ((y = t.props) != null && y.children)
           return m(t, {
@@ -86,30 +92,30 @@ const x = c.divBox`
           });
       }
       return t;
-    }, g = R.isValidElement(o) ? $(o) : o;
+    }, g = R.isValidElement(e) ? $(e) : e;
     return /* @__PURE__ */ s.jsxs(
       F,
       {
-        "data-testid": e,
+        "data-testid": n,
         icon: p,
-        isFullWidth: h,
+        isFullWidth: S,
         ref: I,
-        size: i,
+        size: l,
         variant: a,
         ...C,
         children: [
-          !!l && /* @__PURE__ */ s.jsx(
+          !!i && /* @__PURE__ */ s.jsx(
             _,
             {
               dataTestId: k,
-              onClick: l,
+              onClick: i,
               position: "absolute",
               right: "sm",
               size: "xs",
               top: "sm"
             }
           ),
-          p !== null && /* @__PURE__ */ s.jsx(A, { icon: p, size: i, variant: E }),
+          p !== null && /* @__PURE__ */ s.jsx(A, { icon: p, size: l, variant: E }),
           /* @__PURE__ */ s.jsxs(x, { children: [
             /* @__PURE__ */ s.jsx(B, { flex: 1, children: T }),
             !!g && /* @__PURE__ */ s.jsx(B, { alignItems: "center", display: "flex", gap: "sm", children: g })
@@ -119,12 +125,12 @@ const x = c.divBox`
     );
   }
 ), v = d(
-  ({ variant: n = "secondary", ...o }, e) => /* @__PURE__ */ s.jsx(w, { flexShrink: 0, ref: e, w: "fit-content", ...o, variant: n })
-), S = d(
-  ({ variant: n = "tertiary", ...o }, e) => /* @__PURE__ */ s.jsx(w, { flexShrink: 0, ref: e, w: "fit-content", ...o, variant: n })
+  ({ variant: o = "secondary", ...e }, n) => /* @__PURE__ */ s.jsx(w, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: o })
+), h = d(
+  ({ variant: o = "tertiary", ...e }, n) => /* @__PURE__ */ s.jsx(w, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: o })
 ), X = Object.assign(H, {
   Button: v,
-  SecondaryButton: S,
+  SecondaryButton: h,
   Title: b
 });
 export {

package/dist/Card.mjs

@@ -6,7 +6,7 @@ import { Shape as i } from "./Shape.mjs";
 const c = e(i)`
   ${t("cards.cover")};
 `, a = ({ src: o, ...r }) => /* @__PURE__ */ d.jsx(c, { ...r, children: /* @__PURE__ */ d.jsx("img", { src: o }) }), m = e.divBox`
-  overflow: 'hidden';
+  overflow: hidden;
   border-radius: md;
   ${t("cards.default")};
   background-size: cover;

package/dist/Toggle.mjs

@@ -2,8 +2,8 @@
 import { j as s } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { C as f, a as $ } from "./index-62h-enZF.mjs";
 import { shouldForwardProp as g, forwardRef as c } from "./System.mjs";
-import r, { th as t, system as u, css as i } from "@xstyled/styled-components";
-const h = r(f).withConfig({ shouldForwardProp: g })(
+import r, { th as t, system as h, css as i } from "@xstyled/styled-components";
+const u = r(f).withConfig({ shouldForwardProp: g })(
   ({ order: e = "-1", size: o }) => i`
     ${t("toggles.item.default")};
     ${t(`toggles.item.sizes.${o}`)};
@@ -52,12 +52,13 @@ const h = r(f).withConfig({ shouldForwardProp: g })(
       }
     }
 
-    ${u};
+    ${h};
   `
 ), x = r.divBox`
   position: relative;
   display: inline-block;
   cursor: pointer;
+  flex-shrink: 0;
 `, b = r.divBox.withConfig({ shouldForwardProp: g })(
   ({ checked: e, size: o }) => i`
     position: absolute;
@@ -86,7 +87,7 @@ const h = r(f).withConfig({ shouldForwardProp: g })(
     const m = o && a;
     return /* @__PURE__ */ s.jsxs(x, { onClick: l, children: [
       m ? /* @__PURE__ */ s.jsx(b, { checked: e, onClick: l, size: n, children: e ? o : a }) : null,
-      /* @__PURE__ */ s.jsx($, { ...d, checked: e, Component: h, ref: p, size: n })
+      /* @__PURE__ */ s.jsx($, { ...d, checked: e, Component: u, ref: p, size: n })
     ] });
   }
 );

package/dist/theme.mjs

@@ -1427,9 +1427,9 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
     }
   };
 }, Ur = {
-  lg: "3px",
+  sm: "1px",
   md: "2px",
-  sm: "1px"
+  lg: "3px"
 }, Pr = {
   "beige-10": "#FBF9F7",
   "beige-20": "#F6F3EF",
@@ -1763,41 +1763,41 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
     }
   ]
 }), Jr = (o) => ({
-  full: "100%",
-  lg: o.toRem(8),
-  md: o.toRem(4),
   none: "0",
   sm: o.toRem(2),
+  md: o.toRem(4),
+  lg: o.toRem(8),
   xl: o.toRem(16),
-  xxl: o.toRem(24)
+  xxl: o.toRem(24),
+  full: "100%"
 }), Xr = {
-  "3xl": 1620,
-  "4xl": 1920,
-  lg: 980,
-  md: 736,
+  xs: 0,
   sm: 480,
+  md: 736,
+  lg: 980,
   xl: 1280,
-  xs: 0,
-  xxl: 1440
+  xxl: 1440,
+  "3xl": 1620,
+  "4xl": 1920
 }, Zr = (o) => ({
   backgroundColor: o.colors["primary-40"],
   color: o.colors["neutral-90"]
 }), Qr = {
-  md: "3px 4px 10px 0 rgba(0,0,0,0.07)",
-  sm: "1px 2px 4px 0 rgba(0,0,0,0.05)"
+  sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
+  md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
 }, Vr = (o) => ({
+  xxs: o.toRem(2),
+  xs: o.toRem(4),
+  sm: o.toRem(8),
+  md: o.toRem(12),
+  lg: o.toRem(16),
+  xl: o.toRem(24),
+  xxl: o.toRem(32),
   "3xl": o.toRem(48),
   "4xl": o.toRem(64),
   "5xl": o.toRem(96),
   "6xl": o.toRem(128),
-  "7xl": o.toRem(192),
-  lg: o.toRem(16),
-  md: o.toRem(12),
-  sm: o.toRem(8),
-  xl: o.toRem(24),
-  xs: o.toRem(4),
-  xxl: o.toRem(32),
-  xxs: o.toRem(2)
+  "7xl": o.toRem(192)
 }), h = {
   primary: "ease",
   secondary: "linear",

package/dist/types/components/Alert/Title.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
 import { TextProps } from '../Text';
-export type AlertTitleProps = Pick<TextProps, 'children' | 'dataTestId' | 'variant'>;
+export type AlertTitleProps = Pick<TextProps, 'children' | 'dataTestId' | 'variant'> & {
+    hasCloseButton?: boolean;
+};
 /**
  * @name Alert.Title
  */

package/dist/types/theme/borders.d.ts

@@ -1,6 +1,6 @@
 export type ThemeBorderWidths = {
-    lg: string;
-    md: string;
     sm: string;
+    md: string;
+    lg: string;
 };
 export declare const borderWidths: ThemeBorderWidths;

package/dist/types/theme/colors.d.ts

@@ -333,14 +333,7 @@ export declare const colors: {
     'yellow-80': string;
     'yellow-90': string;
 };
-declare const enum SecondaryColors {
-    'blue' = 0,
-    'green' = 1,
-    'orange' = 2,
-    'pink' = 3,
-    'teal' = 4,
-    'violet' = 5
-}
 export type ThemeColors = typeof colors;
-export type ThemeSecondaryColors = keyof typeof SecondaryColors;
+export type ThemeSecondaryColors = SecondaryColors;
+type SecondaryColors = 'blue' | 'green' | 'orange' | 'pink' | 'teal' | 'violet';
 export {};

package/dist/types/theme/radii.d.ts

@@ -1,12 +1,12 @@
 import { ThemeValues } from '.';
 export type ThemeRadii = {
-    [key: number]: string;
-    full: string;
-    lg: string;
-    md: string;
     none: string;
     sm: string;
+    md: string;
+    lg: string;
     xl: string;
     xxl: string;
+    full: string;
+    [key: number]: string;
 };
 export declare const getRadii: (theme: ThemeValues) => ThemeRadii;

package/dist/types/theme/shadows.d.ts

@@ -1,5 +1,5 @@
 export type ThemeShadows = {
-    md: string;
     sm: string;
+    md: string;
 };
 export declare const shadows: ThemeShadows;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"
@@ -84,10 +84,10 @@
     "release-it": "^18.1.2",
     "rollup": "^4.39.0",
     "rollup-preserve-directives": "^1.1.3",
-    "vite": "^6.2.1",
+    "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-static-copy": "^2.3.0",
-    "vitest": "^3.0.8"
+    "vitest": "^3.1.4"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^4.0.0",