@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

package/dist/slider/tests/slider-css-vars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/slider/tests/slider-css-vars.tsx", "../../../src/utils/class-names.ts", "../../../src/utils/component-class-names.ts", "../../../src/utils/theme.ts", "../../../src/icon/icon.spec.tsx", "../../../src/button/button.spec.tsx"],
-  "sourcesContent": ["import ReactDOM from 'react-dom/client';\nimport { Button } from '../../button';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    .k-slider-horizontal {\n        width: 100%;\n    }\n    .k-slider-vertical {\n        height: 300px;\n    }\n\n    .k-slider {\n        --kendo-slider-start: 0;\n        --kendo-slider-end: 60;\n    }\n    .k-range-slider {\n        --kendo-slider-start: 20;\n        --kendo-slider-end: 60;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span>Single</span>\n            <span>Range</span>\n            <span>Single RTL</span>\n            <span>Range RTL</span>\n\n\n            <section>\n                <div className=\"k-widget k-slider k-slider-horizontal\">\n                    <Button icon=\"caret-alt-left\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n                    <div className=\"k-slider-track-wrap\">\n                        <ul className=\"k-reset k-slider-items\">\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">0</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">25</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">50</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">75</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">100</span>\n                            </li>\n                        </ul>\n                        <div className=\"k-slider-track\">\n                            <div className=\"k-slider-selection\"></div>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-end\"></a>\n                        </div>\n                    </div>\n                    <Button icon=\"caret-alt-right\" rounded=\"full\" className=\"k-button-increase\"></Button>\n                </div>\n            </section>\n            <section>\n                <div className=\"k-widget k-slider k-range-slider k-slider-horizontal\">\n                    <Button icon=\"caret-alt-left\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n                    <div className=\"k-slider-track-wrap\">\n                        <ul className=\"k-reset k-slider-items\">\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">0</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">25</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">50</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">75</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">100</span>\n                            </li>\n                        </ul>\n                        <div className=\"k-slider-track\">\n                            <div className=\"k-slider-selection\"></div>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-start\"></a>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-end\"></a>\n                        </div>\n                    </div>\n                    <Button icon=\"caret-alt-right\" rounded=\"full\" className=\"k-button-increase\"></Button>\n                </div>\n            </section>\n            <section dir=\"rtl\">\n                <div className=\"k-widget k-slider k-slider-horizontal\">\n                    <Button icon=\"caret-alt-left\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n                    <div className=\"k-slider-track-wrap\">\n                        <ul className=\"k-reset k-slider-items\">\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">0</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">25</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">50</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">75</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">100</span>\n                            </li>\n                        </ul>\n                        <div className=\"k-slider-track\">\n                            <div className=\"k-slider-selection\"></div>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-end\"></a>\n                        </div>\n                    </div>\n                    <Button icon=\"caret-alt-right\" rounded=\"full\" className=\"k-button-increase\"></Button>\n                </div>\n            </section>\n            <section dir=\"rtl\">\n                <div className=\"k-widget k-slider k-range-slider k-slider-horizontal\">\n                    <Button icon=\"caret-alt-left\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n                    <div className=\"k-slider-track-wrap\">\n                        <ul className=\"k-reset k-slider-items\">\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">0</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">25</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">50</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">75</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">100</span>\n                            </li>\n                        </ul>\n                        <div className=\"k-slider-track\">\n                            <div className=\"k-slider-selection\"></div>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-start\"></a>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-end\"></a>\n                        </div>\n                    </div>\n                    <Button icon=\"caret-alt-right\" rounded=\"full\" className=\"k-button-increase\"></Button>\n                </div>\n            </section>\n\n\n            <section>\n                <div className=\"k-widget k-slider k-slider-vertical\">\n                    <Button icon=\"caret-alt-down\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n                    <div className=\"k-slider-track-wrap\">\n                        <ul className=\"k-reset k-slider-items\">\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">0</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">25</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">50</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">75</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">100</span>\n                            </li>\n                        </ul>\n                        <div className=\"k-slider-track\">\n                            <div className=\"k-slider-selection\"></div>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-end\"></a>\n                        </div>\n                    </div>\n                    <Button icon=\"caret-alt-up\" rounded=\"full\" className=\"k-button-increase\"></Button>\n                </div>\n            </section>\n            <section>\n                <div className=\"k-widget k-slider k-range-slider k-slider-vertical\">\n                    <Button icon=\"caret-alt-down\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n                    <div className=\"k-slider-track-wrap\">\n                        <ul className=\"k-reset k-slider-items\">\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">0</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">25</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">50</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">75</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">100</span>\n                            </li>\n                        </ul>\n                        <div className=\"k-slider-track\">\n                            <div className=\"k-slider-selection\"></div>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-start\"></a>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-end\"></a>\n                        </div>\n                    </div>\n                    <Button icon=\"caret-alt-up\" rounded=\"full\" className=\"k-button-increase\"></Button>\n                </div>\n            </section>\n            <section dir=\"rtl\">\n                <div className=\"k-widget k-slider k-slider-vertical\">\n                    <Button icon=\"caret-alt-down\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n                    <div className=\"k-slider-track-wrap\">\n                        <ul className=\"k-reset k-slider-items\">\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">0</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">25</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">50</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">75</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">100</span>\n                            </li>\n                        </ul>\n                        <div className=\"k-slider-track\">\n                            <div className=\"k-slider-selection\"></div>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-end\"></a>\n                        </div>\n                    </div>\n                    <Button icon=\"caret-alt-up\" rounded=\"full\" className=\"k-button-increase\"></Button>\n                </div>\n            </section>\n            <section dir=\"rtl\">\n                <div className=\"k-widget k-slider k-range-slider k-slider-vertical\">\n                    <Button icon=\"caret-alt-down\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n                    <div className=\"k-slider-track-wrap\">\n                        <ul className=\"k-reset k-slider-items\">\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">0</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">25</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">50</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">75</span>\n                            </li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick\"></li>\n                            <li className=\"k-tick k-tick-large\">\n                                <span className=\"k-label\">100</span>\n                            </li>\n                        </ul>\n                        <div className=\"k-slider-track\">\n                            <div className=\"k-slider-selection\"></div>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-start\"></a>\n                            <a href=\"#\" className=\"k-draghandle k-draghandle-end\"></a>\n                        </div>\n                    </div>\n                    <Button icon=\"caret-alt-up\" rounded=\"full\" className=\"k-button-increase\"></Button>\n                </div>\n            </section>\n\n        </div>\n    </>\n);\n", "/* eslint-disable arrow-body-style */\nexport const classNames = (...args: any[]): string => {\n    return args\n        .filter((arg) => arg !== true && Boolean(arg))\n        .map((arg: any) => {\n            // eslint-disable-next-line no-nested-ternary\n            return Array.isArray(arg)\n                ? classNames(...arg)\n                : typeof arg === 'object'\n                    ? Object.keys(arg)\n                        .map((key, idx) => arg[idx] || (arg[key] && key) || null)\n                        .filter((el) => el !== null)\n                        .join(' ')\n                    : arg;\n        })\n        .filter((arg) => Boolean(arg))\n        .join(' ');\n};\n", "/* eslint-disable arrow-body-style */\nimport { classNames } from './class-names';\n\nexport const optionClassNames = (componentClassName: string, props: any) => {\n    return classNames(\n        {\n            [`${componentClassName}-xs`]: props.size === \"xsmall\",\n            [`${componentClassName}-sm`]: props.size === \"small\",\n            [`${componentClassName}-md`]: props.size === \"medium\",\n            [`${componentClassName}-lg`]: props.size === \"large\",\n            [`${componentClassName}-xl`]: props.size === \"xlarge\",\n            [`${componentClassName}-xxl`]: props.size === \"xxlarge\",\n            [`${componentClassName}-xxxl`]: props.size === \"xxxlarge\"\n        },\n        {\n            [`${componentClassName}-${props.fillMode}`]: props.fillMode,\n        },\n        {\n            [`${componentClassName}-${props.fillMode}-${props.themeColor}`]:\n            props.fillMode && props.themeColor,\n        },\n        {\n            [`${componentClassName}-${props.themeColor}`]:\n            props.themeColor && props.fillMode === undefined,\n        },\n        {\n            'k-rounded-sm': props.rounded === \"small\",\n            'k-rounded-md': props.rounded === \"medium\",\n            'k-rounded-lg': props.rounded === \"large\",\n            'k-rounded-full': props.rounded === \"full\",\n        }\n    );\n};\n\nexport const stateClassNames = (_componentClassName: string | undefined, props: any) => {\n    return classNames({\n        'k-valid': props.valid,\n        'k-invalid': props.invalid,\n        'k-hover': props.hover,\n        'k-focus': props.focus,\n        'k-checked': props.checked,\n        'k-active': props.active,\n        'k-selected': props.selected,\n        'k-disabled': props.disabled,\n        'k-indeterminate': props.indeterminate && !props.checked,\n        'k-loading': props.loading,\n        'k-empty': props.empty,\n        'k-readonly': props.readonly,\n    });\n};\n", "export const Size = {\n    'xsmall': 'xsmall',\n    'small': 'small',\n    'medium': 'medium',\n    'large': 'large',\n    'xlarge': 'xlarge',\n    'xxlarge': 'xxlarge',\n    'xxxlarge': 'xxxlarge',\n} as const;\n\nexport const Roundness = {\n    'small': 'small',\n    'medium': 'medium',\n    'large': 'large',\n    'full': 'full',\n} as const;\n\nexport const FillMode = {\n    'solid': 'solid',\n    'flat': 'flat',\n    'outline': 'outline',\n    'clear': 'clear',\n    'link': 'link',\n} as const;\n\nexport const ThemeColor = {\n    'inherit': 'inherit',\n    'base': 'base',\n    'primary': 'primary',\n    'secondary': 'secondary',\n    'tertiary': 'tertiary',\n    'info': 'info',\n    'success': 'success',\n    'warning': 'warning',\n    'error': 'error',\n    'dark': 'dark',\n    'light': 'light',\n    'inverse': 'inverse',\n} as const;\n\nexport const States = {\n    'open': 'open',\n    'hover': 'hover',\n    'focus': 'focus',\n    'active': 'active',\n    'selected': 'selected',\n    'disabled': 'disabled',\n    'valid': 'valid',\n    'invalid': 'invalid',\n    'loading': 'loading',\n    'required': 'required',\n    'empty': 'empty',\n    'indeterminate': 'indeterminate',\n    'checked': 'checked',\n    'readonly': 'readonly',\n} as const;\n\nexport const kendoThemeMaps = {\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} as const;\n", "import { classNames, optionClassNames, Size, ThemeColor } from '../utils';\n\nexport const ICON_CLASSNAME = `k-icon`;\n\nconst states = [];\n\nconst options = {\n    size: [ Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge ],\n    themeColor: [\n        ThemeColor.base,\n        ThemeColor.primary,\n        ThemeColor.secondary,\n        ThemeColor.tertiary,\n        ThemeColor.success,\n        ThemeColor.warning,\n        ThemeColor.error,\n        ThemeColor.info,\n        ThemeColor.light,\n        ThemeColor.dark,\n    ],\n};\n\nconst defaultProps = {};\n\nexport type IconState = { [K in (typeof states)[number]]?: boolean };\n\nexport type IconOptions = {\n    size?: (typeof options.size)[number];\n    themeColor?: (typeof options.themeColor)[number];\n};\n\nexport type IconProps = IconOptions & {\n    name?: string;\n    rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n    flip?: null | 'v' | 'h';\n}\n\nexport const Icon = (\n    props: IconProps & React.HTMLAttributes<HTMLSpanElement>\n) => {\n    const {\n        size,\n        themeColor,\n        name,\n        rotate,\n        flip,\n        ...other\n    } = props;\n\n    if (!name) {\n        return <></>;\n    }\n\n    return (\n        <span\n            {...other}\n            className={classNames(\n                props.className,\n                ICON_CLASSNAME,\n                optionClassNames(ICON_CLASSNAME, {\n                    size,\n                    themeColor,\n                }),\n                {\n                    [`k-i-${name}`]: name,\n                    [`k-rotate-${rotate}`]: rotate,\n                    [`k-flip-${flip}`]: flip,\n                }\n            )}\n        />\n    );\n};\n\nIcon.states = states;\nIcon.options = options;\nIcon.className = ICON_CLASSNAME;\nIcon.defaultProps = defaultProps;\n\nexport default Icon;\n", "import { Icon } from '../icon';\nimport { classNames, optionClassNames, stateClassNames, States, Size, Roundness, FillMode, ThemeColor } from '../utils';\n\nexport const BUTTON_CLASSNAME = `k-button`;\n\nconst states = [\n    States.hover,\n    States.focus,\n    States.active,\n    States.selected,\n    States.disabled\n];\n\nconst options = {\n    size: [ Size.small, Size.medium, Size.large ],\n    rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],\n    fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link ],\n    themeColor: [\n        ThemeColor.base,\n        ThemeColor.primary,\n        ThemeColor.secondary,\n        ThemeColor.tertiary,\n        ThemeColor.success,\n        ThemeColor.warning,\n        ThemeColor.error,\n        ThemeColor.info,\n        ThemeColor.light,\n        ThemeColor.dark,\n        ThemeColor.inverse\n    ],\n};\n\nexport type KendoButtonOptions = {\n  size?: (typeof options.size)[number] | null;\n  rounded?: (typeof options.rounded)[number] | null;\n  fillMode?: (typeof options.fillMode)[number] | null;\n  themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoButtonProps = KendoButtonOptions & {\n  icon?: string;\n  text?: string;\n  iconClassName?: string;\n  showArrow?: boolean;\n  arrowIconName?: string;\n};\n\nexport type KendoButtonState = { [K in (typeof states)[number]]?: boolean };\n\nconst defaultProps = {\n    size: Size.medium,\n    rounded: Roundness.medium,\n    fillMode: FillMode.solid,\n    themeColor: ThemeColor.base,\n    showArrow: false,\n    arrowIconName: \"arrow-s\"\n};\n\nexport const Button = (\n    props: KendoButtonProps &\n        KendoButtonState &\n        React.HTMLAttributes<HTMLButtonElement>\n) => {\n    const {\n        size = defaultProps.size,\n        rounded = defaultProps.rounded,\n        fillMode = defaultProps.fillMode,\n        themeColor = defaultProps.themeColor,\n        hover,\n        focus,\n        active,\n        selected,\n        disabled,\n        icon,\n        text,\n        iconClassName,\n        showArrow = defaultProps.showArrow,\n        arrowIconName = defaultProps.arrowIconName,\n        ...other\n    } = props;\n\n    const hasIcon = (icon !== undefined);\n    const hasChildren = props.children !== undefined;\n\n    return (\n        <button\n            {...other}\n            className={classNames(\n                props.className,\n                BUTTON_CLASSNAME,\n                optionClassNames(BUTTON_CLASSNAME, {\n                    size,\n                    rounded,\n                    fillMode,\n                    themeColor,\n                }),\n                stateClassNames(BUTTON_CLASSNAME, {\n                    hover,\n                    focus,\n                    active,\n                    disabled,\n                    selected,\n                }),\n                {\n                    ['k-icon-button']: !text && !hasChildren && hasIcon,\n                }\n            )}\n        >\n            {icon && (\n                <Icon\n                    className={classNames(iconClassName, 'k-button-icon')}\n                    name= {icon}\n                />\n            )}\n\n            {text\n                ?\n                <>\n                    {text && <span className=\"k-button-text\">{text}</span>}\n                    {props.children}\n                </>\n                : props.children && <span className=\"k-button-text\">{props.children}</span>\n            }\n\n            {showArrow && (<span className=\"k-menu-button-arrow k-button-arrow\"><Icon name= {arrowIconName} /></span>)}\n\n        </button>\n    );\n};\n\nButton.states = states;\nButton.options = options;\nButton.className = BUTTON_CLASSNAME;\nButton.defaultProps = defaultProps;\n\nexport default Button;\n"],
-  "mappings": "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",
-  "names": ["import_jsx_runtime", "states", "options", "defaultProps", "import_jsx_runtime", "ReactDOM"]
+  "sources": ["../../../src/slider/tests/slider-css-vars.tsx", "../../../src/utils/class-names.ts", "../../../src/utils/component-class-names.ts", "../../../src/utils/theme.ts", "../../../src/icon/icon.spec.tsx", "../../../src/button/button.spec.tsx", "../../../src/slider/slider.spec.tsx", "../../../src/slider/slider-tick.tsx"],
+  "sourcesContent": ["import ReactDOM from 'react-dom/client';\nimport { Slider, SliderTick } from '../../slider';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    .k-slider-horizontal {\n        width: 100%;\n    }\n    .k-slider-vertical {\n        height: 300px;\n    }\n\n    .k-slider {\n        --kendo-slider-start: 0;\n        --kendo-slider-end: 60;\n    }\n    .k-range-slider {\n        --kendo-slider-start: 20;\n        --kendo-slider-end: 60;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span>Single</span>\n            <span>Range</span>\n            <span>Single RTL</span>\n            <span>Range RTL</span>\n\n\n            <section>\n                <Slider>\n                    <SliderTick label large text=\"0\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"25\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"50\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"75\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"100\"/>\n                </Slider>\n            </section>\n            <section>\n                <Slider type=\"range\">\n                    <SliderTick label large text=\"0\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"25\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"50\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"75\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"100\"/>\n                </Slider>\n            </section>\n            <section dir=\"rtl\">\n                <Slider dir=\"rtl\">\n                    <SliderTick label large text=\"0\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"25\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"50\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"75\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"100\"/>\n                </Slider>\n            </section>\n            <section dir=\"rtl\">\n                <Slider type=\"range\" dir=\"rtl\">\n                    <SliderTick label large text=\"0\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"25\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"50\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"75\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"100\"/>\n                </Slider>\n            </section>\n\n\n            <section>\n                <Slider orientation=\"vertical\">\n                    <SliderTick label large text=\"0\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"25\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"50\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"75\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"100\"/>\n                </Slider>\n            </section>\n            <section>\n                <Slider type=\"range\" orientation=\"vertical\">\n                    <SliderTick label large text=\"0\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"25\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"50\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"75\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"100\"/>\n                </Slider>\n            </section>\n            <section dir=\"rtl\">\n                <Slider orientation=\"vertical\" dir=\"rtl\">\n                    <SliderTick label large text=\"0\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"25\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"50\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"75\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"100\"/>\n                </Slider>\n            </section>\n            <section dir=\"rtl\">\n                <Slider type=\"range\" orientation=\"vertical\" dir=\"rtl\">\n                    <SliderTick label large text=\"0\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"25\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"50\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"75\"/>\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick />\n                    <SliderTick label large text=\"100\"/>\n                </Slider>\n            </section>\n\n        </div>\n    </>\n);\n", "/* eslint-disable arrow-body-style */\nexport const classNames = (...args: any[]): string => {\n    return args\n        .filter((arg) => arg !== true && Boolean(arg))\n        .map((arg: any) => {\n            // eslint-disable-next-line no-nested-ternary\n            return Array.isArray(arg)\n                ? classNames(...arg)\n                : typeof arg === 'object'\n                    ? Object.keys(arg)\n                        .map((key, idx) => arg[idx] || (arg[key] && key) || null)\n                        .filter((el) => el !== null)\n                        .join(' ')\n                    : arg;\n        })\n        .filter((arg) => Boolean(arg))\n        .join(' ');\n};\n", "/* eslint-disable arrow-body-style */\nimport { classNames } from './class-names';\n\nexport const optionClassNames = (componentClassName: string, props: any) => {\n    return classNames(\n        {\n            [`${componentClassName}-xs`]: props.size === \"xsmall\",\n            [`${componentClassName}-sm`]: props.size === \"small\",\n            [`${componentClassName}-md`]: props.size === \"medium\",\n            [`${componentClassName}-lg`]: props.size === \"large\",\n            [`${componentClassName}-xl`]: props.size === \"xlarge\",\n            [`${componentClassName}-xxl`]: props.size === \"xxlarge\",\n            [`${componentClassName}-xxxl`]: props.size === \"xxxlarge\"\n        },\n        {\n            [`${componentClassName}-${props.fillMode}`]: props.fillMode,\n        },\n        {\n            [`${componentClassName}-${props.fillMode}-${props.themeColor}`]:\n            props.fillMode && props.themeColor,\n        },\n        {\n            [`${componentClassName}-${props.themeColor}`]:\n            props.themeColor && props.fillMode === undefined,\n        },\n        {\n            'k-rounded-sm': props.rounded === \"small\",\n            'k-rounded-md': props.rounded === \"medium\",\n            'k-rounded-lg': props.rounded === \"large\",\n            'k-rounded-full': props.rounded === \"full\",\n        }\n    );\n};\n\nexport const stateClassNames = (_componentClassName: string | undefined, props: any) => {\n    return classNames({\n        'k-valid': props.valid,\n        'k-invalid': props.invalid,\n        'k-hover': props.hover,\n        'k-focus': props.focus,\n        'k-checked': props.checked,\n        'k-active': props.active,\n        'k-selected': props.selected,\n        'k-disabled': props.disabled,\n        'k-indeterminate': props.indeterminate && !props.checked,\n        'k-loading': props.loading,\n        'k-empty': props.empty,\n        'k-readonly': props.readonly,\n    });\n};\n", "export const Size = {\n    'xsmall': 'xsmall',\n    'small': 'small',\n    'medium': 'medium',\n    'large': 'large',\n    'xlarge': 'xlarge',\n    'xxlarge': 'xxlarge',\n    'xxxlarge': 'xxxlarge',\n} as const;\n\nexport const Roundness = {\n    'small': 'small',\n    'medium': 'medium',\n    'large': 'large',\n    'full': 'full',\n} as const;\n\nexport const FillMode = {\n    'solid': 'solid',\n    'flat': 'flat',\n    'outline': 'outline',\n    'clear': 'clear',\n    'link': 'link',\n} as const;\n\nexport const ThemeColor = {\n    'inherit': 'inherit',\n    'base': 'base',\n    'primary': 'primary',\n    'secondary': 'secondary',\n    'tertiary': 'tertiary',\n    'info': 'info',\n    'success': 'success',\n    'warning': 'warning',\n    'error': 'error',\n    'dark': 'dark',\n    'light': 'light',\n    'inverse': 'inverse',\n} as const;\n\nexport const States = {\n    'open': 'open',\n    'hover': 'hover',\n    'focus': 'focus',\n    'active': 'active',\n    'selected': 'selected',\n    'disabled': 'disabled',\n    'valid': 'valid',\n    'invalid': 'invalid',\n    'loading': 'loading',\n    'required': 'required',\n    'empty': 'empty',\n    'indeterminate': 'indeterminate',\n    'checked': 'checked',\n    'readonly': 'readonly',\n} as const;\n\nexport const kendoThemeMaps = {\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} as const;\n", "import { classNames, optionClassNames, Size, ThemeColor } from '../utils';\n\nexport const ICON_CLASSNAME = `k-icon`;\n\nconst states = [];\n\nconst options = {\n    size: [ Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge ],\n    themeColor: [\n        ThemeColor.base,\n        ThemeColor.primary,\n        ThemeColor.secondary,\n        ThemeColor.tertiary,\n        ThemeColor.success,\n        ThemeColor.warning,\n        ThemeColor.error,\n        ThemeColor.info,\n        ThemeColor.light,\n        ThemeColor.dark,\n    ],\n};\n\nconst defaultProps = {};\n\nexport type IconState = { [K in (typeof states)[number]]?: boolean };\n\nexport type IconOptions = {\n    size?: (typeof options.size)[number];\n    themeColor?: (typeof options.themeColor)[number];\n};\n\nexport type IconProps = IconOptions & {\n    name?: string;\n    rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n    flip?: null | 'v' | 'h';\n}\n\nexport const Icon = (\n    props: IconProps & React.HTMLAttributes<HTMLSpanElement>\n) => {\n    const {\n        size,\n        themeColor,\n        name,\n        rotate,\n        flip,\n        ...other\n    } = props;\n\n    if (!name) {\n        return <></>;\n    }\n\n    return (\n        <span\n            {...other}\n            className={classNames(\n                props.className,\n                ICON_CLASSNAME,\n                optionClassNames(ICON_CLASSNAME, {\n                    size,\n                    themeColor,\n                }),\n                {\n                    [`k-i-${name}`]: name,\n                    [`k-rotate-${rotate}`]: rotate,\n                    [`k-flip-${flip}`]: flip,\n                }\n            )}\n        />\n    );\n};\n\nIcon.states = states;\nIcon.options = options;\nIcon.className = ICON_CLASSNAME;\nIcon.defaultProps = defaultProps;\n\nexport default Icon;\n", "import { Icon } from '../icon';\nimport { classNames, optionClassNames, stateClassNames, States, Size, Roundness, FillMode, ThemeColor } from '../utils';\n\nexport const BUTTON_CLASSNAME = `k-button`;\n\nconst states = [\n    States.hover,\n    States.focus,\n    States.active,\n    States.selected,\n    States.disabled\n];\n\nconst options = {\n    size: [ Size.small, Size.medium, Size.large ],\n    rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],\n    fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link ],\n    themeColor: [\n        ThemeColor.base,\n        ThemeColor.primary,\n        ThemeColor.secondary,\n        ThemeColor.tertiary,\n        ThemeColor.success,\n        ThemeColor.warning,\n        ThemeColor.error,\n        ThemeColor.info,\n        ThemeColor.light,\n        ThemeColor.dark,\n        ThemeColor.inverse\n    ],\n};\n\nexport type KendoButtonOptions = {\n  size?: (typeof options.size)[number] | null;\n  rounded?: (typeof options.rounded)[number] | null;\n  fillMode?: (typeof options.fillMode)[number] | null;\n  themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoButtonProps = KendoButtonOptions & {\n  icon?: string;\n  text?: string;\n  iconClassName?: string;\n  showArrow?: boolean;\n  arrowIconName?: string;\n};\n\nexport type KendoButtonState = { [K in (typeof states)[number]]?: boolean };\n\nconst defaultProps = {\n    size: Size.medium,\n    rounded: Roundness.medium,\n    fillMode: FillMode.solid,\n    themeColor: ThemeColor.base,\n    showArrow: false,\n    arrowIconName: \"arrow-s\"\n};\n\nexport const Button = (\n    props: KendoButtonProps &\n        KendoButtonState &\n        React.HTMLAttributes<HTMLButtonElement>\n) => {\n    const {\n        size = defaultProps.size,\n        rounded = defaultProps.rounded,\n        fillMode = defaultProps.fillMode,\n        themeColor = defaultProps.themeColor,\n        hover,\n        focus,\n        active,\n        selected,\n        disabled,\n        icon,\n        text,\n        iconClassName,\n        showArrow = defaultProps.showArrow,\n        arrowIconName = defaultProps.arrowIconName,\n        ...other\n    } = props;\n\n    const hasIcon = (icon !== undefined);\n    const hasChildren = props.children !== undefined;\n\n    return (\n        <button\n            {...other}\n            className={classNames(\n                props.className,\n                BUTTON_CLASSNAME,\n                optionClassNames(BUTTON_CLASSNAME, {\n                    size,\n                    rounded,\n                    fillMode,\n                    themeColor,\n                }),\n                stateClassNames(BUTTON_CLASSNAME, {\n                    hover,\n                    focus,\n                    active,\n                    disabled,\n                    selected,\n                }),\n                {\n                    ['k-icon-button']: !text && !hasChildren && hasIcon,\n                }\n            )}\n        >\n            {icon && (\n                <Icon\n                    className={classNames(iconClassName, 'k-button-icon')}\n                    name= {icon}\n                />\n            )}\n\n            {text\n                ?\n                <>\n                    {text && <span className=\"k-button-text\">{text}</span>}\n                    {props.children}\n                </>\n                : props.children && <span className=\"k-button-text\">{props.children}</span>\n            }\n\n            {showArrow && (<span className=\"k-menu-button-arrow k-button-arrow\"><Icon name= {arrowIconName} /></span>)}\n\n        </button>\n    );\n};\n\nButton.states = states;\nButton.options = options;\nButton.className = BUTTON_CLASSNAME;\nButton.defaultProps = defaultProps;\n\nexport default Button;\n", "import { classNames, stateClassNames, States } from '../utils';\nimport { Button } from '../button';\n\nconst SLIDER_CLASSNAME = 'k-slider';\n\nconst states = [\n    States.hover,\n    States.focus,\n    States.active,\n    States.disabled,\n    States.readonly\n];\n\nconst options = {};\n\nexport type KendoSliderProps = {\n    type?: 'single' | 'range' | 'gradient',\n    orientation?: 'horizontal' | 'vertical',\n    dir?: 'ltr' | 'rtl',\n    handlePosition?: 'start' | 'end',\n    trackStyle?: React.CSSProperties\n};\n\nexport type KendoSliderState = { [K in (typeof states)[number]]?: boolean };\n\nconst defaultProps = {\n    type: 'single',\n    orientation: 'horizontal',\n    readonly: false,\n    disabled: false,\n    handlePosition: 'end'\n};\n\nexport const Slider = (\n    props: KendoSliderProps &\n        KendoSliderState &\n        React.HTMLAttributes<HTMLDivElement>\n) => {\n    const {\n        type = defaultProps.type,\n        orientation = defaultProps.orientation,\n        readonly = defaultProps.readonly,\n        disabled = defaultProps.disabled,\n        handlePosition = defaultProps.handlePosition,\n        hover,\n        focus,\n        active,\n        trackStyle,\n        dir\n    } = props;\n\n    let iconIncrease;\n    let iconDecrease;\n\n    if ( orientation === 'horizontal' ) {\n        iconIncrease = 'caret-alt-right';\n        iconDecrease = 'caret-alt-left';\n    } else if ( orientation === 'vertical' ) {\n        iconIncrease = 'caret-alt-up';\n        iconDecrease = 'caret-alt-down';\n    }\n\n    return (\n        <div className={classNames(\n            SLIDER_CLASSNAME,\n            props.className,\n            stateClassNames(SLIDER_CLASSNAME, {\n                readonly,\n                disabled\n            }),\n            {\n                [`k-slider-${orientation}`]: orientation,\n                'k-colorgradient-slider': type === 'gradient',\n                'k-range-slider': type === 'range'\n            }\n        )} dir={dir} >\n            { type !== 'gradient' && <Button className=\"k-button-decrease\" rounded=\"full\" icon={iconDecrease} /> }\n            <div className=\"k-slider-track-wrap\">\n                {\n                    type !== 'gradient' &&\n                        <ul className=\"k-reset k-slider-items\">\n                            {props.children}\n                        </ul>\n                }\n                <div className=\"k-slider-track\" style={trackStyle}>\n                    <div className=\"k-slider-selection\"></div>\n                    { type === 'range' &&\n\n                    <span className={classNames(\n                        'k-draghandle',\n                        'k-draghandle-start',\n                        stateClassNames(SLIDER_CLASSNAME, {\n                            hover,\n                            focus,\n                            active\n                        })\n                    )}></span> }\n\n                    <span className={classNames(\n                        'k-draghandle',\n                        `k-draghandle-${handlePosition}`,\n                        stateClassNames(SLIDER_CLASSNAME, {\n                            hover,\n                            focus,\n                            active\n                        })\n                    )}></span>\n                </div>\n            </div>\n            { type !== 'gradient' && <Button className=\"k-button-increase\" rounded=\"full\" icon={iconIncrease} /> }\n        </div>\n    );\n};\n\nSlider.states = states;\nSlider.options = options;\nSlider.className = SLIDER_CLASSNAME;\nSlider.defaultProps = defaultProps;\n\nexport default Slider;\n", "import { classNames } from '../utils';\n\nconst SLIDER_TICK_CLASSNAME = 'k-tick';\n\nconst states = [];\n\nconst options = {};\n\nexport type KendoSliderTickProps = {\n    style?: React.CSSProperties,\n    label?: boolean,\n    orientation?: null | 'horizontal' | 'vertical',\n    large?: boolean,\n    text?: string\n};\n\nconst defaultProps = {\n    label: false\n};\n\nexport const SliderTick = (\n    props: KendoSliderTickProps &\n        React.HTMLAttributes<HTMLLIElement>\n) => {\n    const {\n        style,\n        label = defaultProps.label,\n        orientation,\n        large,\n        text\n    } = props;\n\n    return (\n        <li className={classNames(\n            props.className,\n            SLIDER_TICK_CLASSNAME,\n            {\n                [`k-tick-${orientation}`]: orientation,\n                'k-tick-large': large\n            }\n        )} style={style} >\n            {label && <span className=\"k-label\">{text}</span>}\n        </li>\n    );\n};\n\nSliderTick.states = states;\nSliderTick.options = options;\nSliderTick.className = SLIDER_TICK_CLASSNAME;\nSliderTick.defaultProps = defaultProps;\n\nexport default SliderTick;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sBAAqB;;;ACCd,MAAM,aAAa,IAAI,SAAwB;AAClD,WAAO,KACF,OAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,GAAG,CAAC,EAC5C,IAAI,CAAC,QAAa;AAEf,aAAO,MAAM,QAAQ,GAAG,IAClB,WAAW,GAAG,GAAG,IACjB,OAAO,QAAQ,WACX,OAAO,KAAK,GAAG,EACZ,IAAI,CAAC,KAAK,QAAQ,IAAI,GAAG,KAAM,IAAI,GAAG,KAAK,OAAQ,IAAI,EACvD,OAAO,CAAC,OAAO,OAAO,IAAI,EAC1B,KAAK,GAAG,IACX;AAAA,IACd,CAAC,EACA,OAAO,CAAC,QAAQ,QAAQ,GAAG,CAAC,EAC5B,KAAK,GAAG;AAAA,EACjB;;;ACdO,MAAM,mBAAmB,CAAC,oBAA4B,UAAe;AACxE,WAAO;AAAA,MACH;AAAA,QACI,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,wBAAwB,GAAG,MAAM,SAAS;AAAA,QAC9C,CAAC,GAAG,yBAAyB,GAAG,MAAM,SAAS;AAAA,MACnD;AAAA,MACA;AAAA,QACI,CAAC,GAAG,sBAAsB,MAAM,UAAU,GAAG,MAAM;AAAA,MACvD;AAAA,MACA;AAAA,QACI,CAAC,GAAG,sBAAsB,MAAM,YAAY,MAAM,YAAY,GAC9D,MAAM,YAAY,MAAM;AAAA,MAC5B;AAAA,MACA;AAAA,QACI,CAAC,GAAG,sBAAsB,MAAM,YAAY,GAC5C,MAAM,cAAc,MAAM,aAAa;AAAA,MAC3C;AAAA,MACA;AAAA,QACI,gBAAgB,MAAM,YAAY;AAAA,QAClC,gBAAgB,MAAM,YAAY;AAAA,QAClC,gBAAgB,MAAM,YAAY;AAAA,QAClC,kBAAkB,MAAM,YAAY;AAAA,MACxC;AAAA,IACJ;AAAA,EACJ;AAEO,MAAM,kBAAkB,CAAC,qBAAyC,UAAe;AACpF,WAAO,WAAW;AAAA,MACd,WAAW,MAAM;AAAA,MACjB,aAAa,MAAM;AAAA,MACnB,WAAW,MAAM;AAAA,MACjB,WAAW,MAAM;AAAA,MACjB,aAAa,MAAM;AAAA,MACnB,YAAY,MAAM;AAAA,MAClB,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,MACpB,mBAAmB,MAAM,iBAAiB,CAAC,MAAM;AAAA,MACjD,aAAa,MAAM;AAAA,MACnB,WAAW,MAAM;AAAA,MACjB,cAAc,MAAM;AAAA,IACxB,CAAC;AAAA,EACL;;;ACjDO,MAAM,OAAO;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;AAEO,MAAM,YAAY;AAAA,IACrB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACZ;AAEO,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,EACZ;AAEO,MAAM,aAAa;AAAA,IACtB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EACf;AAEO,MAAM,SAAS;AAAA,IAClB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;;;ACLe;AAhDR,MAAM,iBAAiB;AAE9B,MAAM,SAAS,CAAC;AAEhB,MAAM,UAAU;AAAA,IACZ,MAAM,CAAE,KAAK,QAAQ,KAAK,OAAO,KAAK,QAAQ,KAAK,OAAO,KAAK,QAAQ,KAAK,SAAS,KAAK,QAAS;AAAA,IACnG,YAAY;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACf;AAAA,EACJ;AAEA,MAAM,eAAe,CAAC;AAef,MAAM,OAAO,CAChB,UACC;AACD,UAOI,YANA;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IA7CR,IA+CQ,IADG,kBACH,IADG;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIJ,QAAI,CAAC,MAAM;AACP,aAAO,2EAAE;AAAA,IACb;AAEA,WACI;AAAA,MAAC;AAAA,uCACO,QADP;AAAA,QAEG,WAAW;AAAA,UACP,MAAM;AAAA,UACN;AAAA,UACA,iBAAiB,gBAAgB;AAAA,YAC7B;AAAA,YACA;AAAA,UACJ,CAAC;AAAA,UACD;AAAA,YACI,CAAC,OAAO,MAAM,GAAG;AAAA,YACjB,CAAC,YAAY,QAAQ,GAAG;AAAA,YACxB,CAAC,UAAU,MAAM,GAAG;AAAA,UACxB;AAAA,QACJ;AAAA;AAAA,IACJ;AAAA,EAER;AAEA,OAAK,SAAS;AACd,OAAK,UAAU;AACf,OAAK,YAAY;AACjB,OAAK,eAAe;;;ACiCJ,MAAAA,sBAAA;AA1GT,MAAM,mBAAmB;AAEhC,MAAMC,UAAS;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AAEA,MAAMC,WAAU;AAAA,IACZ,MAAM,CAAE,KAAK,OAAO,KAAK,QAAQ,KAAK,KAAM;AAAA,IAC5C,SAAS,CAAE,UAAU,OAAO,UAAU,QAAQ,UAAU,OAAO,UAAU,IAAK;AAAA,IAC9E,UAAU,CAAE,SAAS,OAAO,SAAS,MAAM,SAAS,SAAS,SAAS,OAAO,SAAS,IAAK;AAAA,IAC3F,YAAY;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACf;AAAA,EACJ;AAmBA,MAAMC,gBAAe;AAAA,IACjB,MAAM,KAAK;AAAA,IACX,SAAS,UAAU;AAAA,IACnB,UAAU,SAAS;AAAA,IACnB,YAAY,WAAW;AAAA,IACvB,WAAW;AAAA,IACX,eAAe;AAAA,EACnB;AAEO,MAAM,SAAS,CAClB,UAGC;AACD,UAgBI,YAfA;AAAA,aAAOA,cAAa;AAAA,MACpB,UAAUA,cAAa;AAAA,MACvB,WAAWA,cAAa;AAAA,MACxB,aAAaA,cAAa;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAYA,cAAa;AAAA,MACzB,gBAAgBA,cAAa;AAAA,IA7ErC,IA+EQ,IADG,kBACH,IADG;AAAA,MAdH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIJ,UAAM,UAAW,SAAS;AAC1B,UAAM,cAAc,MAAM,aAAa;AAEvC,WACI;AAAA,MAAC;AAAA,uCACO,QADP;AAAA,QAEG,WAAW;AAAA,UACP,MAAM;AAAA,UACN;AAAA,UACA,iBAAiB,kBAAkB;AAAA,YAC/B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACJ,CAAC;AAAA,UACD,gBAAgB,kBAAkB;AAAA,YAC9B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACJ,CAAC;AAAA,UACD;AAAA,YACI,CAAC,eAAe,GAAG,CAAC,QAAQ,CAAC,eAAe;AAAA,UAChD;AAAA,QACJ;AAAA,QAEC;AAAA,kBACG;AAAA,YAAC;AAAA;AAAA,cACG,WAAW,WAAW,eAAe,eAAe;AAAA,cACpD,MAAO;AAAA;AAAA,UACX;AAAA,UAGH,OAEG,8EACK;AAAA,oBAAQ,6CAAC,UAAK,WAAU,iBAAiB,gBAAK;AAAA,YAC9C,MAAM;AAAA,aACX,IACE,MAAM,YAAY,6CAAC,UAAK,WAAU,iBAAiB,gBAAM,UAAS;AAAA,UAGvE,aAAc,6CAAC,UAAK,WAAU,sCAAqC,uDAAC,QAAK,MAAO,eAAe,GAAE;AAAA;AAAA;AAAA,IAEtG;AAAA,EAER;AAEA,SAAO,SAASF;AAChB,SAAO,UAAUC;AACjB,SAAO,YAAY;AACnB,SAAO,eAAeC;;;ACzDe,MAAAC,sBAAA;AAzErC,MAAM,mBAAmB;AAEzB,MAAMC,UAAS;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AAEA,MAAMC,WAAU,CAAC;AAYjB,MAAMC,gBAAe;AAAA,IACjB,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IACV,gBAAgB;AAAA,EACpB;AAEO,MAAM,SAAS,CAClB,UAGC;AACD,UAAM;AAAA,MACF,OAAOA,cAAa;AAAA,MACpB,cAAcA,cAAa;AAAA,MAC3B,WAAWA,cAAa;AAAA,MACxB,WAAWA,cAAa;AAAA,MACxB,iBAAiBA,cAAa;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AAEJ,QAAI;AACJ,QAAI;AAEJ,QAAK,gBAAgB,cAAe;AAChC,qBAAe;AACf,qBAAe;AAAA,IACnB,WAAY,gBAAgB,YAAa;AACrC,qBAAe;AACf,qBAAe;AAAA,IACnB;AAEA,WACI,8CAAC,SAAI,WAAW;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,MACN,gBAAgB,kBAAkB;AAAA,QAC9B;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,MACD;AAAA,QACI,CAAC,YAAY,aAAa,GAAG;AAAA,QAC7B,0BAA0B,SAAS;AAAA,QACnC,kBAAkB,SAAS;AAAA,MAC/B;AAAA,IACJ,GAAG,KACG;AAAA,eAAS,cAAc,6CAAC,UAAO,WAAU,qBAAoB,SAAQ,QAAO,MAAM,cAAc;AAAA,MAClG,8CAAC,SAAI,WAAU,uBAEP;AAAA,iBAAS,cACL,6CAAC,QAAG,WAAU,0BACT,gBAAM,UACX;AAAA,QAER,8CAAC,SAAI,WAAU,kBAAiB,OAAO,YACnC;AAAA,uDAAC,SAAI,WAAU,sBAAqB;AAAA,UAClC,SAAS,WAEX,6CAAC,UAAK,WAAW;AAAA,YACb;AAAA,YACA;AAAA,YACA,gBAAgB,kBAAkB;AAAA,cAC9B;AAAA,cACA;AAAA,cACA;AAAA,YACJ,CAAC;AAAA,UACL,GAAG;AAAA,UAEH,6CAAC,UAAK,WAAW;AAAA,YACb;AAAA,YACA,gBAAgB;AAAA,YAChB,gBAAgB,kBAAkB;AAAA,cAC9B;AAAA,cACA;AAAA,cACA;AAAA,YACJ,CAAC;AAAA,UACL,GAAG;AAAA,WACP;AAAA,SACJ;AAAA,MACE,SAAS,cAAc,6CAAC,UAAO,WAAU,qBAAoB,SAAQ,QAAO,MAAM,cAAc;AAAA,OACtG;AAAA,EAER;AAEA,SAAO,SAASF;AAChB,SAAO,UAAUC;AACjB,SAAO,YAAY;AACnB,SAAO,eAAeC;;;AC5EA,MAAAC,sBAAA;AAvCtB,MAAM,wBAAwB;AAE9B,MAAMC,UAAS,CAAC;AAEhB,MAAMC,WAAU,CAAC;AAUjB,MAAMC,gBAAe;AAAA,IACjB,OAAO;AAAA,EACX;AAEO,MAAM,aAAa,CACtB,UAEC;AACD,UAAM;AAAA,MACF,OAAAC;AAAA,MACA,QAAQD,cAAa;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AAEJ,WACI,6CAAC,QAAG,WAAW;AAAA,MACX,MAAM;AAAA,MACN;AAAA,MACA;AAAA,QACI,CAAC,UAAU,aAAa,GAAG;AAAA,QAC3B,gBAAgB;AAAA,MACpB;AAAA,IACJ,GAAG,OAAOC,QACL,mBAAS,6CAAC,UAAK,WAAU,WAAW,gBAAK,GAC9C;AAAA,EAER;AAEA,aAAW,SAASH;AACpB,aAAW,UAAUC;AACrB,aAAW,YAAY;AACvB,aAAW,eAAeC;;;APvBtB,MAAAE,sBAAA;AAvBJ,MAAM,OAAO,cAAAC,QAAS;AAAA,IAClB,SAAS,eAAe,KAAK;AAAA,EACjC;AAEA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBd,OAAK;AAAA,IACD,8EACI;AAAA,mDAAC,WAAO,iBAAM;AAAA,MACd,8CAAC,SAAI,IAAG,aAAY,WAAU,0BAE1B;AAAA,qDAAC,UAAK,oBAAM;AAAA,QACZ,6CAAC,UAAK,mBAAK;AAAA,QACX,6CAAC,UAAK,wBAAU;AAAA,QAChB,6CAAC,UAAK,uBAAS;AAAA,QAGf,6CAAC,aACG,wDAAC,UACG;AAAA,uDAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,KAAG;AAAA,UAChC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,OAAK;AAAA,WACtC,GACJ;AAAA,QACA,6CAAC,aACG,wDAAC,UAAO,MAAK,SACT;AAAA,uDAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,KAAG;AAAA,UAChC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,OAAK;AAAA,WACtC,GACJ;AAAA,QACA,6CAAC,aAAQ,KAAI,OACT,wDAAC,UAAO,KAAI,OACR;AAAA,uDAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,KAAG;AAAA,UAChC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,OAAK;AAAA,WACtC,GACJ;AAAA,QACA,6CAAC,aAAQ,KAAI,OACT,wDAAC,UAAO,MAAK,SAAQ,KAAI,OACrB;AAAA,uDAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,KAAG;AAAA,UAChC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,OAAK;AAAA,WACtC,GACJ;AAAA,QAGA,6CAAC,aACG,wDAAC,UAAO,aAAY,YAChB;AAAA,uDAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,KAAG;AAAA,UAChC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,OAAK;AAAA,WACtC,GACJ;AAAA,QACA,6CAAC,aACG,wDAAC,UAAO,MAAK,SAAQ,aAAY,YAC7B;AAAA,uDAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,KAAG;AAAA,UAChC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,OAAK;AAAA,WACtC,GACJ;AAAA,QACA,6CAAC,aAAQ,KAAI,OACT,wDAAC,UAAO,aAAY,YAAW,KAAI,OAC/B;AAAA,uDAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,KAAG;AAAA,UAChC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,OAAK;AAAA,WACtC,GACJ;AAAA,QACA,6CAAC,aAAQ,KAAI,OACT,wDAAC,UAAO,MAAK,SAAQ,aAAY,YAAW,KAAI,OAC5C;AAAA,uDAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,KAAG;AAAA,UAChC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,MAAI;AAAA,UACjC,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW;AAAA,UACZ,6CAAC,cAAW,OAAK,MAAC,OAAK,MAAC,MAAK,OAAK;AAAA,WACtC,GACJ;AAAA,SAEJ;AAAA,OACJ;AAAA,EACJ;",
+  "names": ["import_jsx_runtime", "states", "options", "defaultProps", "import_jsx_runtime", "states", "options", "defaultProps", "import_jsx_runtime", "states", "options", "defaultProps", "style", "import_jsx_runtime", "ReactDOM"]
 }

package/dist/slider/tests/slider-tick-absolute-position.js

@@ -344,8 +344,124 @@
   Button.className = BUTTON_CLASSNAME;
   Button.defaultProps = defaultProps2;
 
-  // src/slider/tests/slider-tick-absolute-position.tsx
+  // src/slider/slider.spec.tsx
   var import_jsx_runtime3 = __require("react/jsx-runtime");
+  var SLIDER_CLASSNAME = "k-slider";
+  var states3 = [
+    States.hover,
+    States.focus,
+    States.active,
+    States.disabled,
+    States.readonly
+  ];
+  var options3 = {};
+  var defaultProps3 = {
+    type: "single",
+    orientation: "horizontal",
+    readonly: false,
+    disabled: false,
+    handlePosition: "end"
+  };
+  var Slider = (props) => {
+    const {
+      type = defaultProps3.type,
+      orientation = defaultProps3.orientation,
+      readonly = defaultProps3.readonly,
+      disabled = defaultProps3.disabled,
+      handlePosition = defaultProps3.handlePosition,
+      hover,
+      focus,
+      active,
+      trackStyle,
+      dir
+    } = props;
+    let iconIncrease;
+    let iconDecrease;
+    if (orientation === "horizontal") {
+      iconIncrease = "caret-alt-right";
+      iconDecrease = "caret-alt-left";
+    } else if (orientation === "vertical") {
+      iconIncrease = "caret-alt-up";
+      iconDecrease = "caret-alt-down";
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: classNames(
+      SLIDER_CLASSNAME,
+      props.className,
+      stateClassNames(SLIDER_CLASSNAME, {
+        readonly,
+        disabled
+      }),
+      {
+        [`k-slider-${orientation}`]: orientation,
+        "k-colorgradient-slider": type === "gradient",
+        "k-range-slider": type === "range"
+      }
+    ), dir, children: [
+      type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
+        type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
+          type === "range" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: classNames(
+            "k-draghandle",
+            "k-draghandle-start",
+            stateClassNames(SLIDER_CLASSNAME, {
+              hover,
+              focus,
+              active
+            })
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: classNames(
+            "k-draghandle",
+            `k-draghandle-${handlePosition}`,
+            stateClassNames(SLIDER_CLASSNAME, {
+              hover,
+              focus,
+              active
+            })
+          ) })
+        ] })
+      ] }),
+      type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    ] });
+  };
+  Slider.states = states3;
+  Slider.options = options3;
+  Slider.className = SLIDER_CLASSNAME;
+  Slider.defaultProps = defaultProps3;
+
+  // src/slider/slider-tick.tsx
+  var import_jsx_runtime4 = __require("react/jsx-runtime");
+  var SLIDER_TICK_CLASSNAME = "k-tick";
+  var states4 = [];
+  var options4 = {};
+  var defaultProps4 = {
+    label: false
+  };
+  var SliderTick = (props) => {
+    const {
+      style: style2,
+      label = defaultProps4.label,
+      orientation,
+      large,
+      text
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: classNames(
+      props.className,
+      SLIDER_TICK_CLASSNAME,
+      {
+        [`k-tick-${orientation}`]: orientation,
+        "k-tick-large": large
+      }
+    ), style: style2, children: label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-label", children: text }) });
+  };
+  SliderTick.states = states4;
+  SliderTick.options = options4;
+  SliderTick.className = SLIDER_TICK_CLASSNAME;
+  SliderTick.defaultProps = defaultProps4;
+
+  // src/slider/tests/slider-tick-absolute-position.tsx
+  var import_jsx_runtime5 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
@@ -366,44 +482,47 @@
         --kendo-slider-start: 20;
         --kendo-slider-end: 60;
     }
+
+    .k-slider-items {
+        position: relative;
+    }
+
+    .k-slider-horizontal .k-slider-track .k-slider-selection {
+        width: 33%;
+    }
+
+    .k-slider-horizontal .k-slider-track .k-draghandle-end {
+        left: 33%;
+        z-index: 1;
+    }
+
+    .k-slider-vertical .k-slider-track .k-slider-selection {
+        bottom: 0;
+        height: 33%;
+    }
+
+    .k-slider-vertical .k-slider-track .k-draghandle-end {
+        bottom: 33%;
+        z-index: 1;
+    }
 `;
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: style }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-slider-horizontal", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", style: { position: "relative" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-horizontal", style: { zIndex: 1, position: "absolute", left: "0%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-horizontal", style: { zIndex: 1, position: "absolute", left: "33%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "33" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-horizontal", style: { zIndex: 1, position: "absolute", left: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-horizontal", style: { zIndex: 1, position: "absolute", left: "75%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-horizontal", style: { zIndex: 1, position: "absolute", left: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection", style: { width: "33%" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end", style: { left: "33%", zIndex: 1 } })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: style }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "horizontal", text: "0", style: { zIndex: 1, position: "absolute", left: "0%" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "horizontal", text: "33", style: { zIndex: 1, position: "absolute", left: "33%" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "horizontal", text: "50", style: { zIndex: 1, position: "absolute", left: "50%" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "horizontal", text: "75", style: { zIndex: 1, position: "absolute", left: "75%" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "horizontal", text: "100", style: { zIndex: 1, position: "absolute", left: "100%" } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-slider-vertical", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-down", rounded: "full", className: "k-button-decrease" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", style: { position: "relative" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-vertical", style: { zIndex: 1, position: "absolute", bottom: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-vertical", style: { zIndex: 1, position: "absolute", bottom: "75%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-vertical", style: { zIndex: 1, position: "absolute", bottom: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-vertical", style: { zIndex: 1, position: "absolute", bottom: "33%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "33" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large k-tick-vertical", style: { zIndex: 1, position: "absolute", bottom: "0" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection", style: { bottom: "0", height: "33%" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end", style: { bottom: "33%", zIndex: 1 } })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-up", rounded: "full", className: "k-button-increase" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { style: { justifySelf: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { orientation: "vertical", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "vertical", text: "0", style: { zIndex: 1, position: "absolute", bottom: "0%" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "vertical", text: "33", style: { zIndex: 1, position: "absolute", bottom: "33%" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "vertical", text: "50", style: { zIndex: 1, position: "absolute", bottom: "50%" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "vertical", text: "75", style: { zIndex: 1, position: "absolute", bottom: "75%" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, orientation: "vertical", text: "100", style: { zIndex: 1, position: "absolute", bottom: "100%" } })
         ] }) })
       ] })
     ] })