feat(Chore): MisticaAI update doc to improve code generation

doc/components.md

@@ -1,6 +1,6 @@
 # Components Reference
 
-All components are imported from `@telefonica/mistica`.
+All components are imported from `@telefonica/mistica`. Before using any component, you should **always** read the definition .d.ts files located in `node_modules` so you have all the props and JSDoc context.
 
 ```tsx
 import {ButtonPrimary, Stack, Text2, ...} from '@telefonica/mistica';

doc/layout.md

@@ -49,14 +49,22 @@ spacing. All padding props accept a numeric value or a responsive object `{mobil
 
 ```tsx
 <Box paddingX={16} paddingY={32}>
-  <Child />
+  <Text2>Example</Text2>
 </Box>
 ```
 
 <img src="./images/layout/box.svg" />
 
 :warning: Do not use `Box` to add external spacings or distribute items, instead use `Stack` or `Inline`.
 
+You can also use Box as a fixed width container:
+
+```tsx
+<Box width={80}>
+  <Text2>Example</Text2>
+</Box>
+```
+
 ## Stack
 
 Vertically distributes its children using the given `space` separation.
@@ -159,6 +167,41 @@ with a value on the right via `space="between"`:
 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.
 
+### Grow
+
+Use the `expand` prop to make one or more children of an `Inline` grow to fill the remaining horizontal space.
+It takes the index (or an array of indexes) of the children that should grow. Indexes follow
+`React.Children.toArray` order, so empty nodes (`null`, `false`) are skipped but rendered elements always
+count. You don't wrap the growing child in anything — `Inline` already wraps every child in its own element:
+
+```tsx
+<Inline space={56} alignItems="center" expand={1}>
+  <Text7>4,6</Text7>
+  <InfoRating
+    value={4}
+    icon={{
+      ActiveIcon: IconStarFilled,
+      InactiveIcon: IconStarLight,
+      color: skinVars.colors.textPrimary,
+    }}
+  />
+  <Text3 regular>150 valoraciones</Text3>
+</Inline>
+```
+
+```tsx
+<Inline space={16} alignItems="center" expand={[1, 2]}>
+  <IconTruckRegular size={24} color={skinVars.colors.neutralHigh} />
+  <TextField name="firstName" label="First name" fullWidth />
+  <TextField name="lastName" label="Last name" fullWidth />
+</Inline>
+```
+
+**Common mistakes.** `Inline` wraps each child in its own element, so growing a child by wrapping it in a
+`<div style={{flex: 1}}>` (or `flex-grow`) does nothing useful. Neither does `<Box style={{...}}>` — `Box` has
+no `style` prop, so a flex or width passed that way is silently dropped and the row collapses or overflows its
+container. Reach for `expand` (and `<Box width={N}>` for any fixed sibling) instead.
+
 ## Align
 
 Positions its children within a container using CSS grid alignment. Useful for centering content or placing it

doc/patterns.md

@@ -97,6 +97,29 @@ Follow the 24/32/16 rule:
 </Stack>
 ```
 
+### DO: Fill remaining horizontal space with `Inline` `expand`
+
+To make a row child grow into the leftover width next to a fixed-width sibling , use `Inline`'s `expand` prop
+with the index/indexes of the children that should grow. Indexes follow `React.Children.toArray` order.
+
+```tsx
+// ProgressBar fills remaining space
+<Inline space={24} expand={1} alignItems="center">
+  <Icon2GFilled />
+  <ProgressBar progressPercent={30} />
+</Inline>
+```
+
+### DON'T: grow children with raw flex or `style` on `Box`
+
+```tsx
+// ❌ raw flexbox div — breaks; Inline already wraps each child in a div
+<div style={{display: 'flex'}}>
+  <div style={{flex: 1}}>...</div>
+  <div style={{flex: '0 0 394px'}}>...</div>
+</div>
+```
+
 ## Color dos and don'ts
 
 ### DO: Use design tokens