npm - @cas-smartdesign/design-tokens - Versions diffs - 2.0.0 → 3.0.0 - Mend

@cas-smartdesign/design-tokens 2.0.0 → 3.0.0

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 (38) hide show

package/dist/base/_tokens.scss +401 -0
package/dist/base/tokens.css +401 -0
package/dist/base/tokens.json +6810 -0
package/dist/dark/_tokens.scss +316 -0
package/dist/dark/tokens.css +316 -0
package/dist/dark/tokens.json +4103 -0
package/dist/docs/assets/color-prominence-guide.svg +53 -0
package/dist/docs/assets/color-role-guide.svg +65 -0
package/dist/docs/assets/color-state-guide.svg +53 -0
package/dist/docs/assets/color-type-guide.svg +58 -0
package/dist/docs/assets/examples/buttons_default.svg +124 -0
package/dist/docs/assets/examples/buttons_ghost.svg +119 -0
package/dist/docs/assets/examples/buttons_outline.svg +142 -0
package/dist/docs/assets/examples/buttons_standard.svg +129 -0
package/dist/docs/assets/examples/checkbox_default.svg +106 -0
package/dist/docs/assets/examples/content.svg +68 -0
package/dist/docs/assets/examples/input_default-focus.svg +87 -0
package/dist/docs/assets/examples/input_default.svg +46 -0
package/dist/docs/assets/examples/input_disabled.svg +70 -0
package/dist/docs/assets/examples/input_error.svg +48 -0
package/dist/docs/assets/examples/input_warning.svg +46 -0
package/dist/docs/assets/examples/list_item_navigation.svg +193 -0
package/dist/docs/assets/examples/list_item_selection.svg +113 -0
package/dist/docs/assets/examples/note.svg +160 -0
package/dist/docs/assets/examples/segmented_button_group.svg +57 -0
package/dist/docs/assets/examples/tag.svg +190 -0
package/dist/docs/index.html +5317 -192
package/dist/light/_tokens.scss +316 -0
package/dist/light/tokens.css +316 -0
package/dist/light/tokens.json +4103 -0
package/dist/tokens.css +1033 -165
package/npm-third-party-licenses.json +1 -1
package/package.json +15 -5
package/readme.md +7 -2
package/dist/tokens.d.ts +0 -222
package/dist/tokens.esm.js +0 -2189
package/dist/tokens.json +0 -2993
package/dist/tokens.scss +0 -494

package/dist/docs/assets/color-prominence-guide.svg ADDED Viewed

@@ -0,0 +1,53 @@
+<svg width="448" height="975" viewBox="0 0 448 975" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="448" height="975" rx="24" fill="#C6E7FF"/>
+<rect x="90" y="52" width="267" height="90" rx="12" fill="white"/>
+<rect x="103" y="64" width="8" height="15" rx="4" fill="#1467BA"/>
+<rect x="105" y="83" width="4" height="49" rx="2" fill="#EDEDED"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" font-weight="500" letter-spacing="0px"><tspan x="132" y="77.4545">Title</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="132" y="100.455">From - To</tspan></text>
+<rect x="205" y="84" width="70" height="22" rx="4" fill="#1467BA"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" font-weight="600" letter-spacing="0em"><tspan x="211" y="98.8636">ONGOING</tspan></text>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="132" y="120.727">Name, Name</tspan></text>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px" text-decoration="underline"><tspan x="220.803" y="120.727">+x more</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="13.7959" y="95.4545">color/fg/default</tspan></text>
+<line x1="130" y1="90.5" x2="127" y2="90.5" stroke="black"/>
+<circle cx="134.5" cy="90" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="70.5273" y="33.4545">color/fg/action-accentDefault</tspan></text>
+<rect x="174.5" y="42" width="1" height="21" fill="black"/>
+<circle cx="175" cy="67.5" r="4" stroke="black"/>
+<circle cx="285.5" cy="120.5" r="4" stroke="black"/>
+<rect x="285" y="125" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="186.646" y="187.455">color/fg/action-neutralWeak</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="13.9648" y="125.455">color/fg/weaker</tspan></text>
+<line x1="130" y1="120.5" x2="129" y2="120.5" stroke="black"/>
+<circle cx="134.5" cy="120" r="4" stroke="black"/>
+<rect x="87" y="241" width="127" height="36" rx="4" fill="#1467BA"/>
+<rect x="106" y="249" width="1" height="20" fill="#1467BA"/>
+<rect x="97" y="260" width="1" height="20" transform="rotate(-90 97 260)" fill="#1467BA"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="-0.16px"><tspan x="127" y="264.455">Button</tspan></text>
+<rect x="193" y="249" width="1" height="20" fill="#1467BA"/>
+<rect x="184" y="260" width="1" height="20" transform="rotate(-90 184 260)" fill="#1467BA"/>
+<rect x="96" y="572" width="78" height="36" rx="4" fill="#FBDDE0"/>
+<text fill="#A90014" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="-0.16px"><tspan x="112" y="595.455">Delete</tspan></text>
+<circle cx="165" cy="273.5" r="4" stroke="black"/>
+<rect x="164.5" y="278" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="58.2793" y="340.455">color/bg/action-accentDefault</tspan></text>
+<circle cx="132" cy="602.5" r="4" stroke="black"/>
+<rect x="131.5" y="607" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="24.624" y="669.455">color/bg/action-dangerDefault</tspan></text>
+<circle cx="173.5" cy="259" r="4" stroke="black"/>
+<line x1="181" y1="259.5" x2="178" y2="259.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="185.041" y="264.455">color/fg/interaction-onColor</tspan></text>
+<circle cx="156.5" cy="590" r="4" stroke="black"/>
+<line x1="180" y1="590.5" x2="161" y2="590.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="184.872" y="595.455">color/fg/action-dangerDefault</tspan></text>
+<path d="M131 435C131 433.895 131.895 433 133 433H149C150.105 433 151 433.895 151 435V451C151 452.105 150.105 453 149 453H133C131.895 453 131 452.105 131 451V435Z" fill="#1467BA"/>
+<path d="M136 443.885L139.333 447.167L146 439.667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="-0.16px"><tspan x="163" y="449.455">Label</tspan></text>
+<circle cx="143.5" cy="444" r="4" stroke="black"/>
+<line x1="175" y1="444.5" x2="148" y2="444.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="179.041" y="449.455">color/fg/interaction-onColor</tspan></text>
+<circle cx="173" cy="451.5" r="4" stroke="black"/>
+<rect x="172.5" y="456" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="66.2793" y="518.455">color/bg/action-accentDefault</tspan></text>
+</svg>

package/dist/docs/assets/color-role-guide.svg ADDED Viewed

@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="446" height="975" viewBox="0 0 446 975" fill="none">
+<rect width="446" height="975" rx="24" fill="#C6E7FF"/>
+<path d="M174 230C174 227.791 175.791 226 178 226H298C300.209 226 302 227.791 302 230V258C302 260.209 300.209 262 298 262H178C175.791 262 174 260.209 174 258V230Z" fill="#1467BA"/>
+<path d="M193.25 235.75C193.25 235.336 193.586 235 194 235C194.414 235 194.75 235.336 194.75 235.75V252.25C194.75 252.664 194.414 253 194 253C193.586 253 193.25 252.664 193.25 252.25V235.75Z" fill="white"/>
+<path d="M202.25 243.25C202.664 243.25 203 243.586 203 244C203 244.414 202.664 244.75 202.25 244.75H185.75C185.336 244.75 185 244.414 185 244C185 243.586 185.336 243.25 185.75 243.25H202.25Z" fill="white"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="214" y="249.455">Button</tspan></text>
+<path d="M281.25 235.75C281.25 235.336 281.586 235 282 235C282.414 235 282.75 235.336 282.75 235.75V252.25C282.75 252.664 282.414 253 282 253C281.586 253 281.25 252.664 281.25 252.25V235.75Z" fill="white"/>
+<path d="M290.25 243.25C290.664 243.25 291 243.586 291 244C291 244.414 290.664 244.75 290.25 244.75H273.75C273.336 244.75 273 244.414 273 244C273 243.586 273.336 243.25 273.75 243.25H290.25Z" fill="white"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="36.3779" y="242.455">color/bg/action</tspan></text>
+<line x1="176" y1="237.5" x2="148" y2="237.5" stroke="black"/>
+<circle cx="180.5" cy="237" r="4" stroke="black"/>
+<circle cx="283" cy="244.5" r="4" stroke="black"/>
+<rect x="282.5" y="249" width="1" height="24" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="215.619" y="292.455">color/fg/interaction</tspan></text>
+<rect x="96" y="63" width="267" height="90" rx="12" fill="white"/>
+<rect x="109" y="75" width="8" height="15" rx="4" fill="#1467BA"/>
+<rect x="111" y="94" width="4" height="49" rx="2" fill="#EDEDED"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" font-weight="500" letter-spacing="0px"><tspan x="138" y="88.4545">Title</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="138" y="111.455">From - To</tspan></text>
+<rect x="211" y="95" width="70" height="22" rx="4" fill="#1467BA"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" font-weight="600" letter-spacing="0em"><tspan x="217" y="109.864">ONGOING</tspan></text>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="138" y="131.727">Name, Name</tspan></text>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px" text-decoration="underline"><tspan x="226.803" y="131.727">+x more</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="19.7959" y="107.455">color/fg/default</tspan></text>
+<line x1="136" y1="102.5" x2="133" y2="102.5" stroke="black"/>
+<circle cx="140.5" cy="102" r="4" stroke="black"/>
+<path d="M210 624C210 622.895 210.895 622 212 622H228C229.105 622 230 622.895 230 624V640C230 641.105 229.105 642 228 642H212C210.895 642 210 641.105 210 640V624Z" fill="#1467BA"/>
+<path d="M215 632.885L218.333 636.167L225 628.667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="242" y="637.455">Label</tspan></text>
+<circle cx="271.5" cy="132" r="4" stroke="black"/>
+<line x1="327" y1="132.5" x2="276" y2="132.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="331.626" y="137.455">color/fg/action</tspan></text>
+<rect x="89" y="395" width="281" height="72" rx="12" fill="white"/>
+<path d="M103 413.5H185.5V448.5H103C101.067 448.5 99.5 446.933 99.5 445V417C99.5 415.067 101.067 413.5 103 413.5Z" fill="white"/>
+<path d="M103 413.5H185.5V448.5H103C101.067 448.5 99.5 446.933 99.5 445V417C99.5 415.067 101.067 413.5 103 413.5Z" stroke="#999999"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="123" y="436.455">Value</tspan></text>
+<path d="M272.5 413.5V448.5H186.5V413.5H272.5Z" fill="#C7DBEF"/>
+<path d="M272.5 413.5V448.5H186.5V413.5H272.5Z" stroke="#1467BA"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="210" y="436.455">Value</tspan></text>
+<path d="M356 413.5C357.933 413.5 359.5 415.067 359.5 417V445C359.5 446.933 357.933 448.5 356 448.5H273.5V413.5H356Z" fill="white"/>
+<path d="M356 413.5C357.933 413.5 359.5 415.067 359.5 417V445C359.5 446.933 357.933 448.5 356 448.5H273.5V413.5H356Z" stroke="#999999"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="297" y="436.455">Value</tspan></text>
+<circle cx="219" cy="635.5" r="4" stroke="black"/>
+<rect x="218.5" y="640" width="1" height="14" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="151.619" y="673.455">color/fg/interaction</tspan></text>
+<circle cx="232" cy="433.5" r="4" stroke="black"/>
+<rect x="231.5" y="438" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="170.221" y="500.455">color/fg/selection</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="154.973" y="593.455">color/bg/selection</tspan></text>
+<rect x="218" y="602" width="1" height="19" fill="black"/>
+<circle cx="218.5" cy="625.5" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="197.973" y="385.455">color/bg/selection</tspan></text>
+<rect x="261" y="394" width="1" height="26" fill="black"/>
+<circle cx="261.5" cy="424.5" r="4" stroke="black"/>
+<path d="M68 750.5H290C291.933 750.5 293.5 752.067 293.5 754V874C293.5 875.933 291.933 877.5 290 877.5H68C66.067 877.5 64.5 875.933 64.5 874V754C64.5 752.067 66.067 750.5 68 750.5Z" fill="#FBDDE0"/>
+<path d="M68 750.5H290C291.933 750.5 293.5 752.067 293.5 754V874C293.5 875.933 291.933 877.5 290 877.5H68C66.067 877.5 64.5 875.933 64.5 874V754C64.5 752.067 66.067 750.5 68 750.5Z" stroke="#F8C3C9"/>
+<path d="M96 795.8C88.4 795.8 82.2 789.6 82.2 782C82.2 774.4 88.4 768.2 96 768.2C103.6 768.2 109.8 774.4 109.8 782C109.8 789.6 103.6 795.8 96 795.8ZM96 797C104.3 797 111 790.3 111 782C111 773.7 104.3 767 96 767C87.7 767 81 773.7 81 782C81 790.3 87.7 797 96 797Z" fill="#A90014"/>
+<path d="M95 773H97V785H95V773Z" fill="#A90014"/>
+<path d="M95 788H97V790H95V788Z" fill="#A90014"/>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="24" font-weight="500" letter-spacing="0px"><tspan x="128" y="788.727">Headline</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="128" y="817.455">Lorem ipsum dolor </tspan><tspan x="128" y="837.455">sit amet, consetetur </tspan><tspan x="128" y="857.455">sadipscing elitr,.</tspan></text>
+<circle cx="271.5" cy="776" r="4" stroke="black"/>
+<line x1="306" y1="776.5" x2="276" y2="776.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="310.947" y="781.455">color/bg/danger</tspan></text>
+</svg>

package/dist/docs/assets/color-state-guide.svg ADDED Viewed

@@ -0,0 +1,53 @@
+<svg width="448" height="975" viewBox="0 0 448 975" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="448" height="975" rx="24" fill="#C6E7FF"/>
+<rect x="90" y="52" width="267" height="90" rx="12" fill="white"/>
+<rect x="103" y="64" width="8" height="15" rx="4" fill="#1467BA"/>
+<rect x="105" y="83" width="4" height="49" rx="2" fill="#EDEDED"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" font-weight="500" letter-spacing="0px"><tspan x="132" y="77.4545">Title</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="132" y="100.455">From - To</tspan></text>
+<rect x="205" y="84" width="70" height="22" rx="4" fill="#1467BA"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" font-weight="600" letter-spacing="0em"><tspan x="211" y="98.8636">ONGOING</tspan></text>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="132" y="120.727">Name, Name</tspan></text>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px" text-decoration="underline"><tspan x="220.803" y="120.727">+x more</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="13.7959" y="95.4545">color/fg/default</tspan></text>
+<line x1="130" y1="90.5" x2="127" y2="90.5" stroke="black"/>
+<circle cx="134.5" cy="90" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="70.5273" y="33.4545">color/fg/action-accentDefault</tspan></text>
+<rect x="174.5" y="42" width="1" height="21" fill="black"/>
+<circle cx="175" cy="67.5" r="4" stroke="black"/>
+<circle cx="285.5" cy="120.5" r="4" stroke="black"/>
+<rect x="285" y="125" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="186.646" y="187.455">color/fg/action-neutralWeak</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="13.9648" y="125.455">color/fg/weaker</tspan></text>
+<line x1="130" y1="120.5" x2="129" y2="120.5" stroke="black"/>
+<circle cx="134.5" cy="120" r="4" stroke="black"/>
+<rect x="87" y="241" width="127" height="36" rx="4" fill="#1467BA"/>
+<rect x="106" y="249" width="1" height="20" fill="#1467BA"/>
+<rect x="97" y="260" width="1" height="20" transform="rotate(-90 97 260)" fill="#1467BA"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="-0.16px"><tspan x="127" y="264.455">Button</tspan></text>
+<rect x="193" y="249" width="1" height="20" fill="#1467BA"/>
+<rect x="184" y="260" width="1" height="20" transform="rotate(-90 184 260)" fill="#1467BA"/>
+<rect x="96" y="572" width="78" height="36" rx="4" fill="#FBDDE0"/>
+<text fill="#A90014" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="-0.16px"><tspan x="112" y="595.455">Delete</tspan></text>
+<circle cx="165" cy="273.5" r="4" stroke="black"/>
+<rect x="164.5" y="278" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="58.2793" y="340.455">color/bg/action-accentDefault</tspan></text>
+<circle cx="132" cy="602.5" r="4" stroke="black"/>
+<rect x="131.5" y="607" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="24.624" y="669.455">color/bg/action-dangerDefault</tspan></text>
+<circle cx="173.5" cy="259" r="4" stroke="black"/>
+<line x1="181" y1="259.5" x2="178" y2="259.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="185.041" y="264.455">color/fg/interaction-onColor</tspan></text>
+<circle cx="156.5" cy="590" r="4" stroke="black"/>
+<line x1="180" y1="590.5" x2="161" y2="590.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="184.872" y="595.455">color/fg/action-dangerDefault</tspan></text>
+<path d="M131 435C131 433.895 131.895 433 133 433H149C150.105 433 151 433.895 151 435V451C151 452.105 150.105 453 149 453H133C131.895 453 131 452.105 131 451V435Z" fill="#1467BA"/>
+<path d="M136 443.885L139.333 447.167L146 439.667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="-0.16px"><tspan x="163" y="449.455">Label</tspan></text>
+<circle cx="143.5" cy="444" r="4" stroke="black"/>
+<line x1="175" y1="444.5" x2="148" y2="444.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="179.041" y="449.455">color/fg/interaction-onColor</tspan></text>
+<circle cx="173" cy="451.5" r="4" stroke="black"/>
+<rect x="172.5" y="456" width="1" height="43" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="66.2793" y="518.455">color/bg/action-accentDefault</tspan></text>
+</svg>

package/dist/docs/assets/color-type-guide.svg ADDED Viewed

@@ -0,0 +1,58 @@
+<svg width="448" height="975" viewBox="0 0 448 975" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="448" height="975" rx="24" fill="#C6E7FF"/>
+<path d="M151 224C151 221.791 152.791 220 155 220H275C277.209 220 279 221.791 279 224V252C279 254.209 277.209 256 275 256H155C152.791 256 151 254.209 151 252V224Z" fill="#1467BA"/>
+<path d="M170.25 229.75C170.25 229.336 170.586 229 171 229C171.414 229 171.75 229.336 171.75 229.75V246.25C171.75 246.664 171.414 247 171 247C170.586 247 170.25 246.664 170.25 246.25V229.75Z" fill="white"/>
+<path d="M179.25 237.25C179.664 237.25 180 237.586 180 238C180 238.414 179.664 238.75 179.25 238.75H162.75C162.336 238.75 162 238.414 162 238C162 237.586 162.336 237.25 162.75 237.25H179.25Z" fill="white"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="191" y="243.455">Button</tspan></text>
+<path d="M258.25 229.75C258.25 229.336 258.586 229 259 229C259.414 229 259.75 229.336 259.75 229.75V246.25C259.75 246.664 259.414 247 259 247C258.586 247 258.25 246.664 258.25 246.25V229.75Z" fill="white"/>
+<path d="M267.25 237.25C267.664 237.25 268 237.586 268 238C268 238.414 267.664 238.75 267.25 238.75H250.75C250.336 238.75 250 238.414 250 238C250 237.586 250.336 237.25 250.75 237.25H267.25Z" fill="white"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="64.2891" y="234.455">color/bg</tspan></text>
+<line x1="158" y1="229.5" x2="127" y2="229.5" stroke="black"/>
+<circle cx="162.5" cy="229" r="4" stroke="black"/>
+<path d="M155 416.5H275C276.933 416.5 278.5 418.067 278.5 420V448C278.5 449.933 276.933 451.5 275 451.5H155C153.067 451.5 151.5 449.933 151.5 448V420C151.5 418.067 153.067 416.5 155 416.5Z" fill="#E0EBF6"/>
+<path d="M155 416.5H275C276.933 416.5 278.5 418.067 278.5 420V448C278.5 449.933 276.933 451.5 275 451.5H155C153.067 451.5 151.5 449.933 151.5 448V420C151.5 418.067 153.067 416.5 155 416.5Z" stroke="#1467BA"/>
+<path d="M170.25 425.75C170.25 425.336 170.586 425 171 425C171.414 425 171.75 425.336 171.75 425.75V442.25C171.75 442.664 171.414 443 171 443C170.586 443 170.25 442.664 170.25 442.25V425.75Z" fill="#1467BA"/>
+<path d="M179.25 433.25C179.664 433.25 180 433.586 180 434C180 434.414 179.664 434.75 179.25 434.75H162.75C162.336 434.75 162 434.414 162 434C162 433.586 162.336 433.25 162.75 433.25H179.25Z" fill="#1467BA"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="191" y="439.455">Button</tspan></text>
+<path d="M258.25 425.75C258.25 425.336 258.586 425 259 425C259.414 425 259.75 425.336 259.75 425.75V442.25C259.75 442.664 259.414 443 259 443C258.586 443 258.25 442.664 258.25 442.25V425.75Z" fill="#1467BA"/>
+<path d="M267.25 433.25C267.664 433.25 268 433.586 268 434C268 434.414 267.664 434.75 267.25 434.75H250.75C250.336 434.75 250 434.414 250 434C250 433.586 250.336 433.25 250.75 433.25H267.25Z" fill="#1467BA"/>
+<circle cx="258.5" cy="237.5" r="4" stroke="black"/>
+<rect x="258" y="242" width="1" height="35" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="231.537" y="296.455">color/fg</tspan></text>
+<circle cx="259.5" cy="434" r="4" stroke="black"/>
+<line x1="304" y1="434.5" x2="264" y2="434.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="308.537" y="439.455">color/fg</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="190.52" y="369.455">color/border</tspan></text>
+<rect x="233.5" y="378" width="1" height="33" fill="black"/>
+<circle cx="234" cy="415.5" r="4" stroke="black"/>
+<path d="M290 537.5C292.485 537.5 294.5 539.515 294.5 542V570C294.5 572.485 292.485 574.5 290 574.5H137C134.515 574.5 132.5 572.485 132.5 570V542C132.5 539.515 134.515 537.5 137 537.5H290Z" fill="#EFF6DF"/>
+<path d="M290 537.5C292.485 537.5 294.5 539.515 294.5 542V570C294.5 572.485 292.485 574.5 290 574.5H137C134.515 574.5 132.5 572.485 132.5 570V542C132.5 539.515 134.515 537.5 137 537.5H290Z" stroke="#688E09"/>
+<path d="M150.793 558.068C151.059 557.698 151.192 557.513 151.323 557.461C151.447 557.412 151.553 557.412 151.677 557.461C151.808 557.513 151.941 557.698 152.207 558.068C152.449 558.404 152.724 558.754 152.985 559.015C153.246 559.276 153.596 559.551 153.932 559.793C154.302 560.059 154.487 560.192 154.539 560.323C154.588 560.447 154.588 560.553 154.539 560.677C154.487 560.808 154.302 560.941 153.932 561.207C153.596 561.449 153.246 561.724 152.985 561.985C152.724 562.246 152.449 562.596 152.207 562.932C151.941 563.302 151.808 563.487 151.677 563.539C151.553 563.588 151.447 563.588 151.323 563.539C151.192 563.487 151.059 563.302 150.793 562.932C150.551 562.596 150.276 562.246 150.015 561.985C149.754 561.724 149.404 561.449 149.068 561.207C148.698 560.941 148.513 560.808 148.461 560.677C148.412 560.553 148.412 560.447 148.461 560.323C148.513 560.192 148.698 560.059 149.068 559.793C149.404 559.551 149.754 559.276 150.015 559.015C150.276 558.754 150.551 558.404 150.793 558.068Z" stroke="#2C3C04" stroke-width="1.5"/>
+<path d="M157.305 549.076C157.558 548.705 157.685 548.52 157.818 548.465C157.942 548.414 158.058 548.414 158.182 548.465C158.315 548.52 158.442 548.705 158.695 549.076C159.101 549.671 159.629 550.387 160.121 550.879C160.613 551.371 161.329 551.899 161.924 552.305C162.295 552.558 162.48 552.685 162.535 552.818C162.586 552.942 162.586 553.058 162.535 553.182C162.48 553.315 162.295 553.442 161.924 553.695C161.329 554.101 160.613 554.629 160.121 555.121C159.629 555.613 159.101 556.329 158.695 556.924C158.442 557.295 158.315 557.48 158.182 557.535C158.058 557.586 157.942 557.586 157.818 557.535C157.685 557.48 157.558 557.295 157.305 556.924C156.899 556.329 156.371 555.613 155.879 555.121C155.387 554.629 154.671 554.101 154.076 553.695C153.705 553.442 153.52 553.315 153.465 553.182C153.414 553.058 153.414 552.942 153.465 552.818C153.52 552.685 153.705 552.558 154.076 552.305C154.671 551.899 155.387 551.371 155.879 550.879C156.371 550.387 156.899 549.671 157.305 549.076Z" stroke="#2C3C04" stroke-width="1.5"/>
+<path d="M144.775 554.055C145.062 553.691 145.206 553.51 145.33 553.463C145.456 553.415 145.544 553.415 145.67 553.463C145.794 553.51 145.938 553.691 146.225 554.055C146.336 554.195 146.45 554.329 146.561 554.439C146.671 554.55 146.805 554.664 146.945 554.775C147.309 555.062 147.49 555.206 147.537 555.33C147.585 555.456 147.585 555.544 147.537 555.67C147.49 555.794 147.309 555.938 146.945 556.225C146.805 556.336 146.671 556.45 146.561 556.561C146.45 556.671 146.336 556.805 146.225 556.945C145.938 557.309 145.794 557.49 145.67 557.537C145.544 557.585 145.456 557.585 145.33 557.537C145.206 557.49 145.062 557.309 144.775 556.945C144.664 556.805 144.55 556.671 144.439 556.561C144.329 556.45 144.195 556.336 144.055 556.225C143.691 555.938 143.51 555.794 143.463 555.67C143.415 555.544 143.415 555.456 143.463 555.33C143.51 555.206 143.691 555.062 144.055 554.775C144.195 554.664 144.329 554.55 144.439 554.439C144.55 554.329 144.664 554.195 144.775 554.055Z" stroke="#2C3C04" stroke-width="1.5"/>
+<text fill="#2C3C04" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="561.455">&#60;AiA tag value&#62;</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="55.2891" y="429.455">color/bg</tspan></text>
+<line x1="158" y1="424.5" x2="118" y2="424.5" stroke="black"/>
+<circle cx="162.5" cy="424" r="4" stroke="black"/>
+<circle cx="280.5" cy="545" r="4" stroke="black"/>
+<line x1="364" y1="545.5" x2="285" y2="545.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="368.457" y="550.455">rainbow</tspan></text>
+<rect x="96" y="63" width="267" height="90" rx="12" fill="white"/>
+<rect x="109" y="75" width="8" height="15" rx="4" fill="#1467BA"/>
+<rect x="111" y="94" width="4" height="49" rx="2" fill="#EDEDED"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" font-weight="500" letter-spacing="0px"><tspan x="138" y="88.4545">Title</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="138" y="111.455">From - To</tspan></text>
+<rect x="211" y="95" width="70" height="22" rx="4" fill="#1467BA"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" font-weight="600" letter-spacing="0em"><tspan x="217" y="109.864">ONGOING</tspan></text>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="138" y="131.727">Name, Name</tspan></text>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px" text-decoration="underline"><tspan x="226.803" y="131.727">+x more</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="19.5371" y="107.455">color/fg</tspan></text>
+<line x1="136" y1="102.5" x2="78" y2="102.5" stroke="black"/>
+<circle cx="140.5" cy="102" r="4" stroke="black"/>
+<circle cx="271.5" cy="132" r="4" stroke="black"/>
+<line x1="358" y1="132.5" x2="276" y2="132.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="362.537" y="137.455">color/fg</tspan></text>
+<circle cx="318.5" cy="98" r="4" stroke="black"/>
+<line x1="354" y1="98.5" x2="323" y2="98.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="358.289" y="103.455">color/bg</tspan></text>
+</svg>

package/dist/docs/assets/examples/buttons_default.svg ADDED Viewed

@@ -0,0 +1,124 @@
+<svg width="780" height="1164" viewBox="0 0 780 1164" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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" />
+<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"/>
+<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="#1467BA"/>
+<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="white"/>
+<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="white"/>
+<text fill="white" 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>
+<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="white"/>
+<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="white"/>
+<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="#0F4D8B"/>
+<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="white"/>
+<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="white"/>
+<text fill="white" 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>
+<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="white"/>
+<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="white"/>
+<path d="M227 922C227 919.791 228.791 918 231 918H351C353.209 918 355 919.791 355 922V950C355 952.209 353.209 954 351 954H231C228.791 954 227 952.209 227 950V922Z" fill="#0F4D8B"/>
+<path d="M246.25 927.75C246.25 927.336 246.586 927 247 927C247.414 927 247.75 927.336 247.75 927.75V944.25C247.75 944.664 247.414 945 247 945C246.586 945 246.25 944.664 246.25 944.25V927.75Z" fill="white"/>
+<path d="M255.25 935.25C255.664 935.25 256 935.586 256 936C256 936.414 255.664 936.75 255.25 936.75H238.75C238.336 936.75 238 936.414 238 936C238 935.586 238.336 935.25 238.75 935.25H255.25Z" fill="white"/>
+<text fill="white" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="267" y="941.455">Button</tspan></text>
+<path d="M334.25 927.75C334.25 927.336 334.586 927 335 927C335.414 927 335.75 927.336 335.75 927.75V944.25C335.75 944.664 335.414 945 335 945C334.586 945 334.25 944.664 334.25 944.25V927.75Z" fill="white"/>
+<path d="M343.25 935.25C343.664 935.25 344 935.586 344 936C344 936.414 343.664 936.75 343.25 936.75H326.75C326.336 936.75 326 936.414 326 936C326 935.586 326.336 935.25 326.75 935.25H343.25Z" fill="white"/>
+<path d="M232 915.5H350C354.142 915.5 357.5 918.858 357.5 923V949C357.5 953.142 354.142 956.5 350 956.5H232C227.858 956.5 224.5 953.142 224.5 949V923C224.5 918.858 227.858 915.5 232 915.5Z" stroke="#111111"/>
+<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="#0B3A69"/>
+<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="white"/>
+<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="white"/>
+<text fill="white" 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>
+<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="white"/>
+<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="white"/>
+<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"/>
+<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"/>
+<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"/>
+<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>
+<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"/>
+<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"/>
+<circle cx="348.5" cy="211" r="4" stroke="black"/>
+<line x1="393" y1="211.5" x2="353" y2="211.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="397.279" y="216.455">color/bg/action-accentDefault</tspan></text>
+<circle cx="348.5" cy="395" r="4" stroke="black"/>
+<line x1="389" y1="395.5" x2="353" y2="395.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="393.785" y="400.455">color/bg/action-accentDefault-hover</tspan></text>
+<circle cx="348.5" cy="947" r="4" stroke="black"/>
+<line x1="389" y1="947.5" x2="353" y2="947.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="393.785" y="952.455">color/bg/action-accentDefault-hover</tspan></text>
+<circle cx="348.5" cy="579" r="4" stroke="black"/>
+<line x1="391" y1="579.5" x2="353" y2="579.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="395.749" y="584.455">color/bg/action-accentDefault-pressed</tspan></text>
+<circle cx="348.5" cy="763" r="4" stroke="black"/>
+<line x1="392" y1="763.5" x2="353" y2="763.5" stroke="black"/>
+<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>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="175.041" y="153.455">color/fg/interaction-onColor</tspan></text>
+<rect x="273.5" y="162" width="1" height="33" fill="black"/>
+<circle cx="274" cy="199.5" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="175.041" y="337.455">color/fg/interaction-onColor</tspan></text>
+<rect x="273.5" y="346" width="1" height="33" fill="black"/>
+<circle cx="274" cy="383.5" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="175.041" y="889.455">color/fg/interaction-onColor</tspan></text>
+<rect x="273.5" y="898" width="1" height="33" fill="black"/>
+<circle cx="274" cy="935.5" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="175.041" y="521.455">color/fg/interaction-onColor</tspan></text>
+<rect x="273.5" y="530" width="1" height="33" fill="black"/>
+<circle cx="274" cy="567.5" r="4" stroke="black"/>
+<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>
+<rect x="274" y="714" width="1" height="33" fill="black"/>
+<circle cx="274.5" cy="751.5" r="4" stroke="black"/>
+<line x1="249.582" y1="196.429" x2="274.222" y2="171.788" stroke="black"/>
+<circle cx="246.753" cy="199.964" r="4" transform="rotate(135 246.753 199.964)" stroke="black"/>
+<line x1="249.582" y1="380.429" x2="274.222" y2="355.788" stroke="black"/>
+<circle cx="246.753" cy="383.964" r="4" transform="rotate(135 246.753 383.964)" stroke="black"/>
+<line x1="249.582" y1="932.429" x2="274.222" y2="907.788" stroke="black"/>
+<circle cx="246.753" cy="935.964" r="4" transform="rotate(135 246.753 935.964)" stroke="black"/>
+<line x1="249.582" y1="564.429" x2="274.222" y2="539.788" stroke="black"/>
+<circle cx="246.753" cy="567.964" r="4" transform="rotate(135 246.753 567.964)" stroke="black"/>
+<line x1="249.582" y1="748.429" x2="274.222" y2="723.788" stroke="black"/>
+<circle cx="246.753" cy="751.964" r="4" transform="rotate(135 246.753 751.964)" stroke="black"/>
+<circle cx="274" cy="199.5" r="4" stroke="black"/>
+<rect x="273.5" y="204" width="1" height="29" fill="black"/>
+<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>
+<circle cx="274" cy="383.5" r="4" stroke="black"/>
+<rect x="273.5" y="388" width="1" height="29" fill="black"/>
+<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>
+<circle cx="274" cy="935.5" r="4" stroke="black"/>
+<rect x="273.5" y="940" width="1" height="29" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="239.799" y="988.455">text/body</tspan></text>
+<circle cx="334" cy="956.5" r="4" stroke="black"/>
+<rect x="333.5" y="961" width="1" height="46" fill="black"/>
+<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>
+<circle cx="274" cy="567.5" r="4" stroke="black"/>
+<rect x="273.5" y="572" width="1" height="29" fill="black"/>
+<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>
+<circle cx="274" cy="751.5" r="4" stroke="black"/>
+<rect x="273.5" y="756" width="1" height="29" fill="black"/>
+<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>
+<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>
+<line x1="223" y1="183.5" x2="197" y2="183.5" stroke="black"/>
+<circle cx="227.5" cy="183" r="4" stroke="black"/>
+<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>
+<line x1="223" y1="367.5" x2="197" y2="367.5" stroke="black"/>
+<circle cx="227.5" cy="367" r="4" stroke="black"/>
+<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>
+<line x1="223" y1="918.5" x2="197" y2="918.5" stroke="black"/>
+<circle cx="227.5" cy="918" r="4" stroke="black"/>
+<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>
+<line x1="221" y1="955.5" x2="198" y2="955.5" stroke="black"/>
+<circle cx="225.5" cy="955" r="4" stroke="black"/>
+<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>
+<line x1="223" y1="551.5" x2="197" y2="551.5" stroke="black"/>
+<circle cx="227.5" cy="551" r="4" stroke="black"/>
+<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>
+<line x1="223" y1="735.5" x2="197" y2="735.5" stroke="black"/>
+<circle cx="227.5" cy="735" r="4" stroke="black"/>
+<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"/>
+<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"/>
+<path d="M285.91 574.91L281.031 570.031" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M292.117 572.632V565.732" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M298.002 575.122L302.881 570.243" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M283.843 580.906H276.943" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M286.334 586.789L281.455 591.668" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<rect x="151.2" y="994.2" width="42.6" height="42.6" rx="1.2" fill="white"/>
+<rect x="151.2" y="994.2" width="42.6" height="42.6" rx="1.2" stroke="#111111" stroke-width="2.4"/>
+<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>
+<rect x="43" y="43" width="91.2344" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="90.2344" height="29" rx="2.5" stroke="black" stroke-opacity="0.2"/>
+<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 default</tspan></text>
+</svg>

package/dist/docs/assets/examples/buttons_ghost.svg ADDED Viewed

@@ -0,0 +1,119 @@
+<svg width="780" height="1164" viewBox="0 0 780 1164" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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" />
+<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"/>
+<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"/>
+<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"/>
+<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>
+<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"/>
+<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"/>
+<path d="M214 370C214 367.791 215.791 366 218 366H338C340.209 366 342 367.791 342 370V398C342 400.209 340.209 402 338 402H218C215.791 402 214 400.209 214 398V370Z" fill="#E0EBF6"/>
+<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"/>
+<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"/>
+<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>
+<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"/>
+<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"/>
+<path d="M214 921C214 918.791 215.791 917 218 917H338C340.209 917 342 918.791 342 921V949C342 951.209 340.209 953 338 953H218C215.791 953 214 951.209 214 949V921Z" fill="#E0EBF6"/>
+<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"/>
+<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"/>
+<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>
+<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"/>
+<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"/>
+<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"/>
+<path d="M214 554C214 551.791 215.791 550 218 550H338C340.209 550 342 551.791 342 554V582C342 584.209 340.209 586 338 586H218C215.791 586 214 584.209 214 582V554Z" fill="#C7DBEF"/>
+<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"/>
+<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"/>
+<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>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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>
+<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"/>
+<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"/>
+<circle cx="335.5" cy="211" r="4" stroke="black"/>
+<line x1="377" y1="211.5" x2="340" y2="211.5" stroke="black"/>
+<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>
+<circle cx="335.5" cy="395" r="4" stroke="black"/>
+<line x1="376" y1="395.5" x2="340" y2="395.5" stroke="black"/>
+<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>
+<circle cx="335.5" cy="946" r="4" stroke="black"/>
+<line x1="376" y1="946.5" x2="340" y2="946.5" stroke="black"/>
+<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>
+<circle cx="335.5" cy="579" r="4" stroke="black"/>
+<line x1="378" y1="579.5" x2="340" y2="579.5" stroke="black"/>
+<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>
+<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>
+<rect x="260.5" y="162" width="1" height="33" fill="black"/>
+<circle cx="261" cy="199.5" r="4" stroke="black"/>
+<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>
+<rect x="260.5" y="346" width="1" height="33" fill="black"/>
+<circle cx="261" cy="383.5" r="4" stroke="black"/>
+<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>
+<rect x="260.5" y="897" width="1" height="33" fill="black"/>
+<circle cx="261" cy="934.5" r="4" stroke="black"/>
+<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>
+<rect x="260.5" y="530" width="1" height="33" fill="black"/>
+<circle cx="261" cy="567.5" r="4" stroke="black"/>
+<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>
+<rect x="261" y="714" width="1" height="33" fill="black"/>
+<circle cx="261.5" cy="751.5" r="4" stroke="black"/>
+<line x1="236.582" y1="196.429" x2="261.222" y2="171.788" stroke="black"/>
+<circle cx="233.753" cy="199.964" r="4" transform="rotate(135 233.753 199.964)" stroke="black"/>
+<line x1="236.582" y1="380.429" x2="261.222" y2="355.788" stroke="black"/>
+<circle cx="233.753" cy="383.964" r="4" transform="rotate(135 233.753 383.964)" stroke="black"/>
+<line x1="236.582" y1="931.429" x2="261.222" y2="906.788" stroke="black"/>
+<circle cx="233.753" cy="934.964" r="4" transform="rotate(135 233.753 934.964)" stroke="black"/>
+<line x1="236.582" y1="564.429" x2="261.222" y2="539.788" stroke="black"/>
+<circle cx="233.753" cy="567.964" r="4" transform="rotate(135 233.753 567.964)" stroke="black"/>
+<line x1="236.582" y1="748.429" x2="261.222" y2="723.788" stroke="black"/>
+<circle cx="233.753" cy="751.964" r="4" transform="rotate(135 233.753 751.964)" stroke="black"/>
+<circle cx="261" cy="199.5" r="4" stroke="black"/>
+<rect x="260.5" y="204" width="1" height="29" fill="black"/>
+<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>
+<circle cx="261" cy="383.5" r="4" stroke="black"/>
+<rect x="260.5" y="388" width="1" height="29" fill="black"/>
+<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>
+<circle cx="261" cy="934.5" r="4" stroke="black"/>
+<rect x="260.5" y="939" width="1" height="29" fill="black"/>
+<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>
+<circle cx="321" cy="956.5" r="4" stroke="black"/>
+<rect x="320.5" y="961" width="1" height="46" fill="black"/>
+<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>
+<circle cx="261" cy="567.5" r="4" stroke="black"/>
+<rect x="260.5" y="572" width="1" height="29" fill="black"/>
+<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>
+<circle cx="261" cy="751.5" r="4" stroke="black"/>
+<rect x="260.5" y="756" width="1" height="29" fill="black"/>
+<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>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="123.354" y="188.455">radius/s</tspan></text>
+<line x1="210" y1="183.5" x2="184" y2="183.5" stroke="black"/>
+<circle cx="214.5" cy="183" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="123.354" y="372.455">radius/s</tspan></text>
+<line x1="210" y1="367.5" x2="184" y2="367.5" stroke="black"/>
+<circle cx="214.5" cy="367" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="123.354" y="923.455">radius/s</tspan></text>
+<line x1="210" y1="918.5" x2="184" y2="918.5" stroke="black"/>
+<circle cx="214.5" cy="918" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="123.354" y="556.455">radius/s</tspan></text>
+<line x1="210" y1="551.5" x2="184" y2="551.5" stroke="black"/>
+<circle cx="214.5" cy="551" r="4" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="123.354" y="740.455">radius/s</tspan></text>
+<line x1="210" y1="735.5" x2="184" y2="735.5" stroke="black"/>
+<circle cx="214.5" cy="735" r="4" stroke="black"/>
+<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>
+<line x1="209" y1="955.5" x2="186" y2="955.5" stroke="black"/>
+<circle cx="213.5" cy="955" r="4" stroke="black"/>
+<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"/>
+<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"/>
+<path d="M285.91 574.91L281.031 570.031" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M292.117 572.632V565.732" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M298.002 575.122L302.881 570.243" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M283.843 580.906H276.943" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M286.334 586.789L281.455 591.668" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<rect x="151.2" y="994.2" width="42.6" height="42.6" rx="1.2" fill="white"/>
+<rect x="151.2" y="994.2" width="42.6" height="42.6" rx="1.2" stroke="#111111" stroke-width="2.4"/>
+<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>
+<rect x="43" y="43" width="84.5156" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="83.5156" height="29" rx="2.5" stroke="black" stroke-opacity="0.2"/>
+<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 ghost</tspan></text>
+</svg>