@telefonica/mistica 16.61.0 → 16.62.0-beta.1

package/doc/layout.md

@@ -79,7 +79,8 @@ a horizontal `Stack`, and it covers the most common row-layout use cases you mig
 It supports:
 
 - horizontal distribution via `space={number}` or `space="between" | "around" | "evenly"`
-- vertical alignment of children via `alignItems="flex-start" | "flex-end" | "center" | "stretch" | "baseline"`
+- vertical alignment of children via
+  `alignItems="flex-start" | "flex-end" | "center" | "stretch" | "baseline"`
 - wrapping via `wrap` and row spacing via `verticalSpace`
 
 :information_source: Check `Inline` in
@@ -139,6 +140,24 @@ Distribute items evenly. Items have equal space around them
 
 <img src="./images/layout/inline-evenly.svg" />
 
+### nesting
+
+Nest `Inline` components to compose richer rows. A common pattern groups a leading icon and label on the left
+with a value on the right via `space="between"`:
+
+```tsx
+<Inline space="between" alignItems="center">
+  <Inline space={8} alignItems="center">
+    <IconTruckRegular size={24} color={skinVars.colors.neutralHigh} />
+    <Text2 regular>Envío:</Text2>
+  </Inline>
+  <Text2 regular>Mañana, gratis</Text2>
+</Inline>
+```
+
+The outer `Inline` distributes the two groups to opposite ends; the inner `Inline` keeps the icon tightly
+grouped with its label at a fixed gap.
+
 ## Align
 
 Positions its children within a container using CSS grid alignment. Useful for centering content or placing it

package/doc/llms.md

@@ -54,6 +54,11 @@ a documented composite component would be simpler.
     ```tsx
     <style>{`body { background-color: ${skinVars.colors.background}; }`}</style>
     ```
+11. **Re-apply these rules during debugging, reviewing, and fixing — not just while writing new code.**
+    TypeScript errors, visual mismatches, and "I just need this to work" pressure are not exceptions. If you
+    are about to add `style={{...}}` to a `<div>`, a hex literal, a manual `font-size`, a `margin: auto` /
+    `justify-content: center` workaround, or any other escape hatch inside Mistica code, stop and find the
+    primitive first — the rule you need is already above.
 
 ## Install
 
@@ -324,6 +329,7 @@ After reading the minimum set, read any further files that apply to your specifi
 | **Testing (read if you have to implement tests)** | `doc/testing.md`         |
 | **Migrating from older versions**                 | `doc/migration-guide.md` |
 | **Optimizing bundle size with lottie**            | `doc/lottie.md`          |
+| **Implementing a Figma design via Figma MCP**     | `doc/figma-mcp.md`       |
 
 ## Docs reference
 
@@ -347,3 +353,4 @@ After reading the minimum set, read any further files that apply to your specifi
 - [Testing](./testing.md): NODE_ENV, unit tests, acceptance tests, isRunningAcceptanceTest
 - [Lottie](./lottie.md): optimizing bundle size with lottie-web light build
 - [Migration guide](./migration-guide.md): cards ecosystem migration (v16), v12 to v13 migration
+- [Figma MCP](./figma-mcp.md): mandatory translation rules when implementing from Figma MCP output.

package/doc/patterns.md

@@ -2,19 +2,8 @@
 
 ## Critical rules
 
-1. **NEVER hardcode colors in app/component UI code.** Always use `skinVars.colors.*` from
-   `@telefonica/mistica`. For skins and theme-level customization, see [theme-config.md](./theme-config.md).
-2. **NEVER use raw `<div>` for layout.** Use `Box`, `Stack`, `Inline`, `ResponsiveLayout`, `GridLayout`,
-   `Grid`.
-3. **NEVER set font sizes manually.** Use text components (`Text1`-`Text10`, `Title1`-`Title4`). If those
-   don't cover your necessities you can set custom sizes with `Text` component.
-4. **NEVER set border radius manually.** Use `skinVars.borderRadii.*` or components that handle it (`Boxed`,
-   cards, etc.). For theme-level visual customization without a dedicated component prop, use a custom skin.
-5. **Always wrap your app** with `ThemeContextProvider` and import `@telefonica/mistica/css/mistica.css`.
-6. **Always namespace React hooks**: `React.useState`, `React.useEffect`, `React.useRef`, etc.
-7. **Add `'use client';`** directive to client components when using Next.js app router.
-8. **Set `font-family` and `body` background color.** See [llms.md](./llms.md) rules 9–10 and
-   [fonts.md](./fonts.md) for the per-skin font table, `@font-face` setup, and the `GlobalStyles` pattern.
+See [Critical Rules in `llms.md`](./llms.md#critical-rules) — the single source of truth. These rules apply
+throughout this document.
 
 ## Page layout composition
 
@@ -501,10 +490,10 @@ return (
   <ResponsiveLayout>
     <Stack space={24}>
       <Stepper currentIndex={currentStep} steps={['Personal', 'Address', 'Payment', 'Confirm']} />
-        {currentStep === 0 && <PersonalInfoForm />}
-        {currentStep === 1 && <AddressForm />}
-        {currentStep === 2 && <PaymentForm />}
-        {currentStep === 3 && <ConfirmationScreen />}
+      {currentStep === 0 && <PersonalInfoForm />}
+      {currentStep === 1 && <AddressForm />}
+      {currentStep === 2 && <PaymentForm />}
+      {currentStep === 3 && <ConfirmationScreen />}
     </Stack>
   </ResponsiveLayout>
 </Stack>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "16.61.0",
+    "version": "16.62.0-beta.1",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '16.61.0' as string;
+export const PACKAGE_VERSION = '16.62.0-beta.1' as string;