From 038c63942b6d78cdd63a925fe30de3918e337dee Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Mon, 13 Jul 2026 20:53:55 -0300
Subject: [PATCH 1/3] [NO-ISSUE] feat(webkit): add Brand component
 consolidating the Azion logo lockups

---
 .specs/brand.md                               | 105 ++++++++++++++
 .../components/content/brand/Brand.stories.js | 118 ++++++++++++++++
 packages/webkit/package.json                  |   1 +
 .../components/content/brand/brand.figma.ts   |  24 ++++
 .../components/content/brand/brand.test.ts    | 128 ++++++++++++++++++
 .../src/components/content/brand/brand.vue    |  56 ++++++++
 6 files changed, 432 insertions(+)
 create mode 100644 .specs/brand.md
 create mode 100644 apps/storybook/src/stories/components/content/brand/Brand.stories.js
 create mode 100644 packages/webkit/src/components/content/brand/brand.figma.ts
 create mode 100644 packages/webkit/src/components/content/brand/brand.test.ts
 create mode 100644 packages/webkit/src/components/content/brand/brand.vue

diff --git a/.specs/brand.md b/.specs/brand.md
new file mode 100644
index 000000000..228cba67d
--- /dev/null
+++ b/.specs/brand.md
@@ -0,0 +1,105 @@
+---
+name: brand
+category: content
+structure: monolithic
+status: implemented
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=587-3946
+  node_id: 587:3946
+checksum: 62d98081182fc1883def54d3bfaea330a30141becc0ecc3e31cdca35e26e7f8d
+created: 2026-07-13
+last_updated: 2026-07-13
+---
+
+# Brand — Component Spec
+
+## Purpose
+
+The Azion brand logo, rendered as an inline SVG lockup. A single `kind` prop selects the lockup: `default` (the AZION wordmark) for standard surfaces, `reduced` (the "A" glyph) for compact headers and tight spaces, and `extended` (the AZION wordmark with the "move to the edge technologies®" tagline) for marketing-oriented layouts. It consolidates the loose `@aziontech/webkit/svg/azion/*` assets — which remain individually importable — behind one component.
+
+## Usage
+
+```vue
+<script setup>
+import Brand from '@aziontech/webkit/brand'
+</script>
+
+<template>
+  <Brand kind="default" />
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `kind` | `'default' \| 'reduced' \| 'extended'` | `'default'` | no | Brand lockup to render: `default` (AZION wordmark), `reduced` (the "A" glyph for tight spaces), `extended` (wordmark with the "move to the edge technologies®" tagline). |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | no | Size token; sets the lockup height (16 / 24 / 32 px) while width scales automatically so each `kind` keeps its own aspect ratio. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| _none_ | — | — |
+
+## States
+
+- Visual states: `default`
+- `data-kind` mirrors the `kind` prop
+- `data-size` mirrors the `size` prop
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| brand mark (SVG fill, asset-owned) | `var(--primary)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| brand orange (`#F3652B`) | hardcoded HEX inside the `svg/azion/*` assets | `TODO: tokenizar the brand assets to `var(--primary)`` |
+
+## Accessibility (WCAG 2.1 AA)
+
+- The root carries `role="img"` and a default `aria-label` (`Azion`) so the logo has an accessible name; consumers may override the label via a passed `aria-label`.
+- Non-interactive: the logo is not focusable and emits no events; the inner SVG is presentational.
+- Contrast ≥3:1 for the brand mark against its background (large graphic).
+- `motion-reduce` not applicable — the component is static.
+
+## Stories (Storybook)
+
+- Default
+- Types — composite story rendering every `kind` value (`default`, `reduced`, `extended`) side-by-side.
+- Sizes — composite story rendering every `size` value (`small`, `medium`, `large`) side-by-side.
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/src/stories/components/content/brand/Brand.stories.js b/apps/storybook/src/stories/components/content/brand/Brand.stories.js
new file mode 100644
index 000000000..f3666edc6
--- /dev/null
+++ b/apps/storybook/src/stories/components/content/brand/Brand.stories.js
@@ -0,0 +1,118 @@
+import Brand from '@aziontech/webkit/brand'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import Brand from '@aziontech/webkit/brand'"
+
+/** @type {import('@storybook/vue3').Meta<typeof Brand>} */
+const meta = {
+  title: 'Components/Content/Brand',
+  component: Brand,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'focus-order-semantics', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'The Azion brand logo, rendered as an inline SVG lockup. A single `kind` prop selects the lockup: `default` (the AZION wordmark) for standard surfaces, `reduced` (the "A" glyph) for compact headers and tight spaces, and `extended` (the AZION wordmark with the "move to the edge technologies®" tagline) for marketing-oriented layouts. It consolidates the loose `@aziontech/webkit/svg/azion/*` assets — which remain individually importable — behind one component.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: ['default', 'reduced', 'extended'],
+      description: 'Brand lockup to render.',
+      table: {
+        category: 'props',
+        type: { summary: "'default' | 'reduced' | 'extended'" },
+        defaultValue: { summary: "'default'" }
+      }
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size token; sets the lockup height while width scales to preserve each kind’s aspect ratio.',
+      table: {
+        category: 'props',
+        type: { summary: "'small' | 'medium' | 'large'" },
+        defaultValue: { summary: "'medium'" }
+      }
+    }
+  },
+  args: { kind: 'default', size: 'medium' }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { Brand },
+  setup: () => ({ props: args }),
+  template: '<Brand v-bind="props" />'
+})
+
+const DEFAULT_MARKUP = '<Brand kind="default" />'
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Brand>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: { story: 'The default AZION wordmark lockup.' },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const TYPES_TEMPLATE = `<div class="flex flex-wrap items-center gap-8">
+  <Brand kind="default" />
+  <Brand kind="reduced" />
+  <Brand kind="extended" />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Brand>} */
+export const Types = {
+  render: () => ({ components: { Brand }, template: TYPES_TEMPLATE }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'All brand lockups side by side: default (AZION wordmark), reduced (the "A" glyph), and extended (wordmark with the "move to the edge technologies®" tagline).'
+      },
+      source: { code: toSfc(IMPORT, TYPES_TEMPLATE) }
+    }
+  }
+}
+
+const SIZES_TEMPLATE = `<div class="flex flex-wrap items-center gap-8">
+  <Brand kind="default" size="small" />
+  <Brand kind="default" size="medium" />
+  <Brand kind="default" size="large" />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Brand>} */
+export const Sizes = {
+  render: () => ({ components: { Brand }, template: SIZES_TEMPLATE }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story: 'The lockup at each size token — small (16px), medium (24px), and large (32px) tall — with width scaling to preserve the aspect ratio.'
+      },
+      source: { code: toSfc(IMPORT, SIZES_TEMPLATE) }
+    }
+  }
+}
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 27fe07dd1..57dc39148 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -90,6 +90,7 @@
     "./tag": "./src/components/tag/tag.vue",
     "./avatar": "./src/components/avatar/avatar.vue",
     "./badge": "./src/components/content/badge/badge.vue",
+    "./brand": "./src/components/content/brand/brand.vue",
     "./accordion": "./src/components/content/accordion/index.ts",
     "./accordion-root": "./src/components/content/accordion/accordion.vue",
     "./accordion-item": "./src/components/content/accordion/accordion-item/accordion-item.vue",
diff --git a/packages/webkit/src/components/content/brand/brand.figma.ts b/packages/webkit/src/components/content/brand/brand.figma.ts
new file mode 100644
index 000000000..6ae0cc1e1
--- /dev/null
+++ b/packages/webkit/src/components/content/brand/brand.figma.ts
@@ -0,0 +1,24 @@
+import { figma } from '@figma/code-connect'
+
+import Brand from './brand.vue'
+
+// The Figma "Brand" component exposes a `type` variant (Default | Min | Move to the Edge | Full).
+// We surface the three lockups this component ships: Default → default, Min → reduced, and
+// Full (the tagline lockup) → extended. The "Move to the Edge" Figma variant is not exposed.
+// `size` has no Figma counterpart — it is a code-only prop, so it is not mapped here.
+figma.connect(
+  Brand,
+  'https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=587-3946',
+  {
+    props: {
+      kind: figma.enum('type', {
+        Default: 'default',
+        Min: 'reduced',
+        Full: 'extended'
+      })
+    },
+    example: (props) => /* html */ `
+      <Brand kind="${props.kind}" size="medium" />
+    `
+  }
+)
diff --git a/packages/webkit/src/components/content/brand/brand.test.ts b/packages/webkit/src/components/content/brand/brand.test.ts
new file mode 100644
index 000000000..3d403c55d
--- /dev/null
+++ b/packages/webkit/src/components/content/brand/brand.test.ts
@@ -0,0 +1,128 @@
+import { composeStories } from '@storybook/vue3'
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import * as stories from '../../../../../../apps/storybook/src/stories/components/content/brand/Brand.stories'
+import { expectNoA11yViolations } from '../../../test/axe'
+import Brand from './brand.vue'
+
+const { Default, Types, Sizes } = composeStories(stories)
+
+// Each kind maps to a distinct SVG lockup, identifiable by its viewBox.
+const KIND_VIEWBOX = {
+  default: '0 0 90 18',
+  reduced: '0 0 21 18',
+  extended: '0 0 90 34'
+} as const
+
+const KINDS = ['default', 'reduced', 'extended'] as const
+const SIZES = ['small', 'medium', 'large'] as const
+
+describe('Brand', () => {
+  // --- render + testid ----------------------------------------------------
+  it('renders with the default testid and role="img"', () => {
+    const { getByTestId } = render(Brand)
+
+    const root = getByTestId('content-brand')
+    expect(root).toBeInTheDocument()
+    expect(root).toHaveAttribute('role', 'img')
+  })
+
+  it('honors a consumer data-testid on the root', () => {
+    const { getByTestId } = render(Brand, {
+      attrs: { 'data-testid': 'my-brand' }
+    })
+
+    expect(getByTestId('my-brand')).toBeInTheDocument()
+  })
+
+  // --- kind -> rendered lockup + data-kind --------------------------------
+  it.each(KINDS)('kind=%s sets data-kind and renders the matching lockup', (kind) => {
+    const { getByTestId } = render(Brand, { props: { kind } })
+
+    const root = getByTestId('content-brand')
+    expect(root).toHaveAttribute('data-kind', kind)
+
+    const svg = root.querySelector('svg')
+    expect(svg).not.toBeNull()
+    expect(svg).toHaveAttribute('viewBox', KIND_VIEWBOX[kind])
+  })
+
+  it('defaults to the default lockup when kind is omitted', () => {
+    const { getByTestId } = render(Brand)
+
+    const root = getByTestId('content-brand')
+    expect(root).toHaveAttribute('data-kind', 'default')
+    expect(root.querySelector('svg')).toHaveAttribute('viewBox', KIND_VIEWBOX.default)
+  })
+
+  // --- size -> data-size + preserved aspect ratio -------------------------
+  it.each(SIZES)('size=%s sets data-size on the root', (size) => {
+    const { getByTestId } = render(Brand, { props: { size } })
+    expect(getByTestId('content-brand')).toHaveAttribute('data-size', size)
+  })
+
+  it('defaults to size "medium" when size is omitted', () => {
+    expect(render(Brand).getByTestId('content-brand')).toHaveAttribute('data-size', 'medium')
+  })
+
+  // Sizing is applied via width:auto on the SVG, so each lockup keeps its own viewBox
+  // aspect ratio at any size (the height utility only scales it; width follows the viewBox).
+  it.each(KINDS)('keeps the %s lockup viewBox (aspect ratio) intact across sizes', (kind) => {
+    for (const size of SIZES) {
+      const { container } = render(Brand, { props: { kind, size } })
+      expect(container.querySelector('svg')).toHaveAttribute('viewBox', KIND_VIEWBOX[kind])
+    }
+  })
+
+  // --- accessibility ------------------------------------------------------
+  it('labels the logo "Azion" by default and marks the inner SVG presentational', () => {
+    const { getByTestId } = render(Brand)
+
+    const root = getByTestId('content-brand')
+    expect(root).toHaveAttribute('aria-label', 'Azion')
+    expect(root.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('lets a consumer override the accessible name via aria-label', () => {
+    const { getByTestId } = render(Brand, {
+      attrs: { 'aria-label': 'Azion home' }
+    })
+
+    expect(getByTestId('content-brand')).toHaveAttribute('aria-label', 'Azion home')
+  })
+
+  it.each(KINDS)('has no accessibility violations for kind=%s', async (kind) => {
+    const { container } = render(Brand, { props: { kind } })
+    await expectNoA11yViolations(container)
+  })
+
+  // --- composed story fixtures --------------------------------------------
+  it('renders the composed Default story fixture (default lockup)', () => {
+    const { getByTestId } = render(Default)
+
+    const root = getByTestId('content-brand')
+    expect(root).toHaveAttribute('data-kind', 'default')
+    expect(root.querySelector('svg')).toHaveAttribute('viewBox', KIND_VIEWBOX.default)
+  })
+
+  it('renders all three lockups in the composed Types story fixture', () => {
+    const { getAllByTestId } = render(Types)
+
+    const roots = getAllByTestId('content-brand')
+    expect(roots).toHaveLength(3)
+    expect(roots.map((r) => r.getAttribute('data-kind'))).toEqual([
+      'default',
+      'reduced',
+      'extended'
+    ])
+  })
+
+  it('renders all three sizes in the composed Sizes story fixture', () => {
+    const { getAllByTestId } = render(Sizes)
+
+    const roots = getAllByTestId('content-brand')
+    expect(roots).toHaveLength(3)
+    expect(roots.map((r) => r.getAttribute('data-size'))).toEqual(['small', 'medium', 'large'])
+  })
+})
diff --git a/packages/webkit/src/components/content/brand/brand.vue b/packages/webkit/src/components/content/brand/brand.vue
new file mode 100644
index 000000000..a7d201627
--- /dev/null
+++ b/packages/webkit/src/components/content/brand/brand.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  import BrandDefault from '../../../svg/azion/default/default.vue'
+  import BrandReduced from '../../../svg/azion/min/min.vue'
+  import BrandExtended from '../../../svg/azion/technologies/technologies.vue'
+
+  export type BrandKind = 'default' | 'reduced' | 'extended'
+
+  export type BrandSize = 'small' | 'medium' | 'large'
+
+  defineOptions({
+    name: 'Brand',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Brand lockup to render: `default` (AZION wordmark), `reduced` (the "A" glyph for tight spaces), `extended` (wordmark with the "move to the edge technologies" tagline). */
+    kind?: BrandKind
+    /** Size token; sets the lockup height (16 / 24 / 32 px) while width scales automatically so each `kind` keeps its own aspect ratio. */
+    size?: BrandSize
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    kind: 'default',
+    size: 'medium'
+  })
+
+  const attrs = useAttrs()
+
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'content-brand')
+
+  const asset = computed(() => {
+    if (props.kind === 'reduced') return BrandReduced
+    if (props.kind === 'extended') return BrandExtended
+    return BrandDefault
+  })
+</script>
+
+<template>
+  <span
+    role="img"
+    aria-label="Azion"
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-kind="kind"
+    :data-size="size"
+    :class="attrs.class"
+    class="inline-flex items-center [&>svg]:w-auto [&[data-size=small]>svg]:h-4 [&[data-size=medium]>svg]:h-6 [&[data-size=large]>svg]:h-8"
+  >
+    <component
+      :is="asset"
+      aria-hidden="true"
+    />
+  </span>
+</template>

From 306625b1edba127a72b78eb28d23269796497514 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Thu, 16 Jul 2026 15:22:31 -0300
Subject: [PATCH 2/3] [NO-ISSUE] chore(webkit): regenerate catalog.json with
 the brand entry

---
 packages/webkit/catalog.json | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 3a92690c5..92398a942 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -2226,6 +2226,32 @@
         "Drive color from `kind`, never a hardcoded color or a raw palette class."
       ]
     },
+    "brand": {
+      "import": "@aziontech/webkit/brand",
+      "target": "./src/components/content/brand/brand.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/brand",
+      "category": "content",
+      "structure": "monolithic",
+      "status": "implemented",
+      "props": [
+        {
+          "name": "kind",
+          "type": "'default' | 'reduced' | 'extended'",
+          "default": "'default'",
+          "required": "no",
+          "doc": "Brand lockup to render: `default` (AZION wordmark), `reduced` (the \"A\" glyph for tight spaces), `extended` (wordmark with the \"move to the edge technologies®\" tagline)."
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": "'medium'",
+          "required": "no",
+          "doc": "Size token; sets the lockup height (16 / 24 / 32 px) while width scales automatically so each `kind` keeps its own aspect ratio."
+        }
+      ],
+      "purpose": "The Azion brand logo, rendered as an inline SVG lockup. A single `kind` prop selects the lockup: `default` (the AZION wordmark) for standard surfaces, `reduced` (the \"A\" glyph) for compact headers and tight spaces, and `extended` (the AZION wordmark with the \"move to the edge technologies®\" tagline) for marketing-oriented layouts. It consolidates the loose `@aziontech/webkit/svg/azion/*` assets — which remain individually importable — behind one component."
+    },
     "accordion": {
       "import": "@aziontech/webkit/accordion",
       "target": "./src/components/content/accordion/index.ts",

From c589cd2c125f5b9612afbebee49ca783a401c3ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robson=20J=C3=BAnior?= <robson.ga.junior@gmail.com>
Date: Thu, 16 Jul 2026 16:33:39 -0300
Subject: [PATCH 3/3] fix: components-content-brand baseline

---
 .../linux/components-content-brand--default.png  | Bin 0 -> 2355 bytes
 .../linux/components-content-brand--sizes.png    | Bin 0 -> 6235 bytes
 .../linux/components-content-brand--types.png    | Bin 0 -> 4275 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--default.png
 create mode 100644 apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--sizes.png
 create mode 100644 apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--types.png

diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--default.png
new file mode 100644
index 0000000000000000000000000000000000000000..599130d17ea4020eecc1ce7d06c57d17743f568e
GIT binary patch
literal 2355
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
UUIm1@@D3V)*>x*qtuZe0KLUz^ZvX%Q

literal 0
HcmV?d00001

diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--sizes.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--sizes.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb78e5a7adbab7f8ad322b96307bf32b4c921fc8
GIT binary patch
literal 6235
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

literal 0
HcmV?d00001

diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--types.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--types.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9a6fb371975ff0ac8244fbfb195f3d7e00f2e9f
GIT binary patch
literal 4275
zcmbt&Rag^%*FMdN5fb7U^^+Wu18I?*h_o`LanceaCLPitpbQ2Aqok2W2|<(|NR4iW
z6OitP&)@&@fAd{@H}7+v^PK0r@5Q+|?;C5V4+GMIXh}#&fI5#fjY&vIW&YLj0J490
zX_`V!Lc&C%qp9}PH)}JC#@pl>sK@%Fw>4hOGS_azI9F`cm@CamEw{Fpgc=58_V&np
zf9I=h;$R6>d<CU_C#mGFqIl?qnikBdxG+*(D_3Jn{kd6gfbK^@C%m9u-5_S}nD|FP
zBIt!9&)^jo!z$5L=V1Qks_o+Yi54q6yEZd`;+py4KeSTs)ZyJ_{f|CbSTPgw7C<>N
zCgtIhh-MZAnE@YxpUIb&StzXCBu1Ww0{g#>#>IRD{1Kws5l3rM(%80CXm|zKF$R^q
z*7DT101!E6IiE_5pX6<IGTC-S$(#>=X2U?5qlZye7Q@$UrRbsGfzyJV(s^4-Rf)dq
zGZa&fe<v3WM+>FQ<QINN`XSBjHS=6ECXx@HQFjH*bt2UP47m$d=*E|xr?A!WBrv?4
zd%C+6Vbwsa-fTf_H6K=I$Mc&N_{}(ou|M8DzdW_pkM|B)4pFSn6t$~HZWqbab=6ih
zmYcYEKKOi=b|`7o9!D7DN%hCE2=aO@D2fr{3;Trg+eK2ZSm=cNpCBcPP$16MUr84n
z!Si!55!tJB9;H_=9kw|#6yoDOJR5&Ym=2D#@0wA45{|1A)(5x|<oP<IDFV&W^tcGu
z(ya~)mVS{o*;Yl|3`a$n626$)&UkL7Tf`iyOACylVegKLd0=r5`M|*}0)VFBR8eFh
z@~wPSPzwm@k8e?ef)-=tI;ROs?Iff`Xfb%(=_W0pUi(rBmw2QB^B83}!<<;8fv$VN
zdyAasjdRrQz+&___SJMGI7GUDT(#wah{%(OkaW~LWY7!DL7%yUmWHDZ;-UN7u}PIz
zQCrhe6FWSmAZf|Rw}vJm<wV79BEe=kfYOu;Yy6@s0}9%EL0FQz-MJW2e_J(U+iQ<I
z>+XuspvU{AD>5Bh=>xctevN~|PBJ8VRz?tW^6GH=#Whp$nAE|L=OxP*VvGxG2hmbv
z+g)14^HYe=nSviBMm`ZL_bIBaL74f5%xL`+$9<kH+u$-e_RhO@Uw|Mt@$X~Gj+z%n
zN@}+U6YkIuCO>~n8)0#z{h%FXSwh$Q)43IBa@U2e!##&H_k?#H3*S&ka^FlykvCC~
z%#qN0`#7nF=kcZKlSf>jmHs109B1+^_>4107J2r^fb!o7_%&Cj90Uy)*Q4(hn-iw}
z3bGP9B_8;3qr-mxd;NCZ6bcT(!fx?#E#mYX^K*E;tzV+@-AH9We$hW83NNRIIR=t(
zmAdq;xf3k|#!_me0qnY!dex6NA}qeHCs!D_Ye%=IKdQI092?KK;=C4iurr=`ugj!3
z<93l^w24!aO*Zmc(ZFWkX4E50Ihw1(T16wfHL?uPL%wO=x=kRo=4Sq|HtqA?O(L|{
zqK7XWw4kUqpQ4*m5G4r8s~$OaDBMD3#Pv3vnTz%9Q3H=m*~y!P_lry}_@5p~LI!m9
z*`Fi;Yw$OICqHEIO#6%<p-WP;)o(cagAnaD5-hjy0=*l52$))%0Pz7IWN_*#Xh+yP
zM*x~r>j5r^safUfRHMKdGU}p1C-akcgy%i`u)L>dh^p{QXSVY<oa1ce#(DMExrVjg
zAwts84{Ok0Tes}wA|{?NT)Z)=?T;~@fc(s4Z1u5c^$zpBgOD-jK3BV*1PN3=v0*<<
zBfH@Kf0rx$LMp<WnZ=krK2ugedUrlYNWId&iP#%TZB&(BeLf7t+)ZpFIX38vWBv5R
zaAcoQsog*ti}O3AtMpvQv3?qGaAu{qGcF*GQ#Ozm&fQD9;5F=5gB6fduD_p{oe+)A
zi)*_|9{)zE)@Gd?qaS>l-jKLbAkWhudj=2Vf7E*}?h9FYn_SzTzAVv%Z2bMSqsYh3
zGRFe!{eY*+N$t_@7G46$7q&9f-2~~tBf?i6(pBm6WwcWlShMp-t0496&8n<+?#+}P
z1%QJnHgon<OTAVqm@g~!>Wb=hE1_ZfA8JO?R2Iabev|fRQB>7?ONDZSCE4yVWH4*_
zA=C5b3avbLjc2W6$3l2^@((<n+hGN!vV*a7q+Wpg`X_g|6$Mu@@;`QFo+Y1peBoFu
zoyfGpC_cv=VGkRVDNoo6=VZohkJt0f7}*d$66Qh<aNeyCN#K`qadTdJSy$ME1Sz?N
z;F5gZ0EfbX1iivbHxxa(b5IT)L9uj42PcHIN|ZkbBsj*wKk*`td4OeNF#jmmyRh^A
zp78xAZky!?pYem3`tDQ#OX}xY3S+Sa_8!kzUC)}=kZU07qr4I}wbcbF#g4NV2TMv0
z7b2Mo^#UC;rm9Vn!jpbb-tYGaoeo)!?O<|iiX60Dy4dP@6BS!qZEdQEql|&q)B6-B
zuN@5h8QhW)1wD+i9^0oWt|?}Rx)$T>%j!`pw3Y2p*~gdrTy(dxdI}X1i=;xNSBWtN
zNteN<hcMj_!zY2(sheH?0X$)k`G#peijl+54mJc%e$|6mj%epc34?W4RG5=b?`YOz
z7PNno>I|K|@^}87uqEtoqD^|#sYBf3c9Gas4-T}-I$>eDmW$wk>H}uL9Wei0OUbC1
z*P(tuEoFJp)4`;n@*9tDlLNuj<vg4#%@o;S@lM(9px(}OkX@!>p>{F*wVx?412vBZ
z)I*<hRF@l)m0C%?E*eUpuh%tmm!ADAp!($ay!XH2l^+QG3A^XQKuzgZhR*izo;0e0
zL;vCf>y$IFkp5V@_im5gv@I71{pOJYj&@VT339>Y%HtiYVqCrbVRi;*Wn*I=BjT9~
z{P+x!p*^oZow^Jl!;$7u@mJ;!HH=eJjiPt=@d7%H(t7s&E90$<Jn;1SFEncmdrt-J
ztT{U^vwYLS6OcuWZ_>dD|M7PwjRF_f4A7Hac+~KdK%?7UkF$Pt89ttFLprZ*Bk#Z@
z6@p?5cJ3K8FwoizR+ls$MBu-{Ct?f`^Nf@X7@gOpxQ|!Kpmj>fG+1zUUDfZ)mStA7
z7Nqs;OE@Mf;ZKC2QSe(#ztL5O!Vk@$mu~mm#@k~yN>gyzt7F1!?a5pU_Ayf7v|^{J
z8wB?j2<@VRqvX}O$I!AaVyJNm7=!9#o_<OFPPX(2oWh2c8axKBK>JT;mlH)fLTw0K
z7TF+`=24)1NA8key_s6hL1r12yxjPQ(~^eX1{fCKwZED4I5U-?2fpe`#9yhC9=T?k
zx_B-J>?E7P{Du50fE|v^%BSIh1DyE=R>fl-eQ_hU%i9O!)(y^c*3TVUBq1KZEg5`T
zIB@E0tzYV0isaK*HgloZ%tGlURbr29p34qGa4)N9vSV3kP!jrPyfj^JP|gW*aPJ(r
z*GH<(tLHNUuvds82DI>83R|VKc3W2pL<1p7^f`IYU2<!kJ;XtqmDR?EI~QYk6#D-8
z7l_Zxd0q@M0<wg?tJ0WCFalro-WJ=IIS{d*3@1G(6+KxH;2l)FhhA)OQLqBAOl~h0
z>f4o=+!1!)3zuh6kJw@3m#zR|AUM<$JD<%i{sbD;?+={J&>CT+<k(-)uOKRu`&>E7
zuVnmpD$II04AITsm>8C|a_hQtQ~WDUkA7QRyvB*D#=CD$;te1V?*vZT3Rfsw6Ny5*
zlrl0lo(smvSldF6q`N<E2XcAYYf>s^mW+FH(Z9_;;B?E7IjXC?Kaj)-G0(sm3W9b$
z;DTLkWocL@jWMrE+^!BQPD(|+5QmESbA-Q=6oGxGr)O$kGP&i<qs#Mty(~b;p7Q4y
z;I_SdW?yVb&FTfPn`Xlxm~hHJD9~ra$uFcdL$z4XP${v2D$UQDsyP^s5?PkCyVqUu
zRAy<~zkc#}tciM6n&whzLY~xi2EI?bmd@!5LRw*V^&D%SbSz_A$FP@|&q&7-E_fdM
zCXf`Ur_=JMdvx0hejkCVkgGGKFxYFe42?Y>c}e4z|27U={%pZS;7wE1Q~q4({P|cG
z`v+JY+xI3(qlnL3(WH!xBFSFDjLWASLV(x{NyZa|gkojoAS&IE%U)No7yNf}wu%B1
z678B6m~W$;7VF!f=F_u`wT0W^(vg==Od!z5w6t!N3>1p@bMW-^^!1e|s(xb@Dp@1C
ztYC+dZY!3q$%>T6<(?6!csumML=d~W!Ael7#r5E4(E;)gy8X<EKkAgHYuvC8R%Wcs
zsovQzyr@pqkfih9Ns!`h{tkW!&iPd*p8I13!1DPGPg<+t&^dkCg}fE=5&s9**)KGa
zKiBcaFs&D>l+x1DHi+(oJEf(i)y&MyQck0vPJK7bl&8p7JE*{sH><xgqupvfmVaht
zfx~~~jyOIXUHd&ZXTj6(w}y`b;_qNY7=0T3#>a_Mve(nXF)`_Iid&N`zHq-=hgEKd
z3V3Ec8#2=|kI0(hljLr?{16E}Ex8r-4zA_5TOyOLAu&;U9U;~bq$p8oTB^#&^ZnKc
z5s^Wgz4s-&*6eG}q8_+PlY)%Y8=YGj8X9_e8JO{eD&V2hf8Lk0wzig(01m0j$n_o<
zj&^o-_N55zOxMAxCf(;6YZ@ASrfco0>k0}As;il-P$*Pf*Gu`Pni}Tg4wRpt0#S_H
zVQ{t>CXM#1ot&Q$1_c)7X&}~moELlk#AK(gixf}6SC^BJqjZ>{ASHo~4^-l*3+1E1
z{>!8!O^$E!I)5QVgQ*F<hJy4_n5~^Mu5t$?OOGfs({dO&_5S`o?}!!*7M=xxK#sTP
z%g3F+-&_aOO(*DcfIx4@%*@Onn0`Lj`?9h?1_sk-&mtouf%NpD-^$C&mtXZ3^1e<M
z0I)G|DR@TglO}cbJ^y4nQ)=1&lC!ZXxkg`6X@b%D$A+j}67rnb!!F!2(Dxh<?-9#*
ztpe%!#rJMR8S4_xf&BO2E*OrEcP$soROaTGER#K|Y-(!y{Mq&5cq{pqnoYIW_2t=`
zaEZR8SqCGdc?XD<6^+F%jE?5x*K=`{pVdcZ=jVeqr=%K9^9<XAP}_4f=M(}}FY2QH
zY3esqzVD9R4rtcaq3L!rPG;HVzI|fTZqu8v2ZMC5uKkf3yccpAn*O>sM%5uSL`aOB
zDp8faK+4PpZPf;$%y3@WtXRr9YxVl8dh->dJ4u2Zu(x(W3K+xTnAB8C9Z!6bo`8UW
zkO9`B1tm6?&&S6n$)w`D%lk@S9_Yyn@HzTBUTrI#k)VC|)u4z;(ZiXFii!xNNTXV^
z^76p1Ou2tsO2_{mZA|XWeofjZCFQqH68H5$c_;r;bu`{MY4EhvWo8p@WV}!*ai5iS
z(8gT$P*KmNGHaa;w7hdBmb9kd;c688WfkD=Za9LMl)QpUEWm?MjtQqL1>ZliOZj;t
z)ek~#-Q%M!KHGp0?_JrR`c!Qje#LBj`xctGLfNp~Z(7MSr3b!I4eO+fWqsQ0GAYg^
zMuaP~3x&^aEB}iGEdHAXggxZo>6K_>`9Hbv|KG5qZ%9c<Zf<aygFgRwsQ$}CPBK6>
Vtj2)Z5BS$1(b3Y^tW>vo`#*wg9Af|g

literal 0
HcmV?d00001