@tetjana/flowmakers-ds 0.1.6 → 0.1.8

package/guidelines/components/navmenu.md

@@ -0,0 +1,48 @@
+# NavMenu — Navigation components
+
+## Import
+```tsx
+import { NavItem, NavBar } from '@tetjana/flowmakers-ds';
+import '@tetjana/flowmakers-ds/styles';
+```
+
+## Components
+
+### NavBar
+Vertical navigation container. Wrap `NavItem` elements inside it.
+
+```tsx
+<NavBar>
+  <NavItem label="Дашборд" active icon={<DashboardIcon />} />
+  <NavItem label="Тести" href="/tests" icon={<TestsIcon />} />
+  <NavItem label="Аналітика" href="/analytics" icon={<AnalyticsIcon />} />
+  <NavItem label="Резюме" href="/resume" icon={<ResumeIcon />} />
+  <NavItem label="Ризики" href="/risks" icon={<RisksIcon />} />
+  <NavItem label="AI асистент" href="/ai" icon={<AIIcon />} />
+</NavBar>
+```
+
+### NavItem props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | required | Menu item label |
+| `active` | `boolean` | `false` | Highlights the currently active route |
+| `href` | `string` | — | Renders as `<a>` link when provided |
+| `onClick` | `() => void` | — | Renders as `<button>` when no href |
+| `icon` | `ReactNode` | — | Icon element shown before the label |
+
+### NavBar props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `horizontal` | `boolean` | `false` | Lays items out horizontally |
+
+## When to use
+- **NavBar** — always as the sidebar/top navigation wrapper
+- **NavItem** — one per destination in the app
+- Mark `active` on the item matching the current route
+- Always pass an `icon` — navigation icons are required by design
+- Use `href` for real links; use `onClick` for SPA navigation handlers
+
+## Do NOT
+- Nest `NavBar` inside another `NavBar`
+- Manually add active styles via className

package/guidelines/components/pagination.md

@@ -0,0 +1,61 @@
+# Pagination — Previous/Next navigation with indicator
+
+## Import
+```tsx
+import { Pagination } from '@tetjana/flowmakers-ds';
+import '@tetjana/flowmakers-ds/styles';
+```
+
+## Usage
+
+### Dots variant (carousel, image gallery)
+```tsx
+const [page, setPage] = useState(1);
+const total = 9;
+
+<Pagination
+  variant="dots"
+  page={page}
+  total={total}
+  onPrev={() => setPage(p => Math.max(1, p - 1))}
+  onNext={() => setPage(p => Math.min(total, p + 1))}
+  prevDisabled={page === 1}
+  nextDisabled={page === total}
+/>
+```
+
+### Numbers variant (test cards, long lists)
+```tsx
+<Pagination
+  variant="numbers"
+  page={page}
+  total={total}
+  onPrev={() => setPage(p => p - 1)}
+  onNext={() => setPage(p => p + 1)}
+/>
+```
+
+### Hidden variant (just prev/next arrows)
+```tsx
+<Pagination
+  variant="hidden"
+  onPrev={handlePrev}
+  onNext={handleNext}
+/>
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'dots' \| 'numbers' \| 'hidden'` | `'dots'` | Indicator style |
+| `page` | `number` | `1` | Current page (1-based) |
+| `total` | `number` | `9` | Total number of pages |
+| `onPrev` | `() => void` | — | Called on previous arrow click |
+| `onNext` | `() => void` | — | Called on next arrow click |
+| `prevDisabled` | `boolean` | `false` | Disables the previous arrow |
+| `nextDisabled` | `boolean` | `false` | Disables the next arrow |
+
+## When to use
+- `dots` — carousels, image sliders, up to ~10 pages
+- `numbers` — shows "2 з 9", for medium-length lists
+- `hidden` — when page count is unknown or unlimited

package/guidelines/components/segmentedcontrol.md

@@ -0,0 +1,37 @@
+# SegmentedControl — Tab/filter switcher
+
+## Import
+```tsx
+import { SegmentedControl } from '@tetjana/flowmakers-ds';
+import '@tetjana/flowmakers-ds/styles';
+```
+
+## Usage
+```tsx
+const [tab, setTab] = useState('all');
+
+<SegmentedControl
+  options={[
+    { value: 'all',       label: 'Всі' },
+    { value: 'active',    label: 'Активні' },
+    { value: 'completed', label: 'Завершені' },
+  ]}
+  value={tab}
+  onChange={setTab}
+/>
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `{ value: string; label: string }[]` | required | List of segments |
+| `value` | `string` | — | Currently selected segment value |
+| `onChange` | `(value: string) => void` | — | Called when user selects a segment |
+
+## When to use
+- Switching between content views (All / Active / Completed)
+- Filtering a list by category
+- Toggling between 2–5 mutually exclusive options
+- Do NOT use for navigation — use `NavBar` instead
+- Do NOT use for binary on/off — use `Toggle` instead
+- Maximum 5 options; prefer 2–3 for clarity

package/guidelines/components/tag.md

@@ -0,0 +1,27 @@
+# Tag
+
+**Import**: `import { Tag } from '@tetjana/flowmakers-ds'`
+
+## Colors
+| Color    | Background        | Text              | Use for                     |
+|----------|-------------------|-------------------|-----------------------------|
+| `grey`   | `#eeeef0`         | `#4c4d58`         | Neutral labels, duration    |
+| `green`  | `#d9f2e7`         | `#1b6153`         | Success, available, done    |
+| `yellow` | `#fff0d4`         | `#c54e09`         | Warning, in progress        |
+| `purple` | `#eeecfb`         | `#6d45bc`         | Category, feature label     |
+| `pink`   | `#ffe7fc`         | `#b51692`         | Special, premium            |
+
+## Props
+| Prop       | Type      | Default  | Description          |
+|------------|-----------|----------|----------------------|
+| `color`    | TagColor  | `'grey'` | Color variant        |
+| `children` | ReactNode | —        | Tag label text       |
+
+## Examples
+```tsx
+<Tag>5 хв</Tag>
+<Tag color="green">Завершено</Tag>
+<Tag color="yellow">В процесі</Tag>
+<Tag color="purple">AI</Tag>
+<Tag color="pink">Premium</Tag>
+```

package/guidelines/components/toggle.md

@@ -0,0 +1,41 @@
+# Toggle
+
+**Import**: `import { Toggle } from '@tetjana/flowmakers-ds'`
+
+## Description
+Перемикач on/off. Обов'язково потребує контрольованого стану (`checked` + `onChange`).
+
+## Props
+| Prop        | Type                       | Required | Default | Description                   |
+|-------------|----------------------------|----------|---------|-------------------------------|
+| `checked`   | boolean                    | ✅ yes   | —       | Current on/off state          |
+| `onChange`  | (checked: boolean) => void | ✅ yes   | —       | Called when user toggles      |
+| `label`     | string                     | no       | —       | Text label next to the toggle |
+| `disabled`  | boolean                    | no       | `false` | Prevents interaction          |
+
+## Visual
+- **Off** → grey track, white thumb
+- **On** → gradient track (pink→yellow→mint→purple), white thumb, animated
+- **Disabled** → 50% opacity, no pointer events
+
+## Examples
+```tsx
+// Controlled toggle with useState
+const [enabled, setEnabled] = useState(false);
+<Toggle
+  checked={enabled}
+  onChange={setEnabled}
+  label="Отримувати сповіщення"
+/>
+
+// Disabled
+<Toggle checked={false} onChange={() => {}} disabled label="Недоступно" />
+
+// Without label (icon-only row)
+<Toggle checked={active} onChange={setActive} />
+```
+
+## Do NOT
+- Do NOT use without `checked` + `onChange` — the component is always controlled
+- Do NOT use for multi-option selection — use `Checkbox` instead
+- Do NOT change the track color via CSS — the gradient is part of the brand style

package/guidelines/components/widgetcard.md

@@ -0,0 +1,187 @@
+# WidgetCard — Dashboard widget components
+
+## Import
+```tsx
+import {
+  WidgetCard,
+  WidgetHeader,
+  PlatformNewsWidget,
+  GeneralNewsWidget,
+  NotesWidget,
+  PersonalAdviceWidget,
+  CalendarWidget,
+} from '@tetjana/flowmakers-ds';
+import '@tetjana/flowmakers-ds/styles';
+```
+
+---
+
+## WidgetCard — Container wrapper
+
+Wraps a `WidgetHeader` + any widget content.
+
+```tsx
+<WidgetCard
+  header={<WidgetHeader title="Новини платформи" color="purple" />}
+>
+  <PlatformNewsWidget
+    title="Оновлення платформи"
+    text="Нова функція вже доступна"
+  />
+</WidgetCard>
+```
+
+### WidgetCard props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `header` | `ReactNode` | — | `<WidgetHeader>` element |
+| `children` | `ReactNode` | — | Widget content |
+| `width` | `number \| string` | — | Optional fixed width |
+
+---
+
+## WidgetHeader — Widget title bar
+
+```tsx
+// Purple (default)
+<WidgetHeader title="Персональна порада" color="purple" />
+
+// Grey
+<WidgetHeader title="Загальні новини" color="grey" />
+
+// With subtitle and actions
+<WidgetHeader
+  title="Календар"
+  subtitle="Лютий 2024"
+  color="purple"
+  leftAction={<IconButton icon="arrow-left" size="small" />}
+  rightAction={<IconButton icon="arrow-right" size="small" />}
+/>
+```
+
+### WidgetHeader props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | required | Widget title |
+| `subtitle` | `string` | — | Secondary text |
+| `color` | `'purple' \| 'grey'` | `'purple'` | Header background color |
+| `leftAction` | `ReactNode` | — | Icon/button on the left |
+| `rightAction` | `ReactNode` | — | Icon/button on the right |
+
+---
+
+## PlatformNewsWidget — Platform update news item
+
+```tsx
+<PlatformNewsWidget
+  tag={<Tag color="purple">Оновлення</Tag>}
+  title="Нова функція: Аналітика ризиків"
+  text="Тепер ви можете переглядати детальну аналітику своїх ризиків у реальному часі"
+/>
+```
+
+---
+
+## GeneralNewsWidget — Industry news with image
+
+```tsx
+<GeneralNewsWidget
+  image="/news/article-cover.jpg"
+  tag={<Tag color="grey">Ринок праці</Tag>}
+  title="Попит на React-розробників зріс на 40% у 2024 році"
+/>
+```
+
+---
+
+## NotesWidget — Personal notes
+
+```tsx
+<NotesWidget
+  title="Мої нотатки"
+  text="Записати головні думки з лекції про TypeScript generics..."
+  date="21.02.2024"
+/>
+```
+
+---
+
+## PersonalAdviceWidget — AI-generated advice
+
+```tsx
+<PersonalAdviceWidget
+  tag={<Tag color="purple">AI порада</Tag>}
+  text="Пройди тест з TypeScript, щоб підвищити рівень до Middle. Це підвищить твої шанси на ринку праці."
+  action={<Button variant="ghost">Переглянути тест</Button>}
+/>
+```
+
+---
+
+## CalendarWidget — Weekly calendar with events
+
+```tsx
+<CalendarWidget
+  days={[
+    { dayLabel: 'Пн', date: 19 },
+    { dayLabel: 'Вт', date: 20, hasEvent: true },
+    { dayLabel: 'Ср', date: 21, active: true },
+    { dayLabel: 'Чт', date: 22 },
+    { dayLabel: 'Пт', date: 23 },
+    { dayLabel: 'Сб', date: 24 },
+    { dayLabel: 'Нд', date: 25 },
+  ]}
+  events={[
+    { title: 'Менторська сесія', time: '10:00', color: '#9076dc' },
+    { title: 'Вебінар з React',  time: '14:00', color: '#4CAF50' },
+  ]}
+/>
+```
+
+### CalendarDayItem fields
+| Field | Type | Description |
+|-------|------|-------------|
+| `dayLabel` | `string` | Short day name: 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Нд' |
+| `date` | `number` | Day of month |
+| `active` | `boolean` | Highlights today |
+| `hasEvent` | `boolean` | Shows a dot indicator under the date |
+
+### CalendarEvent fields
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | Event name |
+| `time` | `string` | Time string, e.g. '14:00' |
+| `color` | `string` | CSS color for the left accent bar |
+
+---
+
+## Dashboard layout example
+
+```tsx
+<div className="dashboard-grid">
+  <WidgetCard header={<WidgetHeader title="Новини платформи" color="purple" />}>
+    <PlatformNewsWidget title="Оновлення" text="..." />
+  </WidgetCard>
+
+  <WidgetCard header={<WidgetHeader title="Загальні новини" color="grey" />}>
+    <GeneralNewsWidget title="Ринок праці" image="/news.jpg" />
+  </WidgetCard>
+
+  <WidgetCard header={<WidgetHeader title="Мої нотатки" color="purple" />}>
+    <NotesWidget title="Нотатка" text="..." date="21.02.2024" />
+  </WidgetCard>
+
+  <WidgetCard header={<WidgetHeader title="Порада" color="purple" />}>
+    <PersonalAdviceWidget text="Пройди тест..." />
+  </WidgetCard>
+
+  <WidgetCard header={<WidgetHeader title="Календар" subtitle="Лютий 2024" color="grey" />}>
+    <CalendarWidget days={[...]} events={[...]} />
+  </WidgetCard>
+</div>
+```
+
+## Rules
+- Always wrap widget content in `<WidgetCard>` with a `<WidgetHeader>`
+- Use `color="purple"` for primary/featured widgets, `color="grey"` for secondary
+- One content component per `WidgetCard` — do not stack multiple widgets inside one card

package/guidelines/design-tokens/colors.md

@@ -0,0 +1,42 @@
+# Color Tokens
+
+All colors are CSS variables. Import `@tetjana/flowmakers-ds/styles` to use them.
+
+## Primary palette (Purple)
+| Token                       | Value     | Use for                              |
+|-----------------------------|-----------|--------------------------------------|
+| `--primary-fill-100`        | `#eeecfb` | Light purple backgrounds, tag bg     |
+| `--primary-fill-500`        | `#9076dc` | Focus rings, active checkboxes       |
+| `--primary-fill-600`        | `#754ccc` | Hover states on purple elements      |
+| `--primary-fill-700`        | `#6d45bc` | Purple tag text                      |
+
+## Black & White
+| Token                       | Value     | Use for                              |
+|-----------------------------|-----------|--------------------------------------|
+| `--bw-fill-black`           | `#121212` | Primary buttons, headings, body text |
+| `--bw-fill-white`           | `#ffffff` | Backgrounds, button text on dark     |
+| `--bw-fill-50`              | `#f7f7f8` | Page background, grey header         |
+| `--bw-fill-100`             | `#eeeef0` | Hover backgrounds                    |
+| `--bw-fill-200`             | `#dcdcdc` | Disabled button background           |
+| `--bw-fill-300`             | `#b8b9c1` | Input borders (default)              |
+| `--bw-fill-400`             | `#989898` | Subtitle, secondary text             |
+| `--bw-fill-500`             | `#7c7c7c` | Muted text                           |
+
+## Accent colors
+| Token                       | Value     | Use for                              |
+|-----------------------------|-----------|--------------------------------------|
+| `--pink-fill-100`           | `#ffe7fc` | Pink tag background                  |
+| `--pink-fill-300`           | `#ffa8f1` | Hero button hover border             |
+| `--pink-fill-700`           | `#b51692` | Pink tag text                        |
+| `--green-fill-100`          | `#d9f2e7` | Green tag background, success tint   |
+| `--green-fill-500`          | `#31987f` | Success input border                 |
+| `--green-fill-700`          | `#1b6153` | Green tag text                       |
+| `--yellow-fill-100`         | `#fff0d4` | Yellow tag background, warning tint  |
+| `--yellow-fill-700`         | `#c54e09` | Yellow tag text                      |
+
+## Decision tree
+- Need a background? → Start with `--bw-fill-50` or `--primary-fill-100`
+- Need text on white? → Use `--bw-fill-black`
+- Need muted/secondary text? → Use `--bw-fill-400`
+- Need a border? → Use `--bw-fill-300` (default) or `--primary-fill-500` (focused)
+- Need a status color? → Use the matching `--green`, `--yellow`, or `--pink` token

package/guidelines/design-tokens/spacing.md

@@ -0,0 +1,41 @@
+# Spacing & Border Radius Tokens
+
+All tokens are CSS variables available after `import '@tetjana/flowmakers-ds/styles'`.
+
+## Spacing scale
+| Token          | Value | Use for                                           |
+|----------------|-------|---------------------------------------------------|
+| `--space-xxs`  | 4px   | Icon gaps, tiny internal padding                  |
+| `--space-xs`   | 8px   | Between icon and text, small card gaps            |
+| `--space-s`    | 10px  | Button padding (sm), tight list items             |
+| `--space-sm`   | 12px  | Between label and input, small section gaps       |
+| `--space-m`    | 16px  | Default padding inside cards, between form fields |
+| `--space-l`    | 20px  | Card/widget internal padding                      |
+| `--space-xl`   | 24px  | Section padding, between major blocks             |
+| `--space-2xl`  | 32px  | Large gaps, between sections                      |
+| `--space-3xl`  | 48px  | Between major page sections                       |
+
+## Border radius scale
+| Token          | Value  | Use for                                      |
+|----------------|--------|----------------------------------------------|
+| `--radius-xs`  | 8px    | Small chips, badges, compact inputs          |
+| `--radius-s`   | 10px   | Buttons (sm), small cards                    |
+| `--radius-m`   | 12px   | Buttons (md/lg), inputs, standard cards      |
+| `--radius-l`   | 16px   | Large cards, modals                          |
+| `--radius-xl`  | 20px   | Widget containers, Header component          |
+| `--radius-full`| 9999px | Pills, Tags, Toggle track, Avatar circles    |
+
+## Rules
+- Always use `--space-*` tokens instead of hardcoded pixel values
+- For card padding: use `var(--space-m, 16px)` as the default fallback
+- For inner component spacing: `--space-xs` (8px) or `--space-sm` (12px)
+- For section-level gaps: `--space-xl` (24px) or `--space-2xl` (32px)
+
+## Example
+```css
+.my-card {
+  padding: var(--space-m);
+  border-radius: var(--radius-l);
+  gap: var(--space-sm);
+}
+```

package/guidelines/design-tokens/typography.md

@@ -0,0 +1,23 @@
+# Typography Tokens
+
+## Font families
+- **Headings**: `Manrope` (Bold 700) — page titles, widget titles, display text
+- **Body & UI**: `Nunito Sans` — all other text (labels, body, buttons, captions)
+
+## Font size scale
+| Token                | Value  | Class          | Use for                        |
+|----------------------|--------|----------------|--------------------------------|
+| `--font-size-12`     | 12px   | `.text-tiny`   | Tags, tiny labels, captions    |
+| `--font-size-14`     | 14px   | `.text-body-md`| Default body text, button text |
+| `--font-size-16`     | 16px   | `.text-body-lg`| Input labels, subtitles        |
+| `--font-size-18`     | 18px   | `.text-h4`     | Widget/card headings           |
+| `--font-size-24`     | 24px   | `.text-h3`     | Section headings               |
+| `--font-size-30`     | 30px   | `.text-h2`     | Page headings, footer headline |
+| `--font-size-36`+    | 36px+  | `.text-h1`     | Hero/landing headings          |
+
+## Rules
+- Always use **Manrope Bold** for headings (h1–h4)
+- Use **Nunito Sans Regular (400)** for body text
+- Use **Nunito Sans Bold (700)** for buttons and tags
+- Use **Nunito Sans SemiBold (600)** for subtitles and section labels
+- **Minimum body text size: 14px** — never use 12px for paragraph text

package/guidelines/overview-components.md

@@ -0,0 +1,58 @@
+# FlowMakers Components Overview
+
+All components are imported from `@tetjana/flowmakers-ds`.
+Always import the CSS too: `import '@tetjana/flowmakers-ds/styles'`
+
+## Primitives
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `Button` | All clickable actions (hero, secondary, ghost) | [button.md](components/button.md) |
+| `Input` | Text fields, email, password, search | [input.md](components/input.md) |
+| `Tag` | Labels, badges, status indicators | [tag.md](components/tag.md) |
+| `Toggle` | Boolean on/off switches | [toggle.md](components/toggle.md) |
+| `Checkbox` | Multi-select options, agreements | [checkbox.md](components/checkbox.md) |
+| `IconButton` | Icon-only action buttons (arrows, plus, pen) | [iconbutton.md](components/iconbutton.md) |
+
+## Navigation
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `NavItem`, `NavBar` | Sidebar navigation menu | [navmenu.md](components/navmenu.md) |
+| `SegmentedControl` | Tab/filter switcher (2–5 options) | [segmentedcontrol.md](components/segmentedcontrol.md) |
+| `Pagination` | Prev/next navigation with dots or numbers | [pagination.md](components/pagination.md) |
+
+## Layout
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `Header` | Widget/card header with title and subtitle | [header.md](components/header.md) |
+| `Footer` | Page footer with links, CTA, and copyright | [footer.md](components/footer.md) |
+
+## Cards
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `CardTest` | Test/quiz card with state (available/in-progress/completed/unavailable) | [cardtest.md](components/cardtest.md) |
+| `CardCareer` | Accordion card showing career level + task progress | [cardcareer.md](components/cardcareer.md) |
+
+## Dashboard widgets
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `WidgetCard` | Dashboard card container | [widgetcard.md](components/widgetcard.md) |
+| `WidgetHeader` | Widget title bar (purple or grey) | [widgetcard.md](components/widgetcard.md) |
+| `PlatformNewsWidget` | Platform update news item | [widgetcard.md](components/widgetcard.md) |
+| `GeneralNewsWidget` | Industry news with cover image | [widgetcard.md](components/widgetcard.md) |
+| `NotesWidget` | Personal notes snippet | [widgetcard.md](components/widgetcard.md) |
+| `PersonalAdviceWidget` | AI-generated advice card | [widgetcard.md](components/widgetcard.md) |
+| `CalendarWidget` | Weekly calendar with event list | [widgetcard.md](components/widgetcard.md) |
+
+---
+
+## General rules
+- Do NOT add `className` to override colors — use CSS variables from design tokens
+- All components accept standard HTML attributes via spread props
+- Disabled state: always pass `disabled` prop, never CSS-only
+- Always prefer FlowMakers components over native HTML elements
+- Read the component's `.md` file before using it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tetjana/flowmakers-ds",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "FlowMakers UI Design System — React components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -13,24 +13,33 @@
     },
     "./styles": "./dist/styles.css"
   },
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "guidelines"
+  ],
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly --declaration --outDir dist",
-    "dev":   "vite",
-    "lint":  "eslint src"
+    "dev": "vite",
+    "lint": "eslint src"
   },
   "peerDependencies": {
-    "react":     ">=18",
+    "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@types/react":        "^18.0.0",
-    "@types/react-dom":    "^18.0.0",
-    "@vitejs/plugin-react":"^4.0.0",
-    "typescript":          "^5.0.0",
-    "vite":                "^5.0.0",
-    "vite-plugin-dts":     "^3.0.0"
+    "@figma/code-connect": "^1.4.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0"
   },
-  "keywords": ["flowmakers", "design-system", "react", "ui"],
+  "keywords": [
+    "flowmakers",
+    "design-system",
+    "react",
+    "ui"
+  ],
   "license": "MIT"
 }