@cas-smartdesign/design-tokens 2.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/base/_tokens.scss +401 -0
  2. package/dist/base/tokens.css +401 -0
  3. package/dist/base/tokens.d.ts +2 -0
  4. package/dist/base/tokens.d.ts.map +1 -0
  5. package/dist/base/tokens.json +6810 -0
  6. package/dist/dark/_tokens.scss +316 -0
  7. package/dist/dark/tokens.css +316 -0
  8. package/dist/dark/tokens.d.ts +2 -0
  9. package/dist/dark/tokens.d.ts.map +1 -0
  10. package/dist/dark/tokens.json +4103 -0
  11. package/dist/docs/assets/color-prominence-guide.svg +53 -0
  12. package/dist/docs/assets/color-role-guide.svg +65 -0
  13. package/dist/docs/assets/color-state-guide.svg +53 -0
  14. package/dist/docs/assets/color-type-guide.svg +58 -0
  15. package/dist/docs/assets/examples/buttons_default.svg +124 -0
  16. package/dist/docs/assets/examples/buttons_ghost.svg +119 -0
  17. package/dist/docs/assets/examples/buttons_outline.svg +142 -0
  18. package/dist/docs/assets/examples/buttons_standard.svg +129 -0
  19. package/dist/docs/assets/examples/checkbox_default.svg +106 -0
  20. package/dist/docs/assets/examples/content.svg +68 -0
  21. package/dist/docs/assets/examples/input_default-focus.svg +87 -0
  22. package/dist/docs/assets/examples/input_default.svg +46 -0
  23. package/dist/docs/assets/examples/input_disabled.svg +70 -0
  24. package/dist/docs/assets/examples/input_error.svg +48 -0
  25. package/dist/docs/assets/examples/input_warning.svg +46 -0
  26. package/dist/docs/assets/examples/list_item_navigation.svg +193 -0
  27. package/dist/docs/assets/examples/list_item_selection.svg +113 -0
  28. package/dist/docs/assets/examples/note.svg +160 -0
  29. package/dist/docs/assets/examples/segmented_button_group.svg +57 -0
  30. package/dist/docs/assets/examples/tag.svg +190 -0
  31. package/dist/docs/index.html +5317 -192
  32. package/dist/light/_tokens.scss +316 -0
  33. package/dist/light/tokens.css +316 -0
  34. package/dist/light/tokens.d.ts +2 -0
  35. package/dist/light/tokens.d.ts.map +1 -0
  36. package/dist/light/tokens.json +4103 -0
  37. package/dist/tokens.css +1033 -165
  38. package/dist/tokens.d.ts +2 -222
  39. package/dist/tokens.d.ts.map +1 -0
  40. package/npm-third-party-licenses.json +1 -1
  41. package/package.json +27 -5
  42. package/readme.md +7 -2
  43. package/dist/tokens.esm.js +0 -2189
  44. package/dist/tokens.json +0 -2993
  45. package/dist/tokens.scss +0 -494
package/dist/docs/assets/examples/buttons_outline.svg ADDED
@@ -0,0 +1,142 @@
1
+ <svg width="780" height="1164" viewBox="0 0 780 1164" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M40 56C40 47.1634 47.1634 40 56 40H724C732.837 40 740 47.1634 740 56V1108C740 1116.84 732.837 1124 724 1124H56C47.1634 1124 40 1116.84 40 1108V56Z" fill="#E8E8E8" />
3
+ <path d="M56 40V41H724V40V39H56V40ZM740 56H739V1108H740H741V56H740ZM724 1124V1123H56V1124V1125H724V1124ZM40 1108H41V56H40H39V1108H40ZM56 1124V1123C47.7157 1123 41 1116.28 41 1108H40H39C39 1117.39 46.6111 1125 56 1125V1124ZM740 1108H739C739 1116.28 732.284 1123 724 1123V1124V1125C733.389 1125 741 1117.39 741 1108H740ZM724 40V41C732.284 41 739 47.7157 739 56H740H741C741 46.6112 733.389 39 724 39V40ZM56 40V39C46.6112 39 39 46.6111 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="black" fill-opacity="0.1"/>
4
+ <path d="M218 182.5H338C339.933 182.5 341.5 184.067 341.5 186V214C341.5 215.933 339.933 217.5 338 217.5H218C216.067 217.5 214.5 215.933 214.5 214V186C214.5 184.067 216.067 182.5 218 182.5Z" fill="#E0EBF6"/>
5
+ <path d="M218 182.5H338C339.933 182.5 341.5 184.067 341.5 186V214C341.5 215.933 339.933 217.5 338 217.5H218C216.067 217.5 214.5 215.933 214.5 214V186C214.5 184.067 216.067 182.5 218 182.5Z" stroke="#1467BA"/>
6
+ <path d="M233.25 191.75C233.25 191.336 233.586 191 234 191C234.414 191 234.75 191.336 234.75 191.75V208.25C234.75 208.664 234.414 209 234 209C233.586 209 233.25 208.664 233.25 208.25V191.75Z" fill="#1467BA"/>
7
+ <path d="M242.25 199.25C242.664 199.25 243 199.586 243 200C243 200.414 242.664 200.75 242.25 200.75H225.75C225.336 200.75 225 200.414 225 200C225 199.586 225.336 199.25 225.75 199.25H242.25Z" fill="#1467BA"/>
8
+ <text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="254" y="205.455">Button</tspan></text>
9
+ <path d="M321.25 191.75C321.25 191.336 321.586 191 322 191C322.414 191 322.75 191.336 322.75 191.75V208.25C322.75 208.664 322.414 209 322 209C321.586 209 321.25 208.664 321.25 208.25V191.75Z" fill="#1467BA"/>
10
+ <path d="M330.25 199.25C330.664 199.25 331 199.586 331 200C331 200.414 330.664 200.75 330.25 200.75H313.75C313.336 200.75 313 200.414 313 200C313 199.586 313.336 199.25 313.75 199.25H330.25Z" fill="#1467BA"/>
11
+ <path d="M218 366.5H338C339.933 366.5 341.5 368.067 341.5 370V398C341.5 399.933 339.933 401.5 338 401.5H218C216.067 401.5 214.5 399.933 214.5 398V370C214.5 368.067 216.067 366.5 218 366.5Z" fill="#D5E4F3"/>
12
+ <path d="M218 366.5H338C339.933 366.5 341.5 368.067 341.5 370V398C341.5 399.933 339.933 401.5 338 401.5H218C216.067 401.5 214.5 399.933 214.5 398V370C214.5 368.067 216.067 366.5 218 366.5Z" stroke="#0F4D8B"/>
13
+ <path d="M233.25 375.75C233.25 375.336 233.586 375 234 375C234.414 375 234.75 375.336 234.75 375.75V392.25C234.75 392.664 234.414 393 234 393C233.586 393 233.25 392.664 233.25 392.25V375.75Z" fill="#0F4D8B"/>
14
+ <path d="M242.25 383.25C242.664 383.25 243 383.586 243 384C243 384.414 242.664 384.75 242.25 384.75H225.75C225.336 384.75 225 384.414 225 384C225 383.586 225.336 383.25 225.75 383.25H242.25Z" fill="#0F4D8B"/>
15
+ <text fill="#0F4D8B" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="254" y="389.455">Button</tspan></text>
16
+ <path d="M321.25 375.75C321.25 375.336 321.586 375 322 375C322.414 375 322.75 375.336 322.75 375.75V392.25C322.75 392.664 322.414 393 322 393C321.586 393 321.25 392.664 321.25 392.25V375.75Z" fill="#0F4D8B"/>
17
+ <path d="M330.25 383.25C330.664 383.25 331 383.586 331 384C331 384.414 330.664 384.75 330.25 384.75H313.75C313.336 384.75 313 384.414 313 384C313 383.586 313.336 383.25 313.75 383.25H330.25Z" fill="#0F4D8B"/>
18
+ <path d="M218 917.5H338C339.933 917.5 341.5 919.067 341.5 921V949C341.5 950.933 339.933 952.5 338 952.5H218C216.067 952.5 214.5 950.933 214.5 949V921C214.5 919.067 216.067 917.5 218 917.5Z" fill="#D5E4F3"/>
19
+ <path d="M218 917.5H338C339.933 917.5 341.5 919.067 341.5 921V949C341.5 950.933 339.933 952.5 338 952.5H218C216.067 952.5 214.5 950.933 214.5 949V921C214.5 919.067 216.067 917.5 218 917.5Z" stroke="#0F4D8B"/>
20
+ <path d="M233.25 926.75C233.25 926.336 233.586 926 234 926C234.414 926 234.75 926.336 234.75 926.75V943.25C234.75 943.664 234.414 944 234 944C233.586 944 233.25 943.664 233.25 943.25V926.75Z" fill="#0F4D8B"/>
21
+ <path d="M242.25 934.25C242.664 934.25 243 934.586 243 935C243 935.414 242.664 935.75 242.25 935.75H225.75C225.336 935.75 225 935.414 225 935C225 934.586 225.336 934.25 225.75 934.25H242.25Z" fill="#0F4D8B"/>
22
+ <text fill="#0F4D8B" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="254" y="940.455">Button</tspan></text>
23
+ <path d="M321.25 926.75C321.25 926.336 321.586 926 322 926C322.414 926 322.75 926.336 322.75 926.75V943.25C322.75 943.664 322.414 944 322 944C321.586 944 321.25 943.664 321.25 943.25V926.75Z" fill="#0F4D8B"/>
24
+ <path d="M330.25 934.25C330.664 934.25 331 934.586 331 935C331 935.414 330.664 935.75 330.25 935.75H313.75C313.336 935.75 313 935.414 313 935C313 934.586 313.336 934.25 313.75 934.25H330.25Z" fill="#0F4D8B"/>
25
+ <path d="M219 914.5H337C341.142 914.5 344.5 917.858 344.5 922V948C344.5 952.142 341.142 955.5 337 955.5H219C214.858 955.5 211.5 952.142 211.5 948V922C211.5 917.858 214.858 914.5 219 914.5Z" stroke="#111111"/>
26
+ <path d="M218 550.5H338C339.933 550.5 341.5 552.067 341.5 554V582C341.5 583.933 339.933 585.5 338 585.5H218C216.067 585.5 214.5 583.933 214.5 582V554C214.5 552.067 216.067 550.5 218 550.5Z" fill="#C7DBEF"/>
27
+ <path d="M218 550.5H338C339.933 550.5 341.5 552.067 341.5 554V582C341.5 583.933 339.933 585.5 338 585.5H218C216.067 585.5 214.5 583.933 214.5 582V554C214.5 552.067 216.067 550.5 218 550.5Z" stroke="#0B3A69"/>
28
+ <path d="M233.25 559.75C233.25 559.336 233.586 559 234 559C234.414 559 234.75 559.336 234.75 559.75V576.25C234.75 576.664 234.414 577 234 577C233.586 577 233.25 576.664 233.25 576.25V559.75Z" fill="#0B3A69"/>
29
+ <path d="M242.25 567.25C242.664 567.25 243 567.586 243 568C243 568.414 242.664 568.75 242.25 568.75H225.75C225.336 568.75 225 568.414 225 568C225 567.586 225.336 567.25 225.75 567.25H242.25Z" fill="#0B3A69"/>
30
+ <text fill="#0B3A69" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="254" y="573.455">Button</tspan></text>
31
+ <path d="M321.25 559.75C321.25 559.336 321.586 559 322 559C322.414 559 322.75 559.336 322.75 559.75V576.25C322.75 576.664 322.414 577 322 577C321.586 577 321.25 576.664 321.25 576.25V559.75Z" fill="#0B3A69"/>
32
+ <path d="M330.25 567.25C330.664 567.25 331 567.586 331 568C331 568.414 330.664 568.75 330.25 568.75H313.75C313.336 568.75 313 568.414 313 568C313 567.586 313.336 567.25 313.75 567.25H330.25Z" fill="#0B3A69"/>
33
+ <path d="M218 734.5H338C339.933 734.5 341.5 736.067 341.5 738V766C341.5 767.933 339.933 769.5 338 769.5H218C216.067 769.5 214.5 767.933 214.5 766V738C214.5 736.067 216.067 734.5 218 734.5Z" stroke="#C6C6C6"/>
34
+ <path d="M233.25 743.75C233.25 743.336 233.586 743 234 743C234.414 743 234.75 743.336 234.75 743.75V760.25C234.75 760.664 234.414 761 234 761C233.586 761 233.25 760.664 233.25 760.25V743.75Z" fill="#999999"/>
35
+ <path d="M242.25 751.25C242.664 751.25 243 751.586 243 752C243 752.414 242.664 752.75 242.25 752.75H225.75C225.336 752.75 225 752.414 225 752C225 751.586 225.336 751.25 225.75 751.25H242.25Z" fill="#999999"/>
36
+ <text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="254" y="757.455">Button</tspan></text>
37
+ <path d="M321.25 743.75C321.25 743.336 321.586 743 322 743C322.414 743 322.75 743.336 322.75 743.75V760.25C322.75 760.664 322.414 761 322 761C321.586 761 321.25 760.664 321.25 760.25V743.75Z" fill="#999999"/>
38
+ <path d="M330.25 751.25C330.664 751.25 331 751.586 331 752C331 752.414 330.664 752.75 330.25 752.75H313.75C313.336 752.75 313 752.414 313 752C313 751.586 313.336 751.25 313.75 751.25H330.25Z" fill="#999999"/>
39
+ <circle cx="335.5" cy="211" r="4" stroke="black"/>
40
+ <line x1="377" y1="211.5" x2="340" y2="211.5" stroke="black"/>
41
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="381.643" y="216.455">color/bg/action-accentWeak</tspan></text>
42
+ <circle cx="340.5" cy="190" r="4" stroke="black"/>
43
+ <line x1="377" y1="190.5" x2="345" y2="190.5" stroke="black"/>
44
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="381.022" y="195.455">color/border/action-accentDefault</tspan></text>
45
+ <circle cx="340.5" cy="376" r="4" stroke="black"/>
46
+ <line x1="377" y1="376.5" x2="345" y2="376.5" stroke="black"/>
47
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="381.528" y="381.455">color/border/action-accentDefault-hover</tspan></text>
48
+ <circle cx="340.5" cy="927" r="4" stroke="black"/>
49
+ <line x1="377" y1="927.5" x2="345" y2="927.5" stroke="black"/>
50
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="381.528" y="932.455">color/border/action-accentDefault-hover</tspan></text>
51
+ <circle cx="340.5" cy="558" r="4" stroke="black"/>
52
+ <line x1="378" y1="558.5" x2="345" y2="558.5" stroke="black"/>
53
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="382.492" y="563.455">color/border/</tspan></text>
54
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="474.807" y="563.455">action-accentDefault-pressed</tspan></text>
55
+ <circle cx="340.5" cy="741" r="4" stroke="black"/>
56
+ <line x1="384" y1="741.5" x2="345" y2="741.5" stroke="black"/>
57
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="388.127" y="746.455">color/border/i</tspan></text>
58
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="484.001" y="746.455">nteraction-disabled</tspan></text>
59
+ <circle cx="335.5" cy="395" r="4" stroke="black"/>
60
+ <line x1="376" y1="395.5" x2="340" y2="395.5" stroke="black"/>
61
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="380.785" y="400.455">color/bg/action-accentDefault-hover</tspan></text>
62
+ <circle cx="335.5" cy="946" r="4" stroke="black"/>
63
+ <line x1="376" y1="946.5" x2="340" y2="946.5" stroke="black"/>
64
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="380.785" y="951.455">color/bg/action-accentDefault-hover</tspan></text>
65
+ <circle cx="335.5" cy="579" r="4" stroke="black"/>
66
+ <line x1="378" y1="579.5" x2="340" y2="579.5" stroke="black"/>
67
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="382.749" y="584.455">color/bg/action-accentDefault-pressed</tspan></text>
68
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="124.354" y="188.455">radius/s</tspan></text>
69
+ <line x1="211" y1="183.5" x2="185" y2="183.5" stroke="black"/>
70
+ <circle cx="215.5" cy="183" r="4" stroke="black"/>
71
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="124.354" y="372.455">radius/s</tspan></text>
72
+ <line x1="211" y1="367.5" x2="185" y2="367.5" stroke="black"/>
73
+ <circle cx="215.5" cy="367" r="4" stroke="black"/>
74
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="124.354" y="923.455">radius/s</tspan></text>
75
+ <line x1="211" y1="918.5" x2="185" y2="918.5" stroke="black"/>
76
+ <circle cx="215.5" cy="918" r="4" stroke="black"/>
77
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="124.354" y="556.455">radius/s</tspan></text>
78
+ <line x1="211" y1="551.5" x2="185" y2="551.5" stroke="black"/>
79
+ <circle cx="215.5" cy="551" r="4" stroke="black"/>
80
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="124.354" y="740.455">radius/s</tspan></text>
81
+ <line x1="211" y1="735.5" x2="185" y2="735.5" stroke="black"/>
82
+ <circle cx="215.5" cy="735" r="4" stroke="black"/>
83
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="156.527" y="153.455">color/fg/action-accentDefault</tspan></text>
84
+ <rect x="260.5" y="162" width="1" height="33" fill="black"/>
85
+ <circle cx="261" cy="199.5" r="4" stroke="black"/>
86
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="133.033" y="337.455">color/fg/action-accentDefault-hover</tspan></text>
87
+ <rect x="260.5" y="346" width="1" height="33" fill="black"/>
88
+ <circle cx="261" cy="383.5" r="4" stroke="black"/>
89
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="133.033" y="888.455">color/fg/action-accentDefault-hover</tspan></text>
90
+ <rect x="260.5" y="897" width="1" height="33" fill="black"/>
91
+ <circle cx="261" cy="934.5" r="4" stroke="black"/>
92
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="124.997" y="521.455">color/fg/action-accentDefault-pressed</tspan></text>
93
+ <rect x="260.5" y="530" width="1" height="33" fill="black"/>
94
+ <circle cx="261" cy="567.5" r="4" stroke="black"/>
95
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="160.632" y="705.455">color/fg/interaction-disabled</tspan></text>
96
+ <rect x="261" y="714" width="1" height="33" fill="black"/>
97
+ <circle cx="261.5" cy="751.5" r="4" stroke="black"/>
98
+ <line x1="236.582" y1="196.429" x2="261.222" y2="171.788" stroke="black"/>
99
+ <circle cx="233.753" cy="199.964" r="4" transform="rotate(135 233.753 199.964)" stroke="black"/>
100
+ <line x1="236.582" y1="380.429" x2="261.222" y2="355.788" stroke="black"/>
101
+ <circle cx="233.753" cy="383.964" r="4" transform="rotate(135 233.753 383.964)" stroke="black"/>
102
+ <line x1="236.582" y1="931.429" x2="261.222" y2="906.788" stroke="black"/>
103
+ <circle cx="233.753" cy="934.964" r="4" transform="rotate(135 233.753 934.964)" stroke="black"/>
104
+ <line x1="236.582" y1="564.429" x2="261.222" y2="539.788" stroke="black"/>
105
+ <circle cx="233.753" cy="567.964" r="4" transform="rotate(135 233.753 567.964)" stroke="black"/>
106
+ <line x1="236.582" y1="748.429" x2="261.222" y2="723.788" stroke="black"/>
107
+ <circle cx="233.753" cy="751.964" r="4" transform="rotate(135 233.753 751.964)" stroke="black"/>
108
+ <circle cx="261" cy="199.5" r="4" stroke="black"/>
109
+ <rect x="260.5" y="204" width="1" height="29" fill="black"/>
110
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="226.799" y="252.455">text/body</tspan></text>
111
+ <circle cx="261" cy="383.5" r="4" stroke="black"/>
112
+ <rect x="260.5" y="388" width="1" height="29" fill="black"/>
113
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="226.799" y="436.455">text/body</tspan></text>
114
+ <circle cx="261" cy="934.5" r="4" stroke="black"/>
115
+ <rect x="260.5" y="939" width="1" height="29" fill="black"/>
116
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="226.799" y="987.455">text/body</tspan></text>
117
+ <circle cx="321" cy="956.5" r="4" stroke="black"/>
118
+ <rect x="320.5" y="961" width="1" height="46" fill="black"/>
119
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="214.265" y="1026.45">color/border/interaction-focus</tspan></text>
120
+ <circle cx="261" cy="567.5" r="4" stroke="black"/>
121
+ <rect x="260.5" y="572" width="1" height="29" fill="black"/>
122
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="226.799" y="620.455">text/body</tspan></text>
123
+ <circle cx="261" cy="751.5" r="4" stroke="black"/>
124
+ <rect x="260.5" y="756" width="1" height="29" fill="black"/>
125
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="226.799" y="804.455">text/body</tspan></text>
126
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="120.154" y="960.455">radius/m</tspan></text>
127
+ <line x1="209" y1="955.5" x2="186" y2="955.5" stroke="black"/>
128
+ <circle cx="213.5" cy="955" r="4" stroke="black"/>
129
+ <path d="M319.013 406.041L292.951 395.83C290.999 395.065 289.073 396.995 289.843 398.945L300.175 425.125C300.946 427.077 303.674 427.17 304.575 425.274L307.124 419.911L314.336 427.124C315.274 428.061 316.793 428.061 317.731 427.124L319.428 425.427L321.337 423.518C322.274 422.58 322.274 421.061 321.337 420.123L314.124 412.911L319.192 410.431C321.068 409.513 320.957 406.803 319.013 406.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
130
+ <path d="M319.013 589.041L292.951 578.83C290.999 578.065 289.073 579.995 289.843 581.945L300.175 608.125C300.946 610.077 303.674 610.17 304.575 608.274L307.124 602.911L314.336 610.124C315.274 611.061 316.793 611.061 317.731 610.124L319.428 608.427L321.337 606.518C322.274 605.58 322.274 604.061 321.337 603.123L314.124 595.911L319.192 593.431C321.068 592.513 320.957 589.803 319.013 589.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
131
+ <path d="M285.91 574.91L281.031 570.031" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
132
+ <path d="M292.117 572.632V565.732" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
133
+ <path d="M298.002 575.122L302.881 570.243" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
134
+ <path d="M283.843 580.906H276.943" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
135
+ <path d="M286.334 586.789L281.455 591.668" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
136
+ <rect x="151.2" y="994.2" width="42.6" height="42.6" rx="1.2" fill="white"/>
137
+ <rect x="151.2" y="994.2" width="42.6" height="42.6" rx="1.2" stroke="#111111" stroke-width="2.4"/>
138
+ <text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="10.8" font-weight="500" letter-spacing="0px"><tspan x="162.829" y="1019.33">Tab</tspan></text>
139
+ <rect x="43" y="43" width="90.1406" height="30" rx="3" fill="#E8E8E8"/>
140
+ <rect x="43.5" y="43.5" width="89.1406" height="29" rx="2.5" stroke="black" stroke-opacity="0.2"/>
141
+ <text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="11" letter-spacing="0em"><tspan x="49" y="60.5">buttons outline</tspan></text>
142
+ </svg>
package/dist/docs/assets/examples/buttons_standard.svg ADDED
@@ -0,0 +1,129 @@
1
+ <svg width="780" height="1164" viewBox="0 0 780 1164" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M40 56C40 47.1634 47.1634 40 56 40H724C732.837 40 740 47.1634 740 56V1108C740 1116.84 732.837 1124 724 1124H56C47.1634 1124 40 1116.84 40 1108V56Z" fill="#E8E8E8" />
3
+ <path d="M56 40V41H724V40V39H56V40ZM740 56H739V1108H740H741V56H740ZM724 1124V1123H56V1124V1125H724V1124ZM40 1108H41V56H40H39V1108H40ZM56 1124V1123C47.7157 1123 41 1116.28 41 1108H40H39C39 1117.39 46.6111 1125 56 1125V1124ZM740 1108H739C739 1116.28 732.284 1123 724 1123V1124V1125C733.389 1125 741 1117.39 741 1108H740ZM724 40V41C732.284 41 739 47.7157 739 56H740H741C741 46.6112 733.389 39 724 39V40ZM56 40V39C46.6112 39 39 46.6111 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="black" fill-opacity="0.1"/>
4
+ <path d="M227 186C227 183.791 228.791 182 231 182H351C353.209 182 355 183.791 355 186V214C355 216.209 353.209 218 351 218H231C228.791 218 227 216.209 227 214V186Z" fill="#D4D4D4"/>
5
+ <path d="M246.25 191.75C246.25 191.336 246.586 191 247 191C247.414 191 247.75 191.336 247.75 191.75V208.25C247.75 208.664 247.414 209 247 209C246.586 209 246.25 208.664 246.25 208.25V191.75Z" fill="#111111"/>
6
+ <path d="M255.25 199.25C255.664 199.25 256 199.586 256 200C256 200.414 255.664 200.75 255.25 200.75H238.75C238.336 200.75 238 200.414 238 200C238 199.586 238.336 199.25 238.75 199.25H255.25Z" fill="#111111"/>
7
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="267" y="205.455">Button</tspan></text>
8
+ <path d="M334.25 191.75C334.25 191.336 334.586 191 335 191C335.414 191 335.75 191.336 335.75 191.75V208.25C335.75 208.664 335.414 209 335 209C334.586 209 334.25 208.664 334.25 208.25V191.75Z" fill="#111111"/>
9
+ <path d="M343.25 199.25C343.664 199.25 344 199.586 344 200C344 200.414 343.664 200.75 343.25 200.75H326.75C326.336 200.75 326 200.414 326 200C326 199.586 326.336 199.25 326.75 199.25H343.25Z" fill="#111111"/>
10
+ <path d="M227 370C227 367.791 228.791 366 231 366H351C353.209 366 355 367.791 355 370V398C355 400.209 353.209 402 351 402H231C228.791 402 227 400.209 227 398V370Z" fill="#C6C6C6"/>
11
+ <path d="M246.25 375.75C246.25 375.336 246.586 375 247 375C247.414 375 247.75 375.336 247.75 375.75V392.25C247.75 392.664 247.414 393 247 393C246.586 393 246.25 392.664 246.25 392.25V375.75Z" fill="#111111"/>
12
+ <path d="M255.25 383.25C255.664 383.25 256 383.586 256 384C256 384.414 255.664 384.75 255.25 384.75H238.75C238.336 384.75 238 384.414 238 384C238 383.586 238.336 383.25 238.75 383.25H255.25Z" fill="#111111"/>
13
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="267" y="389.455">Button</tspan></text>
14
+ <path d="M334.25 375.75C334.25 375.336 334.586 375 335 375C335.414 375 335.75 375.336 335.75 375.75V392.25C335.75 392.664 335.414 393 335 393C334.586 393 334.25 392.664 334.25 392.25V375.75Z" fill="#111111"/>
15
+ <path d="M343.25 383.25C343.664 383.25 344 383.586 344 384C344 384.414 343.664 384.75 343.25 384.75H326.75C326.336 384.75 326 384.414 326 384C326 383.586 326.336 383.25 326.75 383.25H343.25Z" fill="#111111"/>
16
+ <path d="M227 921C227 918.791 228.791 917 231 917H351C353.209 917 355 918.791 355 921V949C355 951.209 353.209 953 351 953H231C228.791 953 227 951.209 227 949V921Z" fill="#C6C6C6"/>
17
+ <path d="M246.25 926.75C246.25 926.336 246.586 926 247 926C247.414 926 247.75 926.336 247.75 926.75V943.25C247.75 943.664 247.414 944 247 944C246.586 944 246.25 943.664 246.25 943.25V926.75Z" fill="#111111"/>
18
+ <path d="M255.25 934.25C255.664 934.25 256 934.586 256 935C256 935.414 255.664 935.75 255.25 935.75H238.75C238.336 935.75 238 935.414 238 935C238 934.586 238.336 934.25 238.75 934.25H255.25Z" fill="#111111"/>
19
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="267" y="940.455">Button</tspan></text>
20
+ <path d="M334.25 926.75C334.25 926.336 334.586 926 335 926C335.414 926 335.75 926.336 335.75 926.75V943.25C335.75 943.664 335.414 944 335 944C334.586 944 334.25 943.664 334.25 943.25V926.75Z" fill="#111111"/>
21
+ <path d="M343.25 934.25C343.664 934.25 344 934.586 344 935C344 935.414 343.664 935.75 343.25 935.75H326.75C326.336 935.75 326 935.414 326 935C326 934.586 326.336 934.25 326.75 934.25H343.25Z" fill="#111111"/>
22
+ <path d="M232 914.5H350C354.142 914.5 357.5 917.858 357.5 922V948C357.5 952.142 354.142 955.5 350 955.5H232C227.858 955.5 224.5 952.142 224.5 948V922C224.5 917.858 227.858 914.5 232 914.5Z" stroke="#111111"/>
23
+ <path d="M227 554C227 551.791 228.791 550 231 550H351C353.209 550 355 551.791 355 554V582C355 584.209 353.209 586 351 586H231C228.791 586 227 584.209 227 582V554Z" fill="#B3B3B3"/>
24
+ <path d="M246.25 559.75C246.25 559.336 246.586 559 247 559C247.414 559 247.75 559.336 247.75 559.75V576.25C247.75 576.664 247.414 577 247 577C246.586 577 246.25 576.664 246.25 576.25V559.75Z" fill="#111111"/>
25
+ <path d="M255.25 567.25C255.664 567.25 256 567.586 256 568C256 568.414 255.664 568.75 255.25 568.75H238.75C238.336 568.75 238 568.414 238 568C238 567.586 238.336 567.25 238.75 567.25H255.25Z" fill="#111111"/>
26
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="267" y="573.455">Button</tspan></text>
27
+ <path d="M334.25 559.75C334.25 559.336 334.586 559 335 559C335.414 559 335.75 559.336 335.75 559.75V576.25C335.75 576.664 335.414 577 335 577C334.586 577 334.25 576.664 334.25 576.25V559.75Z" fill="#111111"/>
28
+ <path d="M343.25 567.25C343.664 567.25 344 567.586 344 568C344 568.414 343.664 568.75 343.25 568.75H326.75C326.336 568.75 326 568.414 326 568C326 567.586 326.336 567.25 326.75 567.25H343.25Z" fill="#111111"/>
29
+ <path d="M227 738C227 735.791 228.791 734 231 734H351C353.209 734 355 735.791 355 738V766C355 768.209 353.209 770 351 770H231C228.791 770 227 768.209 227 766V738Z" fill="#E7E7E7"/>
30
+ <path d="M246.25 743.75C246.25 743.336 246.586 743 247 743C247.414 743 247.75 743.336 247.75 743.75V760.25C247.75 760.664 247.414 761 247 761C246.586 761 246.25 760.664 246.25 760.25V743.75Z" fill="#999999"/>
31
+ <path d="M255.25 751.25C255.664 751.25 256 751.586 256 752C256 752.414 255.664 752.75 255.25 752.75H238.75C238.336 752.75 238 752.414 238 752C238 751.586 238.336 751.25 238.75 751.25H255.25Z" fill="#999999"/>
32
+ <text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="267" y="757.455">Button</tspan></text>
33
+ <path d="M334.25 743.75C334.25 743.336 334.586 743 335 743C335.414 743 335.75 743.336 335.75 743.75V760.25C335.75 760.664 335.414 761 335 761C334.586 761 334.25 760.664 334.25 760.25V743.75Z" fill="#999999"/>
34
+ <path d="M343.25 751.25C343.664 751.25 344 751.586 344 752C344 752.414 343.664 752.75 343.25 752.75H326.75C326.336 752.75 326 752.414 326 752C326 751.586 326.336 751.25 326.75 751.25H343.25Z" fill="#999999"/>
35
+ <circle cx="348.5" cy="211" r="4" stroke="black"/>
36
+ <line x1="390" y1="211.5" x2="353" y2="211.5" stroke="black"/>
37
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="394.356" y="216.455">color/bg/action-neutralDefault</tspan></text>
38
+ <circle cx="348.5" cy="395" r="4" stroke="black"/>
39
+ <line x1="388" y1="395.5" x2="353" y2="395.5" stroke="black"/>
40
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="392.862" y="400.455">color/bg/action-neutralDefault-hover</tspan></text>
41
+ <circle cx="348.5" cy="946" r="4" stroke="black"/>
42
+ <line x1="388" y1="946.5" x2="353" y2="946.5" stroke="black"/>
43
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="392.862" y="951.455">color/bg/action-neutralDefault-hover</tspan></text>
44
+ <circle cx="348.5" cy="579" r="4" stroke="black"/>
45
+ <line x1="390" y1="579.5" x2="353" y2="579.5" stroke="black"/>
46
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="394.826" y="584.455">color/bg/a</tspan></text>
47
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="467.336" y="584.455">ction-neutralDefault-pressed</tspan></text>
48
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="169.604" y="153.455">color/fg/</tspan></text>
49
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="229.414" y="153.455">action-neutralDefault</tspan></text>
50
+ <rect x="274" y="162" width="1" height="33" fill="black"/>
51
+ <circle cx="274.5" cy="199.5" r="4" stroke="black"/>
52
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="146.11" y="337.455">color/fg/</tspan><tspan x="356.213" y="337.455">-hover</tspan></text>
53
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="205.92" y="337.455">action-neutralDefault</tspan></text>
54
+ <rect x="274" y="346" width="1" height="33" fill="black"/>
55
+ <circle cx="274.5" cy="383.5" r="4" stroke="black"/>
56
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="146.11" y="888.455">color/fg/</tspan><tspan x="356.213" y="888.455">-hover</tspan></text>
57
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="205.92" y="888.455">action-neutralDefault</tspan></text>
58
+ <rect x="274" y="897" width="1" height="33" fill="black"/>
59
+ <circle cx="274.5" cy="934.5" r="4" stroke="black"/>
60
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="137.074" y="521.455">color/fg/</tspan><tspan x="347.177" y="521.455">-pressed</tspan></text>
61
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="196.884" y="521.455">action-neutralDefault</tspan></text>
62
+ <rect x="273.5" y="530" width="1" height="33" fill="black"/>
63
+ <circle cx="274" cy="567.5" r="4" stroke="black"/>
64
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173.632" y="705.455">color/fg/interaction-disabled</tspan></text>
65
+ <rect x="274" y="714" width="1" height="33" fill="black"/>
66
+ <circle cx="274.5" cy="751.5" r="4" stroke="black"/>
67
+ <line x1="249.582" y1="196.429" x2="274.222" y2="171.788" stroke="black"/>
68
+ <circle cx="246.753" cy="199.964" r="4" transform="rotate(135 246.753 199.964)" stroke="black"/>
69
+ <line x1="249.582" y1="380.429" x2="274.222" y2="355.788" stroke="black"/>
70
+ <circle cx="246.753" cy="383.964" r="4" transform="rotate(135 246.753 383.964)" stroke="black"/>
71
+ <line x1="249.582" y1="931.429" x2="274.222" y2="906.788" stroke="black"/>
72
+ <circle cx="246.753" cy="934.964" r="4" transform="rotate(135 246.753 934.964)" stroke="black"/>
73
+ <line x1="249.582" y1="564.429" x2="274.222" y2="539.788" stroke="black"/>
74
+ <circle cx="246.753" cy="567.964" r="4" transform="rotate(135 246.753 567.964)" stroke="black"/>
75
+ <line x1="249.582" y1="748.429" x2="274.222" y2="723.788" stroke="black"/>
76
+ <circle cx="246.753" cy="751.964" r="4" transform="rotate(135 246.753 751.964)" stroke="black"/>
77
+ <circle cx="274" cy="199.5" r="4" stroke="black"/>
78
+ <rect x="273.5" y="204" width="1" height="29" fill="black"/>
79
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="239.799" y="252.455">text/body</tspan></text>
80
+ <circle cx="274" cy="383.5" r="4" stroke="black"/>
81
+ <rect x="273.5" y="388" width="1" height="29" fill="black"/>
82
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="239.799" y="436.455">text/body</tspan></text>
83
+ <circle cx="274" cy="934.5" r="4" stroke="black"/>
84
+ <rect x="273.5" y="939" width="1" height="29" fill="black"/>
85
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="239.799" y="987.455">text/body</tspan></text>
86
+ <circle cx="334" cy="956.5" r="4" stroke="black"/>
87
+ <rect x="333.5" y="961" width="1" height="46" fill="black"/>
88
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="227.265" y="1026.45">color/border/interaction-focus</tspan></text>
89
+ <circle cx="274" cy="567.5" r="4" stroke="black"/>
90
+ <rect x="273.5" y="572" width="1" height="29" fill="black"/>
91
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="239.799" y="620.455">text/body</tspan></text>
92
+ <circle cx="274" cy="751.5" r="4" stroke="black"/>
93
+ <rect x="273.5" y="756" width="1" height="29" fill="black"/>
94
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="239.799" y="804.455">text/body</tspan></text>
95
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="136.354" y="188.455">radius/s</tspan></text>
96
+ <line x1="223" y1="183.5" x2="197" y2="183.5" stroke="black"/>
97
+ <circle cx="227.5" cy="183" r="4" stroke="black"/>
98
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="136.354" y="372.455">radius/s</tspan></text>
99
+ <line x1="223" y1="367.5" x2="197" y2="367.5" stroke="black"/>
100
+ <circle cx="227.5" cy="367" r="4" stroke="black"/>
101
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="136.354" y="923.455">radius/s</tspan></text>
102
+ <line x1="223" y1="918.5" x2="197" y2="918.5" stroke="black"/>
103
+ <circle cx="227.5" cy="918" r="4" stroke="black"/>
104
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="136.354" y="556.455">radius/s</tspan></text>
105
+ <line x1="223" y1="551.5" x2="197" y2="551.5" stroke="black"/>
106
+ <circle cx="227.5" cy="551" r="4" stroke="black"/>
107
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="136.354" y="740.455">radius/s</tspan></text>
108
+ <line x1="223" y1="735.5" x2="197" y2="735.5" stroke="black"/>
109
+ <circle cx="227.5" cy="735" r="4" stroke="black"/>
110
+ <circle cx="348.5" cy="763" r="4" stroke="black"/>
111
+ <line x1="392" y1="763.5" x2="353" y2="763.5" stroke="black"/>
112
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="396.384" y="768.455">color/bg/interaction-disabled</tspan></text>
113
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="132.154" y="960.455">radius/m</tspan></text>
114
+ <line x1="221" y1="955.5" x2="198" y2="955.5" stroke="black"/>
115
+ <circle cx="225.5" cy="955" r="4" stroke="black"/>
116
+ <path d="M319.013 406.041L292.951 395.83C290.999 395.065 289.073 396.995 289.843 398.945L300.175 425.125C300.946 427.077 303.674 427.17 304.575 425.274L307.124 419.911L314.336 427.124C315.274 428.061 316.793 428.061 317.731 427.124L319.428 425.427L321.337 423.518C322.274 422.58 322.274 421.061 321.337 420.123L314.124 412.911L319.192 410.431C321.068 409.513 320.957 406.803 319.013 406.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
117
+ <path d="M319.013 589.041L292.951 578.83C290.999 578.065 289.073 579.995 289.843 581.945L300.175 608.125C300.946 610.077 303.674 610.17 304.575 608.274L307.124 602.911L314.336 610.124C315.274 611.061 316.793 611.061 317.731 610.124L319.428 608.427L321.337 606.518C322.274 605.58 322.274 604.061 321.337 603.123L314.124 595.911L319.192 593.431C321.068 592.513 320.957 589.803 319.013 589.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
118
+ <path d="M285.91 574.91L281.031 570.031" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
119
+ <path d="M292.117 572.632V565.732" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
120
+ <path d="M298.002 575.122L302.881 570.243" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
121
+ <path d="M283.843 580.906H276.943" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
122
+ <path d="M286.334 586.789L281.455 591.668" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
123
+ <rect x="151.2" y="994.2" width="42.6" height="42.6" rx="1.2" fill="white"/>
124
+ <rect x="151.2" y="994.2" width="42.6" height="42.6" rx="1.2" stroke="#111111" stroke-width="2.4"/>
125
+ <text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="10.8" font-weight="500" letter-spacing="0px"><tspan x="162.829" y="1019.33">Tab</tspan></text>
126
+ <rect x="43" y="43" width="101.156" height="30" rx="3" fill="#E8E8E8"/>
127
+ <rect x="43.5" y="43.5" width="100.156" height="29" rx="2.5" stroke="black" stroke-opacity="0.2"/>
128
+ <text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="11" letter-spacing="0em"><tspan x="49" y="60.5">buttons standard</tspan></text>
129
+ </svg>
package/dist/docs/assets/examples/checkbox_default.svg ADDED
@@ -0,0 +1,106 @@
1
+ <svg width="830" height="942" viewBox="0 0 830 942" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M40 56C40 47.1634 47.1634 40 56 40H774C782.837 40 790 47.1634 790 56V886C790 894.837 782.837 902 774 902H56C47.1634 902 40 894.837 40 886V56Z" fill="#E8E8E8" />
3
+ <path d="M56 40V41H774V40V39H56V40ZM790 56H789V886H790H791V56H790ZM774 902V901H56V902V903H774V902ZM40 886H41V56H40H39V886H40ZM56 902V901C47.7157 901 41 894.284 41 886H40H39C39 895.389 46.6112 903 56 903V902ZM790 886H789C789 894.284 782.284 901 774 901V902V903C783.389 903 791 895.389 791 886H790ZM774 40V41C782.284 41 789 47.7157 789 56H790H791C791 46.6112 783.389 39 774 39V40ZM56 40V39C46.6112 39 39 46.6112 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
4
+ <path d="M374 151H390C390.552 151 391 151.448 391 152V168C391 168.552 390.552 169 390 169H374C373.448 169 373 168.552 373 168V152C373 151.448 373.448 151 374 151Z" fill="white" stroke="#999999" stroke-width="2"/>
5
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="165.455">Label</tspan></text>
6
+ <path d="M374 419H390C390.552 419 391 419.448 391 420V436C391 436.552 390.552 437 390 437H374C373.448 437 373 436.552 373 436V420C373 419.448 373.448 419 374 419Z" fill="#E7E7E7" stroke="#C6C6C6" stroke-width="2"/>
7
+ <text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="433.455">Label</tspan></text>
8
+ <path d="M374 686H390C390.552 686 391 686.448 391 687V703C391 703.552 390.552 704 390 704H374C373.448 704 373 703.552 373 703V687C373 686.448 373.448 686 374 686Z" fill="white" stroke="#999999" stroke-width="2"/>
9
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="700.455">Label</tspan></text>
10
+ <rect x="365.5" y="678.5" width="88" height="33" rx="7.5" stroke="#111111"/>
11
+ <path d="M372 188C372 186.895 372.895 186 374 186H390C391.105 186 392 186.895 392 188V204C392 205.105 391.105 206 390 206H374C372.895 206 372 205.105 372 204V188Z" fill="#1467BA"/>
12
+ <path d="M377 196H387" stroke="white" stroke-width="2" stroke-linecap="round"/>
13
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="201.455">Label</tspan></text>
14
+ <path d="M372 456C372 454.895 372.895 454 374 454H390C391.105 454 392 454.895 392 456V472C392 473.105 391.105 474 390 474H374C372.895 474 372 473.105 372 472V456Z" fill="#E7E7E7"/>
15
+ <path d="M377 464H387" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
16
+ <text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="469.455">Label</tspan></text>
17
+ <path d="M372 723C372 721.895 372.895 721 374 721H390C391.105 721 392 721.895 392 723V739C392 740.105 391.105 741 390 741H374C372.895 741 372 740.105 372 739V723Z" fill="#1467BA"/>
18
+ <path d="M377 731.885L380.333 735.167L387 727.667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
19
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="736.455">Label</tspan></text>
20
+ <rect x="365.5" y="714.5" width="88" height="33" rx="7.5" stroke="#111111"/>
21
+ <path d="M372 224C372 222.895 372.895 222 374 222H390C391.105 222 392 222.895 392 224V240C392 241.105 391.105 242 390 242H374C372.895 242 372 241.105 372 240V224Z" fill="#1467BA"/>
22
+ <path d="M377 232.885L380.333 236.167L387 228.667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
23
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="237.455">Label</tspan></text>
24
+ <path d="M372 492C372 490.895 372.895 490 374 490H390C391.105 490 392 490.895 392 492V508C392 509.105 391.105 510 390 510H374C372.895 510 372 509.105 372 508V492Z" fill="#E7E7E7"/>
25
+ <path d="M377 500.885L380.333 504.167L387 496.667" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
26
+ <text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="505.455">Label</tspan></text>
27
+ <path d="M372 759C372 757.895 372.895 757 374 757H390C391.105 757 392 757.895 392 759V775C392 776.105 391.105 777 390 777H374C372.895 777 372 776.105 372 775V759Z" fill="#1467BA"/>
28
+ <path d="M377 767H387" stroke="white" stroke-width="2" stroke-linecap="round"/>
29
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="404" y="772.455">Label</tspan></text>
30
+ <rect x="365.5" y="750.5" width="88" height="33" rx="7.5" stroke="#111111"/>
31
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="263.312" y="110.455">color/bg/selection-neutralWeakest</tspan></text>
32
+ <rect x="385" y="119" width="1" height="33" fill="black"/>
33
+ <circle cx="385.5" cy="156.5" r="4" stroke="black"/>
34
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="263.312" y="646.455">color/bg/selection-neutralWeakest</tspan></text>
35
+ <rect x="385" y="655" width="1" height="33" fill="black"/>
36
+ <circle cx="385.5" cy="692.5" r="4" stroke="black"/>
37
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="282.384" y="378.455">color/bg/interaction-disabled</tspan></text>
38
+ <rect x="385" y="387" width="1" height="33" fill="black"/>
39
+ <circle cx="385.5" cy="424.5" r="4" stroke="black"/>
40
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="149.041" y="201.455">color/fg/interaction-onColor</tspan></text>
41
+ <line x1="377" y1="196.5" x2="351" y2="196.5" stroke="black"/>
42
+ <circle cx="381.5" cy="196" r="4" stroke="black"/>
43
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="149.041" y="737.455">color/fg/interaction-onColor</tspan></text>
44
+ <line x1="377" y1="732.5" x2="351" y2="732.5" stroke="black"/>
45
+ <circle cx="381.5" cy="732" r="4" stroke="black"/>
46
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="146.632" y="469.455">color/fg/interaction-disabled</tspan></text>
47
+ <line x1="377" y1="464.5" x2="353" y2="464.5" stroke="black"/>
48
+ <circle cx="381.5" cy="464" r="4" stroke="black"/>
49
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="83.6943" y="166.455">color/border/selection-neutralDefault</tspan></text>
50
+ <line x1="370" y1="161.5" x2="351" y2="161.5" stroke="black"/>
51
+ <circle cx="374.5" cy="161" r="4" stroke="black"/>
52
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="83.6943" y="702.455">color/border/selection-neutralDefault</tspan></text>
53
+ <line x1="370" y1="697.5" x2="351" y2="697.5" stroke="black"/>
54
+ <circle cx="374.5" cy="697" r="4" stroke="black"/>
55
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="112.127" y="434.455">color/border/interaction-disabled</tspan></text>
56
+ <line x1="370" y1="429.5" x2="351" y2="429.5" stroke="black"/>
57
+ <circle cx="374.5" cy="429" r="4" stroke="black"/>
58
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="112.874" y="233.455">color/bg/selection-accentDefault</tspan></text>
59
+ <line x1="373" y1="228.5" x2="351" y2="228.5" stroke="black"/>
60
+ <circle cx="377.5" cy="228" r="4" stroke="black"/>
61
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="112.874" y="769.455">color/bg/selection-accentDefault</tspan></text>
62
+ <line x1="373" y1="764.5" x2="351" y2="764.5" stroke="black"/>
63
+ <circle cx="377.5" cy="764" r="4" stroke="black"/>
64
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="112.127" y="501.455">color/border/interaction-disabled</tspan></text>
65
+ <line x1="373" y1="496.5" x2="351" y2="496.5" stroke="black"/>
66
+ <circle cx="377.5" cy="496" r="4" stroke="black"/>
67
+ <circle cx="372.5" cy="240.5" r="4" stroke="black"/>
68
+ <rect x="372" y="245" width="1" height="19" fill="black"/>
69
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="340.254" y="283.455">radius/xs</tspan></text>
70
+ <circle cx="372.5" cy="776.5" r="4" stroke="black"/>
71
+ <rect x="372" y="781" width="1" height="19" fill="black"/>
72
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="340.254" y="819.455">radius/xs</tspan></text>
73
+ <circle cx="372.5" cy="508.5" r="4" stroke="black"/>
74
+ <rect x="372" y="513" width="1" height="19" fill="black"/>
75
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="340.254" y="551.455">radius/xs</tspan></text>
76
+ <circle cx="442.5" cy="160" r="4" stroke="black"/>
77
+ <line x1="492" y1="160.5" x2="447" y2="160.5" stroke="black"/>
78
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="496.199" y="165.455">color/fg/selection-neutralDefault</tspan></text>
79
+ <circle cx="442.5" cy="696" r="4" stroke="black"/>
80
+ <line x1="492" y1="696.5" x2="447" y2="696.5" stroke="black"/>
81
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="496.199" y="701.455">color/fg/selection-neutralDefault</tspan></text>
82
+ <circle cx="442.5" cy="428" r="4" stroke="black"/>
83
+ <line x1="494" y1="428.5" x2="447" y2="428.5" stroke="black"/>
84
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="498.632" y="433.455">color/fg/interaction-disabled</tspan></text>
85
+ <circle cx="442.5" cy="196" r="4" stroke="black"/>
86
+ <line x1="494" y1="196.5" x2="447" y2="196.5" stroke="black"/>
87
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="498.299" y="201.455">text/body</tspan></text>
88
+ <circle cx="442.5" cy="732" r="4" stroke="black"/>
89
+ <line x1="494" y1="732.5" x2="447" y2="732.5" stroke="black"/>
90
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="498.299" y="737.455">text/body</tspan></text>
91
+ <circle cx="442.5" cy="464" r="4" stroke="black"/>
92
+ <line x1="494" y1="464.5" x2="447" y2="464.5" stroke="black"/>
93
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="498.299" y="469.455">text/body</tspan></text>
94
+ <circle cx="438" cy="784.5" r="4" stroke="black"/>
95
+ <rect x="437.5" y="789" width="1" height="34" fill="black"/>
96
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="331.265" y="842.455">color/border/interaction-focus</tspan></text>
97
+ <circle cx="451.5" cy="781" r="4" stroke="black"/>
98
+ <line x1="504" y1="781.5" x2="456" y2="781.5" stroke="black"/>
99
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="508.154" y="786.455">radius/m</tspan></text>
100
+ <rect x="245.2" y="790.2" width="42.6" height="42.6" rx="1.2" fill="white"/>
101
+ <rect x="245.2" y="790.2" width="42.6" height="42.6" rx="1.2" stroke="#111111" stroke-width="2.4"/>
102
+ <text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="10.8" font-weight="500" letter-spacing="0px"><tspan x="256.827" y="815.327">Tab</tspan></text>
103
+ <rect x="43" y="43" width="101.578" height="30" rx="3" fill="#E8E8E8"/>
104
+ <rect x="43.5" y="43.5" width="100.578" height="29" rx="2.5" stroke="black" stroke-opacity="0.2"/>
105
+ <text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="11" letter-spacing="0em"><tspan x="49" y="60.5">checkbox default</tspan></text>
106
+ </svg>
package/dist/docs/assets/examples/content.svg ADDED
@@ -0,0 +1,68 @@
1
+ <svg width="1140" height="517" viewBox="0 0 1140 517" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M40 56C40 47.1635 47.1634 40 56 40H1084C1092.84 40 1100 47.1634 1100 56V461C1100 469.837 1092.84 477 1084 477H56C47.1634 477 40 469.837 40 461V56Z" fill="#E8E8E8" />
3
+ <path d="M56 40V41H1084V40V39H56V40ZM1100 56H1099V461H1100H1101V56H1100ZM1084 477V476H56V477V478H1084V477ZM40 461H41V56H40H39V461H40ZM56 477V476C47.7157 476 41 469.284 41 461H40H39C39 470.389 46.6112 478 56 478V477ZM1100 461H1099C1099 469.284 1092.28 476 1084 476V477V478C1093.39 478 1101 470.389 1101 461H1100ZM1084 40V41C1092.28 41 1099 47.7157 1099 56H1100H1101C1101 46.6112 1093.39 39 1084 39V40ZM56 40V39C46.6112 39 39 46.6112 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
4
+ <g filter="url(#filter0_d_1195_19955)">
5
+ <path d="M396 208C396 205.791 397.791 204 400 204H732C734.209 204 736 205.791 736 208V414C736 416.209 734.209 418 732 418H400C397.791 418 396 416.209 396 414V208Z" fill="white"/>
6
+ <path d="M400 204.5H732C733.933 204.5 735.5 206.067 735.5 208V414C735.5 415.933 733.933 417.5 732 417.5H400C398.067 417.5 396.5 415.933 396.5 414V208C396.5 206.067 398.067 204.5 400 204.5Z" stroke="#B3B3B3"/>
7
+ <path d="M428 231H430V242H428V231ZM428 245H430V247H428V245Z" fill="#BF8C0D"/>
8
+ <path d="M429 221.2L413.512 251H444.49L444.03 250.12L429 221.2ZM429 223.803L442.51 249.8H415.488L429 223.803Z" fill="#BF8C0D"/>
9
+ <text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="24" font-weight="500" letter-spacing="0px"><tspan x="461" y="243.727">Headline</tspan></text>
10
+ <text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="461" y="272.455">Lorem ipsum dolor sit amet, </tspan><tspan x="461" y="292.455">consetetur sadipscing elitr, sed </tspan><tspan x="461" y="312.455">diam nonumy eirmod tempor </tspan><tspan x="461" y="332.455">invidunt ut labore et dolore magna </tspan><tspan x="461" y="352.455">aliquyam erat, sed diam voluptua.</tspan></text>
11
+ <path d="M465 365.5H585C586.933 365.5 588.5 367.067 588.5 369V397C588.5 398.933 586.933 400.5 585 400.5H465C463.067 400.5 461.5 398.933 461.5 397V369C461.5 367.067 463.067 365.5 465 365.5Z" fill="#E0EBF6"/>
12
+ <path d="M465 365.5H585C586.933 365.5 588.5 367.067 588.5 369V397C588.5 398.933 586.933 400.5 585 400.5H465C463.067 400.5 461.5 398.933 461.5 397V369C461.5 367.067 463.067 365.5 465 365.5Z" stroke="#1467BA"/>
13
+ <rect x="480" y="373" width="1" height="20" fill="#1467BA"/>
14
+ <rect x="471" y="384" width="1" height="20" transform="rotate(-90 471 384)" fill="#1467BA"/>
15
+ <text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="501" y="388.455">Button</tspan></text>
16
+ <rect x="568" y="373" width="1" height="20" fill="#1467BA"/>
17
+ <rect x="559" y="384" width="1" height="20" transform="rotate(-90 559 384)" fill="#1467BA"/>
18
+ </g>
19
+ <g clip-path="url(#clip0_1195_19955)">
20
+ <path d="M707 205L720 205L710.828 195.828C709.266 194.266 706.734 194.266 705.172 195.828L696 205L707 205Z" fill="white"/>
21
+ <path d="M720 205L710.828 195.828C709.266 194.266 706.734 194.266 705.172 195.828L696 205" stroke="#B3B3B3" stroke-linecap="square"/>
22
+ </g>
23
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="210.721" y="241.455">color/fg/warning</tspan></text>
24
+ <line x1="424" y1="236.5" x2="331" y2="236.5" stroke="black"/>
25
+ <circle cx="428.5" cy="236" r="4" stroke="black"/>
26
+ <circle cx="711.5" cy="264" r="4" stroke="black"/>
27
+ <line x1="788" y1="264.5" x2="716" y2="264.5" stroke="black"/>
28
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="792.548" y="269.455">color/bg/default</tspan></text>
29
+ <circle cx="734.5" cy="236" r="4" stroke="black"/>
30
+ <line x1="787" y1="236.5" x2="739" y2="236.5" stroke="black"/>
31
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="791.202" y="241.455">color/border/strong</tspan></text>
32
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="266.299" y="292.455">text/body</tspan></text>
33
+ <line x1="458" y1="287.5" x2="339" y2="287.5" stroke="black"/>
34
+ <circle cx="462.5" cy="287" r="4" stroke="black"/>
35
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="266.796" y="272.455">color/fg/default</tspan></text>
36
+ <line x1="458" y1="267.5" x2="380" y2="267.5" stroke="black"/>
37
+ <circle cx="462.5" cy="267" r="4" stroke="black"/>
38
+ <circle cx="734.5" cy="208" r="4" stroke="black"/>
39
+ <line x1="789" y1="208.5" x2="739" y2="208.5" stroke="black"/>
40
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="793.354" y="213.455">radius/s</tspan></text>
41
+ <circle cx="740.5" cy="292" r="4" stroke="black"/>
42
+ <line x1="787" y1="292.5" x2="745" y2="292.5" stroke="black"/>
43
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="791" y="297.455">effect/shadow-strong</tspan></text>
44
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="462.221" y="114.455">text/titleMedium-strong</tspan></text>
45
+ <rect x="546" y="123" width="1" height="105" fill="black"/>
46
+ <circle cx="546.5" cy="232.5" r="4" stroke="black"/>
47
+ <text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="434.939" y="173.455">color/fg/weak</tspan></text>
48
+ <rect x="482.5" y="182" width="1" height="46" fill="black"/>
49
+ <circle cx="483" cy="232.5" r="4" stroke="black"/>
50
+ <rect x="43" y="43" width="51.9219" height="30" rx="3" fill="#E8E8E8"/>
51
+ <rect x="43.5" y="43.5" width="50.9219" height="29" rx="2.5" stroke="black" stroke-opacity="0.2"/>
52
+ <text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="11" letter-spacing="0em"><tspan x="49" y="60.5">content</tspan></text>
53
+ <defs>
54
+ <filter id="filter0_d_1195_19955" x="373" y="184" width="388" height="262" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
55
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
56
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
57
+ <feOffset dx="1" dy="4"/>
58
+ <feGaussianBlur stdDeviation="12"/>
59
+ <feComposite in2="hardAlpha" operator="out"/>
60
+ <feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0.5 0"/>
61
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1195_19955"/>
62
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1195_19955" result="shape"/>
63
+ </filter>
64
+ <clipPath id="clip0_1195_19955">
65
+ <rect width="56" height="21" fill="white" transform="translate(736 205) rotate(180)"/>
66
+ </clipPath>
67
+ </defs>
68
+ </svg>