[
  {
    "id": 1,
    "name": "Primary action",
    "category": "Actions",
    "job": "Make one next action clear.",
    "file": "01-primary-action.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 2,
    "name": "Secondary action",
    "category": "Actions",
    "job": "Support a lower-emphasis alternative.",
    "file": "02-secondary-action.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 3,
    "name": "Text action",
    "category": "Actions",
    "job": "Keep a contextual action lightweight.",
    "file": "03-text-action.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 4,
    "name": "Destructive action",
    "category": "Actions",
    "job": "Name what will be removed and preserve a way back.",
    "file": "04-destructive-action.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 5,
    "name": "Confirm action",
    "category": "Actions",
    "job": "Confirm the user\u2019s choice.",
    "file": "05-confirm-action.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 6,
    "name": "Icon action",
    "category": "Actions",
    "job": "Offer a compact action with a readable name.",
    "file": "06-icon-action.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 7,
    "name": "Split action",
    "category": "Actions",
    "job": "Keep a primary action alongside related options.",
    "file": "07-split-action.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 8,
    "name": "Floating action",
    "category": "Actions",
    "job": "Create one new item.",
    "file": "08-floating-action.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 9,
    "name": "Previous step",
    "category": "Actions",
    "job": "Return without losing the current work.",
    "file": "09-previous-step.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 10,
    "name": "Next step",
    "category": "Actions",
    "job": "Advance one clear step.",
    "file": "10-next-step.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 11,
    "name": "Global navigation",
    "category": "Navigation",
    "job": "Keep orientation and the primary destination visible.",
    "file": "11-global-navigation.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 12,
    "name": "Sidebar navigation",
    "category": "Navigation",
    "job": "Show the active place in a compact rail.",
    "file": "12-sidebar-navigation.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 13,
    "name": "Tabs",
    "category": "Navigation",
    "job": "Switch related views without leaving context.",
    "file": "13-tabs.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 14,
    "name": "Breadcrumbs",
    "category": "Navigation",
    "job": "Show where the user is and how to return.",
    "file": "14-breadcrumbs.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 15,
    "name": "Pagination",
    "category": "Navigation",
    "job": "Navigate a known set of results.",
    "file": "15-pagination.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 16,
    "name": "Step progress",
    "category": "Navigation",
    "job": "Show completed, current and upcoming steps.",
    "file": "16-step-progress.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 17,
    "name": "Mobile navigation",
    "category": "Navigation",
    "job": "Keep four destinations within reach.",
    "file": "17-mobile-navigation.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 18,
    "name": "Menu trigger",
    "category": "Navigation",
    "job": "Open site navigation.",
    "file": "18-menu-trigger.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 19,
    "name": "Back link",
    "category": "Navigation",
    "job": "Return to a named destination.",
    "file": "19-back-link.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 20,
    "name": "Drill-in row",
    "category": "Navigation",
    "job": "Reveal a specific item with a clear affordance.",
    "file": "20-drill-in-row.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 21,
    "name": "Text input",
    "category": "Forms",
    "job": "Name a real item with a persistent label.",
    "file": "21-text-input.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 22,
    "name": "Search field",
    "category": "Forms",
    "job": "Find relevant information.",
    "file": "22-search-field.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 23,
    "name": "Textarea",
    "category": "Forms",
    "job": "Capture a useful note.",
    "file": "23-textarea.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 24,
    "name": "Select menu",
    "category": "Forms",
    "job": "Choose one known value.",
    "file": "24-select-menu.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 25,
    "name": "Combobox",
    "category": "Forms",
    "job": "Filter and choose from a longer list.",
    "file": "25-combobox.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 26,
    "name": "Checkbox",
    "category": "Forms",
    "job": "Make a separate choice explicit.",
    "file": "26-checkbox.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 27,
    "name": "Radio group",
    "category": "Forms",
    "job": "Choose one option in a related set.",
    "file": "27-radio-group.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 28,
    "name": "Toggle switch",
    "category": "Forms",
    "job": "Turn one preference on or off.",
    "file": "28-toggle-switch.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 29,
    "name": "Range slider",
    "category": "Forms",
    "job": "Adjust a value with a visible result.",
    "file": "29-range-slider.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 30,
    "name": "Date picker",
    "category": "Forms",
    "job": "Choose a date from a real calendar.",
    "file": "30-date-picker.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 31,
    "name": "File upload",
    "category": "Forms",
    "job": "Attach a file and expose its status.",
    "file": "31-file-upload.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 32,
    "name": "Quantity stepper",
    "category": "Forms",
    "job": "Adjust a quantity one step at a time.",
    "file": "32-quantity-stepper.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 33,
    "name": "Segmented control",
    "category": "Forms",
    "job": "Switch a small set of related modes.",
    "file": "33-segmented-control.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 34,
    "name": "Information alert",
    "category": "Feedback",
    "job": "Explain a relevant condition.",
    "file": "34-information-alert.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 35,
    "name": "Success alert",
    "category": "Feedback",
    "job": "Confirm what changed.",
    "file": "35-success-alert.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 36,
    "name": "Warning alert",
    "category": "Feedback",
    "job": "Give a proportionate caution and next action.",
    "file": "36-warning-alert.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 37,
    "name": "Error alert",
    "category": "Feedback",
    "job": "Explain an error and a useful remedy.",
    "file": "37-error-alert.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 38,
    "name": "Toast",
    "category": "Feedback",
    "job": "Acknowledge an action without blocking the task.",
    "file": "38-toast.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 39,
    "name": "Progress bar",
    "category": "Feedback",
    "job": "Show progress with a label and amount.",
    "file": "39-progress-bar.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 40,
    "name": "Loading indicator",
    "category": "Feedback",
    "job": "Communicate a task in progress.",
    "file": "40-loading-indicator.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 41,
    "name": "Empty state",
    "category": "Feedback",
    "job": "Offer a useful start when no items exist.",
    "file": "41-empty-state.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 42,
    "name": "Content card",
    "category": "Content",
    "job": "Present one useful item with enough context to act.",
    "file": "42-content-card.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 43,
    "name": "Accordion",
    "category": "Content",
    "job": "Reveal optional detail.",
    "file": "43-accordion.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 44,
    "name": "Sortable table",
    "category": "Content",
    "job": "Compare records and sort a meaningful column.",
    "file": "44-sortable-table.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 45,
    "name": "Tag",
    "category": "Content",
    "job": "Represent an active filter.",
    "file": "45-tag.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 46,
    "name": "Status badge",
    "category": "Content",
    "job": "Name a state in words and shape.",
    "file": "46-status-badge.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 47,
    "name": "Tooltip",
    "category": "Content",
    "job": "Explain an unfamiliar control.",
    "file": "47-tooltip.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 48,
    "name": "Modal",
    "category": "Overlays",
    "job": "Pause for a consequential decision.",
    "file": "48-modal.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 49,
    "name": "Drawer",
    "category": "Overlays",
    "job": "Inspect detail without losing the main context.",
    "file": "49-drawer.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  },
  {
    "id": 50,
    "name": "Popover menu",
    "category": "Overlays",
    "job": "Offer related actions near their origin.",
    "file": "50-popover-menu.svg",
    "states": [
      "default",
      "hover",
      "focus",
      "active",
      "disabled",
      "loading"
    ]
  }
]