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

package/dist/treelist/tests/treelist.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/treelist/tests/treelist.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n    <>\n        <div id=\"test-area\" className=\"k-d-grid\">\n            <section>\n\n                <div id=\"treelist\" className=\"k-treelist k-grid k-widget k-grid-no-scrollbar\">\n                    <div className=\"k-grid-header\" style={{ paddingRight: '0px' }}>\n                        <div className=\"k-grid-header-wrap\">\n                            <table>\n                                <colgroup>\n                                    <col style={{ width: \"250px\" }}/>\n                                    <col />\n                                </colgroup>\n                                <thead>\n                                    <tr>\n                                        <th className=\"k-header k-with-icon\"><a className=\"k-header-column-menu\"><Icon name=\"more-vertical\"></Icon></a><a className=\"k-link\">First\n                                                Name</a></th>\n                                        <th className=\"k-header k-with-icon\"><a className=\"k-header-column-menu\"><Icon name=\"more-vertical\"></Icon></a><a className=\"k-link\">Last\n                                                Name</a></th>\n                                    </tr>\n                                </thead>\n                            </table>\n                        </div>\n                    </div>\n                    <div className=\"k-grid-content k-auto-scrollable\">\n                        <table>\n                            <colgroup>\n                                <col style={{ width: \"250px\" }}/>\n                                <col />\n                            </colgroup>\n                            <tbody>\n                                <tr>\n                                    <td><Icon name=\"expand\"></Icon>Daryl</td>\n                                    <td>Sweeney</td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n\n            </section>\n\n            <section>\n                <div id=\"treelist\" className=\"k-treelist k-grid k-widget\">\n                    <div className=\"k-grid-header\">\n                        <div className=\"k-grid-header-wrap\">\n                            <table>\n                                <colgroup>\n                                    <col style={{ width: \"280px\" }} />\n                                    <col style={{ width: \"160px\" }} />\n                                    <col />\n                                </colgroup>\n                                <thead>\n                                    <tr>\n                                        <th className=\"k-header k-with-icon k-filterable\">\n                                            <a className=\"k-grid-filter\"><Icon name=\"filter\"></Icon></a>\n                                            <a className=\"k-link\">First Name</a>\n                                        </th>\n                                        <th className=\"k-header k-with-icon k-filterable\">\n                                            <a className=\"k-grid-filter\"><Icon name=\"filter\"></Icon></a>\n                                            <a className=\"k-link\">Last Name</a>\n                                        </th>\n                                        <th className=\"k-header k-with-icon k-filterable\">\n                                            <a className=\"k-grid-filter\"><Icon name=\"filter\"></Icon></a>\n                                            <a className=\"k-link\">Position</a>\n                                        </th>\n                                    </tr>\n                                </thead>\n                            </table>\n                        </div>\n                    </div>\n                    <div className=\"k-grid-content k-auto-scrollable\">\n                        <table>\n                            <colgroup>\n                                <col style={{ width: \"280px\" }} />\n                                <col style={{ width: \"160px\" }}/>\n                                <col />\n                            </colgroup>\n                            <tbody>\n                                <tr className=\"k-treelist-group\">\n                                    <td><Icon name=\"collapse\"></Icon>Daryl</td>\n                                    <td>Sweeney</td>\n                                    <td>CEO</td>\n                                </tr>\n                                <tr className=\"k-alt k-treelist-group\">\n                                    <td><Icon name=\"none\"></Icon><Icon name=\"collapse\"></Icon>Guy\n                                    </td>\n                                    <td>Wooten</td>\n                                    <td>Chief Technical Officer</td>\n                                </tr>\n                                <tr className=\"k-treelist-group\">\n                                    <td><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"collapse\"></Icon>Buffy</td>\n                                    <td>Weber</td>\n                                    <td>VP, Engineering</td>\n                                </tr>\n                                <tr className=\"k-alt k-treelist-group\">\n                                    <td><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"collapse\"></Icon>Hyacinth\n                                    </td>\n                                    <td>Hood</td>\n                                    <td>Team Lead</td>\n                                </tr>\n                                <tr>\n                                    <td><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon>Akeem</td>\n                                    <td>Carr</td>\n                                    <td>Junior Software Developer</td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n            </section>\n        </div>\n\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"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n    <>\n        <div id=\"test-area\" className=\"k-d-grid\">\n            <section>\n\n                <div id=\"treelist\" className=\"k-treelist k-grid k-widget k-grid-no-scrollbar\">\n                    <div className=\"k-grid-header\" style={{ paddingRight: '0px' }}>\n                        <div className=\"k-grid-header-wrap\">\n                            <table>\n                                <colgroup>\n                                    <col style={{ width: \"250px\" }}/>\n                                    <col />\n                                </colgroup>\n                                <thead>\n                                    <tr>\n                                        <th className=\"k-header k-with-icon\"><a className=\"k-grid-header-menu k-grid-column-menu\"><Icon name=\"more-vertical\"></Icon></a><a className=\"k-link\">First\n                                                Name</a></th>\n                                        <th className=\"k-header k-with-icon\"><a className=\"k-grid-header-menu k-grid-column-menu\"><Icon name=\"more-vertical\"></Icon></a><a className=\"k-link\">Last\n                                                Name</a></th>\n                                    </tr>\n                                </thead>\n                            </table>\n                        </div>\n                    </div>\n                    <div className=\"k-grid-content k-auto-scrollable\">\n                        <table>\n                            <colgroup>\n                                <col style={{ width: \"250px\" }}/>\n                                <col />\n                            </colgroup>\n                            <tbody>\n                                <tr>\n                                    <td><Icon name=\"expand\"></Icon>Daryl</td>\n                                    <td>Sweeney</td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n\n            </section>\n\n            <section>\n                <div id=\"treelist\" className=\"k-treelist k-grid k-widget\">\n                    <div className=\"k-grid-header\">\n                        <div className=\"k-grid-header-wrap\">\n                            <table>\n                                <colgroup>\n                                    <col style={{ width: \"280px\" }} />\n                                    <col style={{ width: \"160px\" }} />\n                                    <col />\n                                </colgroup>\n                                <thead>\n                                    <tr>\n                                        <th className=\"k-header k-with-icon k-filterable\">\n                                            <a className=\"k-grid-filter\"><Icon name=\"filter\"></Icon></a>\n                                            <a className=\"k-link\">First Name</a>\n                                        </th>\n                                        <th className=\"k-header k-with-icon k-filterable\">\n                                            <a className=\"k-grid-filter\"><Icon name=\"filter\"></Icon></a>\n                                            <a className=\"k-link\">Last Name</a>\n                                        </th>\n                                        <th className=\"k-header k-with-icon k-filterable\">\n                                            <a className=\"k-grid-filter\"><Icon name=\"filter\"></Icon></a>\n                                            <a className=\"k-link\">Position</a>\n                                        </th>\n                                    </tr>\n                                </thead>\n                            </table>\n                        </div>\n                    </div>\n                    <div className=\"k-grid-content k-auto-scrollable\">\n                        <table>\n                            <colgroup>\n                                <col style={{ width: \"280px\" }} />\n                                <col style={{ width: \"160px\" }}/>\n                                <col />\n                            </colgroup>\n                            <tbody>\n                                <tr className=\"k-treelist-group\">\n                                    <td><Icon name=\"collapse\"></Icon>Daryl</td>\n                                    <td>Sweeney</td>\n                                    <td>CEO</td>\n                                </tr>\n                                <tr className=\"k-alt k-treelist-group\">\n                                    <td><Icon name=\"none\"></Icon><Icon name=\"collapse\"></Icon>Guy\n                                    </td>\n                                    <td>Wooten</td>\n                                    <td>Chief Technical Officer</td>\n                                </tr>\n                                <tr className=\"k-treelist-group\">\n                                    <td><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"collapse\"></Icon>Buffy</td>\n                                    <td>Weber</td>\n                                    <td>VP, Engineering</td>\n                                </tr>\n                                <tr className=\"k-alt k-treelist-group\">\n                                    <td><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"collapse\"></Icon>Hyacinth\n                                    </td>\n                                    <td>Hood</td>\n                                    <td>Team Lead</td>\n                                </tr>\n                                <tr>\n                                    <td><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon><Icon name=\"none\"></Icon>Akeem</td>\n                                    <td>Carr</td>\n                                    <td>Junior Software Developer</td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n            </section>\n        </div>\n\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"],
+  "mappings": "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",
   "names": ["ReactDOM", "React"]
 }

package/dist/typography/tests/typography.js

@@ -137,6 +137,8 @@
         active,
         selected,
         disabled,
+        showArrow,
+        arrowIconName,
         ...htmlAttributes
       } = this.props;
       const hasIcon = icon !== void 0;
@@ -164,18 +166,24 @@
       }, icon && /* @__PURE__ */ React3.createElement(Icon, {
         className: classNames(iconClassName, "k-button-icon"),
         name: icon
-      }), text || hasIcon ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, text && /* @__PURE__ */ React3.createElement("span", {
+      }), text ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, text && /* @__PURE__ */ React3.createElement("span", {
         className: "k-button-text"
       }, text), children) : children && /* @__PURE__ */ React3.createElement("span", {
         className: "k-button-text"
-      }, children));
+      }, children), showArrow && /* @__PURE__ */ React3.createElement("span", {
+        className: "k-menu-button-arrow k-button-arrow"
+      }, /* @__PURE__ */ React3.createElement(Icon, {
+        name: arrowIconName
+      })));
     }
   };
   Button.defaultProps = {
     size: "medium",
     rounded: "medium",
     fillMode: "solid",
-    themeColor: "base"
+    themeColor: "base",
+    showArrow: false,
+    arrowIconName: "arrow-s"
   };
 
   // src/typography/tests/typography.tsx

package/dist/typography/tests/typography.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/typography/tests/typography.tsx", "../../../src/typography/typography.tsx", "../../../src/utils/classNames.ts", "../../../src/utils/theme.ts", "../../../src/button/button.tsx", "../../../src/icon/icon.tsx"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Typography } from '../../typography';\nimport { Button } from '../../button';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n    <>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-2\">\n\n            <span>Headings</span>\n            <span>Other Types</span>\n\n            <section>\n                <Typography type=\"h1\">Heading 1</Typography>\n                <Typography type=\"h2\">Heading 2</Typography>\n                <Typography type=\"h3\">Heading 3</Typography>\n                <Typography type=\"h4\">Heading 4</Typography>\n                <Typography type=\"h5\">Heading 5</Typography>\n                <Typography type=\"h6\">Heading 6</Typography>\n            </section>\n\n            <section>\n                <Typography type=\"p\">A paragraph of regular body text with <strong>bold</strong>, <em>italic</em>, and <u>underline</u>. Also, the <Typography type=\"code\">code</Typography> tag is available in typography.</Typography>\n\n                <Button>Button</Button>\n\n                <Typography type=\"pre\">\n<Typography type=\"code\">{`const handleChange = ({ target }) => {\n    const { name, value } = target;\n    const newData = Object.assign({}, data, { [name]: value });\n    setData(newData);\n}`}</Typography>\n                </Typography>\n            </section>\n\n            <span>Displays</span>\n            <span></span>\n\n            <section>\n                <Typography type=\"display-1\">Display 1</Typography>\n                <Typography type=\"display-2\">Display 2</Typography>\n                <Typography type=\"display-3\">Display 3</Typography>\n                <Typography type=\"display-4\">Display 4</Typography>\n            </section>\n\n            <section></section>\n            </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface TypographyProps {\n    children?: React.ReactNode;\n    className?: string;\n    type: 'body' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'display-1' | 'display-2' | 'display-3' | 'display-4';\n}\n\nexport class Typography extends React.Component<TypographyProps> {\n\n    render() {\n        const {\n            children,\n            className,\n            type,\n            ...htmlAttributes\n        } = this.props;\n\n        const typeClass = type === 'p' ? 'paragraph' : type;\n        const Component = type.includes('display') ? 'div' : type as React.ElementType;\n\n        return (\n            <Component\n                {...htmlAttributes}\n                className={classNames(\n                    {\n                        [`k-${typeClass}`]: type,\n                    },\n                    className\n                )}>\n                {children}\n            </Component>\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", "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"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable indent */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Typography } from '../../typography';\nimport { Button } from '../../button';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n    <>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-2\">\n\n            <span>Headings</span>\n            <span>Other Types</span>\n\n            <section>\n                <Typography type=\"h1\">Heading 1</Typography>\n                <Typography type=\"h2\">Heading 2</Typography>\n                <Typography type=\"h3\">Heading 3</Typography>\n                <Typography type=\"h4\">Heading 4</Typography>\n                <Typography type=\"h5\">Heading 5</Typography>\n                <Typography type=\"h6\">Heading 6</Typography>\n            </section>\n\n            <section>\n                <Typography type=\"p\">A paragraph of regular body text with <strong>bold</strong>, <em>italic</em>, and <u>underline</u>. Also, the <Typography type=\"code\">code</Typography> tag is available in typography.</Typography>\n\n                <Button>Button</Button>\n\n                <Typography type=\"pre\">\n<Typography type=\"code\">{`const handleChange = ({ target }) => {\n    const { name, value } = target;\n    const newData = Object.assign({}, data, { [name]: value });\n    setData(newData);\n}`}</Typography>\n                </Typography>\n            </section>\n\n            <span>Displays</span>\n            <span></span>\n\n            <section>\n                <Typography type=\"display-1\">Display 1</Typography>\n                <Typography type=\"display-2\">Display 2</Typography>\n                <Typography type=\"display-3\">Display 3</Typography>\n                <Typography type=\"display-4\">Display 4</Typography>\n            </section>\n\n            <section></section>\n            </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface TypographyProps {\n    children?: React.ReactNode;\n    className?: string;\n    type: 'body' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'display-1' | 'display-2' | 'display-3' | 'display-4';\n}\n\nexport class Typography extends React.Component<TypographyProps> {\n\n    render() {\n        const {\n            children,\n            className,\n            type,\n            ...htmlAttributes\n        } = this.props;\n\n        const typeClass = type === 'p' ? 'paragraph' : type;\n        const Component = type.includes('display') ? 'div' : type as React.ElementType;\n\n        return (\n            <Component\n                {...htmlAttributes}\n                className={classNames(\n                    {\n                        [`k-${typeClass}`]: type,\n                    },\n                    className\n                )}>\n                {children}\n            </Component>\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", "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"],
+  "mappings": "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",
   "names": ["Component", "React", "React", "ReactDOM", "React"]
 }

package/dist/upload/tests/upload-react.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/action-buttons/action-buttons.tsx

package/dist/upload/tests/upload-react.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/upload/tests/upload-react.tsx", "../../../src/button/button.tsx", "../../../src/utils/classNames.ts", "../../../src/utils/theme.ts", "../../../src/icon/icon.tsx", "../../../src/action-buttons/action-buttons.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Button } from '../../button';\nimport { ActionButtons } from '../../action-buttons';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    #test-area section {\n        max-width: 400px;\n    }\n`;\n\nconst progressStyle = {\n    width: '100%',\n    transition: \"opacity 0.5s ease-in-out 0s\",\n};\n\nconst progress70Style = {\n    width: \"70%\",\n    transition: \"opacity 0.5s ease-in-out 0s\",\n};\n\nconst progress17Style = {\n    width: \"17%\",\n    transition: \"opacity 0.5s ease-in-out 0s\",\n};\n\nconst progress0Style = {\n    width: \"0%\",\n    transition: \"opacity 0.5s ease-in-out 0s\",\n};\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=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-upload-status k-upload-status-total\"><Icon name=\"loading\"></Icon>Uploading...</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-invalid\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progress0Style}></span>\n                                <span className=\"k-file-invalid-extension-wrapper\">\n                                    <span className=\"k-file-invalid-icon\">!</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name k-file-name-invalid\">Video_File_with_Very_Very_Very_Very_Long_Name.psd</span>\n                                    <span className=\"k-file-validation-message\">File type not allowed.</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                        <li className=\"k-file k-file-progress\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progress70Style}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">mkv</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Document.mkv</span>\n                                    <span className=\"k-file-size\">156.33 MB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <span className=\"k-upload-pct\">70%</span>\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"cancel\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-upload-status k-upload-status-total\"><Icon name=\"check\"></Icon>Done</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-success\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progressStyle}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">png</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image1_With_Very_Very_Very_Very_Long_Name.png</span>\n                                    <span className=\"k-file-size\">24.34 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                        <li className=\"k-file k-file-success\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progressStyle}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">png</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image2.png</span>\n                                    <span className=\"k-file-size\">19.85 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-dropzone-hint\">Drop files here to upload</div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone k-dropzone-active k-dropzone-hovered\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-dropzone-hint\">Drop files here to upload</div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header k-state-disabled\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-dropzone-hint\">Drop files here to upload</div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-upload-status k-upload-status-total\"><Icon name=\"check\"></Icon>Done</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-success\">\n                            <div className=\"k-file-multiple\">\n                                <span className=\"k-progress\" style={progressStyle}></span>\n                                <span className=\"k-multiple-files-extension-wrapper\">\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Video_File_with_Very_Very_Very_Very_Long_Name.jpg</span>\n                                    <span className=\"k-file-name\">Video_File_with_Very_Very_Very_Very_Long_Name2.png</span>\n                                    <span className=\"k-file-name\">Video3.png</span>\n                                    <span className=\"k-file-name\">Video4.jpg</span>\n                                    <span className=\"k-file-information\">Total: 4 files, 152.21 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-upload-status k-upload-status-total\"><Icon name=\"loading\"></Icon>Uploading...</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-progress\">\n                            <div className=\"k-file-multiple\">\n                                <span className=\"k-progress\" style={progress17Style}></span>\n                                <span className=\"k-multiple-files-extension-wrapper\">\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image_With_Very_Very_Very_Very_Very_Long_Name1.pdf</span>\n                                    <span className=\"k-file-name\">Image_With_Very_Very_Very_Very_Very_Long_Name2.pdf</span>\n                                    <span className=\"k-file-name\">Image3.pdf</span>\n                                    <span className=\"k-file-name\">Image4.jpg</span>\n                                    <span className=\"k-file-information\">Total: 4 files, 1.35 MB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <span className=\"k-upload-pct\">17%</span>\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"cancel\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-invalid\">\n                            <div className=\"k-file-multiple\">\n                                <span className=\"k-progress\" style={progress0Style}></span>\n                                <span className=\"k-multiple-files-invalid-extension-wrapper\">\n                                    <span className=\"k-file-invalid-icon\">!</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Movie_With_Very_Very_Very_Very_Very_Long_Name1.png</span>\n                                    <span className=\"k-file-name\">Movie2.jpg</span>\n                                    <span className=\"k-file-name k-file-name-invalid\">Image1.mkv</span>\n                                    <span className=\"k-file-name k-file-name-invalid\">Image2.mkv</span>\n                                    <span className=\"k-file-validation-message\">Invalid file(s). Please check file upload requirements.</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-dropzone-hint\">Drop files here to upload</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progress0Style}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">png</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image_With_Very_Very_Very_Very_Very_Long_Name1.png</span>\n                                    <span className=\"k-file-size\">51.23 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                        <li className=\"k-file\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progress0Style}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">jpg</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image_With_Very_Very_Very_Very_Very_Long_Name2.jpg</span>\n                                    <span className=\"k-file-size\">106.43 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                    <ActionButtons alignment=\"end\">\n                        <Button className=\"k-clear-selected\">Clear</Button>\n                        <Button themeColor=\"primary\" className=\"k-upload-selected\">Upload</Button>\n                    </ActionButtons>\n                </div>\n            </section>\n        </div>\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", "/* 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 } 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", "import * as React from 'react';\nimport { ButtonProps } from '../button';\nimport { classNames } from '../utils';\n\nexport interface ActionButtonsProps {\n    children?: React.ReactElement<ButtonProps>|React.ReactElement<ButtonProps>[];\n    className?: string;\n    alignment?: 'start' | 'center' | 'end' | 'stretched';\n    orientation?: 'horizontal' | 'vertical';\n}\n\nexport class ActionButtons extends React.Component<ActionButtonsProps> {\n\n    static defaultProps = {\n        alignment: 'start',\n        orientation: 'horizontal'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            alignment,\n            orientation,\n            ...htmlAttributes\n        } = this.props;\n\n        return (\n            <div\n                {...htmlAttributes}\n                className={classNames(\n                    'k-actions',\n                    {\n                        [`k-actions-${alignment}`]: alignment,\n                        [`k-actions-${orientation}`]: orientation\n                    },\n                    className\n                )}>\n                {children}\n            </div>\n        );\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAkB;AAClB,sBAAqB;;;ACDrB,MAAAA,SAAuB;;;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;;;AC5BA,cAAuB;AAShB,MAAM,OAAN,cAAyB,gBAAqB;AAAA,IAEjD,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA,OAAAC;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;;;AHZO,MAAM,SAAN,cAA2B,iBAAuB;AAAA,IASrD,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,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,QAAQ,UAEL,4DACK,QAAQ,qCAAC;AAAA,QAAK,WAAU;AAAA,SAAiB,IAAK,GAC9C,QACL,IACE,YAAY,qCAAC;AAAA,QAAK,WAAU;AAAA,SAAiB,QAAS,CAEhE;AAAA,IAER;AAAA,EACJ;AA/DI,EAFS,OAEF,eAAe;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,EAChB;;;AI9BJ,MAAAC,SAAuB;AAWhB,MAAM,gBAAN,cAAkC,iBAA8B;AAAA,IAOnE,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,WACG;AAAA,MACP,IAAI,KAAK;AAET,aACI,qCAAC;AAAA,QACI,GAAG;AAAA,QACJ,WAAW;AAAA,UACP;AAAA,UACA;AAAA,YACI,CAAC,aAAa,cAAc;AAAA,YAC5B,CAAC,aAAa,gBAAgB;AAAA,UAClC;AAAA,UACA;AAAA,QACJ;AAAA,SACC,QACL;AAAA,IAER;AAAA,EACJ;AA7BI,EAFS,cAEF,eAAe;AAAA,IAClB,WAAW;AAAA,IACX,aAAa;AAAA,EACjB;;;ALVJ,MAAM,OAAO,cAAAC,QAAS;AAAA,IAClB,SAAS,eAAe,KAAK;AAAA,EACjC;AAEA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMd,MAAM,gBAAgB;AAAA,IAClB,OAAO;AAAA,IACP,YAAY;AAAA,EAChB;AAEA,MAAM,kBAAkB;AAAA,IACpB,OAAO;AAAA,IACP,YAAY;AAAA,EAChB;AAEA,MAAM,kBAAkB;AAAA,IACpB,OAAO;AAAA,IACP,YAAY;AAAA,EAChB;AAEA,MAAM,iBAAiB;AAAA,IACnB,OAAO;AAAA,IACP,YAAY;AAAA,EAChB;AAGA,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;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAwC,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAU,GAAO,cAAY,CACnG,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAgB,GACpD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAsB,GAAC,GACvC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAkC,mDAAiD,GACnG,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAA4B,wBAAsB,CACtE,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAQ,CACrE,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAiB,GACrD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAmB,KAAG,GACtC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,cAAY,GAC1C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,WAAS,CAC3C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAe,KAAG,GAClC,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAS,CACtE,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAwC,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAQ,GAAO,MAAI,CACzF,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAmB,KAAG,GACtC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,+CAA6C,GAC3E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,UAAQ,CAC1C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAQ,CACrE,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAmB,KAAG,GACtC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,YAAU,GACxC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,UAAQ,CAC1C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAQ,CACrE,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAkB,2BAAyB,CAC9D,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAkB,2BAAyB,CAC9D,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAkB,2BAAyB,CAC9D,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAwC,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAQ,GAAO,MAAI,CACzF,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,mDAAiD,GAC/E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,oDAAkD,GAChF,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,YAAU,GACxC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,YAAU,GACxC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAqB,2BAAyB,CAClE,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAQ,CACrE,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAwC,6BAAAA,QAAA,cAAC;AAAA,MAAK,MAAK;AAAA,KAAU,GAAO,cAAY,CACnG,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAiB,GACrD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,oDAAkD,GAChF,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,oDAAkD,GAChF,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,YAAU,GACxC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,YAAU,GACxC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAqB,yBAAuB,CAChE,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAe,KAAG,GAClC,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAS,CACtE,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,CACvD,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAgB,GACpD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAsB,GAAC,GACvC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,oDAAkD,GAChF,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,YAAU,GACxC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAkC,YAAU,GAC5D,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAkC,YAAU,GAC5D,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAA4B,yDAAuD,CACvG,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAQ,CACrE,CACJ,CACJ,CACJ,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,iBACG,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAkB,iBAAe,GACnD,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OAAkB,2BAAyB,CAC9D,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAgB,GACpD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAmB,KAAG,GACtC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,oDAAkD,GAChF,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,UAAQ,CAC1C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAQ,CACrE,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAG,WAAU;AAAA,OACV,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAa,OAAO;AAAA,KAAgB,GACpD,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAmB,KAAG,GACtC,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,KAAe,CACnC,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,oDAAkD,GAChF,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAc,WAAS,CAC3C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OACd,6BAAAA,QAAA,cAAC;AAAA,MAAO,UAAS;AAAA,MAAO,WAAU;AAAA,MAAkB,MAAK;AAAA,KAAQ,CACrE,CACJ,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAc,WAAU;AAAA,OACrB,6BAAAA,QAAA,cAAC;AAAA,MAAO,WAAU;AAAA,OAAmB,OAAK,GAC1C,6BAAAA,QAAA,cAAC;AAAA,MAAO,YAAW;AAAA,MAAU,WAAU;AAAA,OAAoB,QAAM,CACrE,CACJ,CACJ,CACJ,CACJ;AAAA,EACJ;",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Button } from '../../button';\nimport { ActionButtons } from '../../action-buttons';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    #test-area section {\n        max-width: 400px;\n    }\n`;\n\nconst progressStyle = {\n    width: '100%',\n    transition: \"opacity 0.5s ease-in-out 0s\",\n};\n\nconst progress70Style = {\n    width: \"70%\",\n    transition: \"opacity 0.5s ease-in-out 0s\",\n};\n\nconst progress17Style = {\n    width: \"17%\",\n    transition: \"opacity 0.5s ease-in-out 0s\",\n};\n\nconst progress0Style = {\n    width: \"0%\",\n    transition: \"opacity 0.5s ease-in-out 0s\",\n};\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=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-upload-status k-upload-status-total\"><Icon name=\"loading\"></Icon>Uploading...</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-invalid\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progress0Style}></span>\n                                <span className=\"k-file-invalid-extension-wrapper\">\n                                    <span className=\"k-file-invalid-icon\">!</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name k-file-name-invalid\">Video_File_with_Very_Very_Very_Very_Long_Name.psd</span>\n                                    <span className=\"k-file-validation-message\">File type not allowed.</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                        <li className=\"k-file k-file-progress\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progress70Style}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">mkv</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Document.mkv</span>\n                                    <span className=\"k-file-size\">156.33 MB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <span className=\"k-upload-pct\">70%</span>\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"cancel\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-upload-status k-upload-status-total\"><Icon name=\"check\"></Icon>Done</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-success\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progressStyle}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">png</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image1_With_Very_Very_Very_Very_Long_Name.png</span>\n                                    <span className=\"k-file-size\">24.34 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                        <li className=\"k-file k-file-success\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progressStyle}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">png</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image2.png</span>\n                                    <span className=\"k-file-size\">19.85 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-dropzone-hint\">Drop files here to upload</div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone k-dropzone-active k-dropzone-hovered\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-dropzone-hint\">Drop files here to upload</div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header k-state-disabled\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-dropzone-hint\">Drop files here to upload</div>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-upload-status k-upload-status-total\"><Icon name=\"check\"></Icon>Done</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-success\">\n                            <div className=\"k-file-multiple\">\n                                <span className=\"k-progress\" style={progressStyle}></span>\n                                <span className=\"k-multiple-files-extension-wrapper\">\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Video_File_with_Very_Very_Very_Very_Long_Name.jpg</span>\n                                    <span className=\"k-file-name\">Video_File_with_Very_Very_Very_Very_Long_Name2.png</span>\n                                    <span className=\"k-file-name\">Video3.png</span>\n                                    <span className=\"k-file-name\">Video4.jpg</span>\n                                    <span className=\"k-file-information\">Total: 4 files, 152.21 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-upload-status k-upload-status-total\"><Icon name=\"loading\"></Icon>Uploading...</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-progress\">\n                            <div className=\"k-file-multiple\">\n                                <span className=\"k-progress\" style={progress17Style}></span>\n                                <span className=\"k-multiple-files-extension-wrapper\">\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image_With_Very_Very_Very_Very_Very_Long_Name1.pdf</span>\n                                    <span className=\"k-file-name\">Image_With_Very_Very_Very_Very_Very_Long_Name2.pdf</span>\n                                    <span className=\"k-file-name\">Image3.pdf</span>\n                                    <span className=\"k-file-name\">Image4.jpg</span>\n                                    <span className=\"k-file-information\">Total: 4 files, 1.35 MB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <span className=\"k-upload-pct\">17%</span>\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"cancel\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file k-file-invalid\">\n                            <div className=\"k-file-multiple\">\n                                <span className=\"k-progress\" style={progress0Style}></span>\n                                <span className=\"k-multiple-files-invalid-extension-wrapper\">\n                                    <span className=\"k-file-invalid-icon\">!</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Movie_With_Very_Very_Very_Very_Very_Long_Name1.png</span>\n                                    <span className=\"k-file-name\">Movie2.jpg</span>\n                                    <span className=\"k-file-name k-file-name-invalid\">Image1.mkv</span>\n                                    <span className=\"k-file-name k-file-name-invalid\">Image2.mkv</span>\n                                    <span className=\"k-file-validation-message\">Invalid file(s). Please check file upload requirements.</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-upload k-header\">\n                    <div className=\"k-dropzone\">\n                        <Button className=\"k-upload-button\">Select files...</Button>\n                        <div className=\"k-dropzone-hint\">Drop files here to upload</div>\n                    </div>\n                    <ul className=\"k-upload-files k-reset\">\n                        <li className=\"k-file\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progress0Style}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">png</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image_With_Very_Very_Very_Very_Very_Long_Name1.png</span>\n                                    <span className=\"k-file-size\">51.23 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                        <li className=\"k-file\">\n                            <div className=\"k-file-single\">\n                                <span className=\"k-progress\" style={progress0Style}></span>\n                                <span className=\"k-file-extension-wrapper\">\n                                    <span className=\"k-file-extension\">jpg</span>\n                                    <span className=\"k-file-state\"></span>\n                                </span>\n                                <span className=\"k-file-name-size-wrapper\">\n                                    <span className=\"k-file-name\">Image_With_Very_Very_Very_Very_Very_Long_Name2.jpg</span>\n                                    <span className=\"k-file-size\">106.43 KB</span>\n                                </span>\n                                <strong className=\"k-upload-status\">\n                                    <Button fillMode=\"flat\" className=\"k-upload-action\" icon=\"close\"></Button>\n                                </strong>\n                            </div>\n                        </li>\n                    </ul>\n                    <ActionButtons alignment=\"end\">\n                        <Button className=\"k-clear-selected\">Clear</Button>\n                        <Button themeColor=\"primary\" className=\"k-upload-selected\">Upload</Button>\n                    </ActionButtons>\n                </div>\n            </section>\n        </div>\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", "/* 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 } 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", "import * as React from 'react';\nimport { ButtonProps } from '../button';\nimport { classNames } from '../utils';\n\nexport interface ActionButtonsProps {\n    children?: React.ReactElement<ButtonProps>|React.ReactElement<ButtonProps>[];\n    className?: string;\n    alignment?: 'start' | 'center' | 'end' | 'stretched';\n    orientation?: 'horizontal' | 'vertical';\n}\n\nexport class ActionButtons extends React.Component<ActionButtonsProps> {\n\n    static defaultProps = {\n        alignment: 'start',\n        orientation: 'horizontal'\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            alignment,\n            orientation,\n            ...htmlAttributes\n        } = this.props;\n\n        return (\n            <div\n                {...htmlAttributes}\n                className={classNames(\n                    'k-actions',\n                    {\n                        [`k-actions-${alignment}`]: alignment,\n                        [`k-actions-${orientation}`]: orientation\n                    },\n                    className\n                )}>\n                {children}\n            </div>\n        );\n    }\n}\n"],
+  "mappings": "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",
   "names": ["React", "style", "React", "ReactDOM", "React"]
 }

package/dist/upload/tests/upload-rtl.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/action-buttons/action-buttons.tsx