{
  "summary": {
    "generatedAt": "2026-05-20T04:17:41.955Z",
    "total": 2194,
    "byBucket": {
      "audit-noise": 481,
      "real-drift": 146,
      "strategy-gap": 288,
      "figma-drift": 230,
      "unclassified": 1049
    },
    "byReason": {
      "unclassified": 1049,
      "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color": 288,
      "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding": 224,
      "size-mode-mismatch-intrinsic: code uses 100%": 152,
      "converged-finding: 100.0% of same selector/property share 300": 144,
      "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration": 101,
      "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric": 95,
      "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration": 50,
      "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8": 14,
      "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8": 14,
      "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5": 13,
      "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5": 13,
      "size-mode-mismatch-intrinsic: code uses auto": 10,
      "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-disabled": 6,
      "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-10": 5,
      "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-13": 4,
      "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-heading": 3,
      "converged-finding: 100.0% of same selector/property share 200": 2,
      "missing-status-token-declaration: Figma uses --blue but audit found no matching code declaration": 2,
      "missing-status-token-declaration: Figma uses --orange but audit found no matching code declaration": 2,
      "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-white": 1,
      "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-4": 1,
      "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-4": 1
    },
    "byCategoryBucket": [
      {
        "category": "color-token-mismatch",
        "audit-noise": 0,
        "real-drift": 0,
        "strategy-gap": 0,
        "figma-drift": 75,
        "unclassified": 405
      },
      {
        "category": "color-token-missing",
        "audit-noise": 0,
        "real-drift": 0,
        "strategy-gap": 0,
        "figma-drift": 155,
        "unclassified": 200
      },
      {
        "category": "opacity-drift",
        "audit-noise": 0,
        "real-drift": 0,
        "strategy-gap": 288,
        "figma-drift": 0,
        "unclassified": 0
      },
      {
        "category": "padding-drift",
        "audit-noise": 224,
        "real-drift": 0,
        "strategy-gap": 0,
        "figma-drift": 0,
        "unclassified": 0
      },
      {
        "category": "size-drift",
        "audit-noise": 95,
        "real-drift": 146,
        "strategy-gap": 0,
        "figma-drift": 0,
        "unclassified": 444
      },
      {
        "category": "size-mode-mismatch",
        "audit-noise": 162,
        "real-drift": 0,
        "strategy-gap": 0,
        "figma-drift": 0,
        "unclassified": 0
      }
    ]
  },
  "source": {
    "auditJson": "figma-data/normalized/component-attributes.audit.json",
    "checkedAt": "2026-05-20T04:17:36.612Z",
    "auditNonAllowlistedFindings": 2194
  },
  "findings": [
    {
      "index": 0,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Multi",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "background",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "expectedCodeCssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": {
        "cssVar": "--brand-match",
        "value": "var(--brand-match)",
        "resolvedHex": {
          "--brand-match": {
            "dark": "#0b2b13"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-10"
    },
    {
      "index": 1,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Multi",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 480
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 240,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Multi",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 160
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 146,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 3,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Radio",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 480
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 240,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 4,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Radio",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 160
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 146,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 5,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Multi",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 482
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 242,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 6,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Multi",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 160
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 146,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 7,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Radio",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 482
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 242,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 8,
      "component": "Drop down List/Cascading",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Radio",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 160
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 146,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 9,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "dark": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-disabled"
    },
    {
      "index": 10,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=Yes",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "dark": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-disabled"
    },
    {
      "index": 11,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "dark": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-disabled"
    },
    {
      "index": 12,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-heading",
        "expectedCodeCssVar": "--text-heading",
        "hex": "#000000",
        "figmaName": "Color Type/Text/Heading & Button"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "dark": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-heading"
    },
    {
      "index": 13,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-heading",
        "expectedCodeCssVar": "--text-heading",
        "hex": "#000000",
        "figmaName": "Color Type/Text/Heading & Button"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "dark": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-heading"
    },
    {
      "index": 14,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Selected, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-heading",
        "expectedCodeCssVar": "--text-heading",
        "hex": "#000000",
        "figmaName": "Color Type/Text/Heading & Button"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "dark": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-heading"
    },
    {
      "index": 15,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--brand-hover",
        "expectedCodeCssVar": "--brand-hover",
        "hex": "#41c760",
        "figmaName": "UX/Brand/Hover"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "dark": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 16,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--brand-hover",
        "expectedCodeCssVar": "--brand-hover",
        "hex": "#00ac39",
        "figmaName": "UX/Brand/Hover"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "dark": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 17,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-13"
    },
    {
      "index": 18,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-13"
    },
    {
      "index": 19,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-disabled"
    },
    {
      "index": 20,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=Yes",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-disabled"
    },
    {
      "index": 21,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-13"
    },
    {
      "index": 22,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-13"
    },
    {
      "index": 23,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-disabled"
    },
    {
      "index": 24,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--brand-disable",
        "expectedCodeCssVar": "--brand-disable",
        "hex": "#8fcc9d",
        "figmaName": "UX/Brand/Disable"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 25,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 26,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 27,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 28,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 29,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 30,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 31,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 32,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 33,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 34,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 35,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 36,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 37,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 38,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 39,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 40,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 41,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 42,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 43,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 44,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 45,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 46,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 47,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 48,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 49,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 50,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 51,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 52,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 53,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 54,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 55,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 56,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Selected, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 57,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Selected, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 58,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Selected, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 59,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Selected, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 60,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 61,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 62,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 63,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 64,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 65,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 66,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 67,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 68,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 69,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 70,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 71,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 72,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 73,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 74,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 75,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 76,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 77,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 78,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 79,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 80,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 81,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 82,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 83,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 84,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 85,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 86,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 87,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 88,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 89,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 90,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 91,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 92,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 93,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 94,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 95,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 96,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 97,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 98,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 99,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 100,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 101,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 102,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 103,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=Yes, Active=Yes, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 104,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Selected, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 105,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Selected, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 106,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Selected, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=Yes",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 107,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Selected, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 108,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Multi",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 109,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Operation List",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 110,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Radio",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 111,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Sort By",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "background",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "expectedCodeCssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": {
        "cssVar": "--brand-match",
        "value": "var(--brand-match)",
        "resolvedHex": {
          "--brand-match": {
            "light": "#f1fbf3"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-white"
    },
    {
      "index": 112,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Multi",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "background",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "expectedCodeCssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": {
        "cssVar": "--brand-match",
        "value": "var(--brand-match)",
        "resolvedHex": {
          "--brand-match": {
            "dark": "#0b2b13"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-10"
    },
    {
      "index": 113,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Multi",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 114,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Operation List",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "background",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "expectedCodeCssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": {
        "cssVar": "--brand-match",
        "value": "var(--brand-match)",
        "resolvedHex": {
          "--brand-match": {
            "dark": "#0b2b13"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-10"
    },
    {
      "index": 115,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Operation List",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 116,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Radio",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "background",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "expectedCodeCssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": {
        "cssVar": "--brand-match",
        "value": "var(--brand-match)",
        "resolvedHex": {
          "--brand-match": {
            "dark": "#0b2b13"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-10"
    },
    {
      "index": 117,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Radio",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 118,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Sort By",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "background",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "expectedCodeCssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": {
        "cssVar": "--brand-match",
        "value": "var(--brand-match)",
        "resolvedHex": {
          "--brand-match": {
            "dark": "#0b2b13"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-10"
    },
    {
      "index": 119,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Multi",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 128
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 114,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 120,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Operation List",
      "selector": ".dropdown-select--operation-list",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 200
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 40,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 200"
    },
    {
      "index": 121,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Operation List",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 128
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 114,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 122,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Radio",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 128
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 114,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 123,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=off, Type=Sort By",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 160
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 146,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 124,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Multi",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 128
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 114,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 125,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Operation List",
      "selector": ".dropdown-select--operation-list",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 200
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 40,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 200"
    },
    {
      "index": 126,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Operation List",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 128
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 114,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 127,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Radio",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 128
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 114,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 128,
      "component": "Drop down List/Select",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Dark Theme=on, Type=Sort By",
      "selector": ".dropdown-item__check",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 160
      },
      "code": {
        "value": "14px",
        "px": 14,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 146,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric"
    },
    {
      "index": 129,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 130,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 131,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 132,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 133,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-2",
        "expectedCodeCssVar": "--text-2",
        "hex": "#444444",
        "figmaName": null
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 134,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 135,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 136,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 137,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 138,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 139,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 140,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 141,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 142,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 143,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 144,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 145,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 146,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 147,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 148,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 149,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 150,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 151,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 152,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 153,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 154,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 155,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 156,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 157,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 158,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 159,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 160,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 161,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-placeholder",
        "expectedCodeCssVar": "--text-placeholder",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Placeholder & Button"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 162,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-placeholder",
        "expectedCodeCssVar": "--text-placeholder",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Placeholder & Button"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 163,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 164,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 165,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 166,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 167,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-placeholder",
        "expectedCodeCssVar": "--text-placeholder",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Placeholder & Button"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 168,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-placeholder",
        "expectedCodeCssVar": "--text-placeholder",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Placeholder & Button"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 169,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 170,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 171,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 172,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 173,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-placeholder",
        "expectedCodeCssVar": "--text-placeholder",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Placeholder & Button"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 174,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-placeholder",
        "expectedCodeCssVar": "--text-placeholder",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Placeholder & Button"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 175,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 176,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 177,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 178,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 179,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-placeholder",
        "expectedCodeCssVar": "--text-placeholder",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Placeholder & Button"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 180,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-placeholder",
        "expectedCodeCssVar": "--text-placeholder",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Placeholder & Button"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 181,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 182,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 183,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 184,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 185,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "expectedCodeCssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 186,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "expectedCodeCssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 187,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 188,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 189,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 190,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 191,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "expectedCodeCssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 192,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "expectedCodeCssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 193,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 194,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 195,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 196,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 197,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "expectedCodeCssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 198,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "expectedCodeCssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 199,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 200,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 201,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 202,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 203,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "expectedCodeCssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 204,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "expectedCodeCssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 205,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 206,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 207,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 208,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 209,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 210,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 211,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 212,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 213,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 214,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 215,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 216,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 217,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 218,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 219,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 220,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 221,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 222,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 223,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 224,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 225,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 226,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 227,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 228,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 229,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 230,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 231,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 232,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 233,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 234,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 235,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 236,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 237,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 238,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 239,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 240,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 241,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 242,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 243,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 244,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 245,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 246,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 247,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 248,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 249,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 250,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 251,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 252,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 253,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 254,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 255,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 256,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 257,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 258,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 259,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 260,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 261,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 262,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 263,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 264,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 265,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 266,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 267,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 268,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 269,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 270,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 271,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 272,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 273,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 274,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 275,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 276,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 277,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 278,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 279,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 280,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 281,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 282,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 283,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 284,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 285,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 286,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 287,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 288,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 289,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 290,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 291,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 292,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 293,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 294,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 295,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 296,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 297,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 298,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 299,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 300,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 301,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 302,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 303,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 304,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 305,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 306,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 307,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 308,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 309,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 310,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 311,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 312,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 313,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 314,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 315,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 316,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 317,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 318,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 319,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 320,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 321,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 322,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 323,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 324,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 325,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 326,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 327,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 328,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 329,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 330,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 331,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 332,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 333,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 334,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 335,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 336,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 337,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 338,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 339,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 340,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 341,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 342,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 343,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 344,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 345,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 346,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 347,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 348,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 349,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 350,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 351,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 352,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 353,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 354,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 355,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 356,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 357,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 358,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 359,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 360,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 361,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 362,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 363,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 364,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 365,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 366,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 367,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 368,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 369,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 370,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 371,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 372,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 373,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 374,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 375,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 376,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 377,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 378,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 379,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 380,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 381,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 382,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 383,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 384,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 385,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 386,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 387,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 388,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 389,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 390,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 391,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 392,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 393,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 394,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 395,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 396,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 397,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 398,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 399,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 400,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 401,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 402,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 403,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 404,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 405,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 406,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 407,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 408,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 409,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 410,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 411,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 412,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 413,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 414,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 415,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 416,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 417,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 418,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 419,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 420,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 421,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 422,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 423,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 424,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 425,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 426,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 427,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 428,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 429,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 430,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 431,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 432,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 433,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 434,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 435,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 436,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 437,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 438,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 439,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 440,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 441,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 442,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 443,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 444,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 445,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 446,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 447,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 448,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 449,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 450,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 451,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 452,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 453,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 454,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 455,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 456,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 457,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 458,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 459,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 460,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 461,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 462,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 463,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 464,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 465,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 466,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 467,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 468,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 469,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 470,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 471,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 472,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 473,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 474,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 475,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 476,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 477,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 478,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 479,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 480,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 481,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 482,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 483,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 484,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 485,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 486,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 487,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 488,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 489,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 490,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 491,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 492,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 493,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 494,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 495,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 496,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 497,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 498,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 499,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 500,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 501,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 502,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 503,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 504,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 505,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 506,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 507,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 508,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 509,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 510,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 511,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 512,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 513,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 514,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 515,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 516,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 517,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 518,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 519,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 520,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 521,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 522,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 523,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 524,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 525,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 526,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 527,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 528,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 529,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 530,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 531,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 532,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 533,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 534,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 535,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 536,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 537,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 538,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 539,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 540,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 541,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 542,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 543,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 544,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 545,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 546,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 547,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 548,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 549,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 550,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 551,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 552,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 553,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 554,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 555,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 556,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 557,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 558,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 559,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 560,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 561,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 562,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 563,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 564,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 565,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 566,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 567,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 568,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 569,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 570,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 571,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 572,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 573,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 574,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 575,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 576,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 577,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 578,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 579,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 580,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 581,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 582,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 583,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 584,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 585,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 586,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 587,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 588,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 589,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 590,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 591,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 592,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 593,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 594,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 595,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 596,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 597,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 598,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 599,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 600,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 601,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 602,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 603,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 604,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 605,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 606,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 607,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 608,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 609,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 610,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 611,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 612,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 613,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 614,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 615,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 616,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 617,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 618,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 619,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 620,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 621,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 622,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 623,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 624,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 625,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 626,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 627,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 628,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 629,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 630,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 631,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 632,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 633,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 634,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 635,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 636,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 637,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 638,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 639,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 640,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 641,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 642,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 643,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 644,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 645,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 646,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 647,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 648,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 649,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 650,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 651,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 652,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-wrap--feature-clear :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-right",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "30px",
        "px": 30,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 18,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 653,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 654,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 655,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 656,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap--feature :deep(.tvu-input)",
      "category": "padding-drift",
      "property": "padding-left",
      "figma": {
        "value": 12
      },
      "code": {
        "value": "32px",
        "px": 32,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding"
    },
    {
      "index": 657,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 658,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 659,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 660,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 661,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 662,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 663,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 664,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 665,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 666,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 667,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 668,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 669,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 670,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 671,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 672,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 673,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 674,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 675,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 676,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 677,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 678,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 679,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 680,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 681,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 682,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 683,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 684,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 685,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 686,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 687,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 688,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 689,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 690,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 691,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 692,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 693,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 694,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 695,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 696,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 697,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 698,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 699,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 700,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 701,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 702,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 703,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 704,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 705,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 706,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 707,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 708,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 709,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 710,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 711,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 712,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 713,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 714,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 715,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 716,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 717,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 718,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 719,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 720,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 721,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 722,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 723,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 724,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 725,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 726,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 727,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 728,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 729,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 730,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 731,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 732,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 733,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 734,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 735,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 736,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 737,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 738,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 739,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 740,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 741,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 742,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 743,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 744,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 745,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 746,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 747,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 748,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 749,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 750,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 751,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 752,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 753,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 754,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 755,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 756,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 757,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 758,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 759,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 760,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 761,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 762,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 763,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 764,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 765,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 766,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 767,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 768,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 769,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 770,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 771,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 772,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 773,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 774,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 775,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 776,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 777,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 778,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 779,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 780,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 781,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 782,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 783,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 784,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 785,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 786,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 787,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 788,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 789,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 790,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 791,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 792,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 793,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 794,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 795,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 796,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 797,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 798,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 799,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 288,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 800,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 801,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 802,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 32
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 20,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 803,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 804,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-clear-icon :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 100
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": 88,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 805,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 806,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 807,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 808,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 809,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 810,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 811,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 812,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 813,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 814,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 815,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 816,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 817,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 818,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 819,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 820,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 821,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 822,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 823,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 824,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 825,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 826,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 827,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 828,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 829,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 830,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 831,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 832,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 833,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 834,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 835,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 836,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 837,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 838,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 839,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 840,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 841,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 842,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 843,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 844,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 845,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 846,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 847,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 848,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 849,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 850,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 851,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 852,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 853,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 854,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 855,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 856,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 857,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 858,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 859,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 860,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 861,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 862,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 863,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 864,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 865,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 866,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 867,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 868,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 869,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 870,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 871,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 872,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 873,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 874,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 875,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 876,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 877,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 878,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 879,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 880,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 881,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 882,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 883,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 884,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 885,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 886,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 887,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 888,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 889,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 890,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 891,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 892,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 893,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 894,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 895,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 896,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 897,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 898,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 899,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 900,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 901,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 902,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 903,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 904,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 905,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 906,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 907,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 908,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 909,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 910,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 911,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 912,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 913,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 914,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 915,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 916,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 917,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 918,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 919,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 920,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 921,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 922,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 923,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 924,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 925,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 926,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 927,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 928,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 929,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 930,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 931,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 932,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 933,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 934,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 935,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 936,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 937,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 938,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 939,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 940,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 941,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 942,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 943,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 944,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 945,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 946,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 947,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 948,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 949,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 950,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 951,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 952,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 953,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 954,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 955,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 956,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 957,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 958,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 959,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 960,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 961,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 962,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 963,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 964,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 965,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 966,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 967,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 968,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 969,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 970,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 971,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 972,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 973,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 974,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 975,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 976,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 977,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 978,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 979,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 980,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 981,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 982,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 983,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 984,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 985,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 986,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 987,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 988,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 989,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 990,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 991,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 992,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 993,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 994,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 995,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 996,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 997,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 998,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 999,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1000,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1001,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1002,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1003,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1004,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1005,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1006,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1007,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1008,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1009,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1010,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1011,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1012,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1013,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1014,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1015,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1016,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1017,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1018,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1019,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1020,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1021,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1022,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1023,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1024,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1025,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1026,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1027,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1028,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1029,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1030,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1031,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1032,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1033,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1034,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1035,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1036,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1037,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1038,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1039,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1040,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1041,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1042,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1043,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1044,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1045,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1046,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1047,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1048,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1049,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1050,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1051,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1052,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1053,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1054,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1055,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1056,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1057,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1058,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1059,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1060,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1061,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1062,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1063,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1064,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1065,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1066,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1067,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1068,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1069,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1070,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1071,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1072,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1073,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1074,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1075,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1076,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1077,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1078,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1079,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1080,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1081,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1082,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1083,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1084,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1085,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1086,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1087,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1088,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1089,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1090,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1091,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1092,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1093,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1094,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1095,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1096,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1097,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1098,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1099,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1100,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1101,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1102,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1103,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1104,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1105,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1106,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1107,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1108,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1109,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1110,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1111,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1112,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1113,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1114,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1115,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1116,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1117,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1118,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1119,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1120,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1121,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1122,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1123,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1124,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1125,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1126,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1127,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1128,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1129,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1130,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1131,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1132,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1133,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1134,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1135,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1136,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1137,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1138,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1139,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1140,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1141,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1142,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1143,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1144,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1145,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1146,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1147,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1148,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1149,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1150,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1151,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1152,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1153,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1154,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1155,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1156,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1157,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1158,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1159,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1160,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1161,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1162,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1163,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1164,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1165,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1166,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1167,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1168,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1169,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1170,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1171,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1172,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1173,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1174,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1175,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1176,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1177,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1178,
      "component": "select box/filled",
      "codePath": "src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1179,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1180,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1181,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1182,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1183,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1184,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1185,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1186,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1187,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1188,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1189,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1190,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1191,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1192,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1193,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1194,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1195,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1196,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1197,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1198,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1199,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1200,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1201,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1202,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1203,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1204,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1205,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1206,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1207,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1208,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1209,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1210,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1211,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1212,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1213,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1214,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1215,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "light": "#141414"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1216,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1217,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1218,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1219,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-4",
        "expectedCodeCssVar": "--color-grey-4",
        "hex": "#dbdbdb",
        "figmaName": "UX/Grey/grey-4 #DBDBDB"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-4"
    },
    {
      "index": 1220,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1221,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-4",
        "expectedCodeCssVar": "--color-grey-4",
        "hex": "#dbdbdb",
        "figmaName": "UX/Grey/grey-4 #DBDBDB"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-4"
    },
    {
      "index": 1222,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1223,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1224,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1225,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1226,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1227,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1228,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=date",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1229,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1230,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=time",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1231,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1232,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1233,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1234,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1235,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1236,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1237,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1238,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "light": "#dc2717"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5"
    },
    {
      "index": 1239,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1240,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=date",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1241,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1242,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=time",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "expectedCodeCssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "light": "#299f45"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5"
    },
    {
      "index": 1243,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1244,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1245,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1246,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1247,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1248,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1249,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "expectedCodeCssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1250,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1251,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1252,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1253,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1254,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1255,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1256,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1257,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1258,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1259,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1260,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1261,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1262,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1263,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1264,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1265,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1266,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1267,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1268,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1269,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1270,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1271,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1272,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1273,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1274,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1275,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1276,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1277,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1278,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1279,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1280,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1281,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1282,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=date",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1283,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=default",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1284,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=time",
      "selector": ".dropdown-item",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-7",
        "expectedCodeCssVar": "--color-grey-7",
        "hex": "#7b7b7b",
        "figmaName": "UX/Grey/grey-7 #7B7B7B"
      },
      "code": {
        "cssVar": "--text-body",
        "value": "var(--text-body)",
        "resolvedHex": {
          "--text-body": {
            "dark": "#f8f8f8"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1285,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1286,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1287,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1288,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1289,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1290,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1291,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1292,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1293,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1294,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1295,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1296,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1297,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=date",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1298,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1299,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=time",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1300,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1301,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1302,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1303,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1304,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1305,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1306,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1307,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-wrap--error .select-trigger",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--red",
        "value": "var(--red)",
        "resolvedHex": {
          "--red": {
            "dark": "#ea4233"
          }
        },
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8"
    },
    {
      "index": 1308,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1309,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=date",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1310,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=default",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1311,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=time",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--brand",
        "value": "var(--brand)",
        "resolvedHex": {
          "--brand": {
            "dark": "#2fb54e"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8"
    },
    {
      "index": 1312,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1313,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1314,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1315,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1316,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1317,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1318,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "expectedCodeCssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "non-equivalent",
      "equivalentThemes": "none",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1319,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1320,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1321,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1322,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1323,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1324,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1325,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1326,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1327,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1328,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1329,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1330,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1331,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1332,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1333,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1334,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1335,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1336,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1337,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1338,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1339,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1340,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1341,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1342,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1343,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1344,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1345,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1346,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1347,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1348,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1349,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1350,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1351,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1352,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1353,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1354,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1355,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1356,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1357,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1358,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1359,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1360,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1361,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1362,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1363,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1364,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1365,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1366,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1367,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1368,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1369,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1370,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1371,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1372,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1373,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1374,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1375,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1376,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1377,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1378,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1379,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1380,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1381,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1382,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1383,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1384,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1385,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1386,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1387,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1388,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1389,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1390,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1391,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1392,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1393,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1394,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1395,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1396,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1397,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1398,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1399,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1400,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1401,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1402,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1403,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1404,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1405,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1406,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1407,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1408,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1409,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1410,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1411,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1412,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1413,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1414,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1415,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1416,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1417,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1418,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1419,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1420,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1421,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1422,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1423,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1424,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1425,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1426,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1427,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1428,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1429,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1430,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1431,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1432,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1433,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1434,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1435,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1436,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1437,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1438,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1439,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1440,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1441,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1442,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1443,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1444,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1445,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1446,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1447,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1448,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1449,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1450,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1451,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1452,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1453,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1454,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1455,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1456,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1457,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1458,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1459,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1460,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=date",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1461,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=default",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1462,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=time",
      "selector": ".select-trigger:disabled",
      "category": "opacity-drift",
      "property": "opacity",
      "figma": {
        "value": 1
      },
      "code": {
        "value": "0.4",
        "px": 0.4,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 0.6,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "strategy-gap",
      "bucketReason": "opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color"
    },
    {
      "index": 1463,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1464,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1465,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1466,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1467,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1468,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1469,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1470,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1471,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1472,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1473,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1474,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1475,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1476,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1477,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1478,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1479,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1480,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1481,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1482,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1483,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1484,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1485,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1486,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1487,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1488,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1489,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1490,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1491,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1492,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1493,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1494,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1495,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1496,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1497,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1498,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1499,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1500,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1501,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1502,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1503,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1504,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1505,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1506,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1507,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1508,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1509,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1510,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1511,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1512,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1513,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1514,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1515,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1516,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1517,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1518,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1519,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1520,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1521,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1522,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1523,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1524,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1525,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1526,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1527,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1528,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1529,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1530,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1531,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1532,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1533,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1534,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1535,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1536,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1537,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1538,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1539,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1540,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1541,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1542,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1543,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1544,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1545,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1546,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1547,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1548,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1549,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1550,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1551,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1552,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1553,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1554,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1555,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1556,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1557,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1558,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1559,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1560,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1561,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1562,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1563,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1564,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1565,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1566,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1567,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1568,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1569,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1570,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1571,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1572,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1573,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1574,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=multi select, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1575,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1576,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1577,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1578,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1579,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1580,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1581,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1582,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1583,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1584,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1585,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1586,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1587,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1588,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1589,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1590,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1591,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1592,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1593,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1594,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=editable, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1595,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1596,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1597,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1598,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1599,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1600,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1601,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1602,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=date",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1603,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1604,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=default",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1605,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".dropdown-select",
      "category": "size-drift",
      "property": "width",
      "figma": {
        "value": 300
      },
      "code": {
        "value": "240px",
        "px": 240,
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "delta": 60,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "real-drift",
      "bucketReason": "converged-finding: 100.0% of same selector/property share 300"
    },
    {
      "index": 1606,
      "component": "select box/line",
      "codePath": "src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue, src/canonical/DropDownListSelect.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=time",
      "selector": ".select-clear :deep(svg)",
      "category": "size-drift",
      "property": "height",
      "figma": {
        "value": 40
      },
      "code": {
        "value": "12px",
        "px": 12,
        "sourcePath": "src/canonical/SelectBoxBase.vue"
      },
      "delta": 28,
      "severity": "blocker",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1607,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Circle, Color=Blue, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--blue",
        "hex": "#3892f3",
        "figmaName": "UX/Blue/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --blue but audit found no matching code declaration"
    },
    {
      "index": 1608,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Circle, Color=Green, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1609,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Circle, Color=Neutral, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1610,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Circle, Color=Orange, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--orange",
        "hex": "#f68512",
        "figmaName": "UX/Orange/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --orange but audit found no matching code declaration"
    },
    {
      "index": 1611,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Circle, Color=Red, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1612,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Blue, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--blue",
        "hex": "#3892f3",
        "figmaName": "UX/Blue/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --blue but audit found no matching code declaration"
    },
    {
      "index": 1613,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Green, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1614,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Neutral, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1615,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Orange, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--orange",
        "hex": "#f68512",
        "figmaName": "UX/Orange/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --orange but audit found no matching code declaration"
    },
    {
      "index": 1616,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Red, Tag=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1617,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Blue, Tag=Filled",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 58
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1618,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Blue, Tag=Line",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 58
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1619,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Green, Tag=Filled",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 52
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1620,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Green, Tag=Line",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 52
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1621,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Neutral, Tag=Filled",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 48
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1622,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Neutral, Tag=Line",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 48
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1623,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Orange, Tag=Filled",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 52
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1624,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Orange, Tag=Line",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 52
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1625,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Red, Tag=Filled",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 50
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1626,
      "component": "Badge",
      "codePath": "src/canonical/Badge.vue",
      "variant": "Type=Rectangle, Color=Red, Tag=Line",
      "selector": ".canonical-badge--rectangle",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 50
      },
      "code": {
        "value": "auto",
        "px": null,
        "sourcePath": "src/canonical/Badge.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses auto"
    },
    {
      "index": 1627,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1628,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1629,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1630,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1631,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1632,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1633,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1634,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1635,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1636,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1637,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1638,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1639,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1640,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1641,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1642,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1643,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1644,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1645,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1646,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1647,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1648,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1649,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1650,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1651,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1652,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1653,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1654,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1655,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1656,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1657,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1658,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1659,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1660,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1661,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1662,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1663,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1664,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1665,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1666,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1667,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1668,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1669,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1670,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1671,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1672,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1673,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1674,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1675,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1676,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1677,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1678,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1679,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1680,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1681,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1682,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1683,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1684,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1685,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1686,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1687,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1688,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1689,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1690,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1691,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1692,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1693,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1694,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1695,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1696,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1697,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1698,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1699,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1700,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1701,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1702,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1703,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1704,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1705,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1706,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1707,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1708,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1709,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1710,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1711,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1712,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1713,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1714,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1715,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1716,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1717,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1718,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1719,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1720,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1721,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1722,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1723,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1724,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1725,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1726,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1727,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1728,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1729,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1730,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1731,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1732,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1733,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1734,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1735,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1736,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1737,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1738,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1739,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1740,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1741,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1742,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1743,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1744,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-white",
        "hex": "#ffffff",
        "figmaName": "UX/Grey/grey-1 #FFFFFF"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1745,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1746,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1747,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1748,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1749,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1750,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1751,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1752,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1753,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1754,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1755,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1756,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1757,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1758,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1759,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1760,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1761,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1762,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1763,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1764,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1765,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1766,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1767,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1768,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1769,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1770,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1771,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1772,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1773,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1774,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1775,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1776,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1777,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1778,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1779,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1780,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1781,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1782,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1783,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1784,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1785,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1786,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1787,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1788,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1789,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1790,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1791,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1792,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1793,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1794,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1795,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1796,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1797,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1798,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1799,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1800,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1801,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1802,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1803,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1804,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1805,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1806,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1807,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1808,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1809,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1810,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1811,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1812,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1813,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1814,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1815,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1816,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1817,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1818,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1819,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1820,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1821,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1822,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1823,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1824,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1825,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1826,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1827,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1828,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1829,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1830,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1831,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1832,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1833,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1834,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1835,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1836,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-10",
        "hex": "#353535",
        "figmaName": "UX/Grey/grey-10 #353535"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1837,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1838,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1839,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1840,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1841,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1842,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1843,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1844,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1845,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1846,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1847,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1848,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1849,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1850,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1851,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1852,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1853,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1854,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1855,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1856,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1857,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1858,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1859,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1860,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1861,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1862,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1863,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1864,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1865,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1866,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1867,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1868,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1869,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1870,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1871,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1872,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1873,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1874,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1875,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1876,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1877,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1878,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1879,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1880,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1881,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1882,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1883,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1884,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1885,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1886,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1887,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1888,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1889,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1890,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1891,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1892,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1893,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1894,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1895,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1896,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1897,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1898,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1899,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1900,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1901,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1902,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1903,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1904,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1905,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1906,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1907,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1908,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1909,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1910,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1911,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1912,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1913,
      "component": "input box/filled",
      "codePath": "src/canonical/InputBoxFilled.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 1914,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1915,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1916,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1917,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1918,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1919,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1920,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1921,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1922,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1923,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1924,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1925,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1926,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1927,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1928,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1929,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1930,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1931,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1932,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1933,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1934,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1935,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1936,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1937,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-6",
        "expectedCodeCssVar": "--color-grey-6",
        "hex": "#9e9e9e",
        "figmaName": "UX/Grey/grey-6 #9E9E9E"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "light": "#595959"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1938,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1939,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1940,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1941,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1942,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-clear-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1943,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-feature-icon",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-8",
        "expectedCodeCssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": {
        "cssVar": "--text-tips",
        "value": "var(--text-tips)",
        "resolvedHex": {
          "--text-tips": {
            "dark": "#9e9e9e"
          }
        },
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "equivalence": "theme-asymmetric",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": false,
        "other": null
      },
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1944,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1945,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1946,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1947,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1948,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1949,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1950,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1951,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1952,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1953,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1954,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1955,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1956,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1957,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1958,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1959,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1960,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1961,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1962,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1963,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1964,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1965,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1966,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1967,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1968,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1969,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1970,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1971,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1972,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1973,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1974,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1975,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1976,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1977,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1978,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1979,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1980,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1981,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1982,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1983,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1984,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1985,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1986,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1987,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": "UX/Grey/grey-5 #CCCCCC"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 1988,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1989,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1990,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1991,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1992,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1993,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#dc2717",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 1994,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1995,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1996,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1997,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1998,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 1999,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#299f45",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2000,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2001,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2002,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2003,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2004,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2005,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2006,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2007,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2008,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2009,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2010,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2011,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2012,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2013,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2014,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2015,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2016,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2017,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2018,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2019,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2020,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2021,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2022,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2023,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2024,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2025,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2026,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2027,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2028,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2029,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2030,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2031,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2032,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2033,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2034,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2035,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2036,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2037,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2038,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2039,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2040,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2041,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2042,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2043,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2044,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2045,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2046,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2047,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2048,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2049,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--red",
        "hex": "#ea4233",
        "figmaName": "UX/Red/Default"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --red but audit found no matching code declaration"
    },
    {
      "index": 2050,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2051,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=L, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2052,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2053,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2054,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2055,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2056,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2057,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2058,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2059,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2060,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2061,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2062,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2063,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2064,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2065,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2066,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2067,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2068,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2069,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2070,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2071,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2072,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2073,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2074,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=Filled, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2075,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2076,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2077,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2078,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2079,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2080,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2081,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2082,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2083,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2084,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2085,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2086,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2087,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2088,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2089,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2090,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2091,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2092,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2093,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=off, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2094,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2095,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2096,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2097,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2098,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2099,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2100,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2101,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2102,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2103,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2104,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2105,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2106,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2107,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2108,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2109,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2110,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2111,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=default, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2112,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=Filled, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2113,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2114,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2115,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=off, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2116,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2117,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2118,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2119,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=click, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2120,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2121,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2122,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2123,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=default, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2124,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2125,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2126,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2127,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=error, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2128,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2129,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=M, feature=yes",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2130,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=no",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2131,
      "component": "input box/line",
      "codePath": "src/canonical/InputBoxLine.vue, src/canonical/InputBoxBase.vue",
      "variant": "dark theme=on, status=normal, enable=on, UX=hover, size=XL, feature=text count",
      "selector": ".input-wrap",
      "category": "size-mode-mismatch",
      "property": "width",
      "figma": {
        "value": 240
      },
      "code": {
        "value": "100%",
        "px": null,
        "sourcePath": "src/canonical/InputBoxBase.vue"
      },
      "delta": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "audit-noise",
      "bucketReason": "size-mode-mismatch-intrinsic: code uses 100%"
    },
    {
      "index": 2132,
      "component": "InputNumber",
      "codePath": "src/canonical/InputNumber.vue",
      "variant": "Property 1=Default",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2133,
      "component": "InputNumber",
      "codePath": "src/canonical/InputNumber.vue",
      "variant": "Property 1=Default",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2134,
      "component": "InputNumber",
      "codePath": "src/canonical/InputNumber.vue",
      "variant": "Property 1=Only Add",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2135,
      "component": "InputNumber",
      "codePath": "src/canonical/InputNumber.vue",
      "variant": "Property 1=Only Add",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2136,
      "component": "InputNumber",
      "codePath": "src/canonical/InputNumber.vue",
      "variant": "Property 1=Only Reduce",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2137,
      "component": "InputNumber",
      "codePath": "src/canonical/InputNumber.vue",
      "variant": "Property 1=Only Reduce",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2138,
      "component": "InputNumber",
      "codePath": "src/canonical/InputNumber.vue",
      "variant": "Property 1=Readonly",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2139,
      "component": "InputNumber",
      "codePath": "src/canonical/InputNumber.vue",
      "variant": "Property 1=Readonly",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-grey-dis",
        "hex": "#7b7b7b",
        "figmaName": "Color Type/Text/Disable Grey Button"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2140,
      "component": "Pagination",
      "codePath": "src/canonical/Pagination.vue",
      "variant": "Type=Classic",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-tips",
        "hex": "#9e9e9e",
        "figmaName": "Color Type/Text/Tips"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2141,
      "component": "Pagination",
      "codePath": "src/canonical/Pagination.vue",
      "variant": "Type=Simple",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-tips",
        "hex": "#9e9e9e",
        "figmaName": "Color Type/Text/Tips"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2142,
      "component": "Pagination",
      "codePath": "src/canonical/Pagination.vue",
      "variant": "Type=Small",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-tips",
        "hex": "#9e9e9e",
        "figmaName": "Color Type/Text/Tips"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2143,
      "component": "Popup Box",
      "codePath": "src/canonical/PopupBox.vue",
      "variant": "Theme=Dark",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-12",
        "hex": "#1f1f1f",
        "figmaName": "UX/Grey/grey-12 #1F1F1F"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2144,
      "component": "Popup Box",
      "codePath": "src/canonical/PopupBox.vue",
      "variant": "Theme=Dark",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-8",
        "hex": "#595959",
        "figmaName": "UX/Grey/grey-8 #595959"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2145,
      "component": "Popup Box",
      "codePath": "src/canonical/PopupBox.vue",
      "variant": "Theme=Dark",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2146,
      "component": "Popup Box",
      "codePath": "src/canonical/PopupBox.vue",
      "variant": "Theme=Light",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--color-grey-2",
        "hex": "#f8f8f8",
        "figmaName": "UX/Grey/grey-2 #F8F8F8"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2147,
      "component": "Popup Box",
      "codePath": "src/canonical/PopupBox.vue",
      "variant": "Theme=Light",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--color-grey-3",
        "hex": "#f0f0f0",
        "figmaName": "UX/Grey/grey-3 #F0F0F0"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2148,
      "component": "Popup Box",
      "codePath": "src/canonical/PopupBox.vue",
      "variant": "Theme=Light",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-13",
        "hex": "#141414",
        "figmaName": "UX/Grey/grey-13 #141414"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2149,
      "component": "Slider",
      "codePath": "src/canonical/Slider.vue",
      "variant": "theme=dark, size=M",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": null
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2150,
      "component": "Slider",
      "codePath": "src/canonical/Slider.vue",
      "variant": "theme=dark, size=S",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": null
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2151,
      "component": "Slider",
      "codePath": "src/canonical/Slider.vue",
      "variant": "theme=light, size=M",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": null
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2152,
      "component": "Slider",
      "codePath": "src/canonical/Slider.vue",
      "variant": "theme=light, size=S",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--color-grey-5",
        "hex": "#cccccc",
        "figmaName": null
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2153,
      "component": "Tab List",
      "codePath": "src/canonical/TabList.vue",
      "variant": "Type=Filled",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--bg-layer2",
        "hex": "#1f1f1f",
        "figmaName": "Color Type/Background/Layer_2"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2154,
      "component": "Tab List",
      "codePath": "src/canonical/TabList.vue",
      "variant": "Type=Filled",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2155,
      "component": "Tab List",
      "codePath": "src/canonical/TabList.vue",
      "variant": "Type=Filled",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-primary-btn",
        "hex": "#ffffff",
        "figmaName": "Color Type/Text/Primary Button"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2156,
      "component": "Tab List",
      "codePath": "src/canonical/TabList.vue",
      "variant": "Type=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2157,
      "component": "Tab List",
      "codePath": "src/canonical/TabList.vue",
      "variant": "Type=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2158,
      "component": "Tab List",
      "codePath": "src/canonical/TabList.vue",
      "variant": "Type=Text",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2159,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Active, Property 2=Green, Type=Filled",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2160,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Active, Property 2=Green, Type=Filled",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-primary-btn",
        "hex": "#ffffff",
        "figmaName": "Color Type/Text/Primary Button"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2161,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Active, Property 2=Green, Type=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2162,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Active, Property 2=Green, Type=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--brand",
        "hex": "#2fb54e",
        "figmaName": "UX/Brand/Brand"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": "figma-drift",
      "bucketReason": "missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration"
    },
    {
      "index": 2163,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Active, Property 2=White, Type=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-light",
        "hex": "#434343",
        "figmaName": "Color Type/Line/Light Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2164,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Active, Property 2=White, Type=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2165,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Active, Property 2=White, Type=Text",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2166,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Normal, Property 2=White, Type=Filled",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--bg-layer4",
        "hex": "#353535",
        "figmaName": "Color Type/Background/Layer_4"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2167,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Normal, Property 2=White, Type=Filled",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-2",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Text_2"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2168,
      "component": "Tab/Item",
      "codePath": "src/canonical/Tab.vue, src/canonical/TabItem.vue",
      "variant": "Property 1=Normal, Property 2=White, Type=Line",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-tips",
        "hex": "#9e9e9e",
        "figmaName": "Color Type/Text/Tips"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2169,
      "component": "Table",
      "codePath": "src/canonical/Table.vue",
      "variant": "Type=Header, Align=Center",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-tips",
        "hex": "#9e9e9e",
        "figmaName": "Color Type/Text/Tips"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2170,
      "component": "Table",
      "codePath": "src/canonical/Table.vue",
      "variant": "Type=Header, Align=Left",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-tips",
        "hex": "#9e9e9e",
        "figmaName": "Color Type/Text/Tips"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2171,
      "component": "Table",
      "codePath": "src/canonical/Table.vue",
      "variant": "Type=Header, Align=Right",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-tips",
        "hex": "#9e9e9e",
        "figmaName": "Color Type/Text/Tips"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2172,
      "component": "Table",
      "codePath": "src/canonical/Table.vue",
      "variant": "Type=Tbody, Align=Center",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2173,
      "component": "Table",
      "codePath": "src/canonical/Table.vue",
      "variant": "Type=Tbody, Align=Left",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2174,
      "component": "Table",
      "codePath": "src/canonical/Table.vue",
      "variant": "Type=Tbody, Align=Right",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-body",
        "hex": "#f8f8f8",
        "figmaName": "Color Type/Text/Text_1"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2175,
      "component": "Top bar",
      "codePath": "src/canonical/TopBar.vue",
      "variant": "Tag=After Login",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--bg-topbar",
        "hex": "#000000",
        "figmaName": "Color Type/Background/Top Bar"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2176,
      "component": "Top bar",
      "codePath": "src/canonical/TopBar.vue",
      "variant": "Tag=After Login",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2177,
      "component": "Top bar",
      "codePath": "src/canonical/TopBar.vue",
      "variant": "Tag=After Login",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-heading",
        "hex": "#ffffff",
        "figmaName": "Color Type/Text/Heading & Button"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2178,
      "component": "Top bar",
      "codePath": "src/canonical/TopBar.vue",
      "variant": "Tag=Before Login",
      "selector": null,
      "category": "color-token-missing",
      "property": "background|background-color",
      "figma": {
        "role": "fill",
        "cssVar": "--bg-topbar",
        "hex": "#000000",
        "figmaName": "Color Type/Background/Top Bar"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2179,
      "component": "Top bar",
      "codePath": "src/canonical/TopBar.vue",
      "variant": "Tag=Before Login",
      "selector": null,
      "category": "color-token-missing",
      "property": "border-color",
      "figma": {
        "role": "stroke",
        "cssVar": "--line-deep",
        "hex": "#353535",
        "figmaName": "Color Type/Line/Deep Divider"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2180,
      "component": "Top bar",
      "codePath": "src/canonical/TopBar.vue",
      "variant": "Tag=Before Login",
      "selector": null,
      "category": "color-token-missing",
      "property": "color|fill",
      "figma": {
        "role": "text",
        "cssVar": "--text-heading",
        "hex": "#ffffff",
        "figmaName": "Color Type/Text/Heading & Button"
      },
      "code": null,
      "severity": "drift",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2181,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2182,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2183,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2184,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=Yes",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2185,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Dark, Type=Radio, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2186,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#595959",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "dark": "#595959"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "dark",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2187,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2188,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2189,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2190,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=Yes",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2191,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-heading",
        "expectedCodeCssVar": "--text-heading",
        "hex": "#ffffff",
        "figmaName": "Color Type/Text/Heading & Button"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2192,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Radio, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item--disabled",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-disabled",
        "expectedCodeCssVar": "--text-disabled",
        "hex": "#cccccc",
        "figmaName": "Color Type/Text/Disable"
      },
      "code": {
        "cssVar": "--control-disabled-text",
        "value": "var(--control-disabled-text)",
        "resolvedHex": {
          "--control-disabled-text": {
            "light": "#cccccc"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    },
    {
      "index": 2193,
      "component": "Drop down List/Item",
      "codePath": "src/canonical/DropDownListSelect.vue",
      "variant": "Theme=Light, Type=Selected, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No",
      "selector": ".dropdown-item__check--checked",
      "category": "color-token-mismatch",
      "property": "color",
      "figma": {
        "role": "text",
        "cssVar": "--text-heading",
        "expectedCodeCssVar": "--text-heading",
        "hex": "#ffffff",
        "figmaName": "Color Type/Text/Heading & Button"
      },
      "code": {
        "cssVar": "--text-primary-btn",
        "value": "var(--text-primary-btn)",
        "resolvedHex": {
          "--text-primary-btn": {
            "light": "#ffffff"
          }
        },
        "sourcePath": "src/canonical/DropDownListSelect.vue"
      },
      "equivalence": "name-drift",
      "equivalentThemes": "light",
      "hexMatch": {
        "active": true,
        "other": null
      },
      "severity": "info",
      "allowlisted": false,
      "allowlistRef": null,
      "triageBucket": null,
      "bucketReason": "unclassified"
    }
  ]
}