@progress/kendo-themes-html 5.6.1-dev.0 → 5.6.1-dev.3

package/dist/wizard/tests/wizard-horizontal.js

@@ -111,6 +111,8 @@
         active,
         selected,
         disabled,
+        showArrow,
+        arrowIconName,
         ...htmlAttributes
       } = this.props;
       const hasIcon = icon !== void 0;
@@ -138,18 +140,24 @@
       }, icon && /* @__PURE__ */ React2.createElement(Icon, {
         className: classNames(iconClassName, "k-button-icon"),
         name: icon
-      }), text || hasIcon ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, text && /* @__PURE__ */ React2.createElement("span", {
+      }), text ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, text && /* @__PURE__ */ React2.createElement("span", {
         className: "k-button-text"
       }, text), children) : children && /* @__PURE__ */ React2.createElement("span", {
         className: "k-button-text"
-      }, children));
+      }, children), showArrow && /* @__PURE__ */ React2.createElement("span", {
+        className: "k-menu-button-arrow k-button-arrow"
+      }, /* @__PURE__ */ React2.createElement(Icon, {
+        name: arrowIconName
+      })));
     }
   };
   Button.defaultProps = {
     size: "medium",
     rounded: "medium",
     fillMode: "solid",
-    themeColor: "base"
+    themeColor: "base",
+    showArrow: false,
+    arrowIconName: "arrow-s"
   };
 
   // src/wizard/tests/wizard-horizontal.tsx
@@ -215,7 +223,7 @@
     }, "Account Info with too long label"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -301,7 +309,7 @@
     }, "Account Info with too long label"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -386,7 +394,7 @@
     }, "Account Info with too long label"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -472,7 +480,7 @@
     }, "Account Info with too long label"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -558,7 +566,7 @@
     }, "Account Info with too long label"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/wizard/tests/wizard-horizontal.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    section {\n        border: 1px solid #6c757d4f;\n    }\n\n    section > p {\n        background-color:  #6c757d4f;\n    }\n`;\n\nconst stepperStyle = {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(6, 1fr)\"\n};\n\nconst stepListStyle = {\n    gridColumnStart: \"1\",\n    gridColumnEnd: \"-1\",\n};\n\nconst progressBarStyle = {\n    gridColumnStart: \"2\",\n    gridColumnEnd: \"6\",\n};\n\nconst progressSelectedStyle = {\n    height: \"100%\",\n    width: \"50%\",\n};\n\nconst progressStatusStyle = {\n    height: \"100%\",\n    width: \"200%\",\n};\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid\">\n            <section>\n                <p>Horizontal wizard, Content is rendered below the Stepper</p>\n                <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\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            </section>\n\n            <section>\n                <p>Horizontal wizard -{'>'} Long content; Height set</p>\n                <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\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            </section>\n\n            <section>\n                <p>Horizontal wizard -{'>'} Short content</p>\n                <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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            </section>\n\n            <section>\n                <p>Horizontal wizard -{'>'} Short content; Height set</p>\n                <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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            </section>\n\n            <section>\n                <p>Horizontal wizard -{'>'} Short content; Big height set</p>\n                <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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            </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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",
+  "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    section {\n        border: 1px solid #6c757d4f;\n    }\n\n    section > p {\n        background-color:  #6c757d4f;\n    }\n`;\n\nconst stepperStyle = {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(6, 1fr)\"\n};\n\nconst stepListStyle = {\n    gridColumnStart: \"1\",\n    gridColumnEnd: \"-1\",\n};\n\nconst progressBarStyle = {\n    gridColumnStart: \"2\",\n    gridColumnEnd: \"6\",\n};\n\nconst progressSelectedStyle = {\n    height: \"100%\",\n    width: \"50%\",\n};\n\nconst progressStatusStyle = {\n    height: \"100%\",\n    width: \"200%\",\n};\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid\">\n            <section>\n                <p>Horizontal wizard, Content is rendered below the Stepper</p>\n                <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\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            </section>\n\n            <section>\n                <p>Horizontal wizard -{'>'} Long content; Height set</p>\n                <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\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            </section>\n\n            <section>\n                <p>Horizontal wizard -{'>'} Short content</p>\n                <div id=\"wizard\" className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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            </section>\n\n            <section>\n                <p>Horizontal wizard -{'>'} Short content; Height set</p>\n                <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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            </section>\n\n            <section>\n                <p>Horizontal wizard -{'>'} Short content; Big height set</p>\n                <div id=\"wizard\" style={{ height: \"300px\" }} className=\"k-widget k-wizard k-wizard-horizontal\">\n                    <nav className=\"k-stepper k-widget\" style={stepperStyle}>\n                        <ol className=\"k-step-list k-step-list-horizontal\" 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 label</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-horizontal\" 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            </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    showArrow?: boolean;\n    arrowIconName?: string;\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        showArrow: false,\n        arrowIconName: 'arrow-s'\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            showArrow,\n            arrowIconName,\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\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\n                {showArrow && <span className=\"k-menu-button-arrow k-button-arrow\"><Icon name={arrowIconName} /></span>}\n            </button>\n        );\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,qBAAkB;AAClB,sBAAqB;;;ACFrB,cAAuB;;;ACChB,MAAM,aAAa,IAAI,SAAiB;AAC3C,UAAM,SAAS,CAAC;AAEhB,UAAM,cAAc,CAAC,QAAQ;AACzB,MAAC,OAAO,QAAQ,WACV,OAAO,KAAK,GAAG,EAAE,QAAQ,CAAC,QAAQ;AAChC,eAAO,OAAO,IAAI;AAAA,MACtB,CAAC,IACE,OAAO,OAAO;AAAA,IAEzB;AAEA,UAAM,UAAU,CAAC,SACb,KACK,OAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,GAAG,CAAC,EAC5C;AAAA,MAAI,CAAC,QACD,MAAM,QAAQ,GAAG,IAAI,QAAQ,GAAG,IAAI,YAAY,GAAG;AAAA,IACxD;AAER,YAAQ,IAAI;AAEZ,WAAO,OAAO,KAAK,MAAM,EACpB,IAAI,CAAC,QAAS,OAAO,QAAQ,OAAQ,IAAI,EACzC,OAAO,CAAC,OAAO,OAAO,IAAI,EAC1B,KAAK,GAAG;AAAA,EACjB;;;ACnBO,MAAM,iBAAiC;AAAA,IAC1C,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,gBAAgB;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,IAChB;AAAA,EACJ;;;AFnBO,MAAM,OAAN,cAAyB,gBAAqB;AAAA,IAEjD,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA,OAAAA;AAAA,QACA;AAAA,MACJ,IAAI,KAAK;AAET,aACI,0DACM,QACE,oCAAC;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,YACI,CAAC,OAAO,SAAS;AAAA,UACrB;AAAA,QACJ;AAAA,QACA,OAAOA;AAAA,OACX,CAER;AAAA,IAER;AAAA,EACJ;;;AGnCA,MAAAC,SAAuB;AAyBhB,MAAM,SAAN,cAA2B,iBAAuB;AAAA,IAWrD,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,WACG;AAAA,MACP,IAAI,KAAK;AAET,YAAM,UAAW,SAAS;AAC1B,YAAM,cAAc,aAAa;AAEjC,aACI,qCAAC;AAAA,QACG,OAAO,KAAK,MAAM;AAAA,QACjB,GAAG;AAAA,QACJ,KAAK,KAAK,MAAM;AAAA,QAChB,WAAW;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,YACI,CAAC,YAAY,eAAe,QAAQ,SAAU,SAAS;AAAA,YACvD,CAAC,YAAY,aAAa;AAAA,YAC1B,CAAC,YAAY,YAAY,eAAe,QAAQ,YAAY,UAAU;AAAA,YACtE,CAAC,aAAa,eAAe,WAAW,YAAa,YAAY;AAAA,YACjE,iBAAiB,CAAC,eAAe;AAAA,YACjC,WAAW;AAAA,YACX,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,cAAc;AAAA,UAClB;AAAA,QACJ;AAAA,SACC,QAAQ,qCAAC;AAAA,QAAK,WAAW,WAAW,eAAe,eAAe;AAAA,QAAG,MAAM;AAAA,OAAM,GAEjF,OAEG,4DACK,QAAQ,qCAAC;AAAA,QAAK,WAAU;AAAA,SAAiB,IAAK,GAC9C,QACL,IACE,YAAY,qCAAC;AAAA,QAAK,WAAU;AAAA,SAAiB,QAAS,GAG3D,aAAa,qCAAC;AAAA,QAAK,WAAU;AAAA,SAAqC,qCAAC;AAAA,QAAK,MAAM;AAAA,OAAe,CAAE,CACpG;AAAA,IAER;AAAA,EACJ;AArEI,EAFS,OAEF,eAAe;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,eAAe;AAAA,EACnB;;;AJ5BJ,MAAM,OAAO,cAAAC,QAAS;AAAA,IAClB,SAAS,eAAe,KAAK;AAAA,EACjC;AAEA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUd,MAAM,eAAe;AAAA,IACjB,SAAS;AAAA,IACT,qBAAqB;AAAA,EACzB;AAEA,MAAM,gBAAgB;AAAA,IAClB,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACnB;AAEA,MAAM,mBAAmB;AAAA,IACrB,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACnB;AAEA,MAAM,wBAAwB;AAAA,IAC1B,QAAQ;AAAA,IACR,OAAO;AAAA,EACX;AAEA,MAAM,sBAAsB;AAAA,IACxB,QAAQ;AAAA,IACR,OAAO;AAAA,EACX;AAEA,OAAK;AAAA,IACD,6BAAAC,QAAA,2BAAAA,QAAA,gBACI,6BAAAA,QAAA,cAAC,eAAO,KAAM,GACd,6BAAAA,QAAA,cAAC;AAAA,MAAI,IAAG;AAAA,MAAY,WAAU;AAAA,OAC1B,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC,WAAE,0DAAwD,GAC3D,6BAAAA,QAAA,cAAC;AAAA,MAAI,IAAG;AAAA,MAAS,WAAU;AAAA,OACvB,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAqB,OAAO;AAAA,OACvC,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO;AAAA,OACtD,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAiD,OAAO,EAAE,WAAW,UAAU;AAAA,OACzF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,kCAAgC,GAC9D,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAQ,CACvB,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAA6C,OAAO,EAAE,WAAW,UAAU;AAAA,OACrF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,eAAa,GAC3C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAoB,MAAK;AAAA,KAAU,CACvD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO,EAAE,WAAW,UAAU;AAAA,OAC7E,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,iBAAe,GAC7C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,YAAU,CACtD,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAkD,OAAO;AAAA,OACpE,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAwC,GACxD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAmB,OAAO;AAAA,OACrC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO;AAAA,KAAqB,CACxF,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAmB,gkBAElC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,OAAK,GACb,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAiB,aAAW,CAChD,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,UAAQ,GAChB,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,MAAI,CACrC,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC,WAAE,uBAAoB,KAAI,2BAAyB,GACpD,6BAAAA,QAAA,cAAC;AAAA,MAAI,IAAG;AAAA,MAAS,OAAO,EAAE,QAAQ,QAAQ;AAAA,MAAG,WAAU;AAAA,OACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAqB,OAAO;AAAA,OACvC,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO;AAAA,OACtD,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAiD,OAAO,EAAE,WAAW,UAAU;AAAA,OACzF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,kCAAgC,GAC9D,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAQ,CACvB,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAA6C,OAAO,EAAE,WAAW,UAAU;AAAA,OACrF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,eAAa,GAC3C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAoB,MAAK;AAAA,KAAU,CACvD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO,EAAE,WAAW,UAAU;AAAA,OAC7E,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,iBAAe,GAC7C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,YAAU,CACtD,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAkD,OAAO;AAAA,OACpE,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAwC,GACxD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAmB,OAAO;AAAA,OACrC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO;AAAA,KAAqB,CACxF,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAmB,+nCAGlC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,OAAK,GACb,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAiB,aAAW,CAChD,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,UAAQ,GAChB,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,MAAI,CACrC,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC,WAAE,uBAAoB,KAAI,gBAAc,GACzC,6BAAAA,QAAA,cAAC;AAAA,MAAI,IAAG;AAAA,MAAS,WAAU;AAAA,OACvB,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAqB,OAAO;AAAA,OACvC,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO;AAAA,OACtD,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAiD,OAAO,EAAE,WAAW,UAAU;AAAA,OACzF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,kCAAgC,GAC9D,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAQ,CACvB,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAA6C,OAAO,EAAE,WAAW,UAAU;AAAA,OACrF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,eAAa,GAC3C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAoB,MAAK;AAAA,KAAU,CACvD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO,EAAE,WAAW,UAAU;AAAA,OAC7E,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,iBAAe,GAC7C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,YAAU,CACtD,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAkD,OAAO;AAAA,OACpE,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAwC,GACxD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAmB,OAAO;AAAA,OACrC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO;AAAA,KAAqB,CACxF,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAmB,eAElC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,OAAK,GACb,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAiB,aAAW,CAChD,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,UAAQ,GAChB,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,MAAI,CACrC,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC,WAAE,uBAAoB,KAAI,4BAA0B,GACrD,6BAAAA,QAAA,cAAC;AAAA,MAAI,IAAG;AAAA,MAAS,OAAO,EAAE,QAAQ,QAAQ;AAAA,MAAG,WAAU;AAAA,OACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAqB,OAAO;AAAA,OACvC,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO;AAAA,OACtD,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAiD,OAAO,EAAE,WAAW,UAAU;AAAA,OACzF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,kCAAgC,GAC9D,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAQ,CACvB,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAA6C,OAAO,EAAE,WAAW,UAAU;AAAA,OACrF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,eAAa,GAC3C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAoB,MAAK;AAAA,KAAU,CACvD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO,EAAE,WAAW,UAAU;AAAA,OAC7E,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,iBAAe,GAC7C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,YAAU,CACtD,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAkD,OAAO;AAAA,OACpE,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAwC,GACxD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAmB,OAAO;AAAA,OACrC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO;AAAA,KAAqB,CACxF,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAmB,eAElC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,OAAK,GACb,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAiB,aAAW,CAChD,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,UAAQ,GAChB,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,MAAI,CACrC,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC,WAAE,uBAAoB,KAAI,gCAA8B,GACzD,6BAAAA,QAAA,cAAC;AAAA,MAAI,IAAG;AAAA,MAAS,OAAO,EAAE,QAAQ,QAAQ;AAAA,MAAG,WAAU;AAAA,OACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAqB,OAAO;AAAA,OACvC,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO;AAAA,OACtD,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAiD,OAAO,EAAE,WAAW,UAAU;AAAA,OACzF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,kCAAgC,GAC9D,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAQ,CACvB,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAA6C,OAAO,EAAE,WAAW,UAAU;AAAA,OACrF,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,eAAa,GAC3C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAoB,MAAK;AAAA,KAAU,CACvD,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,MAAqC,OAAO,EAAE,WAAW,UAAU;AAAA,OAC7E,6BAAAA,QAAA,cAAC;AAAA,MAAE,MAAK;AAAA,MAAI,WAAU;AAAA,OAClB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,GAAC,CAC7C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,iBAAe,GAC7C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAwB,YAAU,CACtD,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAkD,OAAO;AAAA,OACpE,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAwC,GACxD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAmB,OAAO;AAAA,OACrC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO;AAAA,KAAqB,CACxF,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAmB,eAElC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,OAAK,GACb,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAiB,aAAW,CAChD,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC,cAAO,UAAQ,GAChB,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,OAAU,MAAI,CACrC,CACJ,CACJ,CACJ,CACJ,CACJ,CAEJ,CACJ;AAAA,EACJ;",
   "names": ["style", "React", "ReactDOM", "React"]
 }

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

@@ -111,6 +111,8 @@
         active,
         selected,
         disabled,
+        showArrow,
+        arrowIconName,
         ...htmlAttributes
       } = this.props;
       const hasIcon = icon !== void 0;
@@ -138,18 +140,24 @@
       }, icon && /* @__PURE__ */ React2.createElement(Icon, {
         className: classNames(iconClassName, "k-button-icon"),
         name: icon
-      }), text || hasIcon ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, text && /* @__PURE__ */ React2.createElement("span", {
+      }), text ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, text && /* @__PURE__ */ React2.createElement("span", {
         className: "k-button-text"
       }, text), children) : children && /* @__PURE__ */ React2.createElement("span", {
         className: "k-button-text"
-      }, children));
+      }, children), showArrow && /* @__PURE__ */ React2.createElement("span", {
+        className: "k-menu-button-arrow k-button-arrow"
+      }, /* @__PURE__ */ React2.createElement(Icon, {
+        name: arrowIconName
+      })));
     }
   };
   Button.defaultProps = {
     size: "medium",
     rounded: "medium",
     fillMode: "solid",
-    themeColor: "base"
+    themeColor: "base",
+    showArrow: false,
+    arrowIconName: "arrow-s"
   };
 
   // src/wizard/tests/wizard-vertical.tsx
@@ -219,7 +227,7 @@
     }, "Account Info with too long text"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -307,7 +315,7 @@
     }, "Account Info with too long text"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -394,7 +402,7 @@
     }, "Account Info with too long text"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -482,7 +490,7 @@
     }, "Account Info with too long text"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -569,7 +577,7 @@
     }, "Account Info with too long text"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -657,7 +665,7 @@
     }, "Account Info with too long text"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -744,7 +752,7 @@
     }, "Account Info with too long text"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",
@@ -832,7 +840,7 @@
     }, "Account Info with too long text"), /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "check"
     })))), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-step k-step-current k-step-focus k-step-error",
+      className: "k-step k-step-current k-focus k-step-error",
       style: { maxHeight: "33.333%" }
     }, /* @__PURE__ */ import_react.default.createElement("a", {
       href: "#",