@progress/kendo-themes-html 5.5.1-dev.2 → 5.6.1-dev.1

package/dist/wizard/tests/wizard-vertical.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/wizard/tests/wizard-vertical.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts", "../../../src/utils/theme.ts", "../../../src/button/button.tsx"],
-  "sourcesContent": ["/* eslint-disable react/no-unescaped-entities */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\nimport { Button } from '../../button';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    .wrapper {\n        border: 1px solid #6c757d4f;\n        margin-bottom: 16px;\n    }\n\n    .wrapper p {\n        background-color:  #6c757d4f;\n    }\n`;\n\nconst stepperStyle = {\n    display: \"grid\",\n    gridTemplateRows: \"repeat(3, 1fr)\"\n};\n\nconst stepListStyle = {\n    gridRowStart: \"1\",\n    gridRowEnd: \"-1\",\n};\n\nconst progressBarStyle = {\n    gridRowStart: \"1\",\n    gridRowEnd: \"3\",\n    top: \"17px\"\n};\n\nconst progressSelectedStyle = {\n    width: '100%',\n    height: \"50%\",\n};\n\nconst progressStatusStyle = {\n    width: '100%',\n    height: \"200%\",\n};\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-2\">\n            <section>\n                <div className=\"wrapper\">\n                    <p>Vertical wizard; Content is placed to the right (Default)</p>\n                    <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-vertical k-wizard-right\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-step-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\">\n                                    <a href=\"#\" className=\"k-step-link\" style={{ maxHeight: \"33.333%\" }}>\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step k-state-focused\">\n                                <div className=\"k-wizard-content\">\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Small height set</p>\n                    <div id=\"wizard\" style={{ height: \"350px\" }} className=\"k-widget k-wizard k-wizard-vertical k-wizard-right\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-step-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\">\n                                    <a href=\"#\" className=\"k-step-link\" style={{ maxHeight: \"33.333%\" }}>\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Short content</p>\n                    <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-vertical k-wizard-right\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-step-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                Short content\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Short content; Big height set</p>\n                    <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-vertical k-wizard-right\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-step-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                Short content\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"wrapper\">\n                    <p>Vertical wizard; Content is placed to the left</p>\n                    <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-vertical k-wizard-left\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-step-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Small height set</p>\n                    <div id=\"wizard\" style={{ height: \"350px\" }} className=\"k-widget k-wizard k-wizard-vertical k-wizard-left\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-step-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Short content</p>\n                    <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-vertical k-wizard-left\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-step-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                Short content\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Short content; Big height set</p>\n                    <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-vertical k-wizard-left\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-step-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                Short content\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n", "export interface KendoThemeMaps {\n    sizeMap: Record<Exclude<any, null>, string>;\n    roundedMap: Record<Exclude<any, null>, string>;\n    calloutMap: Record<Exclude<any, null>, string>;\n    orientationMap: Record<Exclude<any, null>, string>;\n}\n\nexport const kendoThemeMaps: KendoThemeMaps = {\n    sizeMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    roundedMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    calloutMap: {\n        top: 'n',\n        bottom: 's',\n        left: 'w',\n        right: 'e'\n    },\n    orientationMap: {\n        vertical: 'vstack',\n        horizontal: 'hstack',\n    },\n};\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { Icon } from '../icon/';\n\nexport interface ButtonProps {\n    children?: React.ReactNode;\n    className?: string;\n    dir?: string;\n    style?: React.CSSProperties;\n    iconClassName?: string;\n    text?: string;\n    icon?: string;\n    size?: null | 'small' | 'medium' | 'large';\n    rounded: null | 'small' | 'medium' | 'large' | 'full';\n    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear';\n    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    selected?: boolean;\n    disabled?: boolean;\n}\n\nexport class Button extends React.Component<ButtonProps> {\n\n    static defaultProps = {\n        size: 'medium',\n        rounded: 'medium',\n        fillMode: 'solid',\n        themeColor: 'base'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            iconClassName,\n            text,\n            icon,\n            size,\n            rounded,\n            fillMode,\n            themeColor,\n            hover,\n            focus,\n            active,\n            selected,\n            disabled,\n            ...htmlAttributes\n        } = this.props;\n\n        const hasIcon = (icon !== undefined);\n        const hasChildren = children !== undefined;\n\n        return (\n            <button\n                style={this.props.style}\n                {...htmlAttributes}\n                dir={this.props.dir}\n                className={classNames(\n                    className,\n                    'k-button',\n                    {\n                        [`k-button-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                        [`k-button-${fillMode}`]: fillMode,\n                        [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),\n                        [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n                        'k-icon-button': !hasChildren && hasIcon,\n                        'k-hover': hover,\n                        'k-focus': focus,\n                        'k-active': active,\n                        'k-selected': selected,\n                        'k-disabled': disabled\n                    }\n                )}>\n                {icon && <Icon className={classNames(iconClassName, 'k-button-icon')} name={icon} />}\n\n                {text || hasIcon\n                    ?\n                    <>\n                        {text && <span className=\"k-button-text\">{text}</span>}\n                        {children}\n                    </>\n                    : children && <span className=\"k-button-text\">{children}</span>\n                }\n            </button>\n        );\n    }\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["/* eslint-disable react/no-unescaped-entities */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\nimport { Button } from '../../button';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    .wrapper {\n        border: 1px solid #6c757d4f;\n        margin-bottom: 16px;\n    }\n\n    .wrapper p {\n        background-color:  #6c757d4f;\n    }\n`;\n\nconst stepperStyle = {\n    display: \"grid\",\n    gridTemplateRows: \"repeat(3, 1fr)\"\n};\n\nconst stepListStyle = {\n    gridRowStart: \"1\",\n    gridRowEnd: \"-1\",\n};\n\nconst progressBarStyle = {\n    gridRowStart: \"1\",\n    gridRowEnd: \"3\",\n    top: \"17px\"\n};\n\nconst progressSelectedStyle = {\n    width: '100%',\n    height: \"50%\",\n};\n\nconst progressStatusStyle = {\n    width: '100%',\n    height: \"200%\",\n};\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-2\">\n            <section>\n                <div className=\"wrapper\">\n                    <p>Vertical wizard; Content is placed to the right (Default)</p>\n                    <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-vertical k-wizard-right\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\">\n                                    <a href=\"#\" className=\"k-step-link\" style={{ maxHeight: \"33.333%\" }}>\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step k-state-focused\">\n                                <div className=\"k-wizard-content\">\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Small height set</p>\n                    <div id=\"wizard\" style={{ height: \"350px\" }} className=\"k-widget k-wizard k-wizard-vertical k-wizard-right\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\">\n                                    <a href=\"#\" className=\"k-step-link\" style={{ maxHeight: \"33.333%\" }}>\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Short content</p>\n                    <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-vertical k-wizard-right\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                Short content\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Short content; Big height set</p>\n                    <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-vertical k-wizard-right\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                Short content\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"wrapper\">\n                    <p>Vertical wizard; Content is placed to the left</p>\n                    <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-vertical k-wizard-left\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Small height set</p>\n                    <div id=\"wizard\" style={{ height: \"350px\" }} className=\"k-widget k-wizard k-wizard-vertical k-wizard-left\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Short content</p>\n                    <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-vertical k-wizard-left\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                Short content\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"wrapper\">\n                    <p>Short content; Big height set</p>\n                    <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-vertical k-wizard-left\">\n                        <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                            <ol className=\"k-step-list k-step-list-vertical\" style={stepListStyle}>\n                                <li className=\"k-step k-step-first k-step-done k-step-success\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">1</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Account Info with too long text</span>\n                                            <Icon name=\"check\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-current k-focus k-step-error\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\">\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">2</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Personal Info</span>\n                                            <Icon className=\"k-validation-icon\" name=\"warning\"></Icon>\n                                        </span>\n                                    </a>\n                                </li>\n                                <li className=\"k-step k-step-last k-step-optional\" style={{ maxHeight: \"33.333%\" }}>\n                                    <a href=\"#\" className=\"k-step-link\" >\n                                        <span className=\"k-step-indicator\">\n                                            <span className=\"k-step-indicator-text\">3</span>\n                                        </span>\n                                        <span className=\"k-step-label\">\n                                            <span className=\"k-step-text\">Payment Details</span>\n                                            <span className=\"k-step-label-optional\">(Optional)</span>\n                                        </span>\n                                    </a>\n                                </li>\n                            </ol>\n                            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\" style={progressBarStyle}>\n                                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                                <div className=\"k-state-selected\" style={progressSelectedStyle}>\n                                    <span className=\"k-progress-status-wrap k-progress-end\" style={progressStatusStyle}></span>\n                                </div>\n                            </div>\n                        </nav>\n                        <div className=\"k-wizard-steps\">\n                            <div className=\"k-wizard-step\">\n                                <div className=\"k-wizard-content\">\n                                Short content\n                                </div>\n                                <div className=\"k-wizard-buttons\">\n                                    <span className=\"k-wizard-buttons-left\">\n                                        <Button>Reset</Button>\n                                        <span className=\"k-wizard-pager\">Step 1 of 2</span>\n                                    </span>\n                                    <span className=\"k-wizard-buttons-right\">\n                                        <Button>Previous</Button>\n                                        <Button themeColor=\"primary\">Next</Button>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n", "export interface KendoThemeMaps {\n    sizeMap: Record<Exclude<any, null>, string>;\n    roundedMap: Record<Exclude<any, null>, string>;\n    calloutMap: Record<Exclude<any, null>, string>;\n    orientationMap: Record<Exclude<any, null>, string>;\n}\n\nexport const kendoThemeMaps: KendoThemeMaps = {\n    sizeMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    roundedMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    calloutMap: {\n        top: 'n',\n        bottom: 's',\n        left: 'w',\n        right: 'e'\n    },\n    orientationMap: {\n        vertical: 'vstack',\n        horizontal: 'hstack',\n    },\n};\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { Icon } from '../icon/';\n\nexport interface ButtonProps {\n    children?: React.ReactNode;\n    className?: string;\n    dir?: string;\n    style?: React.CSSProperties;\n    iconClassName?: string;\n    text?: string;\n    icon?: string;\n    size?: null | 'small' | 'medium' | 'large';\n    rounded: null | 'small' | 'medium' | 'large' | 'full';\n    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear';\n    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    selected?: boolean;\n    disabled?: boolean;\n}\n\nexport class Button extends React.Component<ButtonProps> {\n\n    static defaultProps = {\n        size: 'medium',\n        rounded: 'medium',\n        fillMode: 'solid',\n        themeColor: 'base'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            iconClassName,\n            text,\n            icon,\n            size,\n            rounded,\n            fillMode,\n            themeColor,\n            hover,\n            focus,\n            active,\n            selected,\n            disabled,\n            ...htmlAttributes\n        } = this.props;\n\n        const hasIcon = (icon !== undefined);\n        const hasChildren = children !== undefined;\n\n        return (\n            <button\n                style={this.props.style}\n                {...htmlAttributes}\n                dir={this.props.dir}\n                className={classNames(\n                    className,\n                    'k-button',\n                    {\n                        [`k-button-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                        [`k-button-${fillMode}`]: fillMode,\n                        [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),\n                        [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n                        'k-icon-button': !hasChildren && hasIcon,\n                        'k-hover': hover,\n                        'k-focus': focus,\n                        'k-active': active,\n                        'k-selected': selected,\n                        'k-disabled': disabled\n                    }\n                )}>\n                {icon && <Icon className={classNames(iconClassName, 'k-button-icon')} name={icon} />}\n\n                {text || hasIcon\n                    ?\n                    <>\n                        {text && <span className=\"k-button-text\">{text}</span>}\n                        {children}\n                    </>\n                    : children && <span className=\"k-button-text\">{children}</span>\n                }\n            </button>\n        );\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["style", "React", "ReactDOM", "React"]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "5.5.1-dev.2",
+  "version": "5.6.1-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
     "glob": "^8.0.3",
     "typescript": "^4.7.2"
   },
-  "gitHead": "e5846f8654884b442bfb81cac2682716edf60433"
+  "gitHead": "1e15150e791e446461760b05b93bfda5abafc2ec"
 }

package/src/calendar/calendar-footer.tsx

@@ -21,7 +21,7 @@ export class CalendarFooter extends React.Component<CalendarFooterProps> {
                     className,
                     'k-calendar-footer'
                 )}>
-                <a className="k-nav-today">Monday, October 29, 2021</a>
+                <a className="k-calendar-nav-today">Monday, October 29, 2021</a>
             </div>
         );
     }

package/src/calendar/calendar-header.tsx

@@ -39,9 +39,9 @@ export class CalendarHeader extends React.Component<CalendarHeaderProps> {
                 <Button className="k-calendar-title" text={calendarHeaderText} fillMode="flat"></Button>
                 <span className="k-spacer"></span>
                 <span className="k-calendar-nav">
-                    <Button className="k-nav-prev" icon="arrow-chevron-left" fillMode="flat"></Button>
-                    {showToday && <span className="k-nav-today">Today</span>}
-                    <Button className="k-nav-next" icon="arrow-chevron-right" fillMode="flat"></Button>
+                    <Button className="k-calendar-nav-prev" icon="arrow-chevron-left" fillMode="flat"></Button>
+                    {showToday && <span className="k-calendar-nav-today">Today</span>}
+                    <Button className="k-calendar-nav-next" icon="arrow-chevron-right" fillMode="flat"></Button>
                 </span>
             </div>
         );

package/src/calendar/tests/calendar-classic-jquery.tsx

@@ -17,9 +17,9 @@ root.render(
             <section>
                 <div className="k-widget k-calendar">
                     <div className="k-header k-hstack">
-                        <Button fillMode="flat" className="k-nav-prev" icon="arrow-60-left"></Button>
-                        <Button fillMode="flat" className="k-nav-fast k-flex">March 2018</Button>
-                        <Button fillMode="flat" className="k-nav-next" icon="arrow-60-right"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-today k-flex">March 2018</Button>
+                        <Button fillMode="flat" className="k-calendar-nav-next" icon="arrow-60-right"></Button>
                     </div>
                     <div className="k-calendar-view k-calendar-monthview">
                         <table className="k-calendar-table k-month">
@@ -177,16 +177,16 @@ root.render(
                         </table>
                     </div>
                     <div className="k-footer">
-                        <a className="k-nav-today">Thursday, March 29, 2018</a>
+                        <a className="k-calendar-nav-today">Thursday, March 29, 2018</a>
                     </div>
                 </div>
             </section>
             <section>
                 <div className="k-widget k-calendar k-week-number">
                     <div className="k-header k-hstack">
-                        <Button fillMode="flat" className="k-nav-prev" icon="arrow-60-left"></Button>
-                        <Button fillMode="flat" className="k-nav-fast k-flex">March 2018</Button>
-                        <Button fillMode="flat" className="k-nav-next" icon="arrow-60-right"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-today k-flex">March 2018</Button>
+                        <Button fillMode="flat" className="k-calendar-nav-next" icon="arrow-60-right"></Button>
                     </div>
                     <div className="k-calendar-view k-calendar-monthview">
                         <table className="k-calendar-table k-month">
@@ -351,7 +351,7 @@ root.render(
                         </table>
                     </div>
                     <div className="k-footer">
-                        <a className="k-nav-today k-disabled">Thursday, March 29, 2018</a>
+                        <a className="k-calendar-nav-today k-disabled">Thursday, March 29, 2018</a>
                     </div>
                 </div>
             </section>
@@ -365,9 +365,9 @@ root.render(
             <section>
                 <div className="k-widget k-calendar">
                     <div className="k-header k-hstack">
-                        <Button fillMode="flat" className="k-nav-prev" icon="arrow-60-left"></Button>
-                        <Button fillMode="flat" className="k-nav-fast k-flex">2018</Button>
-                        <Button fillMode="flat" className="k-nav-next" icon="arrow-60-right"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-today k-flex">2018</Button>
+                        <Button fillMode="flat" className="k-calendar-nav-next" icon="arrow-60-right"></Button>
                     </div>
                     <div className="k-calendar-view k-calendar-yearview">
                         <table className="k-calendar-table k-meta-view k-year">
@@ -418,7 +418,7 @@ root.render(
                         </table>
                     </div>
                     <div className="k-footer">
-                        <a className="k-nav-today">Thursday, March 29, 2018</a>
+                        <a className="k-calendar-nav-today">Thursday, March 29, 2018</a>
                     </div>
                 </div>
             </section>
@@ -426,9 +426,9 @@ root.render(
             <section>
                 <div className="k-widget k-calendar">
                     <div className="k-header k-hstack">
-                        <Button fillMode="flat" className="k-nav-prev" icon="arrow-60-left"></Button>
-                        <Button fillMode="flat" className="k-nav-fast k-flex">2010 - 2019</Button>
-                        <Button fillMode="flat" className="k-nav-next" icon="arrow-60-right"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-today k-flex">2010 - 2019</Button>
+                        <Button fillMode="flat" className="k-calendar-nav-next" icon="arrow-60-right"></Button>
                     </div>
                     <div className="k-calendar-view k-calendar-decadeview">
                         <table className="k-calendar-table k-meta-view k-decade">
@@ -475,7 +475,7 @@ root.render(
                         </table>
                     </div>
                     <div className="k-footer">
-                        <a className="k-nav-today">Thursday, March 29, 2018</a>
+                        <a className="k-calendar-nav-today">Thursday, March 29, 2018</a>
                     </div>
                 </div>
             </section>
@@ -483,9 +483,9 @@ root.render(
             <section>
                 <div className="k-widget k-calendar">
                     <div className="k-header k-hstack">
-                        <Button fillMode="flat" className="k-nav-prev" icon="arrow-60-left"></Button>
-                        <Button fillMode="flat" className="k-nav-fast k-flex">2000 - 2099</Button>
-                        <Button fillMode="flat" className="k-nav-next" icon="arrow-60-right"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
+                        <Button fillMode="flat" className="k-calendar-nav-today k-flex">2000 - 2099</Button>
+                        <Button fillMode="flat" className="k-calendar-nav-next" icon="arrow-60-right"></Button>
                     </div>
                     <div className="k-calendar-view k-calendar-centuryview">
                         <table className="k-calendar-table k-meta-view k-century">
@@ -534,7 +534,7 @@ root.render(
                         </table>
                     </div>
                     <div className="k-footer">
-                        <a className="k-nav-today">Thursday, March 29, 2018</a>
+                        <a className="k-calendar-nav-today">Thursday, March 29, 2018</a>
                     </div>
                 </div>
             </section>

package/src/calendar/tests/calendar-infinite-rtl.tsx

@@ -56,7 +56,7 @@ root.render(
                             <Button fillMode="flat" className="k-calendar-title k-title">April 2018</Button>
                             <span className="k-spacer"></span>
                             <span className="k-calendar-nav k-hstack">
-                                <span className="k-nav-today">Today</span>
+                                <span className="k-calendar-nav-today">Today</span>
                             </span>
                         </div>
                         <table className="k-calendar-table k-calendar-weekdays">
@@ -269,7 +269,7 @@ root.render(
                             <Button fillMode="flat" className="k-calendar-title k-title">d’abril 2018</Button>
                             <span className="k-spacer"></span>
                             <span className="k-calendar-nav k-hstack">
-                                <span className="k-nav-today">Today</span>
+                                <span className="k-calendar-nav-today">Today</span>
                             </span>
                         </div>
                         <table className="k-calendar-table k-calendar-weekdays">
@@ -482,7 +482,7 @@ root.render(
                             <Button fillMode="flat" className="k-calendar-title k-title">2018</Button>
                             <span className="k-spacer"></span>
                             <span className="k-calendar-nav k-hstack">
-                                <span className="k-nav-today">Today</span>
+                                <span className="k-calendar-nav-today">Today</span>
                             </span>
                         </div>
                         <div className="k-content k-scrollable k-flex">
@@ -624,7 +624,7 @@ root.render(
                             <Button fillMode="flat" className="k-calendar-title k-title">2010 - 2019</Button>
                             <span className="k-spacer"></span>
                             <span className="k-calendar-nav k-hstack">
-                                <span className="k-nav-today">Today</span>
+                                <span className="k-calendar-nav-today">Today</span>
                             </span>
                         </div>
                         <div className="k-content k-scrollable k-flex">
@@ -746,7 +746,7 @@ root.render(
                             <Button fillMode="flat" className="k-calendar-title k-title">2000 - 2099</Button>
                             <span className="k-spacer"></span>
                             <span className="k-calendar-nav k-hstack">
-                                <span className="k-nav-today">Today</span>
+                                <span className="k-calendar-nav-today">Today</span>
                             </span>
                         </div>
                         <div className="k-content k-scrollable k-flex">
@@ -868,7 +868,7 @@ root.render(
                             <Button fillMode="flat" className="k-calendar-title k-title">2018</Button>
                             <span className="k-spacer"></span>
                             <span className="k-calendar-nav k-hstack">
-                                <span className="k-nav-today">Today</span>
+                                <span className="k-calendar-nav-today">Today</span>
                             </span>
                         </div>
                         <div className="k-content k-scrollable k-flex">
@@ -989,7 +989,7 @@ root.render(
                             <Button fillMode="flat" className="k-calendar-title k-title">March 2020</Button>
                             <span className="k-spacer"></span>
                             <span className="k-calendar-nav k-hstack">
-                                <span className="k-nav-today">Today</span>
+                                <span className="k-calendar-nav-today">Today</span>
                             </span>
                         </div>
                         <table className="k-calendar-table k-calendar-weekdays">