@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.0

package/src/Atom/Link/Link.tsx

@@ -8,6 +8,7 @@ type LinkProps = ComponentPropsWithoutRef<"a"> &
     more?: boolean
     external?: boolean
     download?: boolean
+    current?: boolean
     className?: string
     allyText?: string
   }
@@ -19,12 +20,16 @@ const Link = ({
   more,
   external,
   download,
+  current,
   className = "mx-link",
   ...props
 }: LinkProps): JSX.Element => {
   const LinkComponent = useLinkComponent()
 
+  const externalAttrs = external ? { target: "_blank", rel: "noopener noreferrer" } : {}
+
   return (
+    // oxlint-disable-next-line react/static-components -- LinkComponent is a stable reference from context, not created during render
     <LinkComponent
       to={to}
       className={classNames(className, {
@@ -32,9 +37,12 @@ const Link = ({
         "mx-link--external": external,
         "mx-link--download": download,
       })}
+      {...(current ? { "aria-current": "page" as const } : {})}
+      {...externalAttrs}
       {...props}
     >
       {children}
+      {external && <span className="sr-only">(opens in a new window)</span>}
       {allyText && <span className="sr-only">{allyText}</span>}
     </LinkComponent>
   )

package/src/Atom/Link/README.md

@@ -0,0 +1,110 @@
+# Link
+
+Base styles for `<a href>` elements — applied globally, no class required. Provides underline decoration, hover offset animation, and modifier classes for external links, "more" links, and download links.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/Link/_links.css";
+```
+
+## Twig
+
+```twig
+{% include '@mixtape/Atom/Link/link.twig' with {
+  title: 'About us',
+  href: '/about',
+} %}
+
+{% include '@mixtape/Atom/Link/link.twig' with {
+  title: 'Visit site',
+  href: 'https://example.com',
+  external: true,
+} %}
+
+{% include '@mixtape/Atom/Link/link.twig' with {
+  title: 'Read more',
+  href: '/article',
+  more: true,
+} %}
+
+{# Current page in a list of links — sets aria-current="page" on the anchor #}
+{% include '@mixtape/Atom/Link/link.twig' with {
+  title: 'Current page',
+  href: '/current',
+  current: true,
+} %}
+```
+
+**link.twig props** (`Link` type from `ids-shape`):
+
+| Prop         | Type        | Required | Description                                                                                        |
+| ------------ | ----------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `title`      | `string`    | Yes      | Visible link text                                                                                  |
+| `href`       | `string`    | Yes      | Link destination                                                                                   |
+| `current`    | `boolean`   | No       | Adds `aria-current="page"` — use for the current page in a navigation list                         |
+| `external`   | `boolean`   | No       | Appends external icon, opens in new tab, adds an SR-only "(opens in a new window)" hint            |
+| `download`   | `boolean`   | No       | Adds download styling (e.g. for file downloads)                                                    |
+| `more`       | `boolean`   | No       | Adds bold "read more" treatment with hover animation                                               |
+| `iconStart`  | `Icon`      | No       | Optional rendered Icon atom shown before the text                                                  |
+| `iconEnd`    | `Icon`      | No       | Optional rendered Icon atom shown after the text                                                   |
+| `iconOnly`   | `boolean`   | No       | Wraps the title in `class="sr-only"` so only the icon is visible — pair with `iconStart`/`iconEnd` |
+| `attributes` | `Attribute` | No       | Optional Drupal-style attributes object — modifier classes are merged on top                       |
+
+## HTML
+
+```html
+<a href="/about">About us</a>
+<a href="/about" aria-current="page">About us</a>
+<a href="https://example.com" class="mx-link--external" target="_blank" rel="noopener noreferrer">
+  External link
+  <span class="sr-only">(opens in a new window)</span>
+</a>
+<a href="/more" class="mx-link--more">Read more</a>
+<a href="/file.pdf" class="mx-link--download">Download</a>
+```
+
+## React
+
+```tsx
+import { Link } from "@pnx-mixtape/mxds/react"
+
+<Link to="/about">About us</Link>
+<Link to="/about" current>About us</Link>
+<Link to="https://example.com" external>Visit site</Link>
+<Link to="/report.pdf" download>Download report</Link>
+<Link to="/more" more>Read more</Link>
+
+<!-- Accessible link with screen-reader–only context -->
+<Link to="/article/slug" more allyText="about accessibility">Read more</Link>
+```
+
+**Props:** `to: string`, `more?: boolean`, `external?: boolean`, `download?: boolean`, `current?: boolean`, `allyText?: string`, `className?: string`
+
+> The `Link` component uses a `useLinkComponent()` hook to swap in a router-aware link (e.g. React Router's `<Link>`) — configure this in your app's React provider setup.
+
+When `external` is set, the component automatically applies `target="_blank"`, `rel="noopener noreferrer"`, and an `sr-only` "(opens in a new window)" announcement. When `current` is set, the component emits `aria-current="page"`.
+
+## Modifiers
+
+| Class               | Prop       | Behaviour                                                                                                                              |
+| ------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `mx-link--external` | `external` | Appends an external-link icon. Auto-sets `target="_blank"`, `rel="noopener noreferrer"`, and an SR-only "(opens in a new window)" hint |
+| `mx-link--more`     | `more`     | Bold weight; icon animates right on hover                                                                                              |
+| `mx-link--download` | `download` | Icon animates downward on hover                                                                                                        |
+
+There is no class for `current` — it is communicated via `aria-current="page"` only. Style the active state via the `[aria-current="page"]` attribute selector.
+
+Links containing an `mx-icon` child automatically get `display: inline-flex` and `align-items: center`.
+
+## Customisation via CSS custom properties
+
+```css
+a {
+  --link-colour: var(--colour-accent); /* overrides link colour locally */
+}
+```
+
+---
+
+→ Used in context: `mockups/ArticleListingPage.stories.ts:4`

package/src/Atom/Link/__snapshots__/Link.stories.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Download 1`] = `
-"  
-<a class="mx-link--download" href="#">
+"    
+<a href="#" class="mx-link--download">
   
 <span class="mx-icon mx-icon--download"></span>
 
@@ -13,8 +13,8 @@ exports[`Download 1`] = `
 `;
 
 exports[`External 1`] = `
-"  
-<a class="mx-link--external" href="#">
+"      
+<a href="#" class="mx-link--external" target="_blank" rel="noopener noreferrer">
   
   <span>Hyperlink</span>
   <span class="sr-only">(opens in a new window)</span>  
@@ -46,7 +46,7 @@ exports[`Link 1`] = `
 
 exports[`More 1`] = `
 "  
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Hyperlink</span>
     

package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`External 1`] = `"<a href="http://example.com" class="mx-link mx-link--external">Link</a>"`;
+exports[`External 1`] = `"<a href="http://example.com" class="mx-link mx-link--external" target="_blank" rel="noopener noreferrer">Link<span class="sr-only">(opens in a new window)</span></a>"`;
 
 exports[`Link 1`] = `"<a href="http://example.com" class="mx-link">Link</a>"`;
 

package/src/Atom/Link/_links.css

@@ -21,7 +21,7 @@
     &::after {
       content: "";
       display: inline-block;
-      mask-image: svg-load("../images/external-link.svg");
+      mask-image: url("../images/external-link.svg");
       mask-repeat: no-repeat;
       mask-size: contain;
       block-size: var(--spacing-s);

package/src/Atom/Link/link.twig

@@ -4,14 +4,26 @@
   external ? baseClass~'--external' : null,
   download ? baseClass~'--download' : null,
 ]|join(" ")|trim() %}
-{% set attributes = (attributes ?? create_attribute()) %}
+{% set attributes = (attributes ?? create_attribute()).setAttribute('href', href) %}
 {% if classes is not empty %}
   {% set attributes = attributes.addClass(classes) %}
 {% endif %}
+{% if current %}
+  {% set attributes = attributes.setAttribute('aria-current', 'page') %}
+{% endif %}
+{% if external %}
+  {% set attributes = attributes.setAttribute('target', '_blank') %}
+  {% set attributes = attributes.setAttribute('rel', 'noopener noreferrer') %}
+{% endif %}
+{% if download %}
+  {% set attributes = attributes.setAttribute('download', '') %}
+{% endif %}
 
-<a{{ attributes }} href="{{ href }}"{% if current %} aria-current="page"{% endif %}>
+{% if listItem %}<li>{% endif %}
+<a{{ attributes }}>
   {{ iconStart }}
   <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
   {% if external %}<span class="sr-only">(opens in a new window)</span>{% endif %}
   {{ iconEnd }}
 </a>
+{% if listItem %}</li>{% endif %}

package/src/Atom/LinkedImage/README.md

@@ -0,0 +1,42 @@
+# LinkedImage
+
+An image (or inline SVG) wrapped in a link. Used for logos, image cards, or any clickable image. Twig-only — use a plain `<a><img></a>` in React.
+
+## CSS Import
+
+No dedicated CSS. Relies on `Image` and `Link` base styles.
+
+## Twig
+
+`image` accepts either an `Image`-shaped object (with a `src`, rendered internally via `image.twig`) or a pre-rendered HTML string.
+
+```twig
+{% include '@mixtape/Atom/LinkedImage/linked-image.twig' with {
+  href: '/home',
+  title: 'Go to homepage',
+  image: {
+    src: '/logo.svg',
+    alt: 'Site logo'
+  }
+} %}
+```
+
+## HTML output
+
+```html
+<a href="/home">
+  <picture>
+    <img src="/logo.svg" alt="Site logo" />
+  </picture>
+  <span class="sr-only">Go to homepage</span>
+</a>
+```
+
+## React equivalent
+
+```tsx
+import { Link, Media } from "@pnx-mixtape/mxds/react"
+;<Link to="/home">
+  <Media src="/logo.svg" alt="Site logo" />
+</Link>
+```

package/src/Atom/LinkedImage/linked-image.twig

@@ -1,5 +1,9 @@
 {% set attributes = attributes ?? create_attribute() %}
 <a href="{{ href }}" {{ attributes }}>
-  {{ image }}
+  {% if image.src is defined %}
+    {% include '@mixtape/Atom/Image/image.twig' with image only %}
+  {% else %}
+    {{ image }}
+  {% endif %}
   <span class="sr-only">{{ title }}</span>
 </a>

package/src/Atom/Media/Media.figma.ts

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=95-20
+// source=src/Atom/Media/Media.tsx
+// component=Media
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const align = instance.getEnum("Align", {
+  None: null,
+  Left: "MediaAlignmentTypes.LEFT",
+  Right: "MediaAlignmentTypes.RIGHT",
+  Center: "MediaAlignmentTypes.CENTER",
+})
+
+const captionHandle = instance.findText("Caption")
+const caption = captionHandle.type === "TEXT" ? captionHandle.textContent : ""
+
+const alignProp = align ? ` align={${align}}` : ""
+const captionProp = caption ? ` caption="${caption}"` : ""
+
+export default {
+  example: figma.code`<Media src="..." alt=""${alignProp}${captionProp} />`,
+  imports: [
+    'import { Media } from "@pnx-mixtape/mxds/react"',
+    'import { MediaAlignmentTypes } from "@pnx-mixtape/ids-shape"',
+  ],
+  id: "media",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Atom/Media/Media.stories.ts

@@ -59,8 +59,19 @@ type Story = StoryObj<MediaType>
 
 export const Media: Story = {}
 
+export const Attribution: Story = {
+  args: {
+    attribution: "Jane Doe",
+  },
+}
+
+export const NoFigure: Story = {
+  args: {
+    caption: "",
+  },
+}
+
 export const RemoteVideo: Story = {
-  tags: ["autodocs"],
   args: {
     type: "video",
     caption: "A remote video",

package/src/Atom/Media/Media.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Media"
-import { Alignment } from "../../enums"
+import { MediaAlignmentTypes } from "@pnx-mixtape/ids-shape"
 import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
@@ -12,7 +12,7 @@ const meta: Meta<typeof Component> = {
     alt: "Example image",
   },
   argTypes: {
-    align: { options: Object.values(Alignment), control: "radio" },
+    align: { options: Object.values(MediaAlignmentTypes), control: "radio" },
   },
 }
 
@@ -21,6 +21,6 @@ export const Image: StoryObj<typeof Component> = {}
 export const Caption: StoryObj<typeof Component> = {
   args: {
     caption: "I am an image caption",
-    align: Alignment.LEFT,
+    align: MediaAlignmentTypes.LEFT,
   },
 }

package/src/Atom/Media/Media.tsx

@@ -28,6 +28,7 @@ const Media = ({ align, caption, className, ...props }: ImageProps): JSX.Element
       })}
       condition={!!align || !!caption || !!className}
     >
+      {/* oxlint-disable-next-line react/static-components -- ImageComponent is a stable reference from context, not created during render */}
       <ImageComponent {...props} />
       {caption && <figcaption>{caption}</figcaption>}
     </Figure>

package/src/Atom/Media/README.md

@@ -0,0 +1,95 @@
+# Media
+
+A responsive image wrapper that optionally floats left or right within text content, with RTL support. Wraps images in a `<figure>` when alignment or caption is provided.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/Media/_media.css";
+```
+
+## Twig
+
+```twig
+{# Floated image with caption #}
+{% include '@mixtape/Atom/Media/media.twig' with {
+  type: 'image',
+  align: 'left',
+  item: include('@mixtape/Atom/Image/image.twig', {
+    src: '/photo.jpg',
+    alt: 'Description',
+  }),
+  caption: 'A short caption',
+  attribution: 'Photo: Jane Smith',
+} %}
+
+{# Video embed wrapped in mx-media--video for full width #}
+{% include '@mixtape/Atom/Media/media.twig' with {
+  type: 'video',
+  item: include('@mixtape/Atom/Video/video.twig', {
+    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    title: 'Video title',
+  }),
+} %}
+```
+
+**media.twig props** (`Media` type from `ids-shape`):
+
+| Prop          | Type                  | Required | Description                                                                          |
+| ------------- | --------------------- | -------- | ------------------------------------------------------------------------------------ |
+| `item`        | `Image \| Video`      | Yes      | Rendered Image or Video atom string placed inside the `<figure>`                     |
+| `type`        | `'image' \| 'video'`  | No       | Adds `mx-media--{type}` (e.g. `mx-media--video` for full-width embeds)               |
+| `align`       | `MediaAlignmentTypes` | No       | Adds `mx-media--{align}` (`left`, `right`, `center`)                                 |
+| `caption`     | `string`              | No       | Caption text rendered inside `<figcaption>`                                          |
+| `attribution` | `string`              | No       | Attribution text rendered alongside the caption (separated by `-` when both are set) |
+| `attributes`  | `Attribute`           | No       | Optional Drupal-style attributes object — modifier classes are merged on top         |
+
+The `<figcaption>` is only output when `caption` or `attribution` is set; if both are present they render in the same caption separated by a hyphen.
+
+## HTML
+
+```html
+<!-- Floated left from small breakpoint up -->
+<figure class="mx-media--left">
+  <img src="/photo.jpg" alt="Description" />
+  <figcaption>Caption text</figcaption>
+</figure>
+```
+
+## React
+
+```tsx
+import { Media } from "@pnx-mixtape/mxds/react"
+import { MediaAlignmentTypes } from "@pnx-mixtape/ids-shape"
+
+// Plain responsive image
+<Media src="/photo.jpg" alt="Description" width={800} height={600} />
+
+// Floated with caption
+<Media
+  src="/photo.jpg"
+  alt="Description"
+  align={MediaAlignmentTypes.LEFT}
+  caption="Image caption text"
+/>
+```
+
+**Props:** `src`, `alt`, `align?: MediaAlignmentTypes`, `caption?: string`, `className?: string` + all native `<img>` attributes
+
+> The `Media` component uses a `useImageComponent()` hook — configure this in your app's React provider to swap in a framework image component (e.g. Next.js `<Image>`).
+
+## Alignment modifiers
+
+Float applies from the `--small-up` breakpoint (540px+). Below that, the image takes full width.
+
+| Class              | `MediaAlignmentTypes` enum   | Effect                   |
+| ------------------ | ---------------------------- | ------------------------ |
+| `mx-media--left`   | `MediaAlignmentTypes.LEFT`   | Float left, margin right |
+| `mx-media--right`  | `MediaAlignmentTypes.RIGHT`  | Float right, margin left |
+| `mx-media--center` | `MediaAlignmentTypes.CENTER` | Centred, no float        |
+
+RTL is handled automatically — `mx-media--left` flips to right in `[dir="rtl"]`.
+
+## Video wrapper
+
+`.mx-media--video` sets `inline-size: 100%`. Use alongside the Video atom for full-width video embeds.

package/src/Atom/Media/__snapshots__/Media.stories.ts.snap

@@ -1,31 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Attribution 1`] = `
+"
+
+<figure class="mx-media mx-media--image">  <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Some blurry bubble image">
+</picture>
+
+    <figcaption>A picsum image
+     -     Jane Doe  </figcaption>
+  </figure>"
+`;
+
 exports[`Media 1`] = `
 "
-<figure class="mx-media mx-media--image">
-  <picture>
+
+<figure class="mx-media mx-media--image">  <picture>
     <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Some blurry bubble image">
 </picture>
 
-    <figcaption>
-    A picsum image
-        
-  </figcaption>
-  </figure>
+    <figcaption>A picsum image  </figcaption>
+  </figure>"
+`;
+
+exports[`No Figure 1`] = `
 "
+
+  <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Some blurry bubble image">
+</picture>
+
+  "
 `;
 
 exports[`Remote Video 1`] = `
 "
-<figure class="mx-media mx-media--video">
-  <figure class="mx-video">
-  <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI" title="Something from youtube" allowfullscreen=""></iframe>
+
+<figure class="mx-media mx-media--video">  <figure class="mx-video" data-src="https://www.youtube.com/embed/NpEaa2P7qZI" data-title="Something from youtube">
+  <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI" title="Something from youtube" allow="fullscreen; picture-in-picture; encrypted-media; clipboard-write" allowfullscreen=""></iframe>
 </figure>
 
-    <figcaption>
-    A remote video
-        
-  </figcaption>
-  </figure>
-"
+    <figcaption>A remote video  </figcaption>
+  </figure>"
 `;

package/src/Atom/Media/media.twig

@@ -5,14 +5,17 @@
   align ? baseClass~'--'~align : null,
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{# Only wrap in <figure> when there's a reason to (modifier, caption, or attribution). #}
+{% set wrap = align or caption or attribution is not empty or type == 'video' %}
 
-<figure{{ attributes }}>
+{% if wrap %}<figure{{ attributes }}>{% endif %}
   {{ item }}
   {% if caption is not empty or attribution is not empty %}
-  <figcaption>
+  <figcaption>{% apply spaceless %}
     {{ caption }}
     {% if caption is not empty and attribution is not empty %} - {% endif %}
     {{ attribution }}
+    {% endapply %}
   </figcaption>
   {% endif %}
-</figure>
+{% if wrap %}</figure>{% endif %}

package/src/Atom/Spacing/README.md

@@ -0,0 +1,51 @@
+# Spacing
+
+Utility padding and margin classes for every spacing scale value. All classes use `!important` to override component spacing when needed.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/Spacing/_spacing.css";
+```
+
+## Padding classes
+
+Pattern: `mx-spacing--{side}-{size}` or `mx-spacing--{size}` for all sides.
+
+Available sizes: `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, `xxxxl`, `ul`, `uul`, `uuul`
+
+| Class pattern               | Effect                 |
+| --------------------------- | ---------------------- |
+| `mx-spacing--{size}`        | padding all sides      |
+| `mx-spacing--top-{size}`    | `padding-block-start`  |
+| `mx-spacing--bottom-{size}` | `padding-block-end`    |
+| `mx-spacing--left-{size}`   | `padding-inline-start` |
+| `mx-spacing--right-{size}`  | `padding-inline-end`   |
+| `mx-spacing--reset`         | remove all padding     |
+| `mx-spacing--top-reset`     | remove top padding     |
+| `mx-spacing--bottom-reset`  | remove bottom padding  |
+| `mx-spacing--left-reset`    | remove left padding    |
+| `mx-spacing--right-reset`   | remove right padding   |
+
+## Margin classes
+
+Pattern: `mx-margin--{side}-{size}`
+
+| Class pattern              | Effect                |
+| -------------------------- | --------------------- |
+| `mx-margin--{size}`        | margin all sides      |
+| `mx-margin--top-{size}`    | `margin-block-start`  |
+| `mx-margin--bottom-{size}` | `margin-block-end`    |
+| `mx-margin--left-{size}`   | `margin-inline-start` |
+| `mx-margin--right-{size}`  | `margin-inline-end`   |
+| `mx-margin--reset`         | remove all margin     |
+| `mx-margin--top-reset`     | remove top margin     |
+| `mx-margin--bottom-reset`  | remove bottom margin  |
+
+## Example
+
+```html
+<div class="mx-spacing--l mx-spacing--top-reset">Padded on all sides except top</div>
+```
+
+> All spacing values map to the `--spacing-*` custom properties defined in `src/constants.css`. See the [design token reference](../../../../CLAUDE_DESIGN.md#spacing) for the full scale.

package/src/Atom/Spacing/Spacing.stories.ts

@@ -1,37 +1,28 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./spacing.twig"
 
-const modifierOptions: string[] = [
+const sizes: string[] = [
+  "xxs",
   "xs",
   "s",
   "m",
   "l",
   "xl",
-  "top-xs",
-  "top-s",
-  "top-m",
-  "top-l",
-  "top-xl",
-  "bottom-xs",
-  "bottom-s",
-  "bottom-m",
-  "bottom-l",
-  "bottom-xl",
-  "left-xs",
-  "left-s",
-  "left-m",
-  "left-l",
-  "left-xl",
-  "right-xs",
-  "right-s",
-  "right-m",
-  "right-l",
-  "right-xl",
+  "xxl",
+  "xxxl",
+  "xxxxl",
+  "ul",
+  "uul",
+  "uuul",
+]
+
+const sides: string[] = ["top", "bottom", "left", "right"]
+
+const modifierOptions: string[] = [
+  ...sizes,
+  ...sides.flatMap(side => sizes.map(size => `${side}-${size}`)),
   "reset",
-  "reset-top",
-  "reset-bottom",
-  "reset-left",
-  "reset-right",
+  ...sides.map(side => `${side}-reset`),
 ]
 
 type SpacingType = {

package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Spacing 1`] = `
-"<div class="mx-spacing--xs">
-  <div>mx-spacing--xs</div>
+"<div class="mx-spacing--xxs">
+  <div>mx-spacing--xxs</div>
 </div>
 "
 `;