@khipu/design-system 0.3.5-alpha.28 → 0.3.5-alpha.29

package/dist/beercss/metadata.json

@@ -1,8 +1,8 @@
 {
   "name": "@khipu/design-system/beercss",
-  "version": "0.3.5-alpha.28",
+  "version": "0.3.5-alpha.29",
   "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
-  "buildDate": "2026-10-05T17:43:40.941Z",
+  "buildDate": "2026-10-05T18:10:37.326Z",
   "includes": {
     "beercss": "4.0.1",
     "khipu-tokens": "latest",
@@ -19,8 +19,8 @@
   },
   "scopeClass": ".kds-theme-root",
   "cdn": {
-    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.28/dist/beercss/khipu-beercss.min.css",
-    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.28/dist/beercss/khipu-beercss.scoped.min.css",
-    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.28/dist/beercss/khipu-beercss.min.js"
+    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.29/dist/beercss/khipu-beercss.min.css",
+    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.29/dist/beercss/khipu-beercss.scoped.min.css",
+    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.29/dist/beercss/khipu-beercss.min.js"
   }
 }

package/dist/index.d.mts

@@ -29,7 +29,7 @@ interface KdsThemeProviderProps {
  */
 declare function KdsThemeProvider({ primaryColor, mode, children }: KdsThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const KDS_VERSION = "0.3.5-alpha.28";
+declare const KDS_VERSION = "0.3.5-alpha.29";
 
 /**
  * Color tokens organized by theme mode
@@ -3185,6 +3185,10 @@ interface KdsStatusBlockProps extends React__default.HTMLAttributes<HTMLDivEleme
      * Texto descriptivo bajo el título. Acepta `ReactNode` para permitir énfasis
      * en línea (p.ej. un lead-in en `<strong>` seguido del detalle). Se renderiza
      * dentro de un `<p>`, así que usar solo contenido válido como hijo de párrafo.
+     *
+     * With `inline`, the description goes below the icon+title row as a full-width
+     * paragraph (result screens), and the block owns the spacing around it: the
+     * consumer does not add margins to the description or to what follows it.
      */
     description?: React__default.ReactNode;
     inline?: boolean;

package/dist/index.d.ts

@@ -29,7 +29,7 @@ interface KdsThemeProviderProps {
  */
 declare function KdsThemeProvider({ primaryColor, mode, children }: KdsThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const KDS_VERSION = "0.3.5-alpha.28";
+declare const KDS_VERSION = "0.3.5-alpha.29";
 
 /**
  * Color tokens organized by theme mode
@@ -3185,6 +3185,10 @@ interface KdsStatusBlockProps extends React__default.HTMLAttributes<HTMLDivEleme
      * Texto descriptivo bajo el título. Acepta `ReactNode` para permitir énfasis
      * en línea (p.ej. un lead-in en `<strong>` seguido del detalle). Se renderiza
      * dentro de un `<p>`, así que usar solo contenido válido como hijo de párrafo.
+     *
+     * With `inline`, the description goes below the icon+title row as a full-width
+     * paragraph (result screens), and the block owns the spacing around it: the
+     * consumer does not add margins to the description or to what follows it.
      */
     description?: React__default.ReactNode;
     inline?: boolean;

package/dist/index.js

@@ -200,7 +200,7 @@ function formatTime(iso) {
 }
 
 // src/version.ts
-var KDS_VERSION = "0.3.5-alpha.28";
+var KDS_VERSION = "0.3.5-alpha.29";
 
 // src/theme/KdsThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1965,13 +1965,32 @@ KdsSectionNote.displayName = "KdsSectionNote";
 var import_react24 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var KdsStatusBlock = (0, import_react24.forwardRef)(
-  ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "kds-status-block-title", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "kds-status-block-description", children: description })
-    ] })
-  ] })
+  ({ status, icon, title, description, inline, className, ...props }, ref) => {
+    const descriptionBelowRow = Boolean(inline && description);
+    const descriptionNode = description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "kds-status-block-description", children: description }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)(
+          "kds-status-block",
+          inline && "inline",
+          descriptionBelowRow && "kds-status-block--described",
+          className
+        ),
+        "data-status": status,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "kds-status-block-title", children: title }),
+            !descriptionBelowRow && descriptionNode
+          ] }),
+          descriptionBelowRow && descriptionNode
+        ]
+      }
+    );
+  }
 );
 KdsStatusBlock.displayName = "KdsStatusBlock";
 

package/dist/index.mjs

@@ -70,7 +70,7 @@ function formatTime(iso) {
 }
 
 // src/version.ts
-var KDS_VERSION = "0.3.5-alpha.28";
+var KDS_VERSION = "0.3.5-alpha.29";
 
 // src/theme/KdsThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -1835,13 +1835,32 @@ KdsSectionNote.displayName = "KdsSectionNote";
 import { forwardRef as forwardRef21 } from "react";
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var KdsStatusBlock = forwardRef21(
-  ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ jsxs16("div", { ref, className: clsx("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
-    /* @__PURE__ */ jsx23("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ jsx23("i", { className: "material-symbols-outlined", children: icon }) }),
-    /* @__PURE__ */ jsxs16("div", { children: [
-      /* @__PURE__ */ jsx23("h2", { className: "kds-status-block-title", children: title }),
-      description && /* @__PURE__ */ jsx23("p", { className: "kds-status-block-description", children: description })
-    ] })
-  ] })
+  ({ status, icon, title, description, inline, className, ...props }, ref) => {
+    const descriptionBelowRow = Boolean(inline && description);
+    const descriptionNode = description ? /* @__PURE__ */ jsx23("p", { className: "kds-status-block-description", children: description }) : null;
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        ref,
+        className: clsx(
+          "kds-status-block",
+          inline && "inline",
+          descriptionBelowRow && "kds-status-block--described",
+          className
+        ),
+        "data-status": status,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx23("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ jsx23("i", { className: "material-symbols-outlined", children: icon }) }),
+          /* @__PURE__ */ jsxs16("div", { children: [
+            /* @__PURE__ */ jsx23("h2", { className: "kds-status-block-title", children: title }),
+            !descriptionBelowRow && descriptionNode
+          ] }),
+          descriptionBelowRow && descriptionNode
+        ]
+      }
+    );
+  }
 );
 KdsStatusBlock.displayName = "KdsStatusBlock";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khipu/design-system",
-  "version": "0.3.5-alpha.28",
+  "version": "0.3.5-alpha.29",
   "description": "Khipu Design System - UI components and design tokens for the Khipu payment platform",
   "main": "dist/index.js",
   "module": "dist/index.mjs",