fix: Switch Animation In Safari

[ghost]

Closes #525

📝 Description

Add a brief description

⛳️ Current behavior (updates)

Please describe the current behavior that you are modifying

Switch circle is shaking when we off switch

🚀 New behavior

Please describe the behavior or changes this PR adds

💣 Is this a breaking change (Yes/No): No

📝 Additional Information

Shaking bug is solved but there is some lag because width animation is very heavy.
It's fine at Chrome but it seems Safari cannot process this kind of animation well.

Option1:
So I would like to suggest to remove width animation in active state.

Option2:
Or if you want to maintain current interaction.
We can change prop checked to css &:checked + .circle.

[ghost]

@jrgarciadev I apply option2 so we can maintain existing interactions with no lag or shaking bug

[jrgarciadev]

Hey @TroyTae thank you so much, I'll check this out as soon as possible 🙏🏻

[codecov-commenter]

Codecov Report

Merging #553 (f71e7f4) into main (8eff522) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             main     #553   +/-   ##
=======================================
  Coverage   74.82%   74.82%           
=======================================
  Files         200      200           
  Lines        3098     3098           
  Branches      956      956           
=======================================
  Hits         2318     2318           
  Misses        765      765           
  Partials       15       15           

Impacted Files	Coverage Δ
packages/react/src/switch/switch.tsx	93.93% <ø> (ø)
packages/react/src/switch/switch.styles.ts	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8eff522...f71e7f4. Read the comment docs.

[jrgarciadev]

Hey @TroyTae 🙌🏼, could you please fix the conflicts and format the code with the new eslint rules?

[ghost]

@jrgarciadev I finished to fix conflicts and apply new eslint rules!

But two commits were included in this PR because I merged from main not next branch.
Is it okay? If not, I'll create new PR based on next branch.

[jrgarciadev]

Hey @TroyTae thank you, I going to check it out, regarding which branch you should use before sending a PR, it depends on the change, if your changes don't include package/react changes, you can send the PR based on the main branch otherwise you should use the next branch because is the branch that we use for the next release

[jrgarciadev]

Hey, @TroyTae sorry, I updated the next branch with the latest main changes, could you please update the PR?

[ghost]

@jrgarciadev Done! Thank you for updating :)

[jrgarciadev]

Hey @TroyTae could you please remove the circle translation on the non-animated Switch?

Here's the issue:
https://user-images.githubusercontent.com/30373425/179251376-c1e0b8c3-9ada-426e-a596-4b214f4732f4.mov

[ghost]

@jrgarciadev Thank you I just finished to fix it 👍

[jrgarciadev]

Thank you so much @TroyTae 🙏🏻