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/list_item_navigation.svg ADDED Viewed

@@ -0,0 +1,193 @@
+<svg width="830" height="1478" viewBox="0 0 830 1478" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 56C40 47.1635 47.1634 40 56 40H774C782.837 40 790 47.1634 790 56V1422C790 1430.84 782.837 1438 774 1438H56C47.1634 1438 40 1430.84 40 1422V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H774V40V39H56V40ZM790 56H789V1422H790H791V56H790ZM774 1438V1437H56V1438V1439H774V1438ZM40 1422H41V56H40H39V1422H40ZM56 1438V1437C47.7157 1437 41 1430.28 41 1422H40H39C39 1431.39 46.6112 1439 56 1439V1438ZM790 1422H789C789 1430.28 782.284 1437 774 1437V1438V1439C783.389 1439 791 1431.39 791 1422H790ZM774 40V41C782.284 41 789 47.7157 789 56H790H791C791 46.6112 783.389 39 774 39V40ZM56 40V39C46.6112 39 39 46.6112 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
+<g clip-path="url(#clip0_1195_19955)">
+<mask id="path-3-inside-1_1195_19955" fill="white">
+<path d="M109 188H429V237H109V188Z"/>
+</mask>
+<path d="M141 213H149C149 217.4 145.4 221 141 221C136.6 221 133 217.4 133 213C133 208.6 136.6 205 141 205V213Z" fill="#FFD7BE"/>
+<path d="M141 201C134.4 201 129 206.4 129 213C129 219.6 134.4 225 141 225C147.6 225 153 219.6 153 213C153 206.4 147.6 201 141 201ZM141 223C135.5 223 131 218.5 131 213C131 207.5 135.5 203 141 203C146.5 203 151 207.5 151 213C151 218.5 146.5 223 141 223Z" fill="#FF7E30"/>
+<path d="M141 216C142.657 216 144 214.657 144 213C144 211.343 142.657 210 141 210C139.343 210 138 211.343 138 213C138 214.657 139.343 216 141 216Z" fill="#FF7E30"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="209.955">First line</tspan></text>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="173" y="227.227">Second line</tspan></text>
+<path d="M396.693 205.248C396.97 204.94 397.444 204.915 397.752 205.192L405.252 211.942C405.41 212.085 405.5 212.287 405.5 212.5C405.5 212.713 405.41 212.915 405.252 213.058L397.752 219.808C397.444 220.085 396.97 220.06 396.693 219.752C396.415 219.444 396.44 218.969 396.748 218.692L403.628 212.5L396.748 206.308C396.44 206.03 396.415 205.556 396.693 205.248Z" fill="#565656"/>
+</g>
+<path d="M429 237V236H109V237V238H429V237Z" fill="#EDEDED" mask="url(#path-3-inside-1_1195_19955)"/>
+<g clip-path="url(#clip1_1195_19955)">
+<g opacity="0.5">
+<path d="M141 1325.5H149C149 1329.9 145.4 1333.5 141 1333.5C136.6 1333.5 133 1329.9 133 1325.5C133 1321.1 136.6 1317.5 141 1317.5V1325.5Z" fill="#FFD7BE"/>
+<path d="M141 1313.5C134.4 1313.5 129 1318.9 129 1325.5C129 1332.1 134.4 1337.5 141 1337.5C147.6 1337.5 153 1332.1 153 1325.5C153 1318.9 147.6 1313.5 141 1313.5ZM141 1335.5C135.5 1335.5 131 1331 131 1325.5C131 1320 135.5 1315.5 141 1315.5C146.5 1315.5 151 1320 151 1325.5C151 1331 146.5 1335.5 141 1335.5Z" fill="#FF7E30"/>
+<path d="M141 1328.5C142.657 1328.5 144 1327.16 144 1325.5C144 1323.84 142.657 1322.5 141 1322.5C139.343 1322.5 138 1323.84 138 1325.5C138 1327.16 139.343 1328.5 141 1328.5Z" fill="#FF7E30"/>
+</g>
+<text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="1322.95">First line</tspan></text>
+<text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="173" y="1340.23">Second line</tspan></text>
+<path d="M396.693 1318.25C396.97 1317.94 397.444 1317.92 397.752 1318.19L405.252 1324.94C405.41 1325.08 405.5 1325.29 405.5 1325.5C405.5 1325.71 405.41 1325.92 405.252 1326.06L397.752 1332.81C397.444 1333.08 396.97 1333.06 396.693 1332.75C396.415 1332.44 396.44 1331.97 396.748 1331.69L403.628 1325.5L396.748 1319.31C396.44 1319.03 396.415 1318.56 396.693 1318.25Z" fill="#999999"/>
+<rect x="109.25" y="1350.25" width="319.5" height="0.5" fill="#EDEDED" stroke="#EDEDED" stroke-width="0.5"/>
+</g>
+<g clip-path="url(#clip2_1195_19955)">
+<mask id="path-18-inside-2_1195_19955" fill="white">
+<path d="M109 461H429V510H109V461Z"/>
+</mask>
+<path d="M109 461H429V510H109V461Z" fill="#EDEDED"/>
+<path d="M141 485.5H149C149 489.9 145.4 493.5 141 493.5C136.6 493.5 133 489.9 133 485.5C133 481.1 136.6 477.5 141 477.5V485.5Z" fill="#FFD7BE"/>
+<path d="M141 473.5C134.4 473.5 129 478.9 129 485.5C129 492.1 134.4 497.5 141 497.5C147.6 497.5 153 492.1 153 485.5C153 478.9 147.6 473.5 141 473.5ZM141 495.5C135.5 495.5 131 491 131 485.5C131 480 135.5 475.5 141 475.5C146.5 475.5 151 480 151 485.5C151 491 146.5 495.5 141 495.5Z" fill="#FF7E30"/>
+<path d="M141 488.5C142.657 488.5 144 487.157 144 485.5C144 483.843 142.657 482.5 141 482.5C139.343 482.5 138 483.843 138 485.5C138 487.157 139.343 488.5 141 488.5Z" fill="#FF7E30"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="482.955">First line</tspan></text>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="173" y="500.227">Second line</tspan></text>
+<path d="M396.693 478.248C396.97 477.94 397.444 477.915 397.752 478.192L405.252 484.942C405.41 485.085 405.5 485.287 405.5 485.5C405.5 485.713 405.41 485.915 405.252 486.058L397.752 492.808C397.444 493.085 396.97 493.06 396.693 492.752C396.415 492.444 396.44 491.97 396.748 491.692L403.628 485.5L396.748 479.308C396.44 479.031 396.415 478.556 396.693 478.248Z" fill="#565656"/>
+</g>
+<path d="M429 510V509H109V510V511H429V510Z" fill="white" mask="url(#path-18-inside-2_1195_19955)"/>
+<mask id="path-26-inside-3_1195_19955" fill="white">
+<path d="M109 1019H429V1068H109V1019Z"/>
+</mask>
+<path d="M109 1019H429V1068H109V1019Z" fill="#EDEDED"/>
+<path d="M429 1068V1069H430V1068H429ZM109 1068H108V1069H109V1068ZM429 1019H428V1068H429H430V1019H429ZM429 1068V1067H109V1068V1069H429V1068ZM109 1068H110V1019H109H108V1068H109Z" fill="white" mask="url(#path-26-inside-3_1195_19955)"/>
+<path d="M141 1043.5H149C149 1047.9 145.4 1051.5 141 1051.5C136.6 1051.5 133 1047.9 133 1043.5C133 1039.1 136.6 1035.5 141 1035.5V1043.5Z" fill="#FFD7BE"/>
+<path d="M141 1031.5C134.4 1031.5 129 1036.9 129 1043.5C129 1050.1 134.4 1055.5 141 1055.5C147.6 1055.5 153 1050.1 153 1043.5C153 1036.9 147.6 1031.5 141 1031.5ZM141 1053.5C135.5 1053.5 131 1049 131 1043.5C131 1038 135.5 1033.5 141 1033.5C146.5 1033.5 151 1038 151 1043.5C151 1049 146.5 1053.5 141 1053.5Z" fill="#FF7E30"/>
+<path d="M141 1046.5C142.657 1046.5 144 1045.16 144 1043.5C144 1041.84 142.657 1040.5 141 1040.5C139.343 1040.5 138 1041.84 138 1043.5C138 1045.16 139.343 1046.5 141 1046.5Z" fill="#FF7E30"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="1040.95">First line</tspan></text>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="173" y="1058.23">Second line</tspan></text>
+<path d="M396.693 1036.25C396.97 1035.94 397.444 1035.92 397.752 1036.19L405.252 1042.94C405.41 1043.08 405.5 1043.29 405.5 1043.5C405.5 1043.71 405.41 1043.92 405.252 1044.06L397.752 1050.81C397.444 1051.08 396.97 1051.06 396.693 1050.75C396.415 1050.44 396.44 1049.97 396.748 1049.69L403.628 1043.5L396.748 1037.31C396.44 1037.03 396.415 1036.56 396.693 1036.25Z" fill="#565656"/>
+<path d="M114 1016.5H424C428.142 1016.5 431.5 1019.86 431.5 1024V1063C431.5 1067.14 428.142 1070.5 424 1070.5H114C109.858 1070.5 106.5 1067.14 106.5 1063V1024C106.5 1019.86 109.858 1016.5 114 1016.5Z" stroke="#111111"/>
+<g clip-path="url(#clip3_1195_19955)">
+<mask id="path-35-inside-4_1195_19955" fill="white">
+<path d="M109 745H429V794H109V745Z"/>
+</mask>
+<path d="M109 745H429V794H109V745Z" fill="#DFDFDF"/>
+<path d="M141 769.5H149C149 773.9 145.4 777.5 141 777.5C136.6 777.5 133 773.9 133 769.5C133 765.1 136.6 761.5 141 761.5V769.5Z" fill="#FFD7BE"/>
+<path d="M141 757.5C134.4 757.5 129 762.9 129 769.5C129 776.1 134.4 781.5 141 781.5C147.6 781.5 153 776.1 153 769.5C153 762.9 147.6 757.5 141 757.5ZM141 779.5C135.5 779.5 131 775 131 769.5C131 764 135.5 759.5 141 759.5C146.5 759.5 151 764 151 769.5C151 775 146.5 779.5 141 779.5Z" fill="#FF7E30"/>
+<path d="M141 772.5C142.657 772.5 144 771.157 144 769.5C144 767.843 142.657 766.5 141 766.5C139.343 766.5 138 767.843 138 769.5C138 771.157 139.343 772.5 141 772.5Z" fill="#FF7E30"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="766.955">First line</tspan></text>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="173" y="784.227">Second line</tspan></text>
+<path d="M396.693 762.248C396.97 761.94 397.444 761.915 397.752 762.192L405.252 768.942C405.41 769.085 405.5 769.287 405.5 769.5C405.5 769.713 405.41 769.915 405.252 770.058L397.752 776.808C397.444 777.085 396.97 777.06 396.693 776.752C396.415 776.444 396.44 775.97 396.748 775.692L403.628 769.5L396.748 763.308C396.44 763.031 396.415 762.556 396.693 762.248Z" fill="#565656"/>
+</g>
+<path d="M429 794V793H109V794V795H429V794Z" fill="white" mask="url(#path-35-inside-4_1195_19955)"/>
+<circle cx="390" cy="237.5" r="4" stroke="black"/>
+<rect x="389.5" y="242" width="1" height="13" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="325.435" y="274.455">color/border/weak</tspan></text>
+<circle cx="390" cy="1350.5" r="4" stroke="black"/>
+<rect x="389.5" y="1355" width="1" height="13" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="325.435" y="1387.45">color/border/weak</tspan></text>
+<circle cx="390.5" cy="510.5" r="4" stroke="black"/>
+<rect x="390" y="515" width="1" height="13" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="297.994" y="547.455">color/rainbow/mono-weak</tspan></text>
+<circle cx="390.5" cy="1068.5" r="4" stroke="black"/>
+<rect x="390" y="1073" width="1" height="13" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="297.994" y="1105.45">color/rainbow/mono-weak</tspan></text>
+<circle cx="390.5" cy="794.5" r="4" stroke="black"/>
+<rect x="390" y="799" width="1" height="13" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="297.994" y="831.455">color/rainbow/mono-weak</tspan></text>
+<circle cx="419.5" cy="470" r="4" stroke="black"/>
+<line x1="462" y1="470.5" x2="424" y2="470.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="466.224" y="475.455">color/bg/action-neutralWeakest-hover</tspan></text>
+<circle cx="419.5" cy="1028" r="4" stroke="black"/>
+<line x1="462" y1="1028.5" x2="424" y2="1028.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="466.224" y="1033.45">color/bg/action-neutralWeakest-hover</tspan></text>
+<circle cx="419.5" cy="754" r="4" stroke="black"/>
+<line x1="467" y1="754.5" x2="424" y2="754.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="471.188" y="759.455">color/bg/action-neutralWeakest-pressed</tspan></text>
+<circle cx="433.5" cy="1051" r="4" stroke="black"/>
+<line x1="463" y1="1051.5" x2="438" y2="1051.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="467.265" y="1056.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="195.299" y="153.455">text/body</tspan></text>
+<rect x="229" y="162" width="1" height="33" fill="black"/>
+<circle cx="229.5" 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="195.299" y="1266.45">text/body</tspan></text>
+<rect x="229" y="1275" width="1" height="33" fill="black"/>
+<circle cx="229.5" cy="1312.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="195.299" y="426.455">text/body</tspan></text>
+<rect x="229" y="435" width="1" height="33" fill="black"/>
+<circle cx="229.5" cy="472.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="195.299" y="984.455">text/body</tspan></text>
+<rect x="229" y="993" width="1" height="33" fill="black"/>
+<circle cx="229.5" cy="1030.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="195.299" y="710.455">text/body</tspan></text>
+<rect x="229" y="719" width="1" height="33" fill="black"/>
+<circle cx="229.5" cy="756.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="125.796" y="123.455">color/fg/default</tspan></text>
+<rect x="179.5" y="132" width="1" height="63" fill="black"/>
+<circle cx="180" 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="80.6318" y="1236.45">color/fg/interaction-disabled</tspan></text>
+<rect x="181" y="1245" width="1" height="63" fill="black"/>
+<circle cx="181.5" cy="1312.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="125.796" y="396.455">color/fg/default</tspan></text>
+<rect x="179.5" y="405" width="1" height="63" fill="black"/>
+<circle cx="180" cy="472.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="125.796" y="954.455">color/fg/default</tspan></text>
+<rect x="179.5" y="963" width="1" height="63" fill="black"/>
+<circle cx="180" cy="1030.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="125.796" y="680.455">color/fg/default</tspan></text>
+<rect x="179.5" y="689" width="1" height="63" fill="black"/>
+<circle cx="180" cy="756.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="353.939" y="131.955">color/fg/weak</tspan></text>
+<rect x="401.5" y="140.5" width="1" height="63" fill="black"/>
+<circle cx="402" cy="208" 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="302.632" y="1244.95">color/fg/interaction-disabled</tspan></text>
+<rect x="403" y="1253.5" width="1" height="63" fill="black"/>
+<circle cx="403.5" cy="1321" 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="353.939" y="404.955">color/fg/weak</tspan></text>
+<rect x="401.5" y="413.5" width="1" height="63" fill="black"/>
+<circle cx="402" cy="481" 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="353.939" y="962.955">color/fg/weak</tspan></text>
+<rect x="401.5" y="971.5" width="1" height="63" fill="black"/>
+<circle cx="402" cy="1039" 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="353.939" y="688.955">color/fg/weak</tspan></text>
+<rect x="401.5" y="697.5" width="1" height="63" fill="black"/>
+<circle cx="402" cy="765" r="4" stroke="black"/>
+<circle cx="230.5" cy="223.5" r="4" stroke="black"/>
+<rect x="230" y="228" width="1" height="50" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="174.954" y="297.455">text/description</tspan></text>
+<circle cx="230.5" cy="1336.5" r="4" stroke="black"/>
+<rect x="230" y="1341" width="1" height="50" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="174.954" y="1410.45">text/description</tspan></text>
+<circle cx="230.5" cy="496.5" r="4" stroke="black"/>
+<rect x="230" y="501" width="1" height="50" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="174.954" y="570.455">text/description</tspan></text>
+<circle cx="230.5" cy="1054.5" r="4" stroke="black"/>
+<rect x="230" y="1059" width="1" height="50" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="174.954" y="1128.45">text/description</tspan></text>
+<circle cx="230.5" cy="780.5" r="4" stroke="black"/>
+<rect x="230" y="785" width="1" height="50" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="174.954" y="854.455">text/description</tspan></text>
+<circle cx="180" cy="223.5" r="4" stroke="black"/>
+<rect x="179.5" y="228" width="1" height="27" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="131.939" y="274.455">color/fg/weak</tspan></text>
+<circle cx="180" cy="496.5" r="4" stroke="black"/>
+<rect x="179.5" y="501" width="1" height="27" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="131.939" y="547.455">color/fg/weak</tspan></text>
+<circle cx="180" cy="1054.5" r="4" stroke="black"/>
+<rect x="179.5" y="1059" width="1" height="27" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="131.939" y="1105.45">color/fg/weak</tspan></text>
+<circle cx="180" cy="780.5" r="4" stroke="black"/>
+<rect x="179.5" y="785" width="1" height="27" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="131.939" y="831.455">color/fg/weak</tspan></text>
+<path d="M327.013 498.041L300.951 487.83C298.999 487.065 297.073 488.995 297.843 490.945L308.175 517.125C308.946 519.077 311.674 519.17 312.575 517.274L315.124 511.911L322.336 519.124C323.274 520.061 324.793 520.061 325.731 519.124L327.428 517.427L329.337 515.518C330.274 514.58 330.274 513.061 329.337 512.123L322.124 504.911L327.192 502.431C329.068 501.513 328.957 498.803 327.013 498.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
+<path d="M327.013 782.041L300.951 771.83C298.999 771.065 297.073 772.995 297.843 774.945L308.175 801.125C308.946 803.077 311.674 803.17 312.575 801.274L315.124 795.911L322.336 803.124C323.274 804.061 324.793 804.061 325.731 803.124L327.428 801.427L329.337 799.518C330.274 798.58 330.274 797.061 329.337 796.123L322.124 788.911L327.192 786.431C329.068 785.513 328.957 782.803 327.013 782.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
+<path d="M293.91 767.91L289.031 763.031" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M300.117 765.632V758.732" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M306 768.122L310.879 763.243" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M291.845 773.906H284.945" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M294.336 779.789L289.457 784.668" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
+<rect x="178.5" y="1316" width="1" height="16" fill="black"/>
+<circle cx="179" cy="1336.5" r="4" stroke="black"/>
+<circle cx="431.5" cy="1068" r="4" stroke="black"/>
+<line x1="463" y1="1068.5" x2="436" y2="1068.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="467.154" y="1073.45">radius/m</tspan></text>
+<rect x="43" y="43" width="201.766" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="200.766" 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">ListPart-Simple-Item - as Navigation</tspan></text>
+<defs>
+<clipPath id="clip0_1195_19955">
+<path d="M109 188H429V237H109V188Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1195_19955">
+<rect width="320" height="50" fill="white" transform="translate(109 1301)"/>
+</clipPath>
+<clipPath id="clip2_1195_19955">
+<path d="M109 461H429V510H109V461Z" fill="white"/>
+</clipPath>
+<clipPath id="clip3_1195_19955">
+<path d="M109 745H429V794H109V745Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="830" height="976" viewBox="0 0 830 976" fill="none">
+<path d="M40 56C40 47.1634 47.1634 40 56 40H774C782.837 40 790 47.1634 790 56V920C790 928.837 782.837 936 774 936H56C47.1634 936 40 928.837 40 920V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H774V40V39H56V40ZM790 56H789V920H790H791V56H790ZM774 936V935H56V936V937H774V936ZM40 920H41V56H40H39V920H40ZM56 936V935C47.7157 935 41 928.284 41 920H40H39C39 929.389 46.6112 937 56 937V936ZM790 920H789C789 928.284 782.284 935 774 935V936V937C783.389 937 791 929.389 791 920H790ZM774 40V41C782.284 41 789 47.7157 789 56H790H791C791 46.6112 783.389 39 774 39V40ZM56 40V39C46.6112 39 39 46.6112 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
+<g clip-path="url(#clip0_1195_19955)">
+<mask id="path-3-inside-1_1195_19955" fill="white">
+<path d="M109 188H429V237H109V188Z"/>
+</mask>
+<path d="M109 188H429V237H109V188Z" fill="#EDEDED"/>
+<path d="M141 212.5H149C149 216.9 145.4 220.5 141 220.5C136.6 220.5 133 216.9 133 212.5C133 208.1 136.6 204.5 141 204.5V212.5Z" fill="#FFD7BE"/>
+<path d="M141 200.5C134.4 200.5 129 205.9 129 212.5C129 219.1 134.4 224.5 141 224.5C147.6 224.5 153 219.1 153 212.5C153 205.9 147.6 200.5 141 200.5ZM141 222.5C135.5 222.5 131 218 131 212.5C131 207 135.5 202.5 141 202.5C146.5 202.5 151 207 151 212.5C151 218 146.5 222.5 141 222.5Z" fill="#FF7E30"/>
+<path d="M141 215.5C142.657 215.5 144 214.157 144 212.5C144 210.843 142.657 209.5 141 209.5C139.343 209.5 138 210.843 138 212.5C138 214.157 139.343 215.5 141 215.5Z" fill="#FF7E30"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="209.955">First line</tspan></text>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="173" y="227.227">Second line</tspan></text>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M409.757 205.947C410.062 206.227 410.083 206.701 409.803 207.007L398.803 219.007C398.667 219.155 398.476 219.243 398.275 219.25C398.074 219.256 397.878 219.182 397.732 219.043L392.232 213.793C391.933 213.507 391.921 213.032 392.207 212.732C392.493 212.433 392.968 212.421 393.268 212.707L398.214 217.429L408.697 205.993C408.977 205.688 409.451 205.667 409.757 205.947Z" fill="#111111"/>
+</g>
+<path d="M429 237V238H430V237H429ZM109 237H108V238H109V237ZM429 188H428V237H429H430V188H429ZM429 237V236H109V237V238H429V237ZM109 237H110V188H109H108V237H109Z" fill="white" mask="url(#path-3-inside-1_1195_19955)"/>
+<g clip-path="url(#clip1_1195_19955)">
+<mask id="path-11-inside-2_1195_19955" fill="white">
+<path d="M109 461H429V510H109V461Z"/>
+</mask>
+<path d="M109 461H429V510H109V461Z" fill="#DFDFDF"/>
+<path d="M141 485.5H149C149 489.9 145.4 493.5 141 493.5C136.6 493.5 133 489.9 133 485.5C133 481.1 136.6 477.5 141 477.5V485.5Z" fill="#FFD7BE"/>
+<path d="M141 473.5C134.4 473.5 129 478.9 129 485.5C129 492.1 134.4 497.5 141 497.5C147.6 497.5 153 492.1 153 485.5C153 478.9 147.6 473.5 141 473.5ZM141 495.5C135.5 495.5 131 491 131 485.5C131 480 135.5 475.5 141 475.5C146.5 475.5 151 480 151 485.5C151 491 146.5 495.5 141 495.5Z" fill="#FF7E30"/>
+<path d="M141 488.5C142.657 488.5 144 487.157 144 485.5C144 483.843 142.657 482.5 141 482.5C139.343 482.5 138 483.843 138 485.5C138 487.157 139.343 488.5 141 488.5Z" fill="#FF7E30"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="482.955">First line</tspan></text>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="173" y="500.227">Second line</tspan></text>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M409.757 478.947C410.062 479.227 410.083 479.701 409.803 480.007L398.803 492.007C398.667 492.155 398.476 492.243 398.275 492.25C398.074 492.256 397.878 492.182 397.732 492.043L392.232 486.793C391.933 486.507 391.921 486.032 392.207 485.732C392.493 485.433 392.968 485.421 393.268 485.707L398.214 490.429L408.697 478.993C408.977 478.688 409.451 478.667 409.757 478.947Z" fill="#111111"/>
+</g>
+<path d="M429 510V511H430V510H429ZM109 510H108V511H109V510ZM429 461H428V510H429H430V461H429ZM429 510V509H109V510V511H429V510ZM109 510H110V461H109H108V510H109Z" fill="white" mask="url(#path-11-inside-2_1195_19955)"/>
+<circle cx="390.5" cy="510.5" r="4" stroke="black"/>
+<rect x="390" y="515" width="1" height="13" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="297.994" y="547.455">color/rainbow/mono-weak</tspan></text>
+<circle cx="419.5" cy="470" r="4" stroke="black"/>
+<line x1="458" y1="470.5" x2="424" y2="470.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="462.457" y="475.455">color/bg/selection-neutralDefault-hover</tspan></text>
+<circle cx="419.5" cy="197" r="4" stroke="black"/>
+<line x1="457" y1="197.5" x2="424" y2="197.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="461.951" y="202.455">color/bg/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="195.299" y="153.455">text/body</tspan></text>
+<rect x="229" y="162" width="1" height="33" fill="black"/>
+<circle cx="229.5" 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="195.299" y="426.455">text/body</tspan></text>
+<rect x="229" y="435" width="1" height="33" fill="black"/>
+<circle cx="229.5" cy="472.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="125.796" y="123.455">color/fg/default</tspan></text>
+<rect x="179.5" y="132" width="1" height="63" fill="black"/>
+<circle cx="180" 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="125.796" y="396.455">color/fg/default</tspan></text>
+<rect x="179.5" y="405" width="1" height="63" fill="black"/>
+<circle cx="180" cy="472.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="293.199" y="131.955">color/fg/selection-neutralDefault</tspan></text>
+<rect x="408" y="140.5" width="1" height="63" fill="black"/>
+<circle cx="408.5" cy="208" 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.199" y="404.455">color/fg/selection-neutralDefault</tspan></text>
+<rect x="408" y="413" width="1" height="63" fill="black"/>
+<circle cx="408.5" cy="480.5" r="4" stroke="black"/>
+<circle cx="230.5" cy="223.5" r="4" stroke="black"/>
+<rect x="230" y="228" width="1" height="50" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="174.954" y="297.455">text/description</tspan></text>
+<circle cx="230.5" cy="496.5" r="4" stroke="black"/>
+<rect x="230" y="501" width="1" height="50" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="174.954" y="570.455">text/description</tspan></text>
+<circle cx="180" cy="223.5" r="4" stroke="black"/>
+<rect x="179.5" y="228" width="1" height="27" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="131.939" y="274.455">color/fg/weak</tspan></text>
+<circle cx="180" cy="496.5" r="4" stroke="black"/>
+<rect x="179.5" y="501" width="1" height="27" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="131.939" y="547.455">color/fg/weak</tspan></text>
+<path d="M327.013 498.041L300.951 487.83C298.999 487.065 297.073 488.995 297.843 490.945L308.175 517.125C308.946 519.077 311.674 519.17 312.575 517.274L315.124 511.911L322.336 519.124C323.274 520.061 324.793 520.061 325.731 519.124L327.428 517.427L329.337 515.518C330.274 514.58 330.274 513.061 329.337 512.123L322.124 504.911L327.192 502.431C329.068 501.513 328.957 498.803 327.013 498.041Z" fill="white" stroke="#111111" stroke-width="2.4"/>
+<circle cx="390.5" cy="237.5" r="4" stroke="black"/>
+<rect x="390" y="242" width="1" height="13" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="297.994" y="274.455">color/rainbow/mono-weak</tspan></text>
+<g clip-path="url(#clip2_1195_19955)">
+<mask id="path-62-inside-3_1195_19955" fill="white">
+<path d="M109 745H429V794H109V745Z"/>
+</mask>
+<path d="M141 770H149C149 774.4 145.4 778 141 778C136.6 778 133 774.4 133 770C133 765.6 136.6 762 141 762V770Z" fill="#FFD7BE"/>
+<path d="M141 758C134.4 758 129 763.4 129 770C129 776.6 134.4 782 141 782C147.6 782 153 776.6 153 770C153 763.4 147.6 758 141 758ZM141 780C135.5 780 131 775.5 131 770C131 764.5 135.5 760 141 760C146.5 760 151 764.5 151 770C151 775.5 146.5 780 141 780Z" fill="#FF7E30"/>
+<path d="M141 773C142.657 773 144 771.657 144 770C144 768.343 142.657 767 141 767C139.343 767 138 768.343 138 770C138 771.657 139.343 773 141 773Z" fill="#FF7E30"/>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="173" y="766.955">First line</tspan></text>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="13" letter-spacing="0px"><tspan x="173" y="784.227">Second line</tspan></text>
+</g>
+<path d="M429 794V793H109V794V795H429V794Z" fill="#EDEDED" mask="url(#path-62-inside-3_1195_19955)"/>
+<circle cx="390" cy="794.5" r="4" stroke="black"/>
+<rect x="389.5" y="799" width="1" height="13" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="325.435" y="831.455">color/border/weak</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="195.299" y="710.455">text/body</tspan></text>
+<rect x="229" y="719" width="1" height="33" fill="black"/>
+<circle cx="229.5" cy="756.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="125.796" y="680.455">color/fg/default</tspan></text>
+<rect x="179.5" y="689" width="1" height="63" fill="black"/>
+<circle cx="180" cy="756.5" r="4" stroke="black"/>
+<circle cx="230.5" cy="780.5" r="4" stroke="black"/>
+<rect x="230" y="785" width="1" height="50" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="174.954" y="854.455">text/description</tspan></text>
+<circle cx="180" cy="780.5" r="4" stroke="black"/>
+<rect x="179.5" y="785" width="1" height="27" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="131.939" y="831.455">color/fg/weak</tspan></text>
+<rect x="43" y="43" width="194.438" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="193.438" 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">ListPart-Simple-Item - as Selection</tspan></text>
+<defs>
+<clipPath id="clip0_1195_19955">
+<path d="M109 188H429V237H109V188Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1195_19955">
+<path d="M109 461H429V510H109V461Z" fill="white"/>
+</clipPath>
+<clipPath id="clip2_1195_19955">
+<path d="M109 745H429V794H109V745Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,160 @@
+<svg width="1140" height="1617" viewBox="0 0 1140 1617" 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 56V1561C1100 1569.84 1092.84 1577 1084 1577H56C47.1634 1577 40 1569.84 40 1561V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H1084V40V39H56V40ZM1100 56H1099V1561H1100H1101V56H1100ZM1084 1577V1576H56V1577V1578H1084V1577ZM40 1561H41V56H40H39V1561H40ZM56 1577V1576C47.7157 1576 41 1569.28 41 1561H40H39C39 1570.39 46.6112 1578 56 1578V1577ZM1100 1561H1099C1099 1569.28 1092.28 1576 1084 1576V1577V1578C1093.39 1578 1101 1570.39 1101 1561H1100ZM1084 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"/>
+<path d="M344 588.5H752C753.933 588.5 755.5 590.067 755.5 592V776C755.5 777.933 753.933 779.5 752 779.5H344C342.067 779.5 340.5 777.933 340.5 776V592C340.5 590.067 342.067 588.5 344 588.5Z" fill="#DDF1E1"/>
+<path d="M344 588.5H752C753.933 588.5 755.5 590.067 755.5 592V776C755.5 777.933 753.933 779.5 752 779.5H344C342.067 779.5 340.5 777.933 340.5 776V592C340.5 590.067 342.067 588.5 344 588.5Z" stroke="#C3E6CA"/>
+<path d="M372 633.8C364.4 633.8 358.2 627.6 358.2 620C358.2 612.4 364.4 606.2 372 606.2C379.6 606.2 385.8 612.4 385.8 620C385.8 627.6 379.6 633.8 372 633.8ZM372 635C380.3 635 387 628.3 387 620C387 611.7 380.3 605 372 605C363.7 605 357 611.7 357 620C357 628.3 363.7 635 372 635Z" fill="#007119"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M380.413 614.951L369.666 626.466L363.586 619.951L365.048 618.587L369.666 623.534L378.951 613.587L380.413 614.951Z" fill="#007119"/>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="24" font-weight="500" letter-spacing="0px"><tspan x="404" y="626.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="404" y="655.455">Lorem ipsum dolor sit amet, consetetur </tspan><tspan x="404" y="675.455">sadipscing elitr, sed diam nonumy eirmod </tspan><tspan x="404" y="695.455">tempor invidunt ut labore et dolore magna </tspan><tspan x="404" y="715.455">aliquyam erat, sed diam voluptua.</tspan></text>
+<path d="M408 728.5H528C529.933 728.5 531.5 730.067 531.5 732V760C531.5 761.933 529.933 763.5 528 763.5H408C406.067 763.5 404.5 761.933 404.5 760V732C404.5 730.067 406.067 728.5 408 728.5Z" fill="#E0EBF6"/>
+<path d="M408 728.5H528C529.933 728.5 531.5 730.067 531.5 732V760C531.5 761.933 529.933 763.5 528 763.5H408C406.067 763.5 404.5 761.933 404.5 760V732C404.5 730.067 406.067 728.5 408 728.5Z" stroke="#1467BA"/>
+<rect x="423" y="736" width="1" height="20" fill="#1467BA"/>
+<rect x="414" y="747" width="1" height="20" transform="rotate(-90 414 747)" fill="#1467BA"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="444" y="751.455">Button</tspan></text>
+<rect x="511" y="736" width="1" height="20" fill="#1467BA"/>
+<rect x="502" y="747" width="1" height="20" transform="rotate(-90 502 747)" fill="#1467BA"/>
+<path d="M344 943.5H752C753.933 943.5 755.5 945.067 755.5 947V1131C755.5 1132.93 753.933 1134.5 752 1134.5H344C342.067 1134.5 340.5 1132.93 340.5 1131V947C340.5 945.067 342.067 943.5 344 943.5Z" fill="#FFF6DF"/>
+<path d="M344 943.5H752C753.933 943.5 755.5 945.067 755.5 947V1131C755.5 1132.93 753.933 1134.5 752 1134.5H344C342.067 1134.5 340.5 1132.93 340.5 1131V947C340.5 945.067 342.067 943.5 344 943.5Z" stroke="#FFE9B4"/>
+<path d="M371 969H373V980H371V969ZM371 983H373V985H371V983Z" fill="#BF8C0D"/>
+<path d="M372 959.2L356.512 989H387.49L387.03 988.12L372 959.2ZM372 961.803L385.51 987.8H358.488L372 961.803Z" fill="#BF8C0D"/>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="24" font-weight="500" letter-spacing="0px"><tspan x="404" y="981.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="404" y="1010.45">Lorem ipsum dolor sit amet, consetetur </tspan><tspan x="404" y="1030.45">sadipscing elitr, sed diam nonumy eirmod </tspan><tspan x="404" y="1050.45">tempor invidunt ut labore et dolore magna </tspan><tspan x="404" y="1070.45">aliquyam erat, sed diam voluptua.</tspan></text>
+<path d="M408 1083.5H528C529.933 1083.5 531.5 1085.07 531.5 1087V1115C531.5 1116.93 529.933 1118.5 528 1118.5H408C406.067 1118.5 404.5 1116.93 404.5 1115V1087C404.5 1085.07 406.067 1083.5 408 1083.5Z" fill="#E0EBF6"/>
+<path d="M408 1083.5H528C529.933 1083.5 531.5 1085.07 531.5 1087V1115C531.5 1116.93 529.933 1118.5 528 1118.5H408C406.067 1118.5 404.5 1116.93 404.5 1115V1087C404.5 1085.07 406.067 1083.5 408 1083.5Z" stroke="#1467BA"/>
+<rect x="423" y="1091" width="1" height="20" fill="#1467BA"/>
+<rect x="414" y="1102" width="1" height="20" transform="rotate(-90 414 1102)" fill="#1467BA"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="444" y="1106.45">Button</tspan></text>
+<rect x="511" y="1091" width="1" height="20" fill="#1467BA"/>
+<rect x="502" y="1102" width="1" height="20" transform="rotate(-90 502 1102)" fill="#1467BA"/>
+<path d="M343 1303.5H751C752.933 1303.5 754.5 1305.07 754.5 1307V1491C754.5 1492.93 752.933 1494.5 751 1494.5H343C341.067 1494.5 339.5 1492.93 339.5 1491V1307C339.5 1305.07 341.067 1303.5 343 1303.5Z" fill="#FBDDE0"/>
+<path d="M343 1303.5H751C752.933 1303.5 754.5 1305.07 754.5 1307V1491C754.5 1492.93 752.933 1494.5 751 1494.5H343C341.067 1494.5 339.5 1492.93 339.5 1491V1307C339.5 1305.07 341.067 1303.5 343 1303.5Z" stroke="#F8C3C9"/>
+<path d="M371 1348.8C363.4 1348.8 357.2 1342.6 357.2 1335C357.2 1327.4 363.4 1321.2 371 1321.2C378.6 1321.2 384.8 1327.4 384.8 1335C384.8 1342.6 378.6 1348.8 371 1348.8ZM371 1350C379.3 1350 386 1343.3 386 1335C386 1326.7 379.3 1320 371 1320C362.7 1320 356 1326.7 356 1335C356 1343.3 362.7 1350 371 1350Z" fill="#A90014"/>
+<path d="M370 1326H372V1338H370V1326Z" fill="#A90014"/>
+<path d="M370 1341H372V1343H370V1341Z" 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="403" y="1341.73">Headline</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="403" y="1370.45">Lorem ipsum dolor sit amet, consetetur </tspan><tspan x="403" y="1390.45">sadipscing elitr, sed diam nonumy eirmod </tspan><tspan x="403" y="1410.45">tempor invidunt ut labore et dolore magna </tspan><tspan x="403" y="1430.45">aliquyam erat, sed diam voluptua.</tspan></text>
+<path d="M407 1443.5H527C528.933 1443.5 530.5 1445.07 530.5 1447V1475C530.5 1476.93 528.933 1478.5 527 1478.5H407C405.067 1478.5 403.5 1476.93 403.5 1475V1447C403.5 1445.07 405.067 1443.5 407 1443.5Z" fill="#E0EBF6"/>
+<path d="M407 1443.5H527C528.933 1443.5 530.5 1445.07 530.5 1447V1475C530.5 1476.93 528.933 1478.5 527 1478.5H407C405.067 1478.5 403.5 1476.93 403.5 1475V1447C403.5 1445.07 405.067 1443.5 407 1443.5Z" stroke="#1467BA"/>
+<rect x="422" y="1451" width="1" height="20" fill="#1467BA"/>
+<rect x="413" y="1462" width="1" height="20" transform="rotate(-90 413 1462)" fill="#1467BA"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="443" y="1466.45">Button</tspan></text>
+<rect x="510" y="1451" width="1" height="20" fill="#1467BA"/>
+<rect x="501" y="1462" width="1" height="20" transform="rotate(-90 501 1462)" fill="#1467BA"/>
+<path d="M344 192.5H752C753.933 192.5 755.5 194.067 755.5 196V380C755.5 381.933 753.933 383.5 752 383.5H344C342.067 383.5 340.5 381.933 340.5 380V196C340.5 194.067 342.067 192.5 344 192.5Z" fill="#E0EBF6"/>
+<path d="M344 192.5H752C753.933 192.5 755.5 194.067 755.5 196V380C755.5 381.933 753.933 383.5 752 383.5H344C342.067 383.5 340.5 381.933 340.5 380V196C340.5 194.067 342.067 192.5 344 192.5Z" stroke="#C7DBEF"/>
+<path d="M372 237.8C364.4 237.8 358.2 231.6 358.2 224C358.2 216.4 364.4 210.2 372 210.2C379.6 210.2 385.8 216.4 385.8 224C385.8 231.6 379.6 237.8 372 237.8ZM372 239C380.3 239 387 232.3 387 224C387 215.7 380.3 209 372 209C363.7 209 357 215.7 357 224C357 232.3 363.7 239 372 239Z" fill="#1467BA"/>
+<path d="M371 220H373V232H371V220Z" fill="#1467BA"/>
+<path d="M371 215H373V217H371V215Z" fill="#1467BA"/>
+<text fill="#565656" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="24" font-weight="500" letter-spacing="0px"><tspan x="404" y="230.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="404" y="259.455">Lorem ipsum dolor sit amet, consetetur </tspan><tspan x="404" y="279.455">sadipscing elitr, sed diam nonumy eirmod </tspan><tspan x="404" y="299.455">tempor invidunt ut labore et dolore magna </tspan><tspan x="404" y="319.455">aliquyam erat, sed diam voluptua.</tspan></text>
+<path d="M408 332.5H528C529.933 332.5 531.5 334.067 531.5 336V364C531.5 365.933 529.933 367.5 528 367.5H408C406.067 367.5 404.5 365.933 404.5 364V336C404.5 334.067 406.067 332.5 408 332.5Z" fill="#E0EBF6"/>
+<path d="M408 332.5H528C529.933 332.5 531.5 334.067 531.5 336V364C531.5 365.933 529.933 367.5 528 367.5H408C406.067 367.5 404.5 365.933 404.5 364V336C404.5 334.067 406.067 332.5 408 332.5Z" stroke="#1467BA"/>
+<rect x="423" y="340" width="1" height="20" fill="#1467BA"/>
+<rect x="414" y="351" width="1" height="20" transform="rotate(-90 414 351)" fill="#1467BA"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="444" y="355.455">Button</tspan></text>
+<rect x="511" y="340" width="1" height="20" fill="#1467BA"/>
+<rect x="502" y="351" width="1" height="20" transform="rotate(-90 502 351)" fill="#1467BA"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="95.5781" y="229.455">color/fg/assistive-default</tspan></text>
+<line x1="367" y1="224.5" x2="277" y2="224.5" stroke="black"/>
+<circle cx="371.5" cy="224" 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="153.476" y="623.455">color/fg/success</tspan></text>
+<line x1="367" y1="618.5" x2="275" y2="618.5" stroke="black"/>
+<circle cx="371.5" cy="618" 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="153.721" y="980.619">color/fg/warning</tspan></text>
+<line x1="367" y1="975.664" x2="274" y2="975.664" stroke="black"/>
+<circle cx="371.5" cy="975.164" 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="161.195" y="1341.45">color/fg/danger</tspan></text>
+<line x1="367" y1="1336.5" x2="275" y2="1336.5" stroke="black"/>
+<circle cx="371.5" cy="1336" r="4" stroke="black"/>
+<circle cx="755.5" cy="222" r="4" stroke="black"/>
+<line x1="819" y1="222.5" x2="760" y2="222.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="823.073" y="227.455">color/border/assistive-default</tspan></text>
+<circle cx="755.5" cy="617" r="4" stroke="black"/>
+<line x1="834" y1="617.5" x2="760" y2="617.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="838.677" y="622.455">color/border/success</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="988.706" y="622.455">-default</tspan></text>
+<circle cx="755.5" cy="971" r="4" stroke="black"/>
+<line x1="832" y1="971.5" x2="760" y2="971.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="836.922" y="976.455">color/border/warning</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="985.706" y="976.455">-default</tspan></text>
+<circle cx="755.5" cy="1330" r="4" stroke="black"/>
+<line x1="834" y1="1330.5" x2="760" y2="1330.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="838.997" y="1335.45">color/border/danger-</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="987.605" y="1335.45">default</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="379.939" y="161.455">color/fg/weak</tspan></text>
+<rect x="427.5" y="170" width="1" height="48" fill="black"/>
+<circle cx="428" cy="222.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="379.939" y="559.455">color/fg/weak</tspan></text>
+<rect x="427.5" y="568" width="1" height="48" fill="black"/>
+<circle cx="428" cy="620.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="379.939" y="913.455">color/fg/weak</tspan></text>
+<rect x="427.5" y="922" width="1" height="48" fill="black"/>
+<circle cx="428" cy="974.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="379.939" y="1272.45">color/fg/weak</tspan></text>
+<rect x="427.5" y="1281" width="1" height="48" fill="black"/>
+<circle cx="428" cy="1333.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="411.221" y="123.455">text/titleMedium-strong</tspan></text>
+<rect x="495" y="132" width="1" height="84" fill="black"/>
+<circle cx="495.5" cy="220.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="411.221" y="521.455">text/titleMedium-strong</tspan></text>
+<rect x="495" y="530" width="1" height="84" fill="black"/>
+<circle cx="495.5" cy="618.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="411.221" y="875.455">text/titleMedium-strong</tspan></text>
+<rect x="495" y="884" width="1" height="84" fill="black"/>
+<circle cx="495.5" cy="972.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="411.221" y="1234.45">text/titleMedium-strong</tspan></text>
+<rect x="495" y="1243" width="1" height="84" fill="black"/>
+<circle cx="495.5" cy="1331.5" r="4" stroke="black"/>
+<circle cx="747.5" cy="250" r="4" stroke="black"/>
+<line x1="831" y1="250.5" x2="752" y2="250.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="835.624" y="255.455">color/bg/assistive</tspan></text>
+<circle cx="747.5" cy="645" r="4" stroke="black"/>
+<line x1="835" y1="645.5" x2="752" y2="645.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="839.228" y="650.455">color/bg/success</tspan></text>
+<circle cx="747.5" cy="999" r="4" stroke="black"/>
+<line x1="833" y1="999.5" x2="752" y2="999.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="837.473" y="1004.45">color/bg/warning</tspan></text>
+<circle cx="747.5" cy="1358" r="4" stroke="black"/>
+<line x1="834" y1="1358.5" x2="752" y2="1358.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="838.947" y="1363.45">color/bg/danger</tspan></text>
+<circle cx="755.5" cy="194" r="4" stroke="black"/>
+<line x1="835" y1="194.5" x2="760" y2="194.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="839.354" y="199.455">radius/s</tspan></text>
+<circle cx="755.5" cy="588" r="4" stroke="black"/>
+<line x1="835" y1="588.5" x2="760" y2="588.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="839.354" y="593.455">radius/s</tspan></text>
+<circle cx="755.5" cy="943" r="4" stroke="black"/>
+<line x1="835" y1="943.5" x2="760" y2="943.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="839.354" y="948.455">radius/s</tspan></text>
+<circle cx="755.5" cy="1302" r="4" stroke="black"/>
+<line x1="835" y1="1302.5" x2="760" y2="1302.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="839.354" y="1307.45">radius/s</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="202.299" y="1033.45">text/body</tspan></text>
+<line x1="402" y1="1028.5" x2="275" y2="1028.5" stroke="black"/>
+<circle cx="406.5" cy="1028" 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="202.299" y="678.455">text/body</tspan></text>
+<line x1="402" y1="673.5" x2="275" y2="673.5" stroke="black"/>
+<circle cx="406.5" cy="673" 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="202.299" y="1393.45">text/body</tspan></text>
+<line x1="402" y1="1388.5" x2="275" y2="1388.5" stroke="black"/>
+<circle cx="406.5" cy="1388" 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="202.299" y="282.455">text/body</tspan></text>
+<line x1="402" y1="277.5" x2="275" y2="277.5" stroke="black"/>
+<circle cx="406.5" cy="277" 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="161.796" y="1013.45">color/fg/default</tspan></text>
+<line x1="402" y1="1008.5" x2="275" y2="1008.5" stroke="black"/>
+<circle cx="406.5" cy="1008" 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="161.796" y="658.455">color/fg/default</tspan></text>
+<line x1="402" y1="653.5" x2="275" y2="653.5" stroke="black"/>
+<circle cx="406.5" cy="653" 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="161.796" y="1373.45">color/fg/default</tspan></text>
+<line x1="402" y1="1368.5" x2="275" y2="1368.5" stroke="black"/>
+<circle cx="406.5" cy="1368" 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="161.796" y="262.455">color/fg/default</tspan></text>
+<line x1="402" y1="257.5" x2="275" y2="257.5" stroke="black"/>
+<circle cx="406.5" cy="257" r="4" stroke="black"/>
+<rect x="43" y="43" width="35.3438" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="34.3438" 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">note</tspan></text>
+</svg>