@progress/kendo-themes-html 5.4.2-dev.3 → 5.4.2-dev.6

package/src/progressbar/tests/progressbar.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const style = `
+    #test-area {
+        grid-template-columns: auto 1fr 1fr;
+    }
+`;
+
+root.render(
+    <>
+        <style>{style}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>LTR</span>
+            <span>RTL</span>
+
+            <span>Partial start</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-start">
+                    <span className="k-progress-status">5%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: "5%" }} >
+                    <span className="k-progress-status-wrap k-progress-start" style={{ width: "2000%" }} >
+                        <span className="k-progress-status">5%</span>
+                    </span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-start">
+                    <span className="k-progress-status">5%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: "5%" }} >
+                    <span className="k-progress-status-wrap k-progress-start" style={{ width: "2000%" }} >
+                        <span className="k-progress-status">5%</span>
+                    </span>
+                </div>
+            </div>
+
+            <span>Partial center</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-center">
+                    <span className="k-progress-status">50%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: "50%" }} >
+                    <span className="k-progress-status-wrap k-progress-center" style={{ width: "200%" }} >
+                        <span className="k-progress-status">50%</span>
+                    </span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-center">
+                    <span className="k-progress-status">50%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: "50%" }} >
+                    <span className="k-progress-status-wrap k-progress-center" style={{ width: "200%" }} >
+                        <span className="k-progress-status">50%</span>
+                    </span>
+                </div>
+            </div>
+
+            <span>Partial end</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-end">
+                    <span className="k-progress-status">95%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: "95%" }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: "105.263%" }} >
+                        <span className="k-progress-status">95%</span>
+                    </span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-end">
+                    <span className="k-progress-status">95%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: "95%" }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: "105.263%" }} >
+                        <span className="k-progress-status">95%</span>
+                    </span>
+                </div>
+            </div>
+
+            <span>100% start</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-start">
+                    <span className="k-progress-status">100%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: '100%' }} >
+                    <span className="k-progress-status-wrap k-progress-start" style={{ width: '100%' }} >
+                        <span className="k-progress-status">100%</span>
+                    </span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-start">
+                    <span className="k-progress-status">100%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: '100%' }} >
+                    <span className="k-progress-status-wrap k-progress-start" style={{ width: '100%' }} >
+                        <span className="k-progress-status">100%</span>
+                    </span>
+                </div>
+            </div>
+
+            <span>100% center</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-center">
+                    <span className="k-progress-status">100%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: '100%' }} >
+                    <span className="k-progress-status-wrap k-progress-center" style={{ width: '100%' }} >
+                        <span className="k-progress-status">100%</span>
+                    </span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-center">
+                    <span className="k-progress-status">100%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: '100%' }} >
+                    <span className="k-progress-status-wrap k-progress-center" style={{ width: '100%' }} >
+                        <span className="k-progress-status">100%</span>
+                    </span>
+                </div>
+            </div>
+
+            <span>100% end</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-end">
+                    <span className="k-progress-status">100%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: '100%' }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%' }} >
+                        <span className="k-progress-status">100%</span>
+                    </span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-end">
+                    <span className="k-progress-status">100%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: '100%' }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%' }} >
+                        <span className="k-progress-status">100%</span>
+                    </span>
+                </div>
+            </div>
+            <span>No Label</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-end"></span>
+                <div className="k-state-selected" style={{ width: "50%" }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: "200%" }} ></span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
+                <span className="k-progress-status-wrap k-progress-end"></span>
+                <div className="k-state-selected" style={{ width: "50%" }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: "200%" }} ></span>
+                </div>
+            </div>
+
+            <span>Thin style</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ height: "2px" }} >
+                <span className="k-progress-status-wrap k-progress-end"></span>
+                <div className="k-state-selected" style={{ width: "50%" }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: "200%" }} ></span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal" style={{ height: "2px" }} >
+                <span className="k-progress-status-wrap k-progress-end"></span>
+                <div className="k-state-selected" style={{ width: "50%" }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: "200%" }} ></span>
+                </div>
+            </div>
+
+            <span>Thick style</span>
+            <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ height: '50px' }} >
+                <span className="k-progress-status-wrap k-progress-end">
+                    <span className="k-progress-status">50%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: "50%" }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: "200%" }} >
+                        <span className="k-progress-status">50%</span>
+                    </span>
+                </div>
+            </div>
+            <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal" style={{ height: '50px' }} >
+                <span className="k-progress-status-wrap k-progress-end">
+                    <span className="k-progress-status">50%</span>
+                </span>
+                <div className="k-state-selected" style={{ width: "50%" }} >
+                    <span className="k-progress-status-wrap k-progress-end" style={{ width: "200%" }} >
+                        <span className="k-progress-status">50%</span>
+                    </span>
+                </div>
+            </div>
+
+        </div>
+    </>
+);

package/src/qrcode/tests/qrcode.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+root.render(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-4">
+
+            <section>
+                <div id="qrMail" className="k-qrcode">
+                    <div style={{ position: "relative", width: "120px", height: "120px" }} >
+                        <svg style={{ width: '100%', height: "100%", overflow: 'hidden', left: '0px', top: "-0.15625px" }} xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
+                            <defs></defs>
+                            <g>
+                                <path d="M0 0 L 120 0 120 120 0 120Z" stroke="none" fill="none"></path>
+                                <path d="M2 2 L 2 6 30 6 30 2Z M34 2 L 34 6 38 6 38 2Z M42 2 L 42 6 46 6 46 2Z M50 2 L 50 6 66 6 66 2Z M74 2 L 74 6 86 6 86 2Z M90 2 L 90 6 118 6 118 2Z M2 6 L 2 10 6 10 6 6Z M26 6 L 26 10 30 10 30 6Z M38 6 L 38 10 58 10 58 6Z M66 6 L 66 10 78 10 78 6Z M82 6 L 82 10 86 10 86 6Z M90 6 L 90 10 94 10 94 6Z M114 6 L 114 10 118 10 118 6Z M2 10 L 2 14 6 14 6 10Z M10 10 L 10 14 22 14 22 10Z M26 10 L 26 14 30 14 30 10Z M34 10 L 34 14 46 14 46 10Z M66 10 L 66 14 70 14 70 10Z M74 10 L 74 14 86 14 86 10Z M90 10 L 90 14 94 14 94 10Z M98 10 L 98 14 110 14 110 10Z M114 10 L 114 14 118 14 118 10Z M2 14 L 2 18 6 18 6 14Z M10 14 L 10 18 22 18 22 14Z M26 14 L 26 18 30 18 30 14Z M34 14 L 34 18 46 18 46 14Z M50 14 L 50 18 54 18 54 14Z M58 14 L 58 18 66 18 66 14Z M70 14 L 70 18 74 18 74 14Z M82 14 L 82 18 86 18 86 14Z M90 14 L 90 18 94 18 94 14Z M98 14 L 98 18 110 18 110 14Z M114 14 L 114 18 118 18 118 14Z M2 18 L 2 22 6 22 6 18Z M10 18 L 10 22 22 22 22 18Z M26 18 L 26 22 30 22 30 18Z M34 18 L 34 22 38 22 38 18Z M46 18 L 46 22 54 22 54 18Z M58 18 L 58 22 62 22 62 18Z M66 18 L 66 22 70 22 70 18Z M78 18 L 78 22 82 22 82 18Z M90 18 L 90 22 94 22 94 18Z M98 18 L 98 22 110 22 110 18Z M114 18 L 114 22 118 22 118 18Z M2 22 L 2 26 6 26 6 22Z M26 22 L 26 26 30 26 30 22Z M42 22 L 42 26 50 26 50 22Z M54 22 L 54 26 58 26 58 22Z M62 22 L 62 26 70 26 70 22Z M74 22 L 74 26 82 26 82 22Z M90 22 L 90 26 94 26 94 22Z M114 22 L 114 26 118 26 118 22Z M2 26 L 2 30 30 30 30 26Z M34 26 L 34 30 38 30 38 26Z M42 26 L 42 30 46 30 46 26Z M50 26 L 50 30 54 30 54 26Z M58 26 L 58 30 62 30 62 26Z M66 26 L 66 30 70 30 70 26Z M74 26 L 74 30 78 30 78 26Z M82 26 L 82 30 86 30 86 26Z M90 26 L 90 30 118 30 118 26Z M42 30 L 42 34 46 34 46 30Z M50 30 L 50 34 54 34 54 30Z M62 30 L 62 34 74 34 74 30Z M82 30 L 82 34 86 34 86 30Z M2 34 L 2 38 18 38 18 34Z M26 34 L 26 38 30 38 30 34Z M34 34 L 34 38 38 38 38 34Z M42 34 L 42 38 58 38 58 34Z M62 34 L 62 38 66 38 66 34Z M70 34 L 70 38 82 38 82 34Z M86 34 L 86 38 90 38 90 34Z M98 34 L 98 38 110 38 110 34Z M114 34 L 114 38 118 38 118 34Z M2 38 L 2 42 10 42 10 38Z M14 38 L 14 42 18 42 18 38Z M22 38 L 22 42 26 42 26 38Z M42 38 L 42 42 46 42 46 38Z M50 38 L 50 42 66 42 66 38Z M74 38 L 74 42 78 42 78 38Z M82 38 L 82 42 86 42 86 38Z M90 38 L 90 42 118 42 118 38Z M2 42 L 2 46 22 46 22 42Z M26 42 L 26 46 34 46 34 42Z M38 42 L 38 46 58 46 58 42Z M66 42 L 66 46 78 46 78 42Z M86 42 L 86 46 90 46 90 42Z M94 42 L 94 46 102 46 102 42Z M106 42 L 106 46 114 46 114 42Z M6 46 L 6 50 22 50 22 46Z M34 46 L 34 50 46 50 46 46Z M66 46 L 66 50 70 50 70 46Z M74 46 L 74 50 86 50 86 46Z M90 46 L 90 50 102 50 102 46Z M110 46 L 110 50 118 50 118 46Z M6 50 L 6 54 14 54 14 50Z M18 50 L 18 54 46 54 46 50Z M50 50 L 50 54 54 54 54 50Z M58 50 L 58 54 66 54 66 50Z M70 50 L 70 54 74 54 74 50Z M102 50 L 102 54 118 54 118 50Z M2 54 L 2 58 6 58 6 54Z M10 54 L 10 58 26 58 26 54Z M34 54 L 34 58 38 58 38 54Z M46 54 L 46 58 54 58 54 54Z M58 54 L 58 58 62 58 62 54Z M66 54 L 66 58 82 58 82 54Z M86 54 L 86 58 94 58 94 54Z M102 54 L 102 58 110 58 110 54Z M114 54 L 114 58 118 58 118 54Z M2 58 L 2 62 30 62 30 58Z M34 58 L 34 62 38 62 38 58Z M42 58 L 42 62 50 62 50 58Z M54 58 L 54 62 58 62 58 58Z M62 58 L 62 62 74 62 74 58Z M78 58 L 78 62 86 62 86 58Z M90 58 L 90 62 98 62 98 58Z M102 58 L 102 62 106 62 106 58Z M110 58 L 110 62 118 62 118 58Z M10 62 L 10 66 22 66 22 62Z M34 62 L 34 66 38 66 38 62Z M42 62 L 42 66 50 66 50 62Z M58 62 L 58 66 62 66 62 62Z M66 62 L 66 66 70 66 70 62Z M74 62 L 74 66 82 66 82 62Z M90 62 L 90 66 106 66 106 62Z M10 66 L 10 70 14 70 14 66Z M18 66 L 18 70 22 70 22 66Z M26 66 L 26 70 46 70 46 66Z M50 66 L 50 70 54 70 54 66Z M58 66 L 58 70 66 70 66 66Z M74 66 L 74 70 78 70 78 66Z M82 66 L 82 70 90 70 90 66Z M94 66 L 94 70 102 70 102 66Z M18 70 L 18 74 26 74 26 70Z M30 70 L 30 74 34 74 34 70Z M42 70 L 42 74 46 74 46 70Z M58 70 L 58 74 62 74 62 70Z M66 70 L 66 74 74 74 74 70Z M82 70 L 82 74 86 74 86 70Z M94 70 L 94 74 98 74 98 70Z M106 70 L 106 74 110 74 110 70Z M2 74 L 2 78 6 78 6 74Z M18 74 L 18 78 46 78 46 74Z M54 74 L 54 78 70 78 70 74Z M74 74 L 74 78 78 78 78 74Z M82 74 L 82 78 86 78 86 74Z M94 74 L 94 78 110 78 110 74Z M22 78 L 22 82 26 82 26 78Z M34 78 L 34 82 38 82 38 78Z M42 78 L 42 82 50 82 50 78Z M54 78 L 54 82 62 82 62 78Z M66 78 L 66 82 78 82 78 78Z M82 78 L 82 82 90 82 90 78Z M94 78 L 94 82 102 82 102 78Z M106 78 L 106 82 114 82 114 78Z M6 82 L 6 86 10 86 10 82Z M14 82 L 14 86 30 86 30 82Z M34 82 L 34 86 46 86 46 82Z M54 82 L 54 86 78 86 78 82Z M82 82 L 82 86 102 86 102 82Z M106 82 L 106 86 114 86 114 82Z M34 86 L 34 90 42 90 42 86Z M66 86 L 66 90 78 90 78 86Z M82 86 L 82 90 86 90 86 86Z M98 86 L 98 90 102 90 102 86Z M106 86 L 106 90 118 90 118 86Z M2 90 L 2 94 30 94 30 90Z M58 90 L 58 94 62 94 62 90Z M66 90 L 66 94 70 94 70 90Z M78 90 L 78 94 86 94 86 90Z M90 90 L 90 94 94 94 94 90Z M98 90 L 98 94 102 94 102 90Z M110 90 L 110 94 114 94 114 90Z M2 94 L 2 98 6 98 6 94Z M26 94 L 26 98 30 98 30 94Z M38 94 L 38 98 42 98 42 94Z M46 94 L 46 98 66 98 66 94Z M74 94 L 74 98 78 98 78 94Z M82 94 L 82 98 86 98 86 94Z M98 94 L 98 98 102 98 102 94Z M114 94 L 114 98 118 98 118 94Z M2 98 L 2 102 6 102 6 98Z M10 98 L 10 102 22 102 22 98Z M26 98 L 26 102 30 102 30 98Z M42 98 L 42 102 50 102 50 98Z M70 98 L 70 102 78 102 78 98Z M82 98 L 82 102 102 102 102 98Z M106 98 L 106 102 114 102 114 98Z M2 102 L 2 106 6 106 6 102Z M10 102 L 10 106 22 106 22 102Z M26 102 L 26 106 30 106 30 102Z M34 102 L 34 106 38 106 38 102Z M46 102 L 46 106 50 106 50 102Z M54 102 L 54 106 58 106 58 102Z M62 102 L 62 106 70 106 70 102Z M86 102 L 86 106 90 106 90 102Z M94 102 L 94 106 102 106 102 102Z M106 102 L 106 106 110 106 110 102Z M114 102 L 114 106 118 106 118 102Z M2 106 L 2 110 6 110 6 106Z M10 106 L 10 110 22 110 22 106Z M26 106 L 26 110 30 110 30 106Z M34 106 L 34 110 38 110 38 106Z M42 106 L 42 110 46 110 46 106Z M50 106 L 50 110 54 110 54 106Z M58 106 L 58 110 62 110 62 106Z M70 106 L 70 110 78 110 78 106Z M86 106 L 86 110 90 110 90 106Z M94 106 L 94 110 98 110 98 106Z M106 106 L 106 110 110 110 110 106Z M114 106 L 114 110 118 110 118 106Z M2 110 L 2 114 6 114 6 110Z M26 110 L 26 114 30 114 30 110Z M34 110 L 34 114 38 114 38 110Z M50 110 L 50 114 58 114 58 110Z M74 110 L 74 114 90 114 90 110Z M98 110 L 98 114 106 114 106 110Z M110 110 L 110 114 114 114 114 110Z M2 114 L 2 118 30 118 30 114Z M34 114 L 34 118 38 118 38 114Z M46 114 L 46 118 50 118 50 114Z M74 114 L 74 118 86 118 86 114Z M90 114 L 90 118 94 118 94 114Z M98 114 L 98 118 102 118 102 114Z M110 114 L 110 118 114 118 114 114Z"
+                                    stroke="none" fill="#e15613"></path>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div id="qrUrl" className="k-qrcode">
+                    <div style={{ position: "relative", width: "120px", height: "120px" }} >
+                        <svg style={{ width: '100%', height: "100%", overflow: 'hidden', left: "-0.875px", top: "-0.15625px" }} xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
+                            <defs></defs>
+                            <g>
+                                <path d="M2.5 2.5 L 117.5 2.5 117.5 117.5 2.5 117.5Z" stroke="#000000" strokeWidth="5" fill="#fff"></path>
+                                <path d="M23 23 L 23 25 37 25 37 23Z M41 23 L 41 25 43 25 43 23Z M47 23 L 47 25 51 25 51 23Z M55 23 L 55 25 57 25 57 23Z M61 23 L 61 25 65 25 65 23Z M67 23 L 67 25 71 25 71 23Z M73 23 L 73 25 77 25 77 23Z M83 23 L 83 25 97 25 97 23Z M23 25 L 23 27 25 27 25 25Z M35 25 L 35 27 37 27 37 25Z M39 25 L 39 27 41 27 41 25Z M45 25 L 45 27 57 27 57 25Z M59 25 L 59 27 61 27 61 25Z M63 25 L 63 27 65 27 65 25Z M67 25 L 67 27 73 27 73 25Z M75 25 L 75 27 77 27 77 25Z M83 25 L 83 27 85 27 85 25Z M95 25 L 95 27 97 27 97 25Z M23 27 L 23 29 25 29 25 27Z M27 27 L 27 29 33 29 33 27Z M35 27 L 35 29 37 29 37 27Z M39 27 L 39 29 41 29 41 27Z M43 27 L 43 29 45 29 45 27Z M65 27 L 65 29 71 29 71 27Z M75 27 L 75 29 77 29 77 27Z M79 27 L 79 29 81 29 81 27Z M83 27 L 83 29 85 29 85 27Z M87 27 L 87 29 93 29 93 27Z M95 27 L 95 29 97 29 97 27Z M23 29 L 23 31 25 31 25 29Z M27 29 L 27 31 33 31 33 29Z M35 29 L 35 31 37 31 37 29Z M39 29 L 39 31 41 31 41 29Z M43 29 L 43 31 45 31 45 29Z M57 29 L 57 31 61 31 61 29Z M63 29 L 63 31 75 31 75 29Z M77 29 L 77 31 81 31 81 29Z M83 29 L 83 31 85 31 85 29Z M87 29 L 87 31 93 31 93 29Z M95 29 L 95 31 97 31 97 29Z M23 31 L 23 33 25 33 25 31Z M27 31 L 27 33 33 33 33 31Z M35 31 L 35 33 37 33 37 31Z M45 31 L 45 33 49 33 49 31Z M55 31 L 55 33 67 33 67 31Z M69 31 L 69 33 71 33 71 31Z M73 31 L 73 33 75 33 75 31Z M79 31 L 79 33 81 33 81 31Z M83 31 L 83 33 85 33 85 31Z M87 31 L 87 33 93 33 93 31Z M95 31 L 95 33 97 33 97 31Z M23 33 L 23 35 25 35 25 33Z M35 33 L 35 35 37 35 37 33Z M47 33 L 47 35 49 35 49 33Z M51 33 L 51 35 53 35 53 33Z M57 33 L 57 35 59 35 59 33Z M63 33 L 63 35 65 35 65 33Z M83 33 L 83 35 85 35 85 33Z M95 33 L 95 35 97 35 97 33Z M23 35 L 23 37 37 37 37 35Z M39 35 L 39 37 41 37 41 35Z M43 35 L 43 37 45 37 45 35Z M47 35 L 47 37 49 37 49 35Z M51 35 L 51 37 53 37 53 35Z M55 35 L 55 37 57 37 57 35Z M59 35 L 59 37 61 37 61 35Z M63 35 L 63 37 65 37 65 35Z M67 35 L 67 37 69 37 69 35Z M71 35 L 71 37 73 37 73 35Z M75 35 L 75 37 77 37 77 35Z M79 35 L 79 37 81 37 81 35Z M83 35 L 83 37 97 37 97 35Z M39 37 L 39 39 53 39 53 37Z M55 37 L 55 39 61 39 61 37Z M63 37 L 63 39 65 39 65 37Z M67 37 L 67 39 71 39 71 37Z M79 37 L 79 39 81 39 81 37Z M23 39 L 23 41 25 41 25 39Z M35 39 L 35 41 37 41 37 39Z M39 39 L 39 41 43 41 43 39Z M45 39 L 45 41 47 41 47 39Z M53 39 L 53 41 57 41 57 39Z M65 39 L 65 41 67 41 67 39Z M69 39 L 69 41 71 41 71 39Z M73 39 L 73 41 79 41 79 39Z M81 39 L 81 41 85 41 85 39Z M89 39 L 89 41 95 41 95 39Z M27 41 L 27 43 29 43 29 41Z M41 41 L 41 43 43 43 43 41Z M45 41 L 45 43 47 43 47 41Z M55 41 L 55 43 61 43 61 41Z M65 41 L 65 43 67 43 67 41Z M71 41 L 71 43 75 43 75 41Z M77 41 L 77 43 81 43 81 41Z M87 41 L 87 43 95 43 95 41Z M27 43 L 27 45 29 45 29 43Z M31 43 L 31 45 41 45 41 43Z M45 43 L 45 45 49 45 49 43Z M51 43 L 51 45 59 45 59 43Z M61 43 L 61 45 63 45 63 43Z M67 43 L 67 45 69 45 69 43Z M75 43 L 75 45 79 45 79 43Z M81 43 L 81 45 97 45 97 43Z M23 45 L 23 47 25 47 25 45Z M31 45 L 31 47 33 47 33 45Z M37 45 L 37 47 41 47 41 45Z M47 45 L 47 47 53 47 53 45Z M61 45 L 61 47 65 47 65 45Z M67 45 L 67 47 69 47 69 45Z M71 45 L 71 47 73 47 73 45Z M83 45 L 83 47 87 47 87 45Z M89 45 L 89 47 91 47 91 45Z M95 45 L 95 47 97 47 97 45Z M23 47 L 23 49 25 49 25 47Z M27 47 L 27 49 29 49 29 47Z M33 47 L 33 49 37 49 37 47Z M39 47 L 39 49 41 49 41 47Z M43 47 L 43 49 45 49 45 47Z M51 47 L 51 49 55 49 55 47Z M69 47 L 69 49 73 49 73 47Z M83 47 L 83 49 87 49 87 47Z M89 47 L 89 49 91 49 91 47Z M95 47 L 95 49 97 49 97 47Z M23 49 L 23 51 29 51 29 49Z M33 49 L 33 51 35 51 35 49Z M43 49 L 43 51 49 51 49 49Z M53 49 L 53 51 57 51 57 49Z M59 49 L 59 51 67 51 67 49Z M69 49 L 69 51 71 51 71 49Z M77 49 L 77 51 81 51 81 49Z M85 49 L 85 51 87 51 87 49Z M89 49 L 89 51 91 51 91 49Z M93 49 L 93 51 95 51 95 49Z M23 51 L 23 53 25 53 25 51Z M35 51 L 35 53 39 53 39 51Z M43 51 L 43 53 45 53 45 51Z M51 51 L 51 53 57 53 57 51Z M59 51 L 59 53 61 53 61 51Z M63 51 L 63 53 65 53 65 51Z M67 51 L 67 53 69 53 69 51Z M75 51 L 75 53 79 53 79 51Z M81 51 L 81 53 83 53 83 51Z M85 51 L 85 53 91 53 91 51Z M93 51 L 93 53 97 53 97 51Z M23 53 L 23 55 25 55 25 53Z M29 53 L 29 55 31 55 31 53Z M33 53 L 33 55 35 55 35 53Z M37 53 L 37 55 39 55 39 53Z M43 53 L 43 55 45 55 45 53Z M49 53 L 49 55 53 55 53 53Z M55 53 L 55 55 57 55 57 53Z M65 53 L 65 55 73 55 73 53Z M75 53 L 75 55 79 55 79 53Z M81 53 L 81 55 83 55 83 53Z M85 53 L 85 55 87 55 87 53Z M89 53 L 89 55 95 55 95 53Z M27 55 L 27 57 37 57 37 55Z M43 55 L 43 57 47 57 47 55Z M49 55 L 49 57 51 57 51 55Z M59 55 L 59 57 69 57 69 55Z M71 55 L 71 57 77 57 77 55Z M79 55 L 79 57 89 57 89 55Z M91 55 L 91 57 95 57 95 55Z M25 57 L 25 59 27 59 27 57Z M29 57 L 29 59 31 59 31 57Z M39 57 L 39 59 43 59 43 57Z M45 57 L 45 59 51 59 51 57Z M55 57 L 55 59 57 59 57 57Z M65 57 L 65 59 67 59 67 57Z M77 57 L 77 59 81 59 81 57Z M85 57 L 85 59 87 59 87 57Z M89 57 L 89 59 91 59 91 57Z M93 57 L 93 59 95 59 95 57Z M23 59 L 23 61 27 61 27 59Z M29 59 L 29 61 33 61 33 59Z M35 59 L 35 61 43 61 43 59Z M47 59 L 47 61 49 61 49 59Z M51 59 L 51 61 53 61 53 59Z M55 59 L 55 61 59 61 59 59Z M61 59 L 61 61 63 61 63 59Z M67 59 L 67 61 69 61 69 59Z M71 59 L 71 61 75 61 75 59Z M77 59 L 77 61 79 61 79 59Z M83 59 L 83 61 85 61 85 59Z M87 59 L 87 61 89 61 89 59Z M91 59 L 91 61 93 61 93 59Z M95 59 L 95 61 97 61 97 59Z M23 61 L 23 63 25 63 25 61Z M29 61 L 29 63 31 63 31 61Z M37 61 L 37 63 39 63 39 61Z M41 61 L 41 63 45 63 45 61Z M47 61 L 47 63 51 63 51 61Z M53 61 L 53 63 57 63 57 61Z M59 61 L 59 63 61 63 61 61Z M67 61 L 67 63 71 63 71 61Z M75 61 L 75 63 77 63 77 61Z M79 61 L 79 63 87 63 87 61Z M89 61 L 89 63 91 63 91 61Z M95 61 L 95 63 97 63 97 61Z M23 63 L 23 65 27 65 27 63Z M29 63 L 29 65 39 65 39 63Z M41 63 L 41 65 43 65 43 63Z M51 63 L 51 65 53 65 53 63Z M57 63 L 57 65 59 65 59 63Z M67 63 L 67 65 79 65 79 63Z M81 63 L 81 65 85 65 85 63Z M87 63 L 87 65 89 65 89 63Z M91 63 L 91 65 93 65 93 63Z M25 65 L 25 67 27 67 27 65Z M29 65 L 29 67 33 67 33 65Z M37 65 L 37 67 39 67 39 65Z M43 65 L 43 67 45 67 45 65Z M53 65 L 53 67 55 67 55 65Z M57 65 L 57 67 65 67 65 65Z M67 65 L 67 67 71 67 71 65Z M73 65 L 73 67 75 67 75 65Z M77 65 L 77 67 81 67 81 65Z M87 65 L 87 67 89 67 89 65Z M91 65 L 91 67 93 67 93 65Z M25 67 L 25 69 27 69 27 67Z M35 67 L 35 69 37 69 37 67Z M49 67 L 49 69 51 69 51 67Z M53 67 L 53 69 55 69 55 67Z M57 67 L 57 69 59 69 59 67Z M63 67 L 63 69 67 69 67 67Z M71 67 L 71 69 73 69 73 67Z M75 67 L 75 69 81 69 81 67Z M85 67 L 85 69 91 69 91 67Z M93 67 L 93 69 97 69 97 67Z M23 69 L 23 71 27 71 27 69Z M31 69 L 31 71 33 71 33 69Z M43 69 L 43 71 49 71 49 69Z M51 69 L 51 71 65 71 65 69Z M67 69 L 67 71 71 71 71 69Z M75 69 L 75 71 79 71 79 69Z M81 69 L 81 71 91 71 91 69Z M93 69 L 93 71 95 71 95 69Z M23 71 L 23 73 25 73 25 71Z M27 71 L 27 73 29 73 29 71Z M31 71 L 31 73 33 73 33 71Z M35 71 L 35 73 43 73 43 71Z M45 71 L 45 73 49 73 49 71Z M51 71 L 51 73 55 73 55 71Z M57 71 L 57 73 59 73 59 71Z M63 71 L 63 73 69 73 69 71Z M77 71 L 77 73 81 73 81 71Z M83 71 L 83 73 87 73 87 71Z M23 73 L 23 75 25 75 25 73Z M27 73 L 27 75 33 75 33 73Z M37 73 L 37 75 39 75 39 73Z M45 73 L 45 75 53 75 53 73Z M59 73 L 59 75 61 75 61 73Z M63 73 L 63 75 65 75 65 73Z M67 73 L 67 75 69 75 69 73Z M71 73 L 71 75 73 75 73 73Z M77 73 L 77 75 81 75 81 73Z M85 73 L 85 75 87 75 87 73Z M23 75 L 23 77 25 77 25 75Z M31 75 L 31 77 41 77 41 75Z M45 75 L 45 77 57 77 57 75Z M59 75 L 59 77 63 77 63 75Z M65 75 L 65 77 69 77 69 75Z M73 75 L 73 77 75 77 75 75Z M77 75 L 77 77 79 77 79 75Z M81 75 L 81 77 83 77 83 75Z M85 75 L 85 77 87 77 87 75Z M89 75 L 89 77 97 77 97 75Z M23 77 L 23 79 25 79 25 77Z M29 77 L 29 79 35 79 35 77Z M37 77 L 37 79 39 79 39 77Z M43 77 L 43 79 51 79 51 77Z M55 77 L 55 79 57 79 57 77Z M61 77 L 61 79 63 79 63 77Z M71 77 L 71 79 73 79 73 77Z M75 77 L 75 79 77 79 77 77Z M81 77 L 81 79 85 79 85 77Z M89 77 L 89 79 93 79 93 77Z M23 79 L 23 81 25 81 25 79Z M27 79 L 27 81 29 81 29 79Z M33 79 L 33 81 41 81 41 79Z M43 79 L 43 81 45 81 45 79Z M47 79 L 47 81 49 81 49 79Z M53 79 L 53 81 59 81 59 79Z M61 79 L 61 81 63 81 63 79Z M67 79 L 67 81 69 81 69 79Z M71 79 L 71 81 89 81 89 79Z M91 79 L 91 81 95 81 95 79Z M39 81 L 39 83 43 83 43 81Z M45 81 L 45 83 47 83 47 81Z M49 81 L 49 83 51 83 51 81Z M53 81 L 53 83 57 83 57 81Z M61 81 L 61 83 67 83 67 81Z M69 81 L 69 83 75 83 75 81Z M77 81 L 77 83 81 83 81 81Z M87 81 L 87 83 89 83 89 81Z M23 83 L 23 85 37 85 37 83Z M45 83 L 45 85 47 85 47 83Z M49 83 L 49 85 55 85 55 83Z M57 83 L 57 85 65 85 65 83Z M69 83 L 69 85 71 85 71 83Z M73 83 L 73 85 75 85 75 83Z M79 83 L 79 85 81 85 81 83Z M83 83 L 83 85 85 85 85 83Z M87 83 L 87 85 89 85 89 83Z M93 83 L 93 85 97 85 97 83Z M23 85 L 23 87 25 87 25 85Z M35 85 L 35 87 37 87 37 85Z M43 85 L 43 87 53 87 53 85Z M63 85 L 63 87 67 87 67 85Z M69 85 L 69 87 73 87 73 85Z M77 85 L 77 87 81 87 81 85Z M87 85 L 87 87 89 87 89 85Z M23 87 L 23 89 25 89 25 87Z M27 87 L 27 89 33 89 33 87Z M35 87 L 35 89 37 89 37 87Z M41 87 L 41 89 49 89 49 87Z M53 87 L 53 89 55 89 55 87Z M59 87 L 59 89 61 89 61 87Z M63 87 L 63 89 73 89 73 87Z M77 87 L 77 89 89 89 89 87Z M91 87 L 91 89 93 89 93 87Z M23 89 L 23 91 25 91 25 89Z M27 89 L 27 91 33 91 33 89Z M35 89 L 35 91 37 91 37 89Z M63 89 L 63 91 69 91 69 89Z M73 89 L 73 91 79 91 79 89Z M81 89 L 81 91 85 91 85 89Z M89 89 L 89 91 95 91 95 89Z M23 91 L 23 93 25 93 25 91Z M27 91 L 27 93 33 93 33 91Z M35 91 L 35 93 37 93 37 91Z M41 91 L 41 93 43 93 43 91Z M47 91 L 47 93 49 93 49 91Z M63 91 L 63 93 65 93 65 91Z M67 91 L 67 93 73 93 73 91Z M79 91 L 79 93 81 93 81 91Z M89 91 L 89 93 93 93 93 91Z M95 91 L 95 93 97 93 97 91Z M23 93 L 23 95 25 95 25 93Z M35 93 L 35 95 37 95 37 93Z M41 93 L 41 95 43 95 43 93Z M47 93 L 47 95 49 95 49 93Z M51 93 L 51 95 57 95 57 93Z M59 93 L 59 95 61 95 61 93Z M69 93 L 69 95 71 95 71 93Z M75 93 L 75 95 77 95 77 93Z M79 93 L 79 95 83 95 83 93Z M87 93 L 87 95 91 95 91 93Z M95 93 L 95 95 97 95 97 93Z M23 95 L 23 97 37 97 37 95Z M39 95 L 39 97 41 97 41 95Z M45 95 L 45 97 47 97 47 95Z M49 95 L 49 97 51 97 51 95Z M55 95 L 55 97 57 97 57 95Z M61 95 L 61 97 65 97 65 95Z M71 95 L 71 97 73 97 73 95Z M79 95 L 79 97 83 97 83 95Z M85 95 L 85 97 87 97 87 95Z M89 95 L 89 97 91 97 91 95Z M95 95 L 95 97 97 97 97 95Z"
+                                    stroke="none" fill="#000"></path>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div id="qrTelephone" className="k-qrcode">
+                    <div style={{ position: "relative", width: "120px", height: "120px" }} >
+                        <svg style={{ width: '100%', height: "100%", overflow: 'hidden', left: "-0.75px", top: "-0.15625px" }} xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
+                            <defs></defs>
+                            <g>
+                                <path d="M2.5 2.5 L 117.5 2.5 117.5 117.5 2.5 117.5Z" stroke="#67a814" strokeWidth="5" fill="#fff"></path>
+                                <path d="M10 10 L 10 14 38 14 38 10Z M54 10 L 54 14 58 14 58 10Z M62 10 L 62 14 66 14 66 10Z M70 10 L 70 14 74 14 74 10Z M82 10 L 82 14 110 14 110 10Z M10 14 L 10 18 14 18 14 14Z M34 14 L 34 18 38 18 38 14Z M42 14 L 42 18 54 18 54 14Z M62 14 L 62 18 66 18 66 14Z M82 14 L 82 18 86 18 86 14Z M106 14 L 106 18 110 18 110 14Z M10 18 L 10 22 14 22 14 18Z M18 18 L 18 22 30 22 30 18Z M34 18 L 34 22 38 22 38 18Z M42 18 L 42 22 46 22 46 18Z M54 18 L 54 22 62 22 62 18Z M74 18 L 74 22 78 22 78 18Z M82 18 L 82 22 86 22 86 18Z M90 18 L 90 22 102 22 102 18Z M106 18 L 106 22 110 22 110 18Z M10 22 L 10 26 14 26 14 22Z M18 22 L 18 26 30 26 30 22Z M34 22 L 34 26 38 26 38 22Z M50 22 L 50 26 54 26 54 22Z M58 22 L 58 26 62 26 62 22Z M66 22 L 66 26 74 26 74 22Z M82 22 L 82 26 86 26 86 22Z M90 22 L 90 26 102 26 102 22Z M106 22 L 106 26 110 26 110 22Z M10 26 L 10 30 14 30 14 26Z M18 26 L 18 30 30 30 30 26Z M34 26 L 34 30 38 30 38 26Z M50 26 L 50 30 58 30 58 26Z M66 26 L 66 30 74 30 74 26Z M82 26 L 82 30 86 30 86 26Z M90 26 L 90 30 102 30 102 26Z M106 26 L 106 30 110 30 110 26Z M10 30 L 10 34 14 34 14 30Z M34 30 L 34 34 38 34 38 30Z M46 30 L 46 34 58 34 58 30Z M62 30 L 62 34 66 34 66 30Z M82 30 L 82 34 86 34 86 30Z M106 30 L 106 34 110 34 110 30Z M10 34 L 10 38 38 38 38 34Z M42 34 L 42 38 46 38 46 34Z M50 34 L 50 38 54 38 54 34Z M58 34 L 58 38 62 38 62 34Z M66 34 L 66 38 70 38 70 34Z M74 34 L 74 38 78 38 78 34Z M82 34 L 82 38 110 38 110 34Z M46 38 L 46 42 50 42 50 38Z M58 38 L 58 42 62 42 62 38Z M70 38 L 70 42 74 42 74 38Z M14 42 L 14 46 26 46 26 42Z M30 42 L 30 46 38 46 38 42Z M58 42 L 58 46 66 46 66 42Z M70 42 L 70 46 78 46 78 42Z M98 42 L 98 46 106 46 106 42Z M10 46 L 10 50 18 50 18 46Z M22 46 L 22 50 26 50 26 46Z M38 46 L 38 50 50 50 50 46Z M54 46 L 54 50 58 50 58 46Z M62 46 L 62 50 70 50 70 46Z M82 46 L 82 50 94 50 94 46Z M98 46 L 98 50 102 50 102 46Z M10 50 L 10 54 14 54 14 50Z M18 50 L 18 54 22 54 22 50Z M26 50 L 26 54 30 54 30 50Z M34 50 L 34 54 38 54 38 50Z M46 50 L 46 54 50 54 50 50Z M54 50 L 54 54 66 54 66 50Z M78 50 L 78 54 86 54 86 50Z M90 50 L 90 54 94 54 94 50Z M10 54 L 10 58 22 58 22 54Z M26 54 L 26 58 34 58 34 54Z M38 54 L 38 58 42 58 42 54Z M50 54 L 50 58 54 58 54 54Z M58 54 L 58 58 62 58 62 54Z M70 54 L 70 58 78 58 78 54Z M86 54 L 86 58 90 58 90 54Z M98 54 L 98 58 106 58 106 54Z M10 58 L 10 62 18 62 18 58Z M22 58 L 22 62 26 62 26 58Z M30 58 L 30 62 38 62 38 58Z M42 58 L 42 62 54 62 54 58Z M66 58 L 66 62 74 62 74 58Z M94 58 L 94 62 110 62 110 58Z M14 62 L 14 66 22 66 22 62Z M38 62 L 38 66 46 66 46 62Z M66 62 L 66 66 74 66 74 62Z M78 62 L 78 66 82 66 82 62Z M86 62 L 86 66 90 66 90 62Z M102 62 L 102 66 110 66 110 62Z M14 66 L 14 70 18 70 18 66Z M22 66 L 22 70 26 70 26 66Z M30 66 L 30 70 46 70 46 66Z M50 66 L 50 70 58 70 58 66Z M66 66 L 66 70 70 70 70 66Z M74 66 L 74 70 78 70 78 66Z M82 66 L 82 70 86 70 86 66Z M98 66 L 98 70 106 70 106 66Z M10 70 L 10 74 14 74 14 70Z M18 70 L 18 74 22 74 22 70Z M46 70 L 46 74 62 74 62 70Z M70 70 L 70 74 74 74 74 70Z M82 70 L 82 74 90 74 90 70Z M106 70 L 106 74 110 74 110 70Z M18 74 L 18 78 22 78 22 74Z M34 74 L 34 78 38 78 38 74Z M50 74 L 50 78 58 78 58 74Z M62 74 L 62 78 66 78 66 74Z M74 74 L 74 78 94 78 94 74Z M98 74 L 98 78 102 78 102 74Z M42 78 L 42 82 46 82 46 78Z M50 78 L 50 82 66 82 66 78Z M74 78 L 74 82 78 82 78 78Z M90 78 L 90 82 110 82 110 78Z M10 82 L 10 86 38 86 38 82Z M46 82 L 46 86 50 86 50 82Z M58 82 L 58 86 66 86 66 82Z M74 82 L 74 86 78 86 78 82Z M82 82 L 82 86 86 86 86 82Z M90 82 L 90 86 94 86 94 82Z M98 82 L 98 86 110 86 110 82Z M10 86 L 10 90 14 90 14 86Z M34 86 L 34 90 38 90 38 86Z M42 86 L 42 90 50 90 50 86Z M62 86 L 62 90 70 90 70 86Z M74 86 L 74 90 78 90 78 86Z M90 86 L 90 90 102 90 102 86Z M106 86 L 106 90 110 90 110 86Z M10 90 L 10 94 14 94 14 90Z M18 90 L 18 94 30 94 30 90Z M34 90 L 34 94 38 94 38 90Z M50 90 L 50 94 58 94 58 90Z M66 90 L 66 94 70 94 70 90Z M74 90 L 74 94 94 94 94 90Z M10 94 L 10 98 14 98 14 94Z M18 94 L 18 98 30 98 30 94Z M34 94 L 34 98 38 98 38 94Z M42 94 L 42 98 62 98 62 94Z M70 94 L 70 98 74 98 74 94Z M78 94 L 78 98 82 98 82 94Z M106 94 L 106 98 110 98 110 94Z M10 98 L 10 102 14 102 14 98Z M18 98 L 18 102 30 102 30 98Z M34 98 L 34 102 38 102 38 98Z M42 98 L 42 102 50 102 50 98Z M62 98 L 62 102 66 102 66 98Z M70 98 L 70 102 74 102 74 98Z M86 98 L 86 102 90 102 90 98Z M102 98 L 102 102 106 102 106 98Z M10 102 L 10 106 14 106 14 102Z M34 102 L 34 106 38 106 38 102Z M42 102 L 42 106 50 106 50 102Z M58 102 L 58 106 62 106 62 102Z M70 102 L 70 106 78 106 78 102Z M86 102 L 86 106 94 106 94 102Z M98 102 L 98 106 102 106 102 102Z M10 106 L 10 110 38 110 38 106Z M46 106 L 46 110 58 110 58 106Z M66 106 L 66 110 74 110 74 106Z M90 106 L 90 110 98 110 98 106Z M102 106 L 102 110 110 110 110 106Z"
+                                    stroke="none" fill="#67a814"></path>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div id="qrGeoLocation" className="k-qrcode">
+                    <div style={{ position: "relative", width: "120px", height: "120px" }} >
+                        <svg style={{ width: '100%', height: "100%", overflow: 'hidden', left: "-0.625px", top: "-0.15625px" }} xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
+                            <defs></defs>
+                            <g>
+                                <path d="M0 0 L 120 0 120 120 0 120Z" stroke="none" fill="#fff"></path>
+                                <path d="M11 11 L 11 14 32 14 32 11Z M41 11 L 41 14 47 14 47 11Z M50 11 L 50 14 59 14 59 11Z M62 11 L 62 14 68 14 68 11Z M71 11 L 71 14 77 14 77 11Z M80 11 L 80 14 86 14 86 11Z M89 11 L 89 14 110 14 110 11Z M11 14 L 11 17 14 17 14 14Z M29 14 L 29 17 32 17 32 14Z M38 14 L 38 17 47 17 47 14Z M50 14 L 50 17 53 17 53 14Z M56 14 L 56 17 65 17 65 14Z M68 14 L 68 17 77 17 77 14Z M80 14 L 80 17 83 17 83 14Z M89 14 L 89 17 92 17 92 14Z M107 14 L 107 17 110 17 110 14Z M11 17 L 11 20 14 20 14 17Z M17 17 L 17 20 26 20 26 17Z M29 17 L 29 20 32 20 32 17Z M41 17 L 41 20 53 20 53 17Z M59 17 L 59 20 65 20 65 17Z M68 17 L 68 20 74 20 74 17Z M80 17 L 80 20 83 20 83 17Z M89 17 L 89 20 92 20 92 17Z M95 17 L 95 20 104 20 104 17Z M107 17 L 107 20 110 20 110 17Z M11 20 L 11 23 14 23 14 20Z M17 20 L 17 23 26 23 26 20Z M29 20 L 29 23 32 23 32 20Z M47 20 L 47 23 50 23 50 20Z M62 20 L 62 23 65 23 65 20Z M68 20 L 68 23 71 23 71 20Z M83 20 L 83 23 86 23 86 20Z M89 20 L 89 23 92 23 92 20Z M95 20 L 95 23 104 23 104 20Z M107 20 L 107 23 110 23 110 20Z M11 23 L 11 26 14 26 14 23Z M17 23 L 17 26 26 26 26 23Z M29 23 L 29 26 32 26 32 23Z M35 23 L 35 26 41 26 41 23Z M44 23 L 44 26 50 26 50 23Z M56 23 L 56 26 68 26 68 23Z M71 23 L 71 26 77 26 77 23Z M80 23 L 80 26 86 26 86 23Z M89 23 L 89 26 92 26 92 23Z M95 23 L 95 26 104 26 104 23Z M107 23 L 107 26 110 26 110 23Z M11 26 L 11 29 14 29 14 26Z M29 26 L 29 29 32 29 32 26Z M38 26 L 38 29 41 29 41 26Z M44 26 L 44 29 53 29 53 26Z M59 26 L 59 29 62 29 62 26Z M68 26 L 68 29 71 29 71 26Z M80 26 L 80 29 83 29 83 26Z M89 26 L 89 29 92 29 92 26Z M107 26 L 107 29 110 29 110 26Z M11 29 L 11 32 32 32 32 29Z M35 29 L 35 32 38 32 38 29Z M41 29 L 41 32 44 32 44 29Z M47 29 L 47 32 50 32 50 29Z M53 29 L 53 32 56 32 56 29Z M59 29 L 59 32 62 32 62 29Z M65 29 L 65 32 68 32 68 29Z M71 29 L 71 32 74 32 74 29Z M77 29 L 77 32 80 32 80 29Z M83 29 L 83 32 86 32 86 29Z M89 29 L 89 32 110 32 110 29Z M35 32 L 35 35 50 35 50 32Z M53 32 L 53 35 56 35 56 32Z M65 32 L 65 35 71 35 71 32Z M83 32 L 83 35 86 35 86 32Z M17 35 L 17 38 23 38 23 35Z M29 35 L 29 38 38 38 38 35Z M41 35 L 41 38 59 38 59 35Z M62 35 L 62 38 65 38 65 35Z M68 35 L 68 38 77 38 77 35Z M80 35 L 80 38 83 38 83 35Z M86 35 L 86 38 92 38 92 35Z M95 35 L 95 38 98 38 98 35Z M11 38 L 11 41 14 41 14 38Z M20 38 L 20 41 29 41 29 38Z M35 38 L 35 41 38 41 38 38Z M41 38 L 41 41 44 41 44 38Z M59 38 L 59 41 65 41 65 38Z M74 38 L 74 41 77 41 77 38Z M83 38 L 83 41 95 41 95 38Z M98 38 L 98 41 110 41 110 38Z M11 41 L 11 44 14 44 14 41Z M17 41 L 17 44 26 44 26 41Z M29 41 L 29 44 47 44 47 41Z M56 41 L 56 44 65 44 65 41Z M68 41 L 68 44 71 44 71 41Z M80 41 L 80 44 83 44 83 41Z M92 41 L 92 44 98 44 98 41Z M101 41 L 101 44 104 44 104 41Z M107 41 L 107 44 110 44 110 41Z M20 44 L 20 47 26 47 26 44Z M32 44 L 32 47 44 47 44 44Z M47 44 L 47 47 53 47 53 44Z M71 44 L 71 47 74 47 74 44Z M92 44 L 92 47 95 47 95 44Z M17 47 L 17 50 20 50 20 47Z M29 47 L 29 50 32 50 32 47Z M38 47 L 38 50 44 50 44 47Z M59 47 L 59 50 71 50 71 47Z M74 47 L 74 50 77 50 77 47Z M98 47 L 98 50 101 50 101 47Z M104 47 L 104 50 107 50 107 47Z M20 50 L 20 53 26 53 26 50Z M32 50 L 32 53 38 53 38 50Z M41 50 L 41 53 44 53 44 50Z M53 50 L 53 53 59 53 59 50Z M65 50 L 65 53 68 53 68 50Z M74 50 L 74 53 80 53 80 50Z M98 50 L 98 53 101 53 101 50Z M11 53 L 11 56 14 56 14 53Z M17 53 L 17 56 38 56 38 53Z M41 53 L 41 56 44 56 44 53Z M47 53 L 47 56 53 56 53 53Z M56 53 L 56 56 62 56 62 53Z M68 53 L 68 56 71 56 71 53Z M74 53 L 74 56 77 56 77 53Z M92 53 L 92 56 101 56 101 53Z M23 56 L 23 59 29 59 29 56Z M32 56 L 32 59 35 59 35 56Z M50 56 L 50 59 56 59 56 56Z M65 56 L 65 59 68 59 68 56Z M74 56 L 74 59 77 59 77 56Z M80 56 L 80 59 89 59 89 56Z M92 56 L 92 59 95 59 95 56Z M101 56 L 101 59 104 59 104 56Z M107 56 L 107 59 110 59 110 56Z M11 59 L 11 62 17 62 17 59Z M26 59 L 26 62 35 62 35 59Z M44 59 L 44 62 47 62 47 59Z M53 59 L 53 62 56 62 56 59Z M62 59 L 62 62 65 62 65 59Z M71 59 L 71 62 77 62 77 59Z M80 59 L 80 62 86 62 86 59Z M89 59 L 89 62 98 62 98 59Z M104 59 L 104 62 110 62 110 59Z M20 62 L 20 65 23 65 23 62Z M26 62 L 26 65 29 65 29 62Z M35 62 L 35 65 38 65 38 62Z M41 62 L 41 65 47 65 47 62Z M50 62 L 50 65 53 65 53 62Z M62 62 L 62 65 71 65 71 62Z M74 62 L 74 65 77 65 77 62Z M80 62 L 80 65 83 65 83 62Z M86 62 L 86 65 92 65 92 62Z M95 62 L 95 65 101 65 101 62Z M104 62 L 104 65 107 65 107 62Z M14 65 L 14 68 17 68 17 65Z M23 65 L 23 68 26 68 26 65Z M29 65 L 29 68 35 68 35 65Z M41 65 L 41 68 44 68 44 65Z M53 65 L 53 68 65 68 65 65Z M68 65 L 68 68 71 68 71 65Z M77 65 L 77 68 80 68 80 65Z M83 65 L 83 68 101 68 101 65Z M104 65 L 104 68 110 68 110 65Z M11 68 L 11 71 29 71 29 68Z M35 68 L 35 71 44 71 44 68Z M47 68 L 47 71 50 71 50 68Z M62 68 L 62 71 68 71 68 68Z M80 68 L 80 71 86 71 86 68Z M11 71 L 11 74 14 74 14 71Z M20 71 L 20 74 26 74 26 71Z M29 71 L 29 74 32 74 32 71Z M38 71 L 38 74 65 74 65 71Z M68 71 L 68 74 71 74 71 71Z M74 71 L 74 74 80 74 80 71Z M83 71 L 83 74 86 74 86 71Z M89 71 L 89 74 95 74 95 71Z M101 71 L 101 74 104 74 104 71Z M107 71 L 107 74 110 74 110 71Z M11 74 L 11 77 14 77 14 74Z M17 74 L 17 77 29 77 29 74Z M35 74 L 35 77 38 77 38 74Z M41 74 L 41 77 50 77 50 74Z M62 74 L 62 77 65 77 65 74Z M71 74 L 71 77 80 77 80 74Z M83 74 L 83 77 86 77 86 74Z M92 74 L 92 77 95 77 95 74Z M101 74 L 101 77 110 77 110 74Z M17 77 L 17 80 26 80 26 77Z M29 77 L 29 80 47 80 47 77Z M56 77 L 56 80 68 80 68 77Z M77 77 L 77 80 86 80 86 77Z M98 77 L 98 80 101 80 101 77Z M107 77 L 107 80 110 80 110 77Z M14 80 L 14 83 17 83 17 80Z M23 80 L 23 83 29 83 29 80Z M38 80 L 38 83 41 83 41 80Z M47 80 L 47 83 62 83 62 80Z M65 80 L 65 83 68 83 68 80Z M71 80 L 71 83 74 83 74 80Z M77 80 L 77 83 80 83 80 80Z M86 80 L 86 83 98 83 98 80Z M107 80 L 107 83 110 83 110 80Z M11 83 L 11 86 14 86 14 83Z M29 83 L 29 86 35 86 35 83Z M38 83 L 38 86 44 86 44 83Z M47 83 L 47 86 50 86 50 83Z M56 83 L 56 86 62 86 62 83Z M74 83 L 74 86 77 86 77 83Z M83 83 L 83 86 101 86 101 83Z M35 86 L 35 89 38 89 38 86Z M59 86 L 59 89 77 89 77 86Z M83 86 L 83 89 86 89 86 86Z M95 86 L 95 89 107 89 107 86Z M11 89 L 11 92 32 92 32 89Z M35 89 L 35 92 44 92 44 89Z M53 89 L 53 92 62 92 62 89Z M71 89 L 71 92 77 92 77 89Z M83 89 L 83 92 86 92 86 89Z M89 89 L 89 92 92 92 92 89Z M95 89 L 95 92 101 92 101 89Z M104 89 L 104 92 107 92 107 89Z M11 92 L 11 95 14 95 14 92Z M29 92 L 29 95 32 95 32 92Z M38 92 L 38 95 44 95 44 92Z M47 92 L 47 95 53 95 53 92Z M56 92 L 56 95 59 95 59 92Z M68 92 L 68 95 74 95 74 92Z M83 92 L 83 95 86 95 86 92Z M95 92 L 95 95 98 95 98 92Z M101 92 L 101 95 104 95 104 92Z M107 92 L 107 95 110 95 110 92Z M11 95 L 11 98 14 98 14 95Z M17 95 L 17 98 26 98 26 95Z M29 95 L 29 98 32 98 32 95Z M41 95 L 41 98 44 98 44 95Z M50 95 L 50 98 53 98 53 95Z M56 95 L 56 98 59 98 59 95Z M62 95 L 62 98 68 98 68 95Z M77 95 L 77 98 98 98 98 95Z M101 95 L 101 98 110 98 110 95Z M11 98 L 11 101 14 101 14 98Z M17 98 L 17 101 26 101 26 98Z M29 98 L 29 101 32 101 32 98Z M35 98 L 35 101 38 101 38 98Z M41 98 L 41 101 47 101 47 98Z M50 98 L 50 101 53 101 53 98Z M62 98 L 62 101 80 101 80 98Z M86 98 L 86 101 89 101 89 98Z M98 98 L 98 101 104 101 104 98Z M11 101 L 11 104 14 104 14 101Z M17 101 L 17 104 26 104 26 101Z M29 101 L 29 104 32 104 32 101Z M35 101 L 35 104 41 104 41 101Z M44 101 L 44 104 50 104 50 101Z M53 101 L 53 104 56 104 56 101Z M62 101 L 62 104 68 104 68 101Z M71 101 L 71 104 83 104 83 101Z M86 101 L 86 104 92 104 92 101Z M11 104 L 11 107 14 107 14 104Z M29 104 L 29 107 32 107 32 104Z M56 104 L 56 107 59 107 59 104Z M71 104 L 71 107 77 107 77 104Z M83 104 L 83 107 89 107 89 104Z M92 104 L 92 107 95 107 95 104Z M101 104 L 101 107 104 107 104 104Z M107 104 L 107 107 110 107 110 104Z M11 107 L 11 110 32 110 32 107Z M44 107 L 44 110 47 110 47 107Z M50 107 L 50 110 56 110 56 107Z M62 107 L 62 110 65 110 65 107Z M68 107 L 68 110 77 110 77 107Z M86 107 L 86 110 89 110 89 107Z M92 107 L 92 110 98 110 98 107Z"
+                                    stroke="none" fill="#166a83"></path>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </section>
+
+        </div>
+    </>
+);

package/src/quick-replies/tests/quick-replies.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+root.render(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <section>
+                <div className="k-widget k-chat">
+                    <div className="k-message-list">
+                        <div className="k-message-list-content">
+                            <div className="k-meta">Quick Replies</div>
+                            <div className="k-quick-replies">
+                                <span className="k-quick-reply">Quick</span>
+                                <span className="k-quick-reply">Reply</span>
+                                <span className="k-quick-reply">Another quick</span>
+                                <span className="k-quick-reply">Reply with different length</span>
+                                <span className="k-quick-reply">And onther quick reply to cause scroll</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section dir="rtl">
+                <div className="k-widget k-chat">
+                    <div className="k-message-list">
+                        <div className="k-message-list-content">
+                            <div className="k-meta">Quick Replies</div>
+                            <div className="k-quick-replies">
+                                <span className="k-quick-reply">Quick</span>
+                                <span className="k-quick-reply">Reply</span>
+                                <span className="k-quick-reply">Another quick</span>
+                                <span className="k-quick-reply">Reply with different length</span>
+                                <span className="k-quick-reply">And onther quick reply to cause scroll</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </div>
+    </>
+);

package/src/radio/index.ts

@@ -1 +1 @@
-export * from './radio.jsx';
+export * from './radio';

package/src/radio/radio.tsx

@@ -1,87 +1,58 @@
-import * as styles from '../../utils/styles';
-import { Component, globalDefaultProps } from '../component/index';
-
-class Radio extends Component {
-    render() {
-        return <RadioStatic {...this.props} />;
-    }
+import * as React from 'react';
+import { classNames, kendoThemeMaps } from '../utils';
+
+export interface RadioButtonProps {
+    id?: string;
+    className?: string;
+    checked?: boolean;
+    size?: null | 'small' | 'medium' | 'large';
+    hover?: boolean;
+    focus?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
 }
 
-function RadioStatic(props) {
-
-    const {
-        className: ownClassName,
-
-        checked,
-
-        size,
-
-        hover,
-        focus,
-        invalid,
-        disabled,
+export class RadioButton extends React.Component<RadioButtonProps> {
 
-        aria,
+    static defaultProps = {
+        size: 'medium'
+    };
 
-        ...htmlAttributes
-
-    } = props;
-
-    htmlAttributes.checked = checked;
-    htmlAttributes.disabled = disabled;
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    let radioClasses = [
-        ownClassName,
-        'k-radio',
-        styles.sizeClass( size, 'k-radio' ),
-        {
-            'k-hover': hover === true,
-            'k-focus': focus === true,
-            'k-invalid': invalid === true,
-            'k-disabled': disabled === true,
-            'k-checked': checked === true,
-        }
-    ];
-
-    return (
-        <span className="k-radio-wrap"><input type="radio" className={radioClasses} {...ariaAttr} {...htmlAttributes}/></span>
-    );
+    render() {
+        const {
+            className,
+            id,
+            checked,
+            size,
+            hover,
+            focus,
+            invalid,
+            disabled,
+            required
+        } = this.props;
+
+        return (
+            <span className="k-radio-wrap">
+                <input
+                    type="radio"
+                    id={id}
+                    checked={checked}
+                    required={required}
+                    className={classNames(
+                        className,
+                        'k-radio',
+                        {
+                            [`k-radio-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
+                            'k-hover': hover,
+                            'k-focus': focus,
+                            'k-disabled': disabled,
+                            'k-checked': checked,
+                            'k-invalid': invalid
+                        }
+                    )}
+                />
+            </span>
+        );
+    }
 }
-
-RadioStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    id: '',
-    name: '',
-
-    size: 'medium'
-};
-
-RadioStatic.propTypes = {
-    className: typeof '',
-
-    id: typeof '',
-    name: typeof '',
-    value: typeof '',
-
-    checked: typeof false,
-
-    size: typeof [ null, 'small', 'medium', 'large' ],
-
-    hover: typeof false,
-    focus: typeof false,
-    valid: typeof false,
-    invalid: typeof false,
-    disabled: typeof false,
-
-    aria: typeof false,
-    legacy: typeof false,
-
-    htmlAttributes: typeof []
-};
-
-export { Radio, RadioStatic };

package/src/radio/tests/radio-size.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RadioButton } from '../../radio';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        grid-template-columns: 120px repeat(3, 1fr);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <span></span>
+            <span>Small</span>
+            <span>Medium</span>
+            <span>Large</span>
+
+            <span></span>
+            <div>
+                <RadioButton size="small" id="rad1" checked />
+                <label className="k-radio-label" htmlFor="rad1">Checked</label>
+            </div>
+            <div>
+                <RadioButton size="medium" id="rad1" checked />
+                <label className="k-radio-label" htmlFor="rad1">Checked</label>
+            </div>
+            <div>
+                <RadioButton size="large" id="rad1" checked />
+                <label className="k-radio-label" htmlFor="rad1">Checked</label>
+            </div>
+
+            <span></span>
+            <div>
+                <RadioButton size="small" id="rad3" checked disabled />
+                <label className="k-radio-label" htmlFor="rad3">Checked</label>
+            </div>
+            <div>
+                <RadioButton size="medium" id="rad3" checked disabled />
+                <label className="k-radio-label" htmlFor="rad3">Checked</label>
+            </div>
+            <div>
+                <RadioButton size="large" id="rad3" checked disabled />
+                <label className="k-radio-label" htmlFor="rad3">Checked</label>
+            </div>
+
+            <span></span>
+            <div>
+                <RadioButton size="small" id="rad2" />
+                <label className="k-radio-label" htmlFor="rad2">Unchecked</label>
+            </div>
+            <div>
+                <RadioButton size="medium" id="rad2" />
+                <label className="k-radio-label" htmlFor="rad2">Unchecked</label>
+            </div>
+            <div>
+                <RadioButton size="large" id="rad2" />
+                <label className="k-radio-label" htmlFor="rad2">Unchecked</label>
+            </div>
+
+            <span></span>
+            <div>
+                <RadioButton size="small" id="rad4" disabled />
+                <label className="k-radio-label" htmlFor="rad4">Unchecked</label>
+            </div>
+            <div>
+                <RadioButton size="medium" id="rad4" disabled />
+                <label className="k-radio-label" htmlFor="rad4">Unchecked</label>
+            </div>
+            <div>
+                <RadioButton size="large" id="rad4" disabled />
+                <label className="k-radio-label" htmlFor="rad4">Unchecked</label>
+            </div>
+
+            <span></span>
+            <div>
+                <RadioButton size="small" id="radRequired" invalid required/>
+                <label className="k-radio-label" htmlFor="radRequired">Invalid</label>
+            </div>
+            <div>
+                <RadioButton size="medium" id="radRequired" invalid required/>
+                <label className="k-radio-label" htmlFor="radRequired">Invalid</label>
+            </div>
+            <div>
+                <RadioButton size="large" id="radRequired" invalid required/>
+                <label className="k-radio-label" htmlFor="radRequired">Invalid</label>
+            </div>
+        </div>
+    </>
+);