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

@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

package/dist/base/_tokens.scss +401 -0
package/dist/base/tokens.css +401 -0
package/dist/base/tokens.d.ts +2 -0
package/dist/base/tokens.d.ts.map +1 -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.d.ts +2 -0
package/dist/dark/tokens.d.ts.map +1 -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.d.ts +2 -0
package/dist/light/tokens.d.ts.map +1 -0
package/dist/light/tokens.json +4103 -0
package/dist/tokens.css +1033 -165
package/dist/tokens.d.ts +2 -222
package/dist/tokens.d.ts.map +1 -0
package/npm-third-party-licenses.json +1 -1
package/package.json +27 -5
package/readme.md +7 -2
package/dist/tokens.esm.js +0 -2189
package/dist/tokens.json +0 -2993
package/dist/tokens.scss +0 -494

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

@@ -0,0 +1,57 @@
+<svg width="1140" height="426" viewBox="0 0 1140 426" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 56C40 47.1634 47.1634 40 56 40H1084C1092.84 40 1100 47.1634 1100 56V370C1100 378.837 1092.84 386 1084 386H56C47.1634 386 40 378.837 40 370V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H1084V40V39H56V40ZM1100 56H1099V370H1100H1101V56H1100ZM1084 386V385H56V386V387H1084V386ZM40 370H41V56H40H39V370H40ZM56 386V385C47.7157 385 41 378.284 41 370H40H39C39 379.389 46.6112 387 56 387V386ZM1100 370H1099C1099 378.284 1092.28 385 1084 385V386V387C1093.39 387 1101 379.389 1101 370H1100ZM1084 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"/>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" letter-spacing="0px"><tspan x="237" y="165.364">Label</tspan></text>
+<path d="M241 176.5H323.5V211.5H241C239.067 211.5 237.5 209.933 237.5 208V180C237.5 178.067 239.067 176.5 241 176.5Z" fill="white"/>
+<path d="M241 176.5H323.5V211.5H241C239.067 211.5 237.5 209.933 237.5 208V180C237.5 178.067 239.067 176.5 241 176.5Z" stroke="#999999"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="261" y="199.455">Value</tspan></text>
+<path d="M410.5 176.5V211.5H324.5V176.5H410.5Z" fill="white"/>
+<path d="M410.5 176.5V211.5H324.5V176.5H410.5Z" stroke="#999999"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="348" y="199.455">Value</tspan></text>
+<path d="M497.5 176.5V211.5H411.5V176.5H497.5Z" fill="white"/>
+<path d="M497.5 176.5V211.5H411.5V176.5H497.5Z" stroke="#999999"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="435" y="199.455">Value</tspan></text>
+<path d="M584.5 176.5V211.5H498.5V176.5H584.5Z" fill="#C7DBEF"/>
+<path d="M584.5 176.5V211.5H498.5V176.5H584.5Z" stroke="#1467BA"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="522" y="199.455">Value</tspan></text>
+<path d="M671.5 176.5V211.5H585.5V176.5H671.5Z" fill="#E0EBF6"/>
+<path d="M671.5 176.5V211.5H585.5V176.5H671.5Z" stroke="#999999"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="609" y="199.455">Value</tspan></text>
+<path d="M755 176.5C756.933 176.5 758.5 178.067 758.5 180V208C758.5 209.933 756.933 211.5 755 211.5H672.5V176.5H755Z" fill="white"/>
+<path d="M755 176.5C756.933 176.5 758.5 178.067 758.5 180V208C758.5 209.933 756.933 211.5 755 211.5H672.5V176.5H755Z" stroke="#999999"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="696" y="199.455">Value</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="223.526" y="111.455">text/caption</tspan></text>
+<rect x="265.5" y="120" width="1" height="33" fill="black"/>
+<circle cx="266" cy="157.5" r="4" stroke="black"/>
+<circle cx="744.5" cy="205" r="4" stroke="black"/>
+<line x1="816" y1="205.5" x2="749" y2="205.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="820.312" y="210.455">color/bg/selection-neutralWeakest</tspan></text>
+<circle cx="549" cy="205.5" r="4" stroke="black"/>
+<rect x="548.5" y="210" width="1" height="64" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="438.237" y="293.455">color/bg/selection-accentWeak</tspan></text>
+<circle cx="667" cy="205.5" r="4" stroke="black"/>
+<rect x="666.5" y="210" width="1" height="96" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="533.139" y="325.455">color/bg/selection-accentWeak-hover</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="318.299" y="146.455">text/body</tspan></text>
+<rect x="352" y="155" width="1" height="33" fill="black"/>
+<circle cx="352.5" cy="192.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="62.9648" y="167.455">color/fg/weaker</tspan></text>
+<line x1="235" y1="162.5" x2="178" y2="162.5" stroke="black"/>
+<circle cx="239.5" cy="162" r="4" stroke="black"/>
+<circle cx="369.5" cy="196.5" r="4" stroke="black"/>
+<rect x="369" y="201" 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="254.199" y="263.455">color/fg/selection-neutralDefault</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="430.617" y="130.455">color/border/selection-accentDefault</tspan></text>
+<rect x="561" y="139" width="1" height="33" fill="black"/>
+<circle cx="561.5" cy="176.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="731.354" y="130.455">radius/s</tspan></text>
+<rect x="759" y="139" width="1" height="33" fill="black"/>
+<circle cx="759.5" cy="176.5" r="4" stroke="black"/>
+<circle cx="758.5" cy="188" r="4" stroke="black"/>
+<line x1="815" y1="188.5" x2="763" y2="188.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="819.694" y="193.455">color/border/selection-neutralDefault</tspan></text>
+<path d="M650.165 217.486L624.103 207.274C622.151 206.51 620.226 208.44 620.995 210.39L631.327 236.57C632.098 238.522 634.826 238.615 635.727 236.719L638.276 231.356L645.489 238.569C646.426 239.506 647.946 239.506 648.883 238.569L650.58 236.872L652.489 234.963C653.426 234.025 653.426 232.506 652.489 231.568L645.277 224.356L650.344 221.876C652.22 220.958 652.11 218.248 650.165 217.486Z" fill="white" stroke="#111111" stroke-width="2.4"/>
+<rect x="43" y="43" width="144.984" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="143.984" 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">segmented-button-group</tspan></text>
+</svg>

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

@@ -0,0 +1,190 @@
+<svg width="880" height="1802" viewBox="0 0 880 1802" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 56C40 47.1635 47.1634 40 56 40H824C832.837 40 840 47.1634 840 56V1746C840 1754.84 832.837 1762 824 1762H56C47.1634 1762 40 1754.84 40 1746V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H824V40V39H56V40ZM840 56H839V1746H840H841V56H840ZM824 1762V1761H56V1762V1763H824V1762ZM40 1746H41V56H40H39V1746H40ZM56 1762V1761C47.7157 1761 41 1754.28 41 1746H40H39C39 1755.39 46.6111 1763 56 1763V1762ZM840 1746H839C839 1754.28 832.284 1761 824 1761V1762V1763C833.389 1763 841 1755.39 841 1746H840ZM824 40V41C832.284 41 839 47.7157 839 56H840H841C841 46.6112 833.389 39 824 39V40ZM56 40V39C46.6112 39 39 46.6112 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="black" fill-opacity="0.1"/>
+<path d="M389 158C389 155.791 390.791 154 393 154H440C442.209 154 444 155.791 444 158V186C444 188.209 442.209 190 440 190H393C390.791 190 389 188.209 389 186V158Z" fill="#EDEDED"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="397" y="177.455">Value</tspan></text>
+<path d="M393 376.5H460C461.933 376.5 463.5 378.067 463.5 380V408C463.5 409.933 461.933 411.5 460 411.5H393C391.067 411.5 389.5 409.933 389.5 408V380C389.5 378.067 391.067 376.5 393 376.5Z" fill="#E0EBF6"/>
+<path d="M393 376.5H460C461.933 376.5 463.5 378.067 463.5 380V408C463.5 409.933 461.933 411.5 460 411.5H393C391.067 411.5 389.5 409.933 389.5 408V380C389.5 378.067 391.067 376.5 393 376.5Z" stroke="#1467BA"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="397" y="399.455">Value</tspan></text>
+<path d="M443.75 389.75L452.25 398.25M452.25 389.75L443.75 398.25" stroke="#111111"/>
+<path d="M389 1300C389 1297.79 390.791 1296 393 1296H440C442.209 1296 444 1297.79 444 1300V1328C444 1330.21 442.209 1332 440 1332H393C390.791 1332 389 1330.21 389 1328V1300Z" fill="#E7E7E7"/>
+<text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="397" y="1319.45">Value</tspan></text>
+<path d="M393 1104.5H460C461.933 1104.5 463.5 1106.07 463.5 1108V1136C463.5 1137.93 461.933 1139.5 460 1139.5H393C391.067 1139.5 389.5 1137.93 389.5 1136V1108C389.5 1106.07 391.067 1104.5 393 1104.5Z" fill="#E0EBF6"/>
+<path d="M393 1104.5H460C461.933 1104.5 463.5 1106.07 463.5 1108V1136C463.5 1137.93 461.933 1139.5 460 1139.5H393C391.067 1139.5 389.5 1137.93 389.5 1136V1108C389.5 1106.07 391.067 1104.5 393 1104.5Z" stroke="#1467BA"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="397" y="1127.45">Value</tspan></text>
+<path d="M443.75 1117.75L452.25 1126.25M452.25 1117.75L443.75 1126.25" stroke="#111111"/>
+<path d="M389 1108C389 1105.79 390.791 1104 393 1104H399C400.105 1104 401 1104.9 401 1106V1114C401 1115.1 400.105 1116 399 1116H391C389.895 1116 389 1115.1 389 1114V1108Z" fill="#1467BA"/>
+<path d="M389 1108C389 1105.79 390.791 1104 393 1104H399C400.105 1104 401 1104.9 401 1106V1114C401 1115.1 400.105 1116 399 1116H391C389.895 1116 389 1115.1 389 1114V1108Z" fill="#1467BA"/>
+<path d="M398 1108L394 1112L392 1110" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M301 1076C301 1073.79 302.791 1072 305 1072H311C312.105 1072 313 1072.9 313 1074V1082C313 1083.1 312.105 1084 311 1084H303C301.895 1084 301 1083.1 301 1082V1076Z" fill="#1467BA"/>
+<path d="M301 1076C301 1073.79 302.791 1072 305 1072H311C312.105 1072 313 1072.9 313 1074V1082C313 1083.1 312.105 1084 311 1084H303C301.895 1084 301 1083.1 301 1082V1076Z" fill="#1467BA"/>
+<path d="M310 1076L306 1080L304 1078" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="437.5" cy="184" r="4" stroke="black"/>
+<line x1="493" y1="184.5" x2="442" y2="184.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="497.717" y="189.455">color/bg/weaker</tspan></text>
+<circle cx="457.5" cy="406" r="4" stroke="black"/>
+<line x1="491" y1="406.5" x2="462" y2="406.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="495.643" y="411.455">color/bg/action-accentWeak</tspan></text>
+<circle cx="438.5" cy="1326" r="4" stroke="black"/>
+<line x1="492" y1="1326.5" x2="443" y2="1326.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="496.384" y="1331.45">color/bg/</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="560.441" y="1331.45">interaction-disabled</tspan></text>
+<circle cx="457.5" cy="1134" r="4" stroke="black"/>
+<line x1="491" y1="1134.5" x2="462" y2="1134.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="495.643" y="1139.45">color/bg/action-accentWeak</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="293.354" y="416.455">radius/s</tspan></text>
+<line x1="386" y1="411.5" x2="354" y2="411.5" stroke="black"/>
+<circle cx="390.5" cy="411" 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="293.354" y="1336.45">radius/s</tspan></text>
+<line x1="386" y1="1331.5" x2="354" y2="1331.5" stroke="black"/>
+<circle cx="390.5" cy="1331" 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="293.354" y="1144.45">radius/s</tspan></text>
+<line x1="386" y1="1139.5" x2="354" y2="1139.5" stroke="black"/>
+<circle cx="390.5" cy="1139" 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="293.354" y="193.455">radius/s</tspan></text>
+<line x1="386" y1="188.5" x2="354" y2="188.5" stroke="black"/>
+<circle cx="390.5" cy="188" r="4" stroke="black"/>
+<circle cx="463.5" cy="386" r="4" stroke="black"/>
+<line x1="491" y1="386.5" x2="468" y2="386.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="495.022" y="391.455">color/border/action-accentDefault</tspan></text>
+<circle cx="463.5" cy="1114" r="4" stroke="black"/>
+<line x1="491" y1="1114.5" x2="468" y2="1114.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="495.022" y="1119.45">color/border/action-accentDefault</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="343.604" y="346.455">color/fg/action-neutralDefault</tspan></text>
+<rect x="448" y="355" width="1" height="33" fill="black"/>
+<circle cx="448.5" cy="392.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="343.604" y="1074.45">color/fg/action-neutralDefault</tspan></text>
+<rect x="448" y="1083" width="1" height="33" fill="black"/>
+<circle cx="448.5" cy="1120.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="247.796" y="176.955">color/fg/default</tspan></text>
+<line x1="407" y1="172" x2="361" y2="172" stroke="black"/>
+<circle cx="411.5" cy="171.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="140.527" y="398.955">color/fg/action-accentDefault</tspan></text>
+<line x1="407" y1="394" x2="354" y2="394" stroke="black"/>
+<circle cx="411.5" cy="393.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="148.632" y="1318.95">color/fg/interaction-disabled</tspan></text>
+<line x1="407" y1="1314" x2="355" y2="1314" stroke="black"/>
+<circle cx="411.5" cy="1313.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="140.527" y="1126.95">color/fg/action-accentDefault</tspan></text>
+<line x1="407" y1="1122" x2="354" y2="1122" stroke="black"/>
+<circle cx="411.5" cy="1121.5" r="4" stroke="black"/>
+<circle cx="411.75" cy="171.5" r="4" stroke="black"/>
+<rect x="411.25" y="176" width="1" height="39" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="377.549" y="234.455">text/body</tspan></text>
+<circle cx="411.75" cy="393.5" r="4" stroke="black"/>
+<rect x="411.25" y="398" width="1" height="39" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="377.549" y="456.455">text/body</tspan></text>
+<circle cx="411.75" cy="1313.5" r="4" stroke="black"/>
+<rect x="411.25" y="1318" width="1" height="39" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="377.549" y="1376.45">text/body</tspan></text>
+<circle cx="411.75" cy="1121.5" r="4" stroke="black"/>
+<rect x="411.25" y="1126" width="1" height="39" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="377.549" y="1184.45">text/body</tspan></text>
+<path d="M393 598.5H460C461.933 598.5 463.5 600.067 463.5 602V630C463.5 631.933 461.933 633.5 460 633.5H393C391.067 633.5 389.5 631.933 389.5 630V602C389.5 600.067 391.067 598.5 393 598.5Z" fill="#D5E4F3"/>
+<path d="M393 598.5H460C461.933 598.5 463.5 600.067 463.5 602V630C463.5 631.933 461.933 633.5 460 633.5H393C391.067 633.5 389.5 631.933 389.5 630V602C389.5 600.067 391.067 598.5 393 598.5Z" stroke="#0F4D8B"/>
+<text fill="#0F4D8B" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="397" y="621.455">Value</tspan></text>
+<path d="M443.75 611.75L452.25 620.25M452.25 611.75L443.75 620.25" stroke="#111111"/>
+<path d="M393 842.5H460C461.933 842.5 463.5 844.067 463.5 846V874C463.5 875.933 461.933 877.5 460 877.5H393C391.067 877.5 389.5 875.933 389.5 874V846C389.5 844.067 391.067 842.5 393 842.5Z" fill="#C7DBEF"/>
+<path d="M393 842.5H460C461.933 842.5 463.5 844.067 463.5 846V874C463.5 875.933 461.933 877.5 460 877.5H393C391.067 877.5 389.5 875.933 389.5 874V846C389.5 844.067 391.067 842.5 393 842.5Z" stroke="#0B3A69"/>
+<text fill="#0B3A69" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="397" y="865.455">Value</tspan></text>
+<path d="M443.75 855.75L452.25 864.25M452.25 855.75L443.75 864.25" stroke="#111111"/>
+<circle cx="457.5" cy="628" r="4" stroke="black"/>
+<line x1="490" y1="628.5" x2="462" y2="628.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="494.544" y="633.455">color/bg/action-accentWeak-hover</tspan></text>
+<circle cx="457.5" cy="872" r="4" stroke="black"/>
+<line x1="502" y1="872.5" x2="462" y2="872.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="506.508" y="877.455">color/bg/action-accentWeak</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="707.177" y="877.455">-pressed</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="293.354" y="638.455">radius/s</tspan></text>
+<line x1="386" y1="633.5" x2="354" y2="633.5" stroke="black"/>
+<circle cx="390.5" cy="633" 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="293.354" y="882.455">radius/s</tspan></text>
+<line x1="386" y1="877.5" x2="354" y2="877.5" stroke="black"/>
+<circle cx="390.5" cy="877" r="4" stroke="black"/>
+<circle cx="463.5" cy="608" r="4" stroke="black"/>
+<line x1="490" y1="608.5" x2="468" y2="608.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="494.528" y="613.455">color/border/action-accentDefault-hover</tspan></text>
+<circle cx="463.5" cy="852" r="4" stroke="black"/>
+<line x1="502" y1="852.5" x2="468" y2="852.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="506.492" y="857.455">color/border/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="343.604" y="568.455">color/fg/action-neutralDefault</tspan></text>
+<rect x="448" y="577" width="1" height="33" fill="black"/>
+<circle cx="448.5" cy="614.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="343.604" y="812.455">color/fg/action-neutralDefault</tspan></text>
+<rect x="448" y="821" width="1" height="33" fill="black"/>
+<circle cx="448.5" cy="858.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="96.0332" y="620.955">color/fg/action-accentDefault-hover</tspan></text>
+<line x1="407" y1="616" x2="356" y2="616" stroke="black"/>
+<circle cx="411.5" cy="615.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="77.9971" y="864.955">color/fg/action-accentDefault-pressed</tspan></text>
+<line x1="407" y1="860" x2="355" y2="860" stroke="black"/>
+<circle cx="411.5" cy="859.5" r="4" stroke="black"/>
+<circle cx="411.75" cy="615.5" r="4" stroke="black"/>
+<rect x="411.25" y="620" width="1" height="39" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="377.549" y="678.455">text/body</tspan></text>
+<circle cx="411.75" cy="859.5" r="4" stroke="black"/>
+<rect x="411.25" y="864" width="1" height="39" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="377.549" y="922.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="77.041" y="1082.45">color/fg/interaction-onColor</tspan></text>
+<line x1="301" y1="1077.5" x2="279" y2="1077.5" stroke="black"/>
+<circle cx="305.5" cy="1077" 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="195.874" y="1032.45">color/bg/selection-accentDefault</tspan></text>
+<rect x="312" y="1041" width="1" height="37" fill="black"/>
+<circle cx="312.5" cy="1082.5" r="4" stroke="black"/>
+<path d="M453.013 635.041L426.951 624.83C424.999 624.065 423.073 625.995 423.843 627.945L434.175 654.125C434.946 656.077 437.674 656.17 438.575 654.274L441.124 648.911L448.336 656.124C449.274 657.061 450.793 657.061 451.731 656.124L453.428 654.427L455.337 652.518C456.274 651.58 456.274 650.061 455.337 649.123L448.124 641.911L453.192 639.431C455.068 638.513 454.957 635.803 453.013 635.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
+<g filter="url(#filter0_i_1195_19955)">
+<path d="M389 1537C389 1534.79 390.791 1533 393 1533H460C462.209 1533 464 1534.79 464 1537V1565C464 1567.21 462.209 1569 460 1569H393C390.791 1569 389 1567.21 389 1565V1537Z" fill="#D5E4F3"/>
+<path d="M393 1533.5H460C461.933 1533.5 463.5 1535.07 463.5 1537V1565C463.5 1566.93 461.933 1568.5 460 1568.5H393C391.067 1568.5 389.5 1566.93 389.5 1565V1537C389.5 1535.07 391.067 1533.5 393 1533.5Z" stroke="#0F4D8B"/>
+<text fill="#0F4D8B" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="397" y="1556.45">Value</tspan></text>
+<path d="M443.75 1546.75L452.25 1555.25M452.25 1546.75L443.75 1555.25" stroke="#111111"/>
+<path d="M394 1530.5H459C463.142 1530.5 466.5 1533.86 466.5 1538V1564C466.5 1568.14 463.142 1571.5 459 1571.5H394C389.858 1571.5 386.5 1568.14 386.5 1564V1538C386.5 1533.86 389.858 1530.5 394 1530.5Z" stroke="#111111"/>
+</g>
+<circle cx="457.5" cy="1563" r="4" stroke="black"/>
+<line x1="490" y1="1563.5" x2="462" y2="1563.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="494.544" y="1568.45">color/bg/action-accentWeak-hover</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="293.354" y="1573.45">radius/s</tspan></text>
+<line x1="386" y1="1568.5" x2="354" y2="1568.5" stroke="black"/>
+<circle cx="390.5" cy="1568" r="4" stroke="black"/>
+<circle cx="463.5" cy="1543" r="4" stroke="black"/>
+<line x1="490" y1="1543.5" x2="468" y2="1543.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="494.528" y="1548.45">color/border/action-accentDefault-hover</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="343.604" y="1503.45">color/fg/action-neutralDefault</tspan></text>
+<rect x="448" y="1512" width="1" height="33" fill="black"/>
+<circle cx="448.5" cy="1549.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="96.0332" y="1555.95">color/fg/action-accentDefault-hover</tspan></text>
+<line x1="407" y1="1551" x2="356" y2="1551" stroke="black"/>
+<circle cx="411.5" cy="1550.5" r="4" stroke="black"/>
+<circle cx="411.75" cy="1550.5" r="4" stroke="black"/>
+<rect x="411.25" y="1555" width="1" height="39" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="377.549" y="1613.45">text/body</tspan></text>
+<rect x="279.2" y="1597.2" width="42.6" height="42.6" rx="1.2" fill="white"/>
+<rect x="279.2" y="1597.2" width="42.6" height="42.6" rx="1.2" stroke="#111111" stroke-width="2.4"/>
+<text transform="translate(290.398 1611.8)" fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="10.8" font-weight="500" letter-spacing="0px"><tspan x="0.428711" y="10.5273">Tab</tspan></text>
+<path d="M453.013 880.041L426.951 869.83C424.999 869.065 423.073 870.995 423.843 872.945L434.175 899.125C434.946 901.077 437.674 901.17 438.575 899.274L441.124 893.911L448.336 901.124C449.274 902.061 450.793 902.061 451.731 901.124L453.428 899.427L455.337 897.518C456.274 896.58 456.274 895.061 455.337 894.123L448.124 886.911L453.192 884.431C455.068 883.513 454.957 880.803 453.013 880.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
+<path d="M419.91 865.91L415.031 861.031" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M426.117 863.632V856.732" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M432 866.122L436.879 861.243" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M417.845 871.906H410.945" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M420.336 877.789L415.457 882.668" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<circle cx="453" cy="1573.5" r="4" stroke="black"/>
+<rect x="452.5" y="1578" 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="346.265" y="1643.45">color/border/interaction-focus</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="289.154" y="1535.45">radius/m</tspan></text>
+<line x1="384" y1="1530.5" x2="355" y2="1530.5" stroke="black"/>
+<circle cx="388.5" cy="1530" r="4" stroke="black"/>
+<rect x="43" y="43" width="28.9062" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="27.9062" 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">tag</tspan></text>
+<defs>
+<filter id="filter0_i_1195_19955" x="386" y="1530" width="81" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_innerShadow_1195_19955"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1195_19955"/>
+</filter>
+</defs>
+</svg>