@progress/kendo-themes-html 7.1.0-dev.8 → 7.1.0-dev.9

package/dist/esm/toolbar/tests/toolbar-sizes.js

@@ -5147,7 +5147,9 @@ var defaultProps17 = {
   orientation: "horizontal",
   readonly: false,
   disabled: false,
-  handlePosition: "end"
+  handlePosition: "end",
+  showButtons: true,
+  showTicks: true
 };
 var Slider = (props) => {
   const {
@@ -5156,6 +5158,8 @@ var Slider = (props) => {
     readonly = defaultProps17.readonly,
     disabled = defaultProps17.disabled,
     handlePosition = defaultProps17.handlePosition,
+    showButtons = defaultProps17.showButtons,
+    showTicks = defaultProps17.showTicks,
     hover,
     focus,
     active,
@@ -5184,9 +5188,9 @@ var Slider = (props) => {
       "k-range-slider": type === "range"
     }
   ), dir, children: [
-    type !== "gradient" && /* @__PURE__ */ jsx32(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+    showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
     /* @__PURE__ */ jsxs9("div", { className: "k-slider-track-wrap", children: [
-      type !== "gradient" && /* @__PURE__ */ jsx32("ul", { className: "k-reset k-slider-items", children: props.children }),
+      showTicks && /* @__PURE__ */ jsx32("ul", { className: "k-reset k-slider-items", children: props.children }),
       /* @__PURE__ */ jsxs9("div", { className: "k-slider-track", style: trackStyle, children: [
         /* @__PURE__ */ jsx32("div", { className: "k-slider-selection" }),
         type === "range" && /* @__PURE__ */ jsx32("span", { className: classNames(
@@ -5209,7 +5213,7 @@ var Slider = (props) => {
         ) })
       ] })
     ] }),
-    type !== "gradient" && /* @__PURE__ */ jsx32(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
   ] });
 };
 Slider.states = states18;
@@ -5269,6 +5273,8 @@ var SliderGradientVertical = (props) => /* @__PURE__ */ jsx39(
   {
     type: "gradient",
     orientation: "vertical",
+    showButtons: false,
+    showTicks: false,
     children: /* @__PURE__ */ jsxs15(Fragment16, { children: [
       /* @__PURE__ */ jsx39(SliderTick, { label: true, large: true, text: "0" }),
       /* @__PURE__ */ jsx39(SliderTick, {}),

package/dist/esm/toolbar/tests/toolbar.js

@@ -5541,7 +5541,9 @@ var defaultProps22 = {
   orientation: "horizontal",
   readonly: false,
   disabled: false,
-  handlePosition: "end"
+  handlePosition: "end",
+  showButtons: true,
+  showTicks: true
 };
 var Slider = (props) => {
   const {
@@ -5550,6 +5552,8 @@ var Slider = (props) => {
     readonly = defaultProps22.readonly,
     disabled = defaultProps22.disabled,
     handlePosition = defaultProps22.handlePosition,
+    showButtons = defaultProps22.showButtons,
+    showTicks = defaultProps22.showTicks,
     hover,
     focus,
     active,
@@ -5578,9 +5582,9 @@ var Slider = (props) => {
       "k-range-slider": type === "range"
     }
   ), dir, children: [
-    type !== "gradient" && /* @__PURE__ */ jsx46(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+    showButtons && /* @__PURE__ */ jsx46(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
     /* @__PURE__ */ jsxs14("div", { className: "k-slider-track-wrap", children: [
-      type !== "gradient" && /* @__PURE__ */ jsx46("ul", { className: "k-reset k-slider-items", children: props.children }),
+      showTicks && /* @__PURE__ */ jsx46("ul", { className: "k-reset k-slider-items", children: props.children }),
       /* @__PURE__ */ jsxs14("div", { className: "k-slider-track", style: trackStyle, children: [
         /* @__PURE__ */ jsx46("div", { className: "k-slider-selection" }),
         type === "range" && /* @__PURE__ */ jsx46("span", { className: classNames(
@@ -5603,7 +5607,7 @@ var Slider = (props) => {
         ) })
       ] })
     ] }),
-    type !== "gradient" && /* @__PURE__ */ jsx46(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    showButtons && /* @__PURE__ */ jsx46(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
   ] });
 };
 Slider.states = states22;
@@ -5663,6 +5667,8 @@ var SliderGradientVertical = (props) => /* @__PURE__ */ jsx53(
   {
     type: "gradient",
     orientation: "vertical",
+    showButtons: false,
+    showTicks: false,
     children: /* @__PURE__ */ jsxs20(Fragment20, { children: [
       /* @__PURE__ */ jsx53(SliderTick, { label: true, large: true, text: "0" }),
       /* @__PURE__ */ jsx53(SliderTick, {}),

package/dist/esm/toolbar/toolbar-angular.spec.js

@@ -5147,7 +5147,9 @@ var defaultProps17 = {
   orientation: "horizontal",
   readonly: false,
   disabled: false,
-  handlePosition: "end"
+  handlePosition: "end",
+  showButtons: true,
+  showTicks: true
 };
 var Slider = (props) => {
   const {
@@ -5156,6 +5158,8 @@ var Slider = (props) => {
     readonly = defaultProps17.readonly,
     disabled = defaultProps17.disabled,
     handlePosition = defaultProps17.handlePosition,
+    showButtons = defaultProps17.showButtons,
+    showTicks = defaultProps17.showTicks,
     hover,
     focus,
     active,
@@ -5184,9 +5188,9 @@ var Slider = (props) => {
       "k-range-slider": type === "range"
     }
   ), dir, children: [
-    type !== "gradient" && /* @__PURE__ */ jsx32(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+    showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
     /* @__PURE__ */ jsxs9("div", { className: "k-slider-track-wrap", children: [
-      type !== "gradient" && /* @__PURE__ */ jsx32("ul", { className: "k-reset k-slider-items", children: props.children }),
+      showTicks && /* @__PURE__ */ jsx32("ul", { className: "k-reset k-slider-items", children: props.children }),
       /* @__PURE__ */ jsxs9("div", { className: "k-slider-track", style: trackStyle, children: [
         /* @__PURE__ */ jsx32("div", { className: "k-slider-selection" }),
         type === "range" && /* @__PURE__ */ jsx32("span", { className: classNames(
@@ -5209,7 +5213,7 @@ var Slider = (props) => {
         ) })
       ] })
     ] }),
-    type !== "gradient" && /* @__PURE__ */ jsx32(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
   ] });
 };
 Slider.states = states18;
@@ -5269,6 +5273,8 @@ var SliderGradientVertical = (props) => /* @__PURE__ */ jsx39(
   {
     type: "gradient",
     orientation: "vertical",
+    showButtons: false,
+    showTicks: false,
     children: /* @__PURE__ */ jsxs15(Fragment16, { children: [
       /* @__PURE__ */ jsx39(SliderTick, { label: true, large: true, text: "0" }),
       /* @__PURE__ */ jsx39(SliderTick, {}),

package/dist/esm/toolbar/toolbar.spec.js

@@ -5147,7 +5147,9 @@ var defaultProps17 = {
   orientation: "horizontal",
   readonly: false,
   disabled: false,
-  handlePosition: "end"
+  handlePosition: "end",
+  showButtons: true,
+  showTicks: true
 };
 var Slider = (props) => {
   const {
@@ -5156,6 +5158,8 @@ var Slider = (props) => {
     readonly = defaultProps17.readonly,
     disabled = defaultProps17.disabled,
     handlePosition = defaultProps17.handlePosition,
+    showButtons = defaultProps17.showButtons,
+    showTicks = defaultProps17.showTicks,
     hover,
     focus,
     active,
@@ -5184,9 +5188,9 @@ var Slider = (props) => {
       "k-range-slider": type === "range"
     }
   ), dir, children: [
-    type !== "gradient" && /* @__PURE__ */ jsx32(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+    showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
     /* @__PURE__ */ jsxs9("div", { className: "k-slider-track-wrap", children: [
-      type !== "gradient" && /* @__PURE__ */ jsx32("ul", { className: "k-reset k-slider-items", children: props.children }),
+      showTicks && /* @__PURE__ */ jsx32("ul", { className: "k-reset k-slider-items", children: props.children }),
       /* @__PURE__ */ jsxs9("div", { className: "k-slider-track", style: trackStyle, children: [
         /* @__PURE__ */ jsx32("div", { className: "k-slider-selection" }),
         type === "range" && /* @__PURE__ */ jsx32("span", { className: classNames(
@@ -5209,7 +5213,7 @@ var Slider = (props) => {
         ) })
       ] })
     ] }),
-    type !== "gradient" && /* @__PURE__ */ jsx32(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
   ] });
 };
 Slider.states = states18;
@@ -5269,6 +5273,8 @@ var SliderGradientVertical = (props) => /* @__PURE__ */ jsx39(
   {
     type: "gradient",
     orientation: "vertical",
+    showButtons: false,
+    showTicks: false,
     children: /* @__PURE__ */ jsxs15(Fragment16, { children: [
       /* @__PURE__ */ jsx39(SliderTick, { label: true, large: true, text: "0" }),
       /* @__PURE__ */ jsx39(SliderTick, {}),

package/dist/types/captcha/captcha.spec.d.ts

@@ -2,6 +2,7 @@ export declare const CAPTCHA_CLASSNAME = "k-captcha";
 declare const states: ("loading" | "invalid" | "disabled" | "valid")[];
 export type KendoCaptchaProps = {
     value?: string;
+    imgPath?: string;
 };
 export type KendoCaptchaState = {
     [K in (typeof states)[number]]?: boolean;
@@ -11,6 +12,8 @@ export declare const Captcha: {
     states: ("loading" | "invalid" | "disabled" | "valid")[];
     options: {};
     className: string;
-    defaultProps: {};
+    defaultProps: {
+        imgPath: string;
+    };
 };
 export default Captcha;

package/dist/types/dropzone/dropzone.spec.d.ts

@@ -1,5 +1,5 @@
 export declare const DROPZONE_CLASSNAME = "k-external-dropzone";
-declare const states: "hover"[];
+declare const states: ("disabled" | "hover")[];
 export type KendoDropzoneProps = {
     icon?: string;
     hint?: string | boolean;
@@ -10,7 +10,8 @@ export type KendoDropzoneState = {
 };
 export declare const Dropzone: {
     (props: KendoDropzoneProps & KendoDropzoneState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    states: "hover"[];
+    states: ("disabled" | "hover")[];
+    options: {};
     className: string;
     defaultProps: {
         icon: string;

package/dist/types/filemanager/file-info.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export type KendoFileInfoProps = {
+    selection: "single" | "multiple" | "none";
+    name?: string;
+    icon?: string;
+    fileType?: string;
+    fileSize?: string;
+    fileDateCreated?: string;
+    fileDateModified?: string;
+};
+export declare const FileInfo: {
+    (props: KendoFileInfoProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        name: string;
+        icon: string;
+    };
+};
+export default FileInfo;

package/dist/types/filemanager/file-preview.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+declare const options: {
+    size: ("small" | "medium" | "large" | "xsmall" | "xlarge" | "xxlarge" | "xxxlarge")[];
+};
+export type KendoFilePreviewOptions = {
+    size?: (typeof options.size)[number];
+};
+export type KendoFilePreviewProps = KendoFilePreviewOptions & {
+    name?: string;
+    icon?: string;
+};
+export declare const FilePreview: {
+    (props: KendoFilePreviewProps & React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {
+        size: ("small" | "medium" | "large" | "xsmall" | "xlarge" | "xxlarge" | "xxxlarge")[];
+    };
+    className: string;
+    defaultProps: {};
+};
+export default FilePreview;

package/dist/types/filemanager/filemanager-breadcrumb.spec.d.ts

@@ -0,0 +1,10 @@
+import { KendoBreadcrumbProps } from '../breadcrumb';
+export declare const FILEMANAGERBREADCRUMB_CLASSNAME = "k-filemanager-breadcrumb";
+export declare const FileManagerBreadcrumb: {
+    (props: KendoBreadcrumbProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default FileManagerBreadcrumb;

package/dist/types/filemanager/filemanager-drag-hint.d.ts

@@ -0,0 +1,14 @@
+export type KendoFileManagerDragHintProps = {
+    hint: string;
+    icon?: string;
+};
+export declare const FileManagerDragHint: {
+    (props: KendoFileManagerDragHintProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        icon: string;
+    };
+};
+export default FileManagerDragHint;

package/dist/types/filemanager/filemanager-listview.spec.d.ts

@@ -0,0 +1,10 @@
+import { KendoListViewProps } from '../listview';
+export declare const FILEMANAGERLISTVIEW_CLASSNAME = "k-filemanager-listview";
+export declare const FileManagerListView: {
+    (props: KendoListViewProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default FileManagerListView;

package/dist/types/filemanager/filemanager-toolbar.spec.d.ts

@@ -0,0 +1,10 @@
+import { KendoToolbarProps } from '../toolbar';
+export declare const FILEMANAGERTOOLBAR_CLASSNAME = "k-filemanager-toolbar";
+export declare const FileManagerToolbar: {
+    (props: KendoToolbarProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default FileManagerToolbar;

package/dist/types/filemanager/filemanager-treeview.spec.d.ts

@@ -0,0 +1,10 @@
+import { KendoTreeviewProps } from '../treeview';
+export declare const FILEMANAGERTREEVIEW_CLASSNAME = "k-filemanager-treeview";
+export declare const FileManagerTreeview: {
+    (props: KendoTreeviewProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default FileManagerTreeview;

package/dist/types/filemanager/filemanager.spec.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare const states: "disabled"[];
+export type KendoFileManagerProps = {
+    toolbar?: JSX.Element;
+};
+export type KendoFileManagerState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const FileManager: {
+    (props: KendoFileManagerProps & KendoFileManagerState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: "disabled"[];
+    options: {};
+    className: string;
+    defaultProps: {
+        toolbar: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default FileManager;

package/dist/types/filemanager/index.d.ts

@@ -0,0 +1,12 @@
+export * from './filemanager.spec';
+export * from './filemanager-breadcrumb.spec';
+export * from './filemanager-listview.spec';
+export * from './filemanager-treeview.spec';
+export * from './filemanager-toolbar.spec';
+export * from './filemanager-drag-hint';
+export * from './file-info';
+export * from './file-preview';
+export * from './templates/filemanager-normal';
+export * from './templates/filemanager-preview';
+export * from './templates/filemanager-grid';
+export * from './templates/filemanager-grid-preview';

package/dist/types/filemanager/templates/filemanager-grid-preview.d.ts

@@ -0,0 +1 @@
+export declare const FileManagerGridPreview: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/filemanager/templates/filemanager-grid.d.ts

@@ -0,0 +1 @@
+export declare const FileManagerGrid: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/filemanager/templates/filemanager-normal.d.ts

@@ -0,0 +1 @@
+export declare const FileManagerNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/filemanager/templates/filemanager-preview.d.ts

@@ -0,0 +1 @@
+export declare const FileManagerPreview: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -66,9 +66,11 @@ export * from './pager/index';
 export * from './treeview/index';
 export * from './card/index';
 export * from './expansion-panel/index';
+export * from './splitter/index';
 export * from './tilelayout/index';
 export * from './listview/index';
 export * from './filter/index';
+export * from './filemanager/index';
 export * from './chat/index';
 export * from './timeline/index';
 export * from './pdf-viewer/index';

package/dist/types/slider/slider.spec.d.ts

@@ -6,6 +6,8 @@ export type KendoSliderProps = {
     dir?: 'ltr' | 'rtl';
     handlePosition?: 'start' | 'end';
     trackStyle?: React.CSSProperties;
+    showButtons?: boolean;
+    showTicks?: boolean;
 };
 export type KendoSliderState = {
     [K in (typeof states)[number]]?: boolean;
@@ -21,6 +23,8 @@ export declare const Slider: {
         readonly: boolean;
         disabled: boolean;
         handlePosition: string;
+        showButtons: boolean;
+        showTicks: boolean;
     };
 };
 export default Slider;

package/dist/types/splitter/index.d.ts

@@ -0,0 +1,5 @@
+export * from './splitter.spec';
+export * from './splitter-pane';
+export * from './splitter-splitbar';
+export * from './templates/splitter-normal';
+export * from './templates/splitter-vertical';

package/dist/types/splitter/splitter-pane.d.ts

@@ -0,0 +1,22 @@
+declare const states: never[];
+export type KendoSplitterPaneProps = {
+    collapsible?: boolean;
+    scrollable?: boolean;
+    resizable?: boolean;
+    flexBasis?: string;
+    flex?: boolean;
+};
+export type KendoSplitterPaneState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const SplitterPane: {
+    (props: KendoSplitterPaneProps & KendoSplitterPaneState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        resizable: boolean;
+        flex: boolean;
+    };
+};
+export default SplitterPane;

package/dist/types/splitter/splitter-splitbar.d.ts

@@ -0,0 +1,21 @@
+declare const states: ("focus" | "hover")[];
+export type KendoSplitterSplitbarProps = {
+    orientation?: "horizontal" | "vertical";
+    draggable?: boolean;
+    collapsePrev?: boolean;
+    collapseNext?: boolean;
+};
+export type KendoSplitterSplitbarState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const SplitterSplitbar: {
+    (props: KendoSplitterSplitbarProps & KendoSplitterSplitbarState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: ("focus" | "hover")[];
+    options: {};
+    className: string;
+    defaultProps: {
+        orientation: string;
+        draggable: boolean;
+    };
+};
+export default SplitterSplitbar;

package/dist/types/splitter/splitter.spec.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export type KendoSplitterProps = {
+    orientation?: "vertical" | "horizontal";
+    children?: JSX.Element | JSX.Element[];
+};
+export declare const Splitter: {
+    (props: KendoSplitterProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    options: {};
+    className: string;
+    defaultProps: {
+        orientation: string;
+    };
+};
+export default Splitter;

package/dist/types/splitter/templates/splitter-normal.d.ts

@@ -0,0 +1 @@
+export declare const SplitterNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/splitter/templates/splitter-vertical.d.ts

@@ -0,0 +1 @@
+export declare const SplitterVertical: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/splitter/tests/splitter-splitbar-states.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/splitter/tests/splitter-splitbar.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/tooltip/tooltip.spec.d.ts

@@ -14,7 +14,7 @@ export type KendoTooltipProps = KendoTooltipOptions & {
     icon?: string;
 };
 export declare const Tooltip: {
-    (props: KendoTooltipProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    (props: KendoTooltipProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'content'>): import("react/jsx-runtime").JSX.Element;
     states: any[];
     options: {
         themeColor: ("error" | "inverse" | "success" | "dark" | "light" | "primary" | "secondary" | "tertiary" | "info" | "warning")[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "7.1.0-dev.8",
+  "version": "7.1.0-dev.9",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "f3ba688605a78aae03fb9e7a04664489f475ee81"
+  "gitHead": "4a6a0cb7085a4b032405585e25da25fd4383d7d7"
 }

package/src/captcha/captcha.spec.tsx

@@ -13,10 +13,14 @@ const states = [
 ];
 
 const options = {};
-const defaultProps = {};
+
+const defaultProps = {
+    imgPath: "/packages/html/assets/captcha.jpg",
+};
 
 export type KendoCaptchaProps = {
     value?: string;
+    imgPath?: string;
 };
 
 export type KendoCaptchaState = { [K in (typeof states)[number]]?: boolean };
@@ -32,6 +36,7 @@ export const Captcha = (
         invalid,
         loading,
         disabled,
+        imgPath = defaultProps.imgPath,
         ...other
     } = props;
 
@@ -52,7 +57,7 @@ export const Captcha = (
                 <div className="k-captcha-image">
                     <img
                         className={classNames({ 'k-hidden': loading })}
-                        src="/packages/html/assets/captcha.jpg"
+                        src={imgPath}
                     />
                     {loading && (
                         <SkeletonRectangle style={{ width: '100%', height: '100%' }} />

package/src/card/tests/card-horizontal.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../button';
 
 const styles = `
     .k-card {
-        height: 300px;
+        height: 250px;
     }
     .k-card-media {
         display: block;
@@ -17,7 +17,7 @@ const styles = `
 export default () =>(
     <>
         <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-4">
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
 
             <CardHorizontal />
 
@@ -96,6 +96,16 @@ export default () =>(
                 </ActionButtons>
             </CardHorizontal>
 
+            <CardHorizontal >
+                <CardBody title="Card Title" subtitle="Horizontal card - Action buttons with horizontal layout.">
+                    <p>Horizontal card - Action buttons with horizontal layout.</p>
+                </CardBody>
+                <ActionButtons className="k-card-actions">
+                    <Button fillMode="flat" themeColor="primary">Action 1</Button>
+                    <Button fillMode="flat" themeColor="primary">Action 2</Button>
+                </ActionButtons>
+            </CardHorizontal>
+
         </div>
     </>
 );

package/src/dropzone/dropzone.spec.tsx

@@ -4,9 +4,12 @@ import { classNames, stateClassNames, States } from '../misc';
 export const DROPZONE_CLASSNAME = `k-external-dropzone`;
 
 const states = [
+    States.disabled,
     States.hover,
 ];
 
+const options = {};
+
 export type KendoDropzoneProps = {
     icon?: string;
     hint?: string | boolean;
@@ -27,6 +30,7 @@ export const Dropzone = (
 ) => {
     const {
         hover,
+        disabled,
         icon = defaultProps.icon,
         hint = defaultProps.hint,
         note,
@@ -40,6 +44,7 @@ export const Dropzone = (
                 props.className,
                 DROPZONE_CLASSNAME,
                 stateClassNames(DROPZONE_CLASSNAME, {
+                    disabled,
                 }), {
                     "k-external-dropzone-hover": hover
                 }
@@ -55,6 +60,7 @@ export const Dropzone = (
 };
 
 Dropzone.states = states;
+Dropzone.options = options;
 Dropzone.className = DROPZONE_CLASSNAME;
 Dropzone.defaultProps = defaultProps;