chore: 🤖 add mexican flag

[punkbit]

Why?

Add Mexican flag

How?

• Add new flag

Preview?

[changeset-bot]

🦋 Changeset detected

Latest commit: e0ae63a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Claude finished @punkbit's task in 1m 13s —— View job

---

PR Review: chore: 🤖 add mexican flag

• Gather context
• Read changed files
• Review implementation
• Post feedback

---

Nice addition! The overall structure matches the existing pattern — types.ts, FlagsDark.ts, FlagsLight.ts, and the changeset are all correctly updated. One real bug to fix before merging.

🚨 Must Fix

• Mexico.tsx — SVG ID collision: The <defs> block uses single-character IDs (id="a", id="b", id="c", id="d") which are document-global. When two flags (or any other SVG) are rendered simultaneously on the same page, the url(#a) references will resolve to whichever id="a" appears first in the DOM — causing incorrect clipping/gradients on Mexico or other components. All other flags use unique IDs (e.g. clip0_3880_11917, germanyFlagClipPath, netherlandsFlagClipPath). Please rename to something like mexicoFlagClipPath, mexicoFlagGradientB, etc. Fix this →

💡 Suggestions (non-blocking)

• Mexico.tsx — Missing import React and return type: Every other flag file imports React and annotates the return type as : React.ReactElement (e.g. Australia.tsx:4, Japan.tsx:4). With modern JSX transform the import is optional, but the return type annotation is a consistency win.

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-e1y9wbged-clickhouse.vercel.app

Built from commit: 1442b2f1ad5f8ddcfb9906fba40fb99110b21c02