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

@@ -0,0 +1,87 @@
+<svg width="680" height="852" viewBox="0 0 680 852" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 56C40 47.1634 47.1634 40 56 40H624C632.837 40 640 47.1634 640 56V796C640 804.837 632.837 812 624 812H56C47.1634 812 40 804.837 40 796V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H624V40V39H56V40ZM640 56H639V796H640H641V56H640ZM624 812V811H56V812V813H624V812ZM40 796H41V56H40H39V796H40ZM56 812V811C47.7157 811 41 804.284 41 796H40H39C39 805.389 46.6111 813 56 813V812ZM640 796H639C639 804.284 632.284 811 624 811V812V813C633.389 813 641 805.389 641 796H640ZM624 40V41C632.284 41 639 47.7157 639 56H640H641C641 46.6112 633.389 39 624 39V40ZM56 40V39C46.6112 39 39 46.6111 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
+<mask id="path-3-inside-1_1195_19955" fill="white">
+<path d="M206 151H526V198H206V151Z"/>
+</mask>
+<path d="M526 198V196H206V198V200H526V198Z" fill="#1467BA" mask="url(#path-3-inside-1_1195_19955)"/>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="188.955">Label</tspan></text>
+<mask id="path-6-inside-2_1195_19955" fill="white">
+<path d="M206 394H526V441H206V394Z"/>
+</mask>
+<path d="M526 441V439H206V441V443H526V441Z" fill="#1467BA" mask="url(#path-6-inside-2_1195_19955)"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" letter-spacing="0px"><tspan x="206" y="409.364">Label</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="431.955">Value</tspan></text>
+<line x1="244.5" y1="436" x2="244.5" y2="417" stroke="#111111"/>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="245" y="431.955">Placeholdertext</tspan></text>
+<path d="M514.25 422.25L505.75 430.75M505.75 422.25L514.25 430.75" stroke="#737373"/>
+<mask id="path-13-inside-3_1195_19955" fill="white">
+<path d="M206 668H526V715H206V668Z"/>
+</mask>
+<path d="M526 715V713H206V715V717H526V715Z" fill="#1467BA" mask="url(#path-13-inside-3_1195_19955)"/>
+<text fill="#1467BA" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" letter-spacing="0px"><tspan x="206" y="683.364">Label</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="705.955">Value</tspan></text>
+<line x1="244.5" y1="710" x2="244.5" y2="691" stroke="#111111"/>
+<path d="M514.25 696.25L505.75 704.75M505.75 696.25L514.25 704.75" stroke="#737373"/>
+<path d="M211.285 657.833H521.285C525.427 657.833 528.785 661.191 528.785 665.333V725.333C528.785 729.475 525.427 732.833 521.285 732.833H211.285C207.143 732.833 203.785 729.475 203.785 725.333V665.333L203.795 664.948C203.996 660.985 207.272 657.833 211.285 657.833Z" stroke="#111111"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="176.299" y="137.455">text/body</tspan></text>
+<rect x="210" y="146" width="1" height="32" fill="black"/>
+<circle cx="210.5" cy="182.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="168.526" y="356.455">text/caption</tspan></text>
+<rect x="210.5" y="365" width="1" height="33" fill="black"/>
+<circle cx="211" cy="402.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="168.526" y="631.455">text/caption</tspan></text>
+<rect x="210.5" y="640" width="1" height="33" fill="black"/>
+<circle cx="211" cy="677.5" r="4" stroke="black"/>
+<circle cx="210.5" cy="428.5" r="4" stroke="black"/>
+<rect x="210" y="433" 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="176.299" y="495.455">text/body</tspan></text>
+<circle cx="210.5" cy="703.5" r="4" stroke="black"/>
+<rect x="210" y="708" 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="176.299" y="770.455">text/body</tspan></text>
+<circle cx="306.5" cy="426.5" r="4" stroke="black"/>
+<rect x="306" y="431" width="1" height="22" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="272.299" y="472.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="67.4648" y="187.955">color/fg/weaker</tspan></text>
+<line x1="205.5" y1="183" x2="182.5" y2="183" stroke="black"/>
+<circle cx="210" cy="182.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="418.646" y="376.455">color/fg/action-neutralWeak</tspan></text>
+<rect x="517" y="385" width="1" height="33" fill="black"/>
+<circle cx="517.5" cy="422.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="418.646" y="651.455">color/fg/action-neutralWeak</tspan></text>
+<rect x="517" y="660" width="1" height="33" fill="black"/>
+<circle cx="517.5" cy="697.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="61.5264" y="407.955">color/fg/accent</tspan></text>
+<line x1="205.5" y1="403" x2="173.5" y2="403" stroke="black"/>
+<circle cx="210" cy="402.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="61.5264" y="682.955">color/fg/accent</tspan></text>
+<line x1="205.5" y1="678" x2="173.5" y2="678" stroke="black"/>
+<circle cx="210" cy="677.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="68.2959" y="433.955">color/fg/default</tspan></text>
+<line x1="205.5" y1="429" x2="181.5" y2="429" stroke="black"/>
+<circle cx="210" cy="428.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="68.2959" y="708.955">color/fg/default</tspan></text>
+<line x1="205.5" y1="704" x2="181.5" y2="704" stroke="black"/>
+<circle cx="210" cy="703.5" r="4" stroke="black"/>
+<circle cx="394.5" cy="196.5" r="4" stroke="black"/>
+<rect x="394" y="201" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="324.261" y="264.455">color/border/accent</tspan></text>
+<circle cx="394.5" cy="439.5" r="4" stroke="black"/>
+<rect x="394" y="444" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="324.261" y="507.455">color/border/accent</tspan></text>
+<circle cx="394.5" cy="714.5" r="4" stroke="black"/>
+<rect x="394" y="719" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="324.261" y="782.455">color/border/accent</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="244.265" y="606.455">color/border/interaction-focus</tspan></text>
+<rect x="350.5" y="615" width="1" height="39" fill="black"/>
+<circle cx="351" cy="658.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="218.21" y="335.455">color/fg/assistive-neutral</tspan></text>
+<rect x="306" y="344" width="1" height="78" fill="black"/>
+<circle cx="306.5" cy="426.5" r="4" stroke="black"/>
+<circle cx="527.5" cy="730" r="4" stroke="black"/>
+<line x1="551" y1="730.5" x2="532" y2="730.5" stroke="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="555.154" y="735.455">radius/m</tspan></text>
+<rect x="43" y="43" width="109.828" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="108.828" 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">Input DefaultFocus</tspan></text>
+</svg>

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

@@ -0,0 +1,46 @@
+<svg width="680" height="603" viewBox="0 0 680 603" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 56C40 47.1634 47.1634 40 56 40H624C632.837 40 640 47.1634 640 56V547C640 555.837 632.837 563 624 563H56C47.1634 563 40 555.837 40 547V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H624V40V39H56V40ZM640 56H639V547H640H641V56H640ZM624 563V562H56V563V564H624V563ZM40 547H41V56H40H39V547H40ZM56 563V562C47.7157 562 41 555.284 41 547H40H39C39 556.389 46.6111 564 56 564V563ZM640 547H639C639 555.284 632.284 562 624 562V563V564C633.389 564 641 556.389 641 547H640ZM624 40V41C632.284 41 639 47.7157 639 56H640H641C641 46.6112 633.389 39 624 39V40ZM56 40V39C46.6112 39 39 46.6112 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
+<mask id="path-3-inside-1_1195_19955" fill="white">
+<path d="M206 151H526V198H206V151Z"/>
+</mask>
+<path d="M526 198V197H206V198V199H526V198Z" fill="#B3B3B3" mask="url(#path-3-inside-1_1195_19955)"/>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="188.955">Label</tspan></text>
+<mask id="path-6-inside-2_1195_19955" fill="white">
+<path d="M206 394H526V441H206V394Z"/>
+</mask>
+<path d="M526 441V440H206V441V442H526V441Z" fill="#B3B3B3" mask="url(#path-6-inside-2_1195_19955)"/>
+<text fill="#737373" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" letter-spacing="0px"><tspan x="206" y="409.364">Label</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="431.955">Value</tspan></text>
+<path d="M514.25 422.25L505.75 430.75M505.75 422.25L514.25 430.75" stroke="#737373"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="176.299" y="137.455">text/body</tspan></text>
+<rect x="210" y="146" width="1" height="32" fill="black"/>
+<circle cx="210.5" cy="182.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="168.526" y="356.455">text/caption</tspan></text>
+<rect x="210.5" y="365" width="1" height="33" fill="black"/>
+<circle cx="211" cy="402.5" r="4" stroke="black"/>
+<circle cx="210.5" cy="428.5" r="4" stroke="black"/>
+<rect x="210" y="433" 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="176.299" y="495.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="67.4648" y="187.955">color/fg/weaker</tspan></text>
+<line x1="205.5" y1="183" x2="182.5" y2="183" stroke="black"/>
+<circle cx="210" cy="182.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="418.646" y="376.455">color/fg/action-neutralWeak</tspan></text>
+<rect x="517" y="385" width="1" height="33" fill="black"/>
+<circle cx="517.5" cy="422.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.2207" y="407.955">color/fg/warning</tspan></text>
+<line x1="205.5" y1="403" x2="182.5" y2="403" stroke="black"/>
+<circle cx="210" cy="402.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="68.2959" y="433.955">color/fg/default</tspan></text>
+<line x1="205.5" y1="429" x2="181.5" y2="429" stroke="black"/>
+<circle cx="210" cy="428.5" r="4" stroke="black"/>
+<circle cx="393" cy="196.5" r="4" stroke="black"/>
+<rect x="392.5" y="201" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="324.202" y="264.455">color/border/strong</tspan></text>
+<circle cx="393" cy="439.5" r="4" stroke="black"/>
+<rect x="392.5" y="444" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="324.202" y="507.455">color/border/strong</tspan></text>
+<rect x="43" y="43" width="78.8438" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="77.8438" 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">Input Default</tspan></text>
+</svg>

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

@@ -0,0 +1,70 @@
+<svg width="680" height="852" viewBox="0 0 680 852" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 56C40 47.1634 47.1634 40 56 40H624C632.837 40 640 47.1634 640 56V796C640 804.837 632.837 812 624 812H56C47.1634 812 40 804.837 40 796V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H624V40V39H56V40ZM640 56H639V796H640H641V56H640ZM624 812V811H56V812V813H624V812ZM40 796H41V56H40H39V796H40ZM56 812V811C47.7157 811 41 804.284 41 796H40H39C39 805.389 46.6111 813 56 813V812ZM640 796H639C639 804.284 632.284 811 624 811V812V813C633.389 813 641 805.389 641 796H640ZM624 40V41C632.284 41 639 47.7157 639 56H640H641C641 46.6112 633.389 39 624 39V40ZM56 40V39C46.6112 39 39 46.6111 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
+<mask id="path-3-inside-1_1195_19955" fill="white">
+<path d="M278 151H598V198H278V151Z"/>
+</mask>
+<path d="M278 198V198.5H279.509V198V197.5H278V198ZM282.528 198V198.5H285.547V198V197.5H282.528V198ZM288.566 198V198.5H291.585V198V197.5H288.566V198ZM294.604 198V198.5H297.623V198V197.5H294.604V198ZM300.642 198V198.5H303.66V198V197.5H300.642V198ZM306.679 198V198.5H309.698V198V197.5H306.679V198ZM312.717 198V198.5H315.736V198V197.5H312.717V198ZM318.755 198V198.5H321.774V198V197.5H318.755V198ZM324.792 198V198.5H327.811V198V197.5H324.792V198ZM330.83 198V198.5H333.849V198V197.5H330.83V198ZM336.868 198V198.5H339.887V198V197.5H336.868V198ZM342.906 198V198.5H345.925V198V197.5H342.906V198ZM348.943 198V198.5H351.962V198V197.5H348.943V198ZM354.981 198V198.5H358V198V197.5H354.981V198ZM361.019 198V198.5H364.038V198V197.5H361.019V198ZM367.057 198V198.5H370.075V198V197.5H367.057V198ZM373.094 198V198.5H376.113V198V197.5H373.094V198ZM379.132 198V198.5H382.151V198V197.5H379.132V198ZM385.17 198V198.5H388.189V198V197.5H385.17V198ZM391.208 198V198.5H394.226V198V197.5H391.208V198ZM397.245 198V198.5H400.264V198V197.5H397.245V198ZM403.283 198V198.5H406.302V198V197.5H403.283V198ZM409.321 198V198.5H412.34V198V197.5H409.321V198ZM415.359 198V198.5H418.377V198V197.5H415.359V198ZM421.396 198V198.5H424.415V198V197.5H421.396V198ZM427.434 198V198.5H430.453V198V197.5H427.434V198ZM433.472 198V198.5H436.491V198V197.5H433.472V198ZM439.51 198V198.5H442.528V198V197.5H439.51V198ZM445.547 198V198.5H448.566V198V197.5H445.547V198ZM451.585 198V198.5H454.604V198V197.5H451.585V198ZM457.623 198V198.5H460.642V198V197.5H457.623V198ZM463.661 198V198.5H466.679V198V197.5H463.661V198ZM469.698 198V198.5H472.717V198V197.5H469.698V198ZM475.736 198V198.5H478.755V198V197.5H475.736V198ZM481.774 198V198.5H484.793V198V197.5H481.774V198ZM487.812 198V198.5H490.83V198V197.5H487.812V198ZM493.849 198V198.5H496.868V198V197.5H493.849V198ZM499.887 198V198.5H502.906V198V197.5H499.887V198ZM505.925 198V198.5H508.944V198V197.5H505.925V198ZM511.963 198V198.5H514.981V198V197.5H511.963V198ZM518 198V198.5H521.019V198V197.5H518V198ZM524.038 198V198.5H527.057V198V197.5H524.038V198ZM530.076 198V198.5H533.095V198V197.5H530.076V198ZM536.113 198V198.5H539.132V198V197.5H536.113V198ZM542.151 198V198.5H545.17V198V197.5H542.151V198ZM548.189 198V198.5H551.208V198V197.5H548.189V198ZM554.227 198V198.5H557.246V198V197.5H554.227V198ZM560.264 198V198.5H563.283V198V197.5H560.264V198ZM566.302 198V198.5H569.321V198V197.5H566.302V198ZM572.34 198V198.5H575.359V198V197.5H572.34V198ZM578.378 198V198.5H581.396V198V197.5H578.378V198ZM584.415 198V198.5H587.434V198V197.5H584.415V198ZM590.453 198V198.5H593.472V198V197.5H590.453V198ZM596.491 198V198.5H598V198V197.5H596.491V198ZM278 198V199H279.509V198V197H278V198ZM282.528 198V199H285.547V198V197H282.528V198ZM288.566 198V199H291.585V198V197H288.566V198ZM294.604 198V199H297.623V198V197H294.604V198ZM300.642 198V199H303.66V198V197H300.642V198ZM306.679 198V199H309.698V198V197H306.679V198ZM312.717 198V199H315.736V198V197H312.717V198ZM318.755 198V199H321.774V198V197H318.755V198ZM324.792 198V199H327.811V198V197H324.792V198ZM330.83 198V199H333.849V198V197H330.83V198ZM336.868 198V199H339.887V198V197H336.868V198ZM342.906 198V199H345.925V198V197H342.906V198ZM348.943 198V199H351.962V198V197H348.943V198ZM354.981 198V199H358V198V197H354.981V198ZM361.019 198V199H364.038V198V197H361.019V198ZM367.057 198V199H370.075V198V197H367.057V198ZM373.094 198V199H376.113V198V197H373.094V198ZM379.132 198V199H382.151V198V197H379.132V198ZM385.17 198V199H388.189V198V197H385.17V198ZM391.208 198V199H394.226V198V197H391.208V198ZM397.245 198V199H400.264V198V197H397.245V198ZM403.283 198V199H406.302V198V197H403.283V198ZM409.321 198V199H412.34V198V197H409.321V198ZM415.359 198V199H418.377V198V197H415.359V198ZM421.396 198V199H424.415V198V197H421.396V198ZM427.434 198V199H430.453V198V197H427.434V198ZM433.472 198V199H436.491V198V197H433.472V198ZM439.51 198V199H442.528V198V197H439.51V198ZM445.547 198V199H448.566V198V197H445.547V198ZM451.585 198V199H454.604V198V197H451.585V198ZM457.623 198V199H460.642V198V197H457.623V198ZM463.661 198V199H466.679V198V197H463.661V198ZM469.698 198V199H472.717V198V197H469.698V198ZM475.736 198V199H478.755V198V197H475.736V198ZM481.774 198V199H484.793V198V197H481.774V198ZM487.812 198V199H490.83V198V197H487.812V198ZM493.849 198V199H496.868V198V197H493.849V198ZM499.887 198V199H502.906V198V197H499.887V198ZM505.925 198V199H508.944V198V197H505.925V198ZM511.963 198V199H514.981V198V197H511.963V198ZM518 198V199H521.019V198V197H518V198ZM524.038 198V199H527.057V198V197H524.038V198ZM530.076 198V199H533.095V198V197H530.076V198ZM536.113 198V199H539.132V198V197H536.113V198ZM542.151 198V199H545.17V198V197H542.151V198ZM548.189 198V199H551.208V198V197H548.189V198ZM554.227 198V199H557.246V198V197H554.227V198ZM560.264 198V199H563.283V198V197H560.264V198ZM566.302 198V199H569.321V198V197H566.302V198ZM572.34 198V199H575.359V198V197H572.34V198ZM578.378 198V199H581.396V198V197H578.378V198ZM584.415 198V199H587.434V198V197H584.415V198ZM590.453 198V199H593.472V198V197H590.453V198ZM596.491 198V199H598V198V197H596.491V198Z" fill="#C6C6C6" mask="url(#path-3-inside-1_1195_19955)"/>
+<text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="278" y="188.955">Label</tspan></text>
+<mask id="path-6-inside-2_1195_19955" fill="white">
+<path d="M278 394H598V441H278V394Z"/>
+</mask>
+<path d="M278 441V441.5H279.509V441V440.5H278V441ZM282.528 441V441.5H285.547V441V440.5H282.528V441ZM288.566 441V441.5H291.585V441V440.5H288.566V441ZM294.604 441V441.5H297.623V441V440.5H294.604V441ZM300.642 441V441.5H303.66V441V440.5H300.642V441ZM306.679 441V441.5H309.698V441V440.5H306.679V441ZM312.717 441V441.5H315.736V441V440.5H312.717V441ZM318.755 441V441.5H321.774V441V440.5H318.755V441ZM324.792 441V441.5H327.811V441V440.5H324.792V441ZM330.83 441V441.5H333.849V441V440.5H330.83V441ZM336.868 441V441.5H339.887V441V440.5H336.868V441ZM342.906 441V441.5H345.925V441V440.5H342.906V441ZM348.943 441V441.5H351.962V441V440.5H348.943V441ZM354.981 441V441.5H358V441V440.5H354.981V441ZM361.019 441V441.5H364.038V441V440.5H361.019V441ZM367.057 441V441.5H370.075V441V440.5H367.057V441ZM373.094 441V441.5H376.113V441V440.5H373.094V441ZM379.132 441V441.5H382.151V441V440.5H379.132V441ZM385.17 441V441.5H388.189V441V440.5H385.17V441ZM391.208 441V441.5H394.226V441V440.5H391.208V441ZM397.245 441V441.5H400.264V441V440.5H397.245V441ZM403.283 441V441.5H406.302V441V440.5H403.283V441ZM409.321 441V441.5H412.34V441V440.5H409.321V441ZM415.359 441V441.5H418.377V441V440.5H415.359V441ZM421.396 441V441.5H424.415V441V440.5H421.396V441ZM427.434 441V441.5H430.453V441V440.5H427.434V441ZM433.472 441V441.5H436.491V441V440.5H433.472V441ZM439.51 441V441.5H442.528V441V440.5H439.51V441ZM445.547 441V441.5H448.566V441V440.5H445.547V441ZM451.585 441V441.5H454.604V441V440.5H451.585V441ZM457.623 441V441.5H460.642V441V440.5H457.623V441ZM463.661 441V441.5H466.679V441V440.5H463.661V441ZM469.698 441V441.5H472.717V441V440.5H469.698V441ZM475.736 441V441.5H478.755V441V440.5H475.736V441ZM481.774 441V441.5H484.793V441V440.5H481.774V441ZM487.812 441V441.5H490.83V441V440.5H487.812V441ZM493.849 441V441.5H496.868V441V440.5H493.849V441ZM499.887 441V441.5H502.906V441V440.5H499.887V441ZM505.925 441V441.5H508.944V441V440.5H505.925V441ZM511.963 441V441.5H514.981V441V440.5H511.963V441ZM518 441V441.5H521.019V441V440.5H518V441ZM524.038 441V441.5H527.057V441V440.5H524.038V441ZM530.076 441V441.5H533.095V441V440.5H530.076V441ZM536.113 441V441.5H539.132V441V440.5H536.113V441ZM542.151 441V441.5H545.17V441V440.5H542.151V441ZM548.189 441V441.5H551.208V441V440.5H548.189V441ZM554.227 441V441.5H557.246V441V440.5H554.227V441ZM560.264 441V441.5H563.283V441V440.5H560.264V441ZM566.302 441V441.5H569.321V441V440.5H566.302V441ZM572.34 441V441.5H575.359V441V440.5H572.34V441ZM578.378 441V441.5H581.396V441V440.5H578.378V441ZM584.415 441V441.5H587.434V441V440.5H584.415V441ZM590.453 441V441.5H593.472V441V440.5H590.453V441ZM596.491 441V441.5H598V441V440.5H596.491V441ZM278 441V442H279.509V441V440H278V441ZM282.528 441V442H285.547V441V440H282.528V441ZM288.566 441V442H291.585V441V440H288.566V441ZM294.604 441V442H297.623V441V440H294.604V441ZM300.642 441V442H303.66V441V440H300.642V441ZM306.679 441V442H309.698V441V440H306.679V441ZM312.717 441V442H315.736V441V440H312.717V441ZM318.755 441V442H321.774V441V440H318.755V441ZM324.792 441V442H327.811V441V440H324.792V441ZM330.83 441V442H333.849V441V440H330.83V441ZM336.868 441V442H339.887V441V440H336.868V441ZM342.906 441V442H345.925V441V440H342.906V441ZM348.943 441V442H351.962V441V440H348.943V441ZM354.981 441V442H358V441V440H354.981V441ZM361.019 441V442H364.038V441V440H361.019V441ZM367.057 441V442H370.075V441V440H367.057V441ZM373.094 441V442H376.113V441V440H373.094V441ZM379.132 441V442H382.151V441V440H379.132V441ZM385.17 441V442H388.189V441V440H385.17V441ZM391.208 441V442H394.226V441V440H391.208V441ZM397.245 441V442H400.264V441V440H397.245V441ZM403.283 441V442H406.302V441V440H403.283V441ZM409.321 441V442H412.34V441V440H409.321V441ZM415.359 441V442H418.377V441V440H415.359V441ZM421.396 441V442H424.415V441V440H421.396V441ZM427.434 441V442H430.453V441V440H427.434V441ZM433.472 441V442H436.491V441V440H433.472V441ZM439.51 441V442H442.528V441V440H439.51V441ZM445.547 441V442H448.566V441V440H445.547V441ZM451.585 441V442H454.604V441V440H451.585V441ZM457.623 441V442H460.642V441V440H457.623V441ZM463.661 441V442H466.679V441V440H463.661V441ZM469.698 441V442H472.717V441V440H469.698V441ZM475.736 441V442H478.755V441V440H475.736V441ZM481.774 441V442H484.793V441V440H481.774V441ZM487.812 441V442H490.83V441V440H487.812V441ZM493.849 441V442H496.868V441V440H493.849V441ZM499.887 441V442H502.906V441V440H499.887V441ZM505.925 441V442H508.944V441V440H505.925V441ZM511.963 441V442H514.981V441V440H511.963V441ZM518 441V442H521.019V441V440H518V441ZM524.038 441V442H527.057V441V440H524.038V441ZM530.076 441V442H533.095V441V440H530.076V441ZM536.113 441V442H539.132V441V440H536.113V441ZM542.151 441V442H545.17V441V440H542.151V441ZM548.189 441V442H551.208V441V440H548.189V441ZM554.227 441V442H557.246V441V440H554.227V441ZM560.264 441V442H563.283V441V440H560.264V441ZM566.302 441V442H569.321V441V440H566.302V441ZM572.34 441V442H575.359V441V440H572.34V441ZM578.378 441V442H581.396V441V440H578.378V441ZM584.415 441V442H587.434V441V440H584.415V441ZM590.453 441V442H593.472V441V440H590.453V441ZM596.491 441V442H598V441V440H596.491V441Z" fill="#C6C6C6" mask="url(#path-6-inside-2_1195_19955)"/>
+<text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" letter-spacing="0px"><tspan x="278" y="409.364">Label</tspan></text>
+<text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="278" y="431.955">Value</tspan></text>
+<mask id="path-10-inside-3_1195_19955" fill="white">
+<path d="M278 668H598V715H278V668Z"/>
+</mask>
+<path d="M278 715V715.5H279.509V715V714.5H278V715ZM282.528 715V715.5H285.547V715V714.5H282.528V715ZM288.566 715V715.5H291.585V715V714.5H288.566V715ZM294.604 715V715.5H297.623V715V714.5H294.604V715ZM300.642 715V715.5H303.66V715V714.5H300.642V715ZM306.679 715V715.5H309.698V715V714.5H306.679V715ZM312.717 715V715.5H315.736V715V714.5H312.717V715ZM318.755 715V715.5H321.774V715V714.5H318.755V715ZM324.792 715V715.5H327.811V715V714.5H324.792V715ZM330.83 715V715.5H333.849V715V714.5H330.83V715ZM336.868 715V715.5H339.887V715V714.5H336.868V715ZM342.906 715V715.5H345.925V715V714.5H342.906V715ZM348.943 715V715.5H351.962V715V714.5H348.943V715ZM354.981 715V715.5H358V715V714.5H354.981V715ZM361.019 715V715.5H364.038V715V714.5H361.019V715ZM367.057 715V715.5H370.075V715V714.5H367.057V715ZM373.094 715V715.5H376.113V715V714.5H373.094V715ZM379.132 715V715.5H382.151V715V714.5H379.132V715ZM385.17 715V715.5H388.189V715V714.5H385.17V715ZM391.208 715V715.5H394.226V715V714.5H391.208V715ZM397.245 715V715.5H400.264V715V714.5H397.245V715ZM403.283 715V715.5H406.302V715V714.5H403.283V715ZM409.321 715V715.5H412.34V715V714.5H409.321V715ZM415.359 715V715.5H418.377V715V714.5H415.359V715ZM421.396 715V715.5H424.415V715V714.5H421.396V715ZM427.434 715V715.5H430.453V715V714.5H427.434V715ZM433.472 715V715.5H436.491V715V714.5H433.472V715ZM439.51 715V715.5H442.528V715V714.5H439.51V715ZM445.547 715V715.5H448.566V715V714.5H445.547V715ZM451.585 715V715.5H454.604V715V714.5H451.585V715ZM457.623 715V715.5H460.642V715V714.5H457.623V715ZM463.661 715V715.5H466.679V715V714.5H463.661V715ZM469.698 715V715.5H472.717V715V714.5H469.698V715ZM475.736 715V715.5H478.755V715V714.5H475.736V715ZM481.774 715V715.5H484.793V715V714.5H481.774V715ZM487.812 715V715.5H490.83V715V714.5H487.812V715ZM493.849 715V715.5H496.868V715V714.5H493.849V715ZM499.887 715V715.5H502.906V715V714.5H499.887V715ZM505.925 715V715.5H508.944V715V714.5H505.925V715ZM511.963 715V715.5H514.981V715V714.5H511.963V715ZM518 715V715.5H521.019V715V714.5H518V715ZM524.038 715V715.5H527.057V715V714.5H524.038V715ZM530.076 715V715.5H533.095V715V714.5H530.076V715ZM536.113 715V715.5H539.132V715V714.5H536.113V715ZM542.151 715V715.5H545.17V715V714.5H542.151V715ZM548.189 715V715.5H551.208V715V714.5H548.189V715ZM554.227 715V715.5H557.246V715V714.5H554.227V715ZM560.264 715V715.5H563.283V715V714.5H560.264V715ZM566.302 715V715.5H569.321V715V714.5H566.302V715ZM572.34 715V715.5H575.359V715V714.5H572.34V715ZM578.378 715V715.5H581.396V715V714.5H578.378V715ZM584.415 715V715.5H587.434V715V714.5H584.415V715ZM590.453 715V715.5H593.472V715V714.5H590.453V715ZM596.491 715V715.5H598V715V714.5H596.491V715ZM278 715V716H279.509V715V714H278V715ZM282.528 715V716H285.547V715V714H282.528V715ZM288.566 715V716H291.585V715V714H288.566V715ZM294.604 715V716H297.623V715V714H294.604V715ZM300.642 715V716H303.66V715V714H300.642V715ZM306.679 715V716H309.698V715V714H306.679V715ZM312.717 715V716H315.736V715V714H312.717V715ZM318.755 715V716H321.774V715V714H318.755V715ZM324.792 715V716H327.811V715V714H324.792V715ZM330.83 715V716H333.849V715V714H330.83V715ZM336.868 715V716H339.887V715V714H336.868V715ZM342.906 715V716H345.925V715V714H342.906V715ZM348.943 715V716H351.962V715V714H348.943V715ZM354.981 715V716H358V715V714H354.981V715ZM361.019 715V716H364.038V715V714H361.019V715ZM367.057 715V716H370.075V715V714H367.057V715ZM373.094 715V716H376.113V715V714H373.094V715ZM379.132 715V716H382.151V715V714H379.132V715ZM385.17 715V716H388.189V715V714H385.17V715ZM391.208 715V716H394.226V715V714H391.208V715ZM397.245 715V716H400.264V715V714H397.245V715ZM403.283 715V716H406.302V715V714H403.283V715ZM409.321 715V716H412.34V715V714H409.321V715ZM415.359 715V716H418.377V715V714H415.359V715ZM421.396 715V716H424.415V715V714H421.396V715ZM427.434 715V716H430.453V715V714H427.434V715ZM433.472 715V716H436.491V715V714H433.472V715ZM439.51 715V716H442.528V715V714H439.51V715ZM445.547 715V716H448.566V715V714H445.547V715ZM451.585 715V716H454.604V715V714H451.585V715ZM457.623 715V716H460.642V715V714H457.623V715ZM463.661 715V716H466.679V715V714H463.661V715ZM469.698 715V716H472.717V715V714H469.698V715ZM475.736 715V716H478.755V715V714H475.736V715ZM481.774 715V716H484.793V715V714H481.774V715ZM487.812 715V716H490.83V715V714H487.812V715ZM493.849 715V716H496.868V715V714H493.849V715ZM499.887 715V716H502.906V715V714H499.887V715ZM505.925 715V716H508.944V715V714H505.925V715ZM511.963 715V716H514.981V715V714H511.963V715ZM518 715V716H521.019V715V714H518V715ZM524.038 715V716H527.057V715V714H524.038V715ZM530.076 715V716H533.095V715V714H530.076V715ZM536.113 715V716H539.132V715V714H536.113V715ZM542.151 715V716H545.17V715V714H542.151V715ZM548.189 715V716H551.208V715V714H548.189V715ZM554.227 715V716H557.246V715V714H554.227V715ZM560.264 715V716H563.283V715V714H560.264V715ZM566.302 715V716H569.321V715V714H566.302V715ZM572.34 715V716H575.359V715V714H572.34V715ZM578.378 715V716H581.396V715V714H578.378V715ZM584.415 715V716H587.434V715V714H584.415V715ZM590.453 715V716H593.472V715V714H590.453V715ZM596.491 715V716H598V715V714H596.491V715Z" fill="#C6C6C6" mask="url(#path-10-inside-3_1195_19955)"/>
+<text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" letter-spacing="0px"><tspan x="278" y="683.364">Label</tspan></text>
+<text fill="#999999" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="278" y="705.955">Value</tspan></text>
+<path d="M283.57 657.833H593.57C597.712 657.833 601.07 661.191 601.07 665.333V725.333C601.07 729.475 597.712 732.833 593.57 732.833H283.57C279.428 732.833 276.07 729.475 276.07 725.333V665.333L276.08 664.948C276.281 660.985 279.558 657.833 283.57 657.833Z" stroke="#111111"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="248.299" y="137.455">text/body</tspan></text>
+<rect x="282" y="146" width="1" height="32" fill="black"/>
+<circle cx="282.5" cy="182.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="240.526" y="356.455">text/caption</tspan></text>
+<rect x="282.5" y="365" width="1" height="33" fill="black"/>
+<circle cx="283" cy="402.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="240.526" y="630.455">text/caption</tspan></text>
+<rect x="282.5" y="639" width="1" height="33" fill="black"/>
+<circle cx="283" cy="676.5" r="4" stroke="black"/>
+<circle cx="282.5" cy="428.5" r="4" stroke="black"/>
+<rect x="282" y="433" 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="248.299" y="495.455">text/body</tspan></text>
+<circle cx="282.5" cy="702.5" r="4" stroke="black"/>
+<rect x="282" y="707" 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="248.299" y="769.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="56.1318" y="187.955">color/fg/interaction-disabled</tspan></text>
+<line x1="277.5" y1="183" x2="262.5" y2="183" stroke="black"/>
+<circle cx="282" cy="182.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="56.1318" y="407.955">color/fg/interaction-disabled</tspan></text>
+<line x1="277.5" y1="403" x2="262.5" y2="403" stroke="black"/>
+<circle cx="282" cy="402.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="56.1318" y="681.955">color/fg/interaction-disabled</tspan></text>
+<line x1="277.5" y1="677" x2="262.5" y2="677" stroke="black"/>
+<circle cx="282" cy="676.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="57.1318" y="433.955">color/fg/interaction-disabled</tspan></text>
+<line x1="277.5" y1="429" x2="263.5" y2="429" stroke="black"/>
+<circle cx="282" cy="428.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="57.1318" y="707.955">color/fg/interaction-disabled</tspan></text>
+<line x1="277.5" y1="703" x2="263.5" y2="703" stroke="black"/>
+<circle cx="282" cy="702.5" r="4" stroke="black"/>
+<circle cx="467.5" cy="196.5" r="4" stroke="black"/>
+<rect x="467" y="201" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="350.063" y="264.455">color/border/interaction-disabled</tspan></text>
+<circle cx="467.5" cy="439.5" r="4" stroke="black"/>
+<rect x="467" y="444" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="350.063" y="507.455">color/border/interaction-disabled</tspan></text>
+<circle cx="467.5" cy="713.5" r="4" stroke="black"/>
+<rect x="467" y="718" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="350.063" y="781.455">color/border/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="316.265" y="603.455">color/border/interaction-focus</tspan></text>
+<rect x="422.5" y="612" width="1" height="42" fill="black"/>
+<circle cx="423" cy="658.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="566.154" y="611.455">radius/m</tspan></text>
+<rect x="596.5" y="620" width="1" height="33" fill="black"/>
+<circle cx="597" cy="657.5" r="4" stroke="black"/>
+<rect x="43" y="43" width="86.6719" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="85.6719" 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">Input Disabled</tspan></text>
+</svg>

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

@@ -0,0 +1,48 @@
+<svg width="680" height="603" viewBox="0 0 680 603" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 56C40 47.1634 47.1634 40 56 40H624C632.837 40 640 47.1634 640 56V547C640 555.837 632.837 563 624 563H56C47.1634 563 40 555.837 40 547V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H624V40V39H56V40ZM640 56H639V547H640H641V56H640ZM624 563V562H56V563V564H624V563ZM40 547H41V56H40H39V547H40ZM56 563V562C47.7157 562 41 555.284 41 547H40H39C39 556.389 46.6111 564 56 564V563ZM640 547H639C639 555.284 632.284 562 624 562V563V564C633.389 564 641 556.389 641 547H640ZM624 40V41C632.284 41 639 47.7157 639 56H640H641C641 46.6112 633.389 39 624 39V40ZM56 40V39C46.6112 39 39 46.6112 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
+<mask id="path-3-inside-1_1195_19955" fill="white">
+<path d="M206 151H526V198H206V151Z"/>
+</mask>
+<path d="M526 198V197H206V198V199H526V198Z" fill="#A90014" mask="url(#path-3-inside-1_1195_19955)"/>
+<text fill="#A90014" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="188.955">Label</tspan></text>
+<mask id="path-6-inside-2_1195_19955" fill="white">
+<path d="M206 394H526V441H206V394Z"/>
+</mask>
+<path d="M526 441V440H206V441V442H526V441Z" fill="#A90014" mask="url(#path-6-inside-2_1195_19955)"/>
+<text fill="#A90014" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" letter-spacing="0px"><tspan x="206" y="409.364">Label</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="431.955">Value</tspan></text>
+<path d="M514.25 422.25L505.75 430.75M505.75 422.25L514.25 430.75" stroke="#737373"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="176.299" y="137.455">text/body</tspan></text>
+<rect x="210" y="146" width="1" height="32" fill="black"/>
+<circle cx="210.5" cy="182.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="168.526" y="356.455">text/caption</tspan></text>
+<rect x="210.5" y="365" width="1" height="33" fill="black"/>
+<circle cx="211" cy="402.5" r="4" stroke="black"/>
+<circle cx="210.5" cy="428.5" r="4" stroke="black"/>
+<rect x="210" y="433" 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="176.299" y="495.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="66.6953" y="187.955">color/fg/danger</tspan></text>
+<line x1="205.5" y1="183" x2="180.5" y2="183" stroke="black"/>
+<circle cx="210" cy="182.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="418.646" y="376.455">color/fg/action-neutralWeak</tspan></text>
+<rect x="517" y="385" width="1" height="33" fill="black"/>
+<circle cx="517.5" cy="422.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="68.6953" y="407.955">color/fg/danger</tspan></text>
+<line x1="205.5" y1="403" x2="182.5" y2="403" stroke="black"/>
+<circle cx="210" cy="402.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="68.2959" y="433.955">color/fg/default</tspan></text>
+<line x1="205.5" y1="429" x2="181.5" y2="429" stroke="black"/>
+<circle cx="210" cy="428.5" r="4" stroke="black"/>
+<circle cx="399.5" cy="196.5" r="4" stroke="black"/>
+<rect x="399" y="201" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="302.908" y="264.455">color/border/</tspan><tspan x="444.617" y="264.455">-</tspan></text>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="395.223" y="264.455">danger</tspan><tspan x="451.517" y="264.455">strong</tspan></text>
+<circle cx="399.5" cy="440.5" r="4" stroke="black"/>
+<rect x="399" y="445" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="302.908" y="508.455">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="451.517" y="508.455">strong</tspan></text>
+<rect x="43" y="43" width="66.7656" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="65.7656" 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">Input Error</tspan></text>
+</svg>

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

@@ -0,0 +1,46 @@
+<svg width="680" height="603" viewBox="0 0 680 603" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 56C40 47.1634 47.1634 40 56 40H624C632.837 40 640 47.1634 640 56V547C640 555.837 632.837 563 624 563H56C47.1634 563 40 555.837 40 547V56Z" fill="#E8E8E8" />
+<path d="M56 40V41H624V40V39H56V40ZM640 56H639V547H640H641V56H640ZM624 563V562H56V563V564H624V563ZM40 547H41V56H40H39V547H40ZM56 563V562C47.7157 562 41 555.284 41 547H40H39C39 556.389 46.6111 564 56 564V563ZM640 547H639C639 555.284 632.284 562 624 562V563V564C633.389 564 641 556.389 641 547H640ZM624 40V41C632.284 41 639 47.7157 639 56H640H641C641 46.6112 633.389 39 624 39V40ZM56 40V39C46.6112 39 39 46.6112 39 56H40H41C41 47.7157 47.7157 41 56 41V40Z" fill="#D4D4D4"/>
+<mask id="path-3-inside-1_1195_19955" fill="white">
+<path d="M206 151H526V198H206V151Z"/>
+</mask>
+<path d="M526 198V197H206V198V199H526V198Z" fill="#BF8C0D" mask="url(#path-3-inside-1_1195_19955)"/>
+<text fill="#BF8C0D" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="188.955">Label</tspan></text>
+<mask id="path-6-inside-2_1195_19955" fill="white">
+<path d="M206 394H526V441H206V394Z"/>
+</mask>
+<path d="M526 441V440H206V441V442H526V441Z" fill="#BF8C0D" mask="url(#path-6-inside-2_1195_19955)"/>
+<text fill="#BF8C0D" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" letter-spacing="0px"><tspan x="206" y="409.364">Label</tspan></text>
+<text fill="#111111" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="206" y="431.955">Value</tspan></text>
+<path d="M514.25 422.25L505.75 430.75M505.75 422.25L514.25 430.75" stroke="#737373"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="176.299" y="137.455">text/body</tspan></text>
+<rect x="210" y="146" width="1" height="32" fill="black"/>
+<circle cx="210.5" cy="182.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="168.526" y="356.455">text/caption</tspan></text>
+<rect x="210.5" y="365" width="1" height="33" fill="black"/>
+<circle cx="211" cy="402.5" r="4" stroke="black"/>
+<circle cx="210.5" cy="428.5" r="4" stroke="black"/>
+<rect x="210" y="433" 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="176.299" y="495.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="67.2207" y="187.955">color/fg/warning</tspan></text>
+<line x1="205.5" y1="183" x2="187.5" y2="183" stroke="black"/>
+<circle cx="210" cy="182.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="418.646" y="376.455">color/fg/action-neutralWeak</tspan></text>
+<rect x="517" y="385" width="1" height="33" fill="black"/>
+<circle cx="517.5" cy="422.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="59.2207" y="407.955">color/fg/warning</tspan></text>
+<line x1="205.5" y1="403" x2="179.5" y2="403" stroke="black"/>
+<circle cx="210" cy="402.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="68.2959" y="433.955">color/fg/default</tspan></text>
+<line x1="205.5" y1="429" x2="181.5" y2="429" stroke="black"/>
+<circle cx="210" cy="428.5" r="4" stroke="black"/>
+<circle cx="403" cy="196.5" r="4" stroke="black"/>
+<rect x="402.5" y="201" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="302.833" y="264.455">color/border/warning-strong</tspan></text>
+<circle cx="403" cy="440.5" r="4" stroke="black"/>
+<rect x="402.5" y="445" width="1" height="44" fill="black"/>
+<text fill="#333333" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="15" letter-spacing="0px"><tspan x="302.833" y="508.455">color/border/warning-strong</tspan></text>
+<rect x="43" y="43" width="83.8906" height="30" rx="3" fill="#E8E8E8"/>
+<rect x="43.5" y="43.5" width="82.8906" 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">Input Warning</tspan></text>
+</svg>