{
  "plugins": [
    "react",
    "import"
  ],
  "rules": {
    "react/forbid-elements": [
      "warn",
      {
        "forbid": []
      }
    ],
    "no-restricted-imports": [
      "warn",
      {
        "patterns": [
          {
            "group": [
              "components/forms/**",
              "components/layout/**",
              "components/navigation/**",
              "components/product/**",
              "ui_kits/storefront/**"
            ],
            "message": "Import design-system components from 'index.js', not component internals."
          }
        ]
      }
    ],
    "no-restricted-syntax": [
      "warn",
      {
        "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
        "message": "Raw hex color — use a design-system color token via var()."
      },
      {
        "selector": "Literal[value=/\\b\\d+px\\b/]",
        "message": "Raw px value — use a design-system spacing token via var()."
      },
      {
        "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Montserrat|Mulish))/i]",
        "message": "Font not provided by the design system. Available: Montserrat, Mulish."
      },
      {
        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|tone|size|style|key|ref|className|style|children)$/]",
        "message": "<Badge> doesn't accept that prop. Declared props: children, tone, size, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:hivis|new|sale|neutral|outline)$/]",
        "message": "<Badge> tone must be one of 'hivis' | 'new' | 'sale' | 'neutral' | 'outline'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
        "message": "<Badge> size must be one of 'sm' | 'md'."
      },
      {
        "selector": "JSXOpeningElement[name.name='BreadcrumbItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|href|key|ref|className|style|children)$/]",
        "message": "<BreadcrumbItem> doesn't accept that prop. Declared props: label, href."
      },
      {
        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|size|fullWidth|iconLeft|iconRight|disabled|type|onClick|style|key|ref|className|style|children)$/]",
        "message": "<Button> doesn't accept that prop. Declared props: children, variant, size, fullWidth, iconLeft, iconRight, disabled, type, onClick, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|accent|secondary|ghost)$/]",
        "message": "<Button> variant must be one of 'primary' | 'accent' | 'secondary' | 'ghost'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
        "message": "<Button> size must be one of 'sm' | 'md' | 'lg'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit|reset)$/]",
        "message": "<Button> type must be one of 'button' | 'submit' | 'reset'."
      },
      {
        "selector": "JSXOpeningElement[name.name='ColorSwatchOption'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|hex|label|key|ref|className|style|children)$/]",
        "message": "<ColorSwatchOption> doesn't accept that prop. Declared props: value, hex, label."
      },
      {
        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|label|variant|size|active|disabled|onClick|style|key|ref|className|style|children)$/]",
        "message": "<IconButton> doesn't accept that prop. Declared props: children, label, variant, size, active, disabled, onClick, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:outline|solid|ghost)$/]",
        "message": "<IconButton> variant must be one of 'outline' | 'solid' | 'ghost'."
      },
      {
        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
        "message": "<IconButton> size must be one of 'sm' | 'md' | 'lg'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|id|type|placeholder|value|onChange|hint|error|required|disabled|iconLeft|style|key|ref|className|style|children)$/]",
        "message": "<Input> doesn't accept that prop. Declared props: label, id, type, placeholder, value, onChange, hint, error, required, disabled, iconLeft, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='PriceTag'] > JSXAttribute > JSXIdentifier[name!=/^(?:price|compareAt|vatNote|size|style|key|ref|className|style|children)$/]",
        "message": "<PriceTag> doesn't accept that prop. Declared props: price, compareAt, vatNote, size, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='PriceTag'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
        "message": "<PriceTag> size must be one of 'sm' | 'md' | 'lg'."
      },
      {
        "selector": "JSXOpeningElement[name.name='ProductCardBadge'] > JSXAttribute > JSXIdentifier[name!=/^(?:tone|label|key|ref|className|style|children)$/]",
        "message": "<ProductCardBadge> doesn't accept that prop. Declared props: tone, label."
      },
      {
        "selector": "JSXOpeningElement[name.name='ProductCardBadge'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:hivis|new|sale|neutral|outline)$/]",
        "message": "<ProductCardBadge> tone must be one of 'hivis' | 'new' | 'sale' | 'neutral' | 'outline'."
      },
      {
        "selector": "JSXOpeningElement[name.name='QuantityStepper'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|min|max|onChange|size|style|key|ref|className|style|children)$/]",
        "message": "<QuantityStepper> doesn't accept that prop. Declared props: value, min, max, onChange, size, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='QuantityStepper'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
        "message": "<QuantityStepper> size must be one of 'sm' | 'md'."
      },
      {
        "selector": "JSXOpeningElement[name.name='SectionHeader'] > JSXAttribute > JSXIdentifier[name!=/^(?:eyebrow|title|action|align|style|key|ref|className|style|children)$/]",
        "message": "<SectionHeader> doesn't accept that prop. Declared props: eyebrow, title, action, align, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='SectionHeader'] > JSXAttribute[name.name='align'] > Literal[value!=/^(?:left|center)$/]",
        "message": "<SectionHeader> align must be one of 'left' | 'center'."
      },
      {
        "selector": "JSXOpeningElement[name.name='SelectOption'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|label|key|ref|className|style|children)$/]",
        "message": "<SelectOption> doesn't accept that prop. Declared props: value, label."
      }
    ]
  },
  "overrides": [
    {
      "files": [
        "**/index.js"
      ],
      "rules": {
        "no-restricted-imports": "off"
      }
    }
  ],
  "x-omelette": {
    "components": {
      "Badge": {
        "replaces": []
      },
      "BreadcrumbItem": {
        "replaces": []
      },
      "Button": {
        "replaces": []
      },
      "ColorSwatchOption": {
        "replaces": []
      },
      "IconButton": {
        "replaces": []
      },
      "Input": {
        "replaces": []
      },
      "PriceTag": {
        "replaces": []
      },
      "ProductCardBadge": {
        "replaces": []
      },
      "QuantityStepper": {
        "replaces": []
      },
      "SectionHeader": {
        "replaces": []
      },
      "SelectOption": {
        "replaces": []
      }
    },
    "tokens": [
      "--badge-hivis-bg",
      "--badge-hivis-text",
      "--badge-new-bg",
      "--badge-new-text",
      "--black",
      "--border-default",
      "--border-focus",
      "--border-strong",
      "--border-subtle",
      "--border-width",
      "--border-width-strong",
      "--brand-accent",
      "--brand-accent-hover",
      "--brand-primary",
      "--brand-primary-hover",
      "--brand-secondary",
      "--container-max",
      "--container-pad",
      "--control-lg",
      "--control-md",
      "--control-sm",
      "--danger-100",
      "--danger-500",
      "--dur-base",
      "--dur-fast",
      "--dur-slow",
      "--ease-out",
      "--ease-standard",
      "--font-body",
      "--font-display",
      "--fs-body",
      "--fs-body-lg",
      "--fs-body-sm",
      "--fs-caption",
      "--fs-display-2xl",
      "--fs-display-lg",
      "--fs-display-xl",
      "--fs-h1",
      "--fs-h2",
      "--fs-h3",
      "--fs-h4",
      "--fs-micro",
      "--fw-black",
      "--fw-bold",
      "--fw-extrabold",
      "--fw-medium",
      "--fw-regular",
      "--fw-semibold",
      "--gray-100",
      "--gray-200",
      "--gray-300",
      "--gray-400",
      "--gray-50",
      "--gray-500",
      "--gray-600",
      "--gray-700",
      "--gray-800",
      "--gray-900",
      "--info-500",
      "--lh-normal",
      "--lh-relaxed",
      "--lh-snug",
      "--lh-tight",
      "--ls-normal",
      "--ls-tight",
      "--ls-wide",
      "--ls-wider",
      "--navy-100",
      "--navy-200",
      "--navy-300",
      "--navy-400",
      "--navy-50",
      "--navy-500",
      "--navy-600",
      "--navy-700",
      "--navy-800",
      "--navy-900",
      "--orange-100",
      "--orange-500",
      "--orange-600",
      "--price-sale",
      "--radius-lg",
      "--radius-md",
      "--radius-none",
      "--radius-pill",
      "--radius-sm",
      "--sale-500",
      "--shadow-accent-focus",
      "--shadow-focus",
      "--shadow-lg",
      "--shadow-md",
      "--shadow-sm",
      "--shadow-xs",
      "--space-0",
      "--space-1",
      "--space-10",
      "--space-12",
      "--space-16",
      "--space-2",
      "--space-20",
      "--space-24",
      "--space-3",
      "--space-32",
      "--space-4",
      "--space-5",
      "--space-6",
      "--space-8",
      "--success-100",
      "--success-500",
      "--surface-card",
      "--surface-inverse",
      "--surface-inverse-deep",
      "--surface-page",
      "--surface-subtle",
      "--text-body",
      "--text-inverse",
      "--text-link",
      "--text-link-hover",
      "--text-muted",
      "--text-on-accent",
      "--text-strong",
      "--white",
      "--yellow-100",
      "--yellow-300",
      "--yellow-400",
      "--yellow-500",
      "--yellow-600"
    ],
    "tokenKinds": {
      "--navy-900": "color",
      "--navy-800": "color",
      "--navy-700": "color",
      "--navy-600": "color",
      "--navy-500": "color",
      "--navy-400": "color",
      "--navy-300": "color",
      "--navy-200": "color",
      "--navy-100": "color",
      "--navy-50": "color",
      "--yellow-600": "color",
      "--yellow-500": "color",
      "--yellow-400": "color",
      "--yellow-300": "color",
      "--yellow-100": "color",
      "--orange-600": "color",
      "--orange-500": "color",
      "--orange-100": "color",
      "--white": "color",
      "--gray-50": "color",
      "--gray-100": "color",
      "--gray-200": "color",
      "--gray-300": "color",
      "--gray-400": "color",
      "--gray-500": "color",
      "--gray-600": "color",
      "--gray-700": "color",
      "--gray-800": "color",
      "--gray-900": "color",
      "--black": "color",
      "--success-500": "color",
      "--success-100": "color",
      "--danger-500": "color",
      "--danger-100": "color",
      "--info-500": "color",
      "--sale-500": "color",
      "--brand-primary": "color",
      "--brand-primary-hover": "color",
      "--brand-secondary": "color",
      "--brand-accent": "color",
      "--brand-accent-hover": "color",
      "--text-strong": "font",
      "--text-body": "font",
      "--text-muted": "font",
      "--text-inverse": "font",
      "--text-on-accent": "font",
      "--text-link": "font",
      "--text-link-hover": "font",
      "--surface-page": "color",
      "--surface-subtle": "color",
      "--surface-card": "color",
      "--surface-inverse": "color",
      "--surface-inverse-deep": "color",
      "--border-subtle": "color",
      "--border-default": "color",
      "--border-strong": "color",
      "--border-focus": "color",
      "--price-sale": "color",
      "--badge-hivis-bg": "color",
      "--badge-hivis-text": "font",
      "--badge-new-bg": "color",
      "--badge-new-text": "font",
      "--font-display": "font",
      "--font-body": "font",
      "--fw-regular": "font",
      "--fw-medium": "font",
      "--fw-semibold": "font",
      "--fw-bold": "font",
      "--fw-extrabold": "font",
      "--fw-black": "font",
      "--fs-display-2xl": "spacing",
      "--fs-display-xl": "spacing",
      "--fs-display-lg": "spacing",
      "--fs-h1": "spacing",
      "--fs-h2": "spacing",
      "--fs-h3": "spacing",
      "--fs-h4": "spacing",
      "--fs-body-lg": "spacing",
      "--fs-body": "spacing",
      "--fs-body-sm": "spacing",
      "--fs-caption": "spacing",
      "--fs-micro": "spacing",
      "--lh-tight": "font",
      "--lh-snug": "font",
      "--lh-normal": "font",
      "--lh-relaxed": "font",
      "--ls-tight": "font",
      "--ls-normal": "font",
      "--ls-wide": "font",
      "--ls-wider": "font",
      "--space-0": "spacing",
      "--space-1": "spacing",
      "--space-2": "spacing",
      "--space-3": "spacing",
      "--space-4": "spacing",
      "--space-5": "spacing",
      "--space-6": "spacing",
      "--space-8": "spacing",
      "--space-10": "spacing",
      "--space-12": "spacing",
      "--space-16": "spacing",
      "--space-20": "spacing",
      "--space-24": "spacing",
      "--space-32": "spacing",
      "--radius-none": "radius",
      "--radius-sm": "radius",
      "--radius-md": "radius",
      "--radius-lg": "radius",
      "--radius-pill": "radius",
      "--container-max": "spacing",
      "--container-pad": "spacing",
      "--control-sm": "spacing",
      "--control-md": "spacing",
      "--control-lg": "spacing",
      "--shadow-xs": "shadow",
      "--shadow-sm": "shadow",
      "--shadow-md": "shadow",
      "--shadow-lg": "shadow",
      "--shadow-focus": "shadow",
      "--shadow-accent-focus": "shadow",
      "--border-width": "other",
      "--border-width-strong": "other",
      "--ease-standard": "other",
      "--ease-out": "other",
      "--dur-fast": "other",
      "--dur-base": "other",
      "--dur-slow": "other"
    },
    "fontFamilies": [
      "Montserrat",
      "Mulish"
    ]
  }
}