@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/.llm/components/row.md

@@ -0,0 +1,381 @@
+<!-- GENERATED from row.contract.json. Do not edit. -->
+
+# Row
+
+A line, and one measure between the things on it. It draws nothing — no ground, no edge, no padding — and owns one decision: how far apart the things beside one another sit. Everything else about them stays theirs.
+
+It is Stack's twin and not Stack with a direction, because a line and a column are asked different questions. Two of the props here mean nothing down a column: a line can run out of room and break, which a column cannot, and a line can sit its items on one another's first line of text, which a column has no use for. Put both on one component with a direction and half its surface is inert at any moment — a prop that does nothing is a prop a reader has to test to learn about.
+
+What it is not is a way of putting things in columns. A line arranges what is on it and knows nothing of the line above, so a row that has wrapped is ragged by construction and its items align with nothing. Where they must agree in both directions the answer is tracks; where they must stay on one line the answer is a rail. On a page that distinction earns its keep: a row of feature cards that wraps looks like a grid at the width it was designed at, and like an accident at every other.
+
+## Use when
+
+- Two or more things are read across rather than down, and the space between them is the same all the way along — a glyph and its label, a title and the action beside it, a set of controls
+- The spacing is a fact about the group rather than about any member of it. Set here, every item agrees; set on the items, the group is only as consistent as the last person to add one
+- The items are of different heights and something has to decide how they meet — centred on the line, level at the top, or sitting on one another's baseline. That decision belongs to the line rather than to any item on it
+
+## Do not use
+
+- The things are read one above the next → `Stack`
+- The things must line up down the page as well as across it → `Grid`
+- The set is longer than the line and has to stay on one line → `Scroller`
+- The things across are the fields of one record, and the record repeats down the page → `Table`
+- Padding. It sets space between its children and none at all around them, so a row reached for to inset a region leaves the surface that should have carried the padding with none — and the inset now lives on an element that has no ground to sit on
+- A single child. A line of one has nothing to space: the gap is inert, and what is left is an element that renders, costs a node, and explains nothing to the next person to read it
+- Reaching a width. It is as wide as whatever holds it and declares no size of its own. A row used to constrain a measure is a width hidden inside a spacing decision, in the one place nobody will search for it
+- Building a grid out of wrapping. Wrap is what a line does when it has run out of room, not a way of arranging things in columns: the last line is as long as whatever is left, and no item on it sits under an item above. It looks like a grid at the width it was designed at and at no other
+- Separating two things that a surface, a rule or a ground already separates. Two answers to one gap is how a view stops having a rhythm worth reading
+
+## Anatomy
+
+Row renders one element.
+
+- `root` — `<div>`, class `dds-row`. The line, and the whole of what this component is. It paints nothing, holds no corner and takes no padding: an arrangement is not a surface, and one that brought a ground of its own would be a second surface inside whatever it was put in.
+  
+  A flex row rather than inline elements with margins, because the gap has to be a property of the container for the items to be interchangeable. Written as margins the measure lives on the items, the first or the last carries one nobody wanted, and reordering the line changes the spacing. Inline elements bring a second problem margins do not fix: whitespace between tags is rendered as a space, so the measure becomes the sum of a margin and whatever the source happened to be formatted like.
+  
+  It declares `min-inline-size: 0`, which looks like nothing and is what lets a row nested inside another flex container shrink below its own content's width rather than pushing that container wider. The matching rule for the items on the line is deliberately not here: a child that may shrink below its content is a decision about that child — a label that should truncate, a field that should give way — and a line that forced it on everything would let a button shrink below its own label. The line decides the space between its items and not what any item is willing to become.
+  
+  The top three steps of this package's gap ramp are redefined below 768px. That is the whole of this component's responsiveness and it is inherited rather than declared: the line asks for a role, the role is narrower on a phone, and no breakpoint is written here.
+  
+  Wrapping is the one thing here that changes what the arrangement is rather than how it looks. A line that may break is no longer a line; it is a set of lines with no relationship between them, and the component says so in what it refuses to offer — there is nothing here to align a second line against a first, because there is nothing to align it with.
+
+Apply these classes from the generated `rowParts` constant rather than writing the strings by hand.
+
+## Composition
+
+- Can contain: any content
+
+## Props
+
+### gap — `none` | `xs` | `sm` | `md` | `lg` | `xl` | `2xl` | `3xl` (default `sm`)
+
+- `none` — No gap at all, for a line whose marks are meant to read as one object rather than as a list of controls. The only step here that is a decision rather than a measure
+- `xs` — The tightest gap between related elements: a glyph and its label, a pair of words read as one, inline text pairs
+- `sm` — The default, and what the token names for a line of sibling controls — buttons in a row, a label and the field beside it
+- `md` — The step the token names for stacked items — form fields, feature list items, pricing features — taken across: peers that are not controls, where the control step would make them read as one object
+- `lg` — Between content groups — feature cards, footer columns, one pricing plan beside the next
+- `xl` — Between the parts of a card, or between a heading and the block beside it. Drops one step below 768px, a phone having a third of the width to spend
+- `2xl` — Between one section of a page and the next, set side by side. Drops one step below 768px, a phone having a third of the width to spend
+- `3xl` — The largest gap, for separating whole movements of a page laid out across. Drops one step below 768px, a phone having a third of the width to spend
+
+Use when: Always. The measure between items is the component's one decision and the reason it exists, so there is no case for leaving it unstated
+Never for: Reaching a distance. The gap is a relationship between two items rather than a measure from anything — a step picked because it puts something where it looks right is a position written in the wrong units, and it is wrong at the next width
+
+### align — `start` | `center` | `end` | `stretch` | `baseline` (default `center`)
+
+- `start` — Items keep their own height and sit against the top of the line — a label beside a paragraph that runs to several lines, where centring would set the label against the middle of the block
+- `center` — The default. Items are centred across the line, which is what things of different heights want — a glyph beside a label, a badge beside a title, an avatar beside a name
+- `end` — Items keep their own height and sit against the bottom of the line
+- `stretch` — Every item takes the full height of the line, which is what a line of cards or panels wants when they should finish level however much is in each
+- `baseline` — The first line of text in each item sits on one line. The one alignment that exists only across a row, and the only one that holds when the items are set at different sizes — a figure and its unit, a name and the smaller label after it
+
+Use when: How items of different heights meet across the line. The default is the common case and the one that keeps a glyph reading as part of the label beside it
+Never for: Giving the line a height. Every value here arranges items within whatever height the tallest of them establishes; none of them adds any. A line that should be taller than its contents is a control with a size, and size.control is what carries that
+
+### justify — `start` | `center` | `end` | `between` (default `start`)
+
+- `start` — The default. Items sit at the leading edge, and a line with no width of its own is exactly as wide as they are
+- `center` — Items sit together in the middle of a line wider than they are
+- `end` — Items sit against the trailing edge — the shape the actions closing a dialog or a form take, that being where a flow ends
+- `between` — The first item at the leading edge, the last at the trailing, and whatever room is spare shared between them — a title on one side and its action on the other
+
+Use when: Where the items sit along a line that is wider than they need. Reach for it only where something has given the line a width
+Never for: Pushing one item away from the others. `between` shares the room out between every pair, so a line of three ends with one stranded in the middle that nobody put there. Where one item belongs apart from the rest, the line has two items and one of them is a Row of its own
+
+### wrap — `boolean` (default `false`)
+
+Use when: The line may break onto another when it runs out of room, rather than squashing its items or running off the edge. For a set whose length the page cannot predict — chips a reader has added, tags on a record, a group of filters
+Never for: Building a grid. A wrapped line is ragged by construction: the last line holds whatever is left, and no item on it sits under an item above. Where the items must agree in both directions that is Grid, and where they must stay on one line it is Scroller — wrapping is the answer only when neither the columns nor the line matter
+
+Also accepts everything from `HTMLAttributes<HTMLDivElement>`.
+
+## Choosing a variant
+
+Placement in, props out. When one of these describes what you are building, take
+its props — do not re-derive them from the variant descriptions above.
+
+- **A glyph and the label beside it** — `gap="xs"`
+  The tightest step, and what the token names for an icon and a label. Anything looser and the glyph reads as a thing next to the word rather than part of it
+- **Two calls to action at the foot of a hero** — `gap="sm"`
+  The default step, and the one the token names for buttons in a row. Tight enough that the pair reads as one decision with two answers
+- **A section heading with a link to the full index opposite** — `justify="between"`
+  Two items, so the room falls entirely between them and the link sits against the far edge without anything being given a width
+- **The categories of an index, of no length the page can predict** — `gap="sm"` `wrap`
+  The line breaks rather than squashing the chips or running off the edge. Ragged is the honest result — the set has no shape of its own, so there is nothing for a second line to line up with
+- **A price and the period set smaller beside it** — `gap="xs"` `align="baseline"`
+  The two are set at different sizes, so centring them leaves the period floating against the middle of the price. Sitting them on one baseline is what makes them read as one figure
+
+## Accessibility
+
+Guaranteed by the component. Write none of it by hand: the ids these attributes point at are generated per instance, so an attribute set from outside either says the same thing twice or points at nothing.
+
+- the line announces nothing of its own. It is an arrangement, and an arrangement is not something a reader needs told — what is on it carries the meaning, and each item keeps whatever name or role it would have had anywhere else
+- the order the items are written in is the order they are read in. Nothing here reorders anything, and nothing here should be made to — a line whose visual order and DOM order disagree is read in one order and seen in another, and a keyboard moves through it in the order nobody can see
+- a value and the unit, label or glyph beside it are one announcement rather than two. Putting them on a line does not join them: a screen reader reads two neighbours as two things unless the markup around them says otherwise
+
+## Rules
+
+- **On a phone a section's actions stack and each fills the width, including when there is only one** — On a phone a page's actions stack, and each one fills the width. Not most of it, and not the width its label happens to need — the whole column.
+
+Two side by side is what this replaces. On the narrowest screen each gets half a column minus the gap, which is rarely enough for a real label: the words wrap inside the pills, the two buttons come out different heights, and the pair reads as a broken row rather than as a choice. Stacked, each has the whole width and neither has to shorten its words to fit.
+
+A single action fills too, and that is the part worth saying, because it is the one that looks unnecessary. A lone button has the room to sit at its natural width and still should not: a full-width control is the phone's convention for the thing the screen is asking you to do, and a pill hugging its label reads as one option among others that are not there. It also makes the target predictable — the whole width, wherever the thumb lands — which a centred pill does not.
+
+Filling is the row's job rather than the button's. A button has no width of its own and is not given one; the row it sits in becomes a column and stretches its children, so nothing about the control changes and the same button is full width here and its own size on a desktop.
+
+This is the phone's breakpoint, size.breakpoint.md, and not the wider one that decides whether a heading is centred. Those are different questions and they break at different widths: a heading stops being centred when the measure is the screen, while a button stops being full width much sooner than that — stretched across a tablet it is a long way from its own label, and a label centred in a metre of pill is harder to hit than one in a pill the size of the words.
+
+What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
+  Guidance only — cannot be checked automatically.
+- **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, Input and Switch simultaneously.
+  Guidance only — cannot be checked automatically.
+- **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
+
+color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
+
+color.bg.strong is not a section ground. It is the inverted fill for an action that has to outrank what surrounds it, and the components that paint it — Button and ButtonIcon in their inverse form — already set both halves in one rule, which is the pattern a hand-painted section has to copy.
+  Guidance only — cannot be checked automatically.
+- **Every gap inside a section names the relationship it expresses, and the same relationship keeps its measure when it turns on its side** — A section's spacing is named by the relationship it expresses, not chosen by size. Every gap in a section has a role token, and reaching for a step off the generic scale because it happens to be the right number is how two sections written by two people stop lining up: the numbers agree today and drift the first time one of them is tuned.
+
+The heading group is three steps, not one gap. An eyebrow sits nearer its title than the title sits to its description, and the actions sit further from the description than either — space.heading.eyebrow-title, space.heading.title-description, space.heading.description-actions, in that order. A single `gap` on the group cannot say this; it sets all three the same and the block reads as evenly spaced lines rather than as a mark, a name and a paragraph. The eyebrow has to identify itself for this to work, because a group that opens with a title must not give its description the eyebrow's tighter step.
+
+The step between a title and its description follows the size of the title, which is why there are two of it. What a reader sees is not the gap but the gap plus the leading above it, and leading scales with the type: under a display title the leading is most of the space, under a card's title it is half as deep. One value for both makes a card look loose at the size that made a section look right. So space.heading.title-description is the display step and space.heading.title-description-compact is the step at a card's size, and the choice is made by how big the title is rather than by what kind of block it sits in.
+
+Every one of those steps is smaller than the gap below the group, and that ordering is what holds the group together as one thing. space.heading.content is the step between a heading group and the content it introduces, and it is the widest measure inside a section: the one gap the eye reads as a change of subject rather than as a continuation.
+
+That step is the same whether the content is under the heading or beside it. A split is the same relationship turned on its side — a heading group and the content it introduces — so the space between the two halves is space.heading.content, not a gutter. When the split collapses to one column on a phone the gap becomes vertical again, which is where it started, and nothing has to change for that to be right.
+
+space.grid.gutter is between two things of the same kind. Two cards in a row are the same kind; the two halves of a split are not, which is why the gutter is the wrong measure there even when the number would have looked acceptable. The gutter runs on both axes, so a grid reads as an even field rather than as rows with a seam down them.
+
+space.inset.card is the card's, not the page's. A row of cards padded differently is a row of different cards, and the fill is the only edge they have. A page composing a row does not get to choose it.
+
+Column count is not a breakpoint decision. A row holds as many columns as fit before a column would be narrower than size.grid.column-min, and drops one when they would not. Written as a fixed count that collapses at a breakpoint, a four-up row keeps four columns at every width above the phone and sets its copy two or three words to a line through the whole of the tablet range — and on a narrow desktop, which no breakpoint sits on at all. The threshold is a property of the row rather than of a card: a card fills whatever cell it is given.
+
+What this does not cover is the space above and below a section, which is space.section.default and space.section.compact, and the page's own side margin, which is space.inset.page. Those are the section's outside; everything here is its inside.
+  Guidance only — cannot be checked automatically.
+- **A section's title is centred over stacked content, starts beside content in columns, and starts on a phone** — Two arrangements, and the title's alignment is decided by which one it is introducing rather than chosen per section.
+
+Content stacked under the title — a row of cards, an accordion, a set of steps — takes a centred title. The heading group and the block below it share one axis, so a centred title is symmetric with the thing it names, and the eye drops from the middle of the words to the middle of the set. A title starting at the left over a centred or full-width block reads as belonging to the first column rather than to all of them.
+
+Content beside the title — a split, a picture in the other half, anything laid out in columns — takes a title that starts where its content starts. The two share a left edge, and that edge is what says they are one thing read across rather than two stacked. Centring the title there breaks the only alignment the reader has to hold the halves together, and it drifts further from its content the wider the page gets.
+
+The heading group is what carries this, not the heading alone. An eyebrow, a title and a description are read as one block and align together; aligning the title without them leaves a centred heading over start-aligned copy, which reads as a mistake rather than as a choice.
+
+Centred means all of it, not just the words. A badge, a row of actions, a picture — these are flex children, and a flex child is placed by align-items rather than by text-align, so a block that only sets the text leaves everything that is not text at the start. A hero is the case that shows it: its title and copy centred while its badge and its buttons did not.
+
+A capped block centres itself as well as its words. A heading group takes size.heading-group.max, and a cap that is not centred leaves the measure at the start of the column with the words centred inside it — composed, and a long way left of the middle it appears to be in.
+
+Both arrangements go to the start on a phone. A centred block reverts below the breakpoint, and the reason is the measure: on a phone the measure is the screen, so a centred title wraps to three or four ragged lines and the eye loses the left edge it was tracking — the same symmetry that reads as composure on a desktop is what makes it hard to scan on a phone. Centring there has to be asked for twice, and a section title is not one of the things that asks: it is centred because there is room for it, and on a phone there is not. Going back to the start means all of it too, and a capped block is the one that hides a leftover: its words go to the start while its measure stays in the middle of the column, which reads as a title still centred over a badge and buttons that are not — the box in the middle and the line inside it at the edge.
+
+A hero is a section like any other: its badge, title, copy and actions are one stacked block, so it is centred on a desktop and starts on a phone with everything else.
+
+What this is not about is a page whose body is a form or a document. A title over a sign-up form or a guide is not introducing a set of content — it is the first line of the thing itself, and it keeps the alignment the body has, which for running text is the start. The distinction is whether the block below is content the title names or content the title is part of.
+  Guidance only — cannot be checked automatically.
+- **Anything a pointer has to hit is at least 24px in both directions** — A control sized by its contents is as big as its contents, and a glyph is chosen for how it reads rather than for how easily it is hit. An icon-only button with no padding is a 16px target — smaller than the pad of a finger, and smaller than the tremor of a hand using a mouse.
+
+WCAG 2.2 asks for 24 by 24 CSS pixels at AA. The exceptions are narrower than they look: inline targets inside a sentence are exempt, and so is a small target with 24px of clear space around it — but a clear button sits against the field it empties, and a field is itself a target, so the spacing exemption does not apply to the case that keeps arising.
+
+The target and the mark are separate decisions, and conflating them is what produces both faults. Growing the glyph to 24px makes it shout; leaving the button at 16px makes it hard to hit. So the glyph keeps the size that reads correctly beside its text, and the box around it declares a minimum of its own — which is what size.target.min is for.
+
+Declared rather than emergent. Padding plus contents does clear 24px in several components today, and it is the weaker statement: it is a size nobody wrote down, so it moves when the type scale or the glyph does, and nothing says it was meant to be a target at all.
+  Guidance only — cannot be checked automatically.
+
+## Anti-examples
+
+❌ Row for: The things are read one above the next
+   The same component with the axis turned is the wrong shape: a column neither wraps nor aligns to a baseline, and Stack is the half of this pair that does not pretend to
+   → use `Stack` instead.
+
+❌ Row for: The things must line up down the page as well as across it
+   A wrapped line is ragged by construction — its last line holds whatever is left, and nothing on it lines up with the line above. Tracks are what make both directions agree, and a wrapped row that looks like a grid at one width stops being one at the next
+   → use `Grid` instead.
+
+❌ Row for: The set is longer than the line and has to stay on one line
+   That is the third answer to a line with too much on it, and it carries the snapping and the tab stop that make a rail reachable. Wrapping and scrolling are different readings of the same overflow, and the page has to pick one
+   → use `Scroller` instead.
+
+❌ Row for: The things across are the fields of one record, and the record repeats down the page
+   Cells that must line up with the cells above them are columns, and a line of flex children lines up with nothing. A table also says to a screen reader which value belongs to which field, which no arrangement does
+   → use `Table` instead.
+
+## Example
+
+```tsx
+import { Row, Button } from '@deriv-com/dds-marketing'
+
+<Row gap="sm">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+```
+
+## In use
+
+### What it is for
+
+Things read across with one measure between them. The line owns the space, so no item carries a margin into whatever follows it.
+
+```tsx
+import { Button, Row } from '@deriv-com/dds-marketing'
+
+// The two calls to action under a hero
+<Row gap="sm">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+```
+
+### Every step along the line
+
+The same two buttons at each step. The measure alone decides whether they read as one decision, a pair, or two things that happen to share a line.
+
+```tsx
+import { Button, Row } from '@deriv-com/dds-marketing'
+
+// none — marks that read as one object
+<Row gap="none">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// xs — a glyph and its label
+<Row gap="xs">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// sm — the default — sibling controls
+<Row gap="sm">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// md — peers that are not controls
+<Row gap="md">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// lg — content groups on one line
+<Row gap="lg">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// xl — parts of a card — tightens on a phone
+<Row gap="xl">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// 2xl — one section to the next — tightens
+<Row gap="2xl">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// 3xl — whole movements — tightens
+<Row gap="3xl">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+```
+
+### How items of different heights meet
+
+A price and the period beside it, set at different sizes. This is the decision only a line has to make, and baseline is the one answer no column has any use for.
+
+```tsx
+import { Row, Typography } from '@deriv-com/dds-marketing'
+
+// center — the default — things of different heights
+<Row gap="xs" align="center">
+  <Typography variant="h2" as="span">$29</Typography>
+  <Typography variant="body-sm" as="span">per month</Typography>
+</Row>
+
+// start — items against the top
+<Row gap="xs" align="start">
+  <Typography variant="h2" as="span">$29</Typography>
+  <Typography variant="body-sm" as="span">per month</Typography>
+</Row>
+
+// end — items against the bottom
+<Row gap="xs" align="end">
+  <Typography variant="h2" as="span">$29</Typography>
+  <Typography variant="body-sm" as="span">per month</Typography>
+</Row>
+
+// stretch — items finish level
+<Row gap="xs" align="stretch">
+  <Typography variant="h2" as="span">$29</Typography>
+  <Typography variant="body-sm" as="span">per month</Typography>
+</Row>
+
+// baseline — first lines of text on one line
+<Row gap="xs" align="baseline">
+  <Typography variant="h2" as="span">$29</Typography>
+  <Typography variant="body-sm" as="span">per month</Typography>
+</Row>
+```
+
+### Where the items sit
+
+Only bites where the line is wider than its contents. The last is the shape a section heading with a link opposite takes, and it needs no width given to anything.
+
+```tsx
+import { Button, Row } from '@deriv-com/dds-marketing'
+
+// start — the default — leading edge
+<Row gap="sm" justify="start">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// center — together in the middle
+<Row gap="sm" justify="center">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// end — trailing edge
+<Row gap="sm" justify="end">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+
+// between — first leading, last trailing
+<Row gap="sm" justify="between">
+  <Button variant="primary">Get started</Button>
+  <Button variant="secondary">See pricing</Button>
+</Row>
+```
+
+### When the line runs out of room
+
+Wrap is what a line does when it cannot hold what is on it. Ragged is the honest result — the last line holds whatever is left, and nothing on it sits under anything above.
+
+```tsx
+import { Badge, Row } from '@deriv-com/dds-marketing'
+
+// false — the default, one line whatever happens
+<Row gap="sm" wrap={false}>
+  <Badge label="Forex" />
+  <Badge label="Commodities" />
+  <Badge label="Indices" />
+  <Badge label="Crypto" />
+  <Badge label="Stocks" />
+  <Badge label="ETFs" />
+</Row>
+
+// true — the line breaks rather than squashing
+<Row gap="sm" wrap>
+  <Badge label="Forex" />
+  <Badge label="Commodities" />
+  <Badge label="Indices" />
+  <Badge label="Crypto" />
+  <Badge label="Stocks" />
+  <Badge label="ETFs" />
+</Row>
+```