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

package/dist/esm/pdf-viewer/tests/pdf-viewer-blank-page.js

@@ -8219,13 +8219,14 @@ var states54 = [
 ];
 var defaultProps48 = {
   icon: "upload",
-  note: "Only JPEG, PNG and SVG files are allowed."
+  hint: "Drag and drop files here to upload"
 };
 var Dropzone = (props) => {
   const {
     hover,
     icon = defaultProps48.icon,
-    note = defaultProps48.note,
+    hint = defaultProps48.hint,
+    note,
     ...other
   } = props;
   return /* @__PURE__ */ jsx135(
@@ -8242,19 +8243,25 @@ var Dropzone = (props) => {
       ),
       children: /* @__PURE__ */ jsxs58("div", { className: "k-dropzone-inner", children: [
         icon && /* @__PURE__ */ jsx135(Icon, { icon, className: "k-dropzone-icon", size: "xxxlarge" }),
-        /* @__PURE__ */ jsx135("span", { className: "k-dropzone-hint", children: "Drag and drop files here to upload" }),
-        note && /* @__PURE__ */ jsxs58("span", { className: "k-dropzone-note", children: [
-          " ",
-          note,
-          " "
-        ] })
+        hint && /* @__PURE__ */ jsx135("span", { className: "k-dropzone-hint", children: hint }),
+        note && /* @__PURE__ */ jsx135("span", { className: "k-dropzone-note", children: note })
       ] })
     }
   );
 };
+Dropzone.states = states54;
+Dropzone.className = DROPZONE_CLASSNAME;
+Dropzone.defaultProps = defaultProps48;
+
+// src/dropzone/templates/dropzone-normal.tsx
+import { jsx as jsx136 } from "react/jsx-runtime";
+var DropzoneNormal = (props) => /* @__PURE__ */ jsx136(Dropzone, { ...props });
+
+// src/dropzone/templates/dropzone-with-note.tsx
+import { jsx as jsx137 } from "react/jsx-runtime";
 
 // src/pdf-viewer/tests/pdf-viewer-blank-page.tsx
-import { Fragment as Fragment35, jsx as jsx136, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx138, jsxs as jsxs59 } from "react/jsx-runtime";
 var styles = `
     #test-area .k-pdf-viewer {
         height: 600px;
@@ -8264,18 +8271,18 @@ var styles = `
     }
 `;
 var pdf_viewer_blank_page_default = () => /* @__PURE__ */ jsxs59(Fragment35, { children: [
-  /* @__PURE__ */ jsx136("style", { children: styles }),
-  /* @__PURE__ */ jsx136("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: /* @__PURE__ */ jsxs59("div", { className: "k-widget k-pdf-viewer", children: [
+  /* @__PURE__ */ jsx138("style", { children: styles }),
+  /* @__PURE__ */ jsx138("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: /* @__PURE__ */ jsxs59("div", { className: "k-widget k-pdf-viewer", children: [
     /* @__PURE__ */ jsxs59(Toolbar, { resizable: true, children: [
-      /* @__PURE__ */ jsx136(Pager, { type: "input", pageSizes: false, refresh: false, info: false }),
-      /* @__PURE__ */ jsx136("span", { className: "k-spacer" }),
-      /* @__PURE__ */ jsx136(Button, { fillMode: "flat", icon: "file-pdf" }),
-      /* @__PURE__ */ jsx136(Button, { fillMode: "flat", icon: "print" }),
-      /* @__PURE__ */ jsx136(Button, { fillMode: "flat", icon: "fullscreen" })
+      /* @__PURE__ */ jsx138(Pager, { type: "input", pageSizes: false, refresh: false, info: false }),
+      /* @__PURE__ */ jsx138("span", { className: "k-spacer" }),
+      /* @__PURE__ */ jsx138(Button, { fillMode: "flat", icon: "file-pdf" }),
+      /* @__PURE__ */ jsx138(Button, { fillMode: "flat", icon: "print" }),
+      /* @__PURE__ */ jsx138(Button, { fillMode: "flat", icon: "fullscreen" })
     ] }),
-    /* @__PURE__ */ jsx136("div", { className: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select", children: /* @__PURE__ */ jsx136("div", { className: "k-pdf-viewer-pages", children: /* @__PURE__ */ jsxs59("div", { className: "k-page k-blank-page", children: [
-      /* @__PURE__ */ jsx136(Dropzone, { note: false }),
-      /* @__PURE__ */ jsx136(UploadNormal, { empty: true, status: "upload" })
+    /* @__PURE__ */ jsx138("div", { className: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select", children: /* @__PURE__ */ jsx138("div", { className: "k-pdf-viewer-pages", children: /* @__PURE__ */ jsxs59("div", { className: "k-page k-blank-page", children: [
+      /* @__PURE__ */ jsx138(DropzoneNormal, {}),
+      /* @__PURE__ */ jsx138(UploadNormal, { empty: true, status: "upload" })
     ] }) }) })
   ] }) })
 ] });

package/dist/esm/spreadsheet/tests/spreadsheet-file-dialogs.js

@@ -6300,13 +6300,14 @@ var states35 = [
 ];
 var defaultProps30 = {
   icon: "upload",
-  note: "Only JPEG, PNG and SVG files are allowed."
+  hint: "Drag and drop files here to upload"
 };
 var Dropzone = (props) => {
   const {
     hover,
     icon = defaultProps30.icon,
-    note = defaultProps30.note,
+    hint = defaultProps30.hint,
+    note,
     ...other
   } = props;
   return /* @__PURE__ */ jsx82(
@@ -6323,19 +6324,25 @@ var Dropzone = (props) => {
       ),
       children: /* @__PURE__ */ jsxs40("div", { className: "k-dropzone-inner", children: [
         icon && /* @__PURE__ */ jsx82(Icon, { icon, className: "k-dropzone-icon", size: "xxxlarge" }),
-        /* @__PURE__ */ jsx82("span", { className: "k-dropzone-hint", children: "Drag and drop files here to upload" }),
-        note && /* @__PURE__ */ jsxs40("span", { className: "k-dropzone-note", children: [
-          " ",
-          note,
-          " "
-        ] })
+        hint && /* @__PURE__ */ jsx82("span", { className: "k-dropzone-hint", children: hint }),
+        note && /* @__PURE__ */ jsx82("span", { className: "k-dropzone-note", children: note })
       ] })
     }
   );
 };
+Dropzone.states = states35;
+Dropzone.className = DROPZONE_CLASSNAME;
+Dropzone.defaultProps = defaultProps30;
+
+// src/dropzone/templates/dropzone-normal.tsx
+import { jsx as jsx83 } from "react/jsx-runtime";
+var DropzoneNormal = (props) => /* @__PURE__ */ jsx83(Dropzone, { ...props });
+
+// src/dropzone/templates/dropzone-with-note.tsx
+import { jsx as jsx84 } from "react/jsx-runtime";
 
 // src/spreadsheet/tests/spreadsheet-file-dialogs.tsx
-import { Fragment as Fragment32, jsx as jsx83, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx85, jsxs as jsxs41 } from "react/jsx-runtime";
 var style = `
     .k-window {
         min-width: 400px;
@@ -6343,25 +6350,25 @@ var style = `
     }
 `;
 var spreadsheet_file_dialogs_default = () => /* @__PURE__ */ jsxs41(Fragment32, { children: [
-  /* @__PURE__ */ jsx83("style", { children: style }),
+  /* @__PURE__ */ jsx85("style", { children: style }),
   /* @__PURE__ */ jsxs41("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx83("section", { children: /* @__PURE__ */ jsx83(WindowNormal, { title: "Create new file", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "stretched", actionButtons: /* @__PURE__ */ jsxs41(Fragment32, { children: [
-      /* @__PURE__ */ jsx83(Button, { themeColor: "primary", children: "Create new file" }),
-      /* @__PURE__ */ jsx83(Button, { children: "Cancel" })
-    ] }), children: /* @__PURE__ */ jsx83("p", { children: "Are you sure you want to close this file without saving it and create a new one?" }) }) }),
-    /* @__PURE__ */ jsx83("section", { children: /* @__PURE__ */ jsx83(WindowNormal, { title: "Save", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs41(Fragment32, { children: [
-      /* @__PURE__ */ jsx83(Button, { themeColor: "primary", children: "Save" }),
-      /* @__PURE__ */ jsx83(Button, { children: "Cancel" })
+    /* @__PURE__ */ jsx85("section", { children: /* @__PURE__ */ jsx85(WindowNormal, { title: "Create new file", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "stretched", actionButtons: /* @__PURE__ */ jsxs41(Fragment32, { children: [
+      /* @__PURE__ */ jsx85(Button, { themeColor: "primary", children: "Create new file" }),
+      /* @__PURE__ */ jsx85(Button, { children: "Cancel" })
+    ] }), children: /* @__PURE__ */ jsx85("p", { children: "Are you sure you want to close this file without saving it and create a new one?" }) }) }),
+    /* @__PURE__ */ jsx85("section", { children: /* @__PURE__ */ jsx85(WindowNormal, { title: "Save", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs41(Fragment32, { children: [
+      /* @__PURE__ */ jsx85(Button, { themeColor: "primary", children: "Save" }),
+      /* @__PURE__ */ jsx85(Button, { children: "Cancel" })
     ] }), children: /* @__PURE__ */ jsxs41(FormNormal, { formButtons: null, children: [
-      /* @__PURE__ */ jsx83(FormField, { label: "File name", editor: /* @__PURE__ */ jsx83(Textbox, { placeholder: "Workbook" }) }),
-      /* @__PURE__ */ jsx83(FormField, { label: "Save as type", editor: /* @__PURE__ */ jsx83(DropdownList, { placeholder: "Excel Workbook (.xlsx)" }) })
+      /* @__PURE__ */ jsx85(FormField, { label: "File name", editor: /* @__PURE__ */ jsx85(Textbox, { placeholder: "Workbook" }) }),
+      /* @__PURE__ */ jsx85(FormField, { label: "Save as type", editor: /* @__PURE__ */ jsx85(DropdownList, { placeholder: "Excel Workbook (.xlsx)" }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx83("section", { children: /* @__PURE__ */ jsxs41(WindowNormal, { title: "Open file", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs41(Fragment32, { children: [
-      /* @__PURE__ */ jsx83(Button, { themeColor: "primary", children: "Open" }),
-      /* @__PURE__ */ jsx83(Button, { children: "Cancel" })
+    /* @__PURE__ */ jsx85("section", { children: /* @__PURE__ */ jsxs41(WindowNormal, { title: "Open file", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs41(Fragment32, { children: [
+      /* @__PURE__ */ jsx85(Button, { themeColor: "primary", children: "Open" }),
+      /* @__PURE__ */ jsx85(Button, { children: "Cancel" })
     ] }), children: [
-      /* @__PURE__ */ jsx83(Dropzone, { note: false }),
-      /* @__PURE__ */ jsx83(UploadNormal, { status: "upload" })
+      /* @__PURE__ */ jsx85(DropzoneNormal, {}),
+      /* @__PURE__ */ jsx85(UploadNormal, { status: "upload" })
     ] }) })
   ] })
 ] });

package/dist/esm/spreadsheet/tests/spreadsheet-insert-dialogs.js

@@ -6374,13 +6374,14 @@ var states36 = [
 ];
 var defaultProps31 = {
   icon: "upload",
-  note: "Only JPEG, PNG and SVG files are allowed."
+  hint: "Drag and drop files here to upload"
 };
 var Dropzone = (props) => {
   const {
     hover,
     icon = defaultProps31.icon,
-    note = defaultProps31.note,
+    hint = defaultProps31.hint,
+    note,
     ...other
   } = props;
   return /* @__PURE__ */ jsx84(
@@ -6397,19 +6398,31 @@ var Dropzone = (props) => {
       ),
       children: /* @__PURE__ */ jsxs40("div", { className: "k-dropzone-inner", children: [
         icon && /* @__PURE__ */ jsx84(Icon, { icon, className: "k-dropzone-icon", size: "xxxlarge" }),
-        /* @__PURE__ */ jsx84("span", { className: "k-dropzone-hint", children: "Drag and drop files here to upload" }),
-        note && /* @__PURE__ */ jsxs40("span", { className: "k-dropzone-note", children: [
-          " ",
-          note,
-          " "
-        ] })
+        hint && /* @__PURE__ */ jsx84("span", { className: "k-dropzone-hint", children: hint }),
+        note && /* @__PURE__ */ jsx84("span", { className: "k-dropzone-note", children: note })
       ] })
     }
   );
 };
+Dropzone.states = states36;
+Dropzone.className = DROPZONE_CLASSNAME;
+Dropzone.defaultProps = defaultProps31;
+
+// src/dropzone/templates/dropzone-normal.tsx
+import { jsx as jsx85 } from "react/jsx-runtime";
+
+// src/dropzone/templates/dropzone-with-note.tsx
+import { jsx as jsx86 } from "react/jsx-runtime";
+var DropzoneWithNote = (props) => /* @__PURE__ */ jsx86(
+  Dropzone,
+  {
+    note: "Only JPEG, PNG and SVG files are allowed.",
+    ...props
+  }
+);
 
 // src/listbox/listbox.spec.tsx
-import { jsx as jsx85, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs41 } from "react/jsx-runtime";
 var LISTBOX_CLASSNAME = `k-listbox`;
 var states37 = [
   States.disabled
@@ -6450,7 +6463,7 @@ var ListBox = (props) => {
         }
       ),
       children: [
-        actions && /* @__PURE__ */ jsx85("div", { className: "k-listbox-actions", children: actions.map((action) => {
+        actions && /* @__PURE__ */ jsx87("div", { className: "k-listbox-actions", children: actions.map((action) => {
           const actionsIconMap = {
             "left": dir !== "rtl" ? "caret-alt-left" : "caret-alt-right",
             "right": dir !== "rtl" ? "caret-alt-right" : "caret-alt-left",
@@ -6460,12 +6473,12 @@ var ListBox = (props) => {
             "down": "caret-alt-down",
             "x": "x"
           };
-          return /* @__PURE__ */ jsx85(Button, { icon: actionsIconMap[action], size });
+          return /* @__PURE__ */ jsx87(Button, { icon: actionsIconMap[action], size });
         }) }),
-        /* @__PURE__ */ jsx85("div", { className: classNames(
+        /* @__PURE__ */ jsx87("div", { className: classNames(
           "k-list-scroller",
           "k-selectable"
-        ), children: /* @__PURE__ */ jsx85(list_spec_default, { size, children }) })
+        ), children: /* @__PURE__ */ jsx87(list_spec_default, { size, children }) })
       ]
     }
   );
@@ -6476,10 +6489,10 @@ ListBox.className = LISTBOX_CLASSNAME;
 ListBox.defaultProps = defaultProps32;
 
 // src/listbox/templates/listbox-normal.tsx
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 
 // src/spreadsheet/tests/spreadsheet-insert-dialogs.tsx
-import { Fragment as Fragment32, jsx as jsx87, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx89, jsxs as jsxs42 } from "react/jsx-runtime";
 var style = `
     .k-window {
         min-width: 400px;
@@ -6487,49 +6500,49 @@ var style = `
     }
 `;
 var spreadsheet_insert_dialogs_default = () => /* @__PURE__ */ jsxs42(Fragment32, { children: [
-  /* @__PURE__ */ jsx87("style", { children: style }),
+  /* @__PURE__ */ jsx89("style", { children: style }),
   /* @__PURE__ */ jsxs42("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx87("section", { children: /* @__PURE__ */ jsx87(WindowNormal, { title: "Insert comment", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
-      /* @__PURE__ */ jsx87(Button, { themeColor: "primary", children: "Insert" }),
-      /* @__PURE__ */ jsx87(Button, { children: "Cancel" }),
-      /* @__PURE__ */ jsx87("span", { className: "k-spacer" }),
-      /* @__PURE__ */ jsx87(Button, { fillMode: "clear", themeColor: "primary", children: "Remove comment" })
-    ] }), children: /* @__PURE__ */ jsx87(FormNormal, { formButtons: null, children: /* @__PURE__ */ jsx87(FormField, { label: "Comment", editor: /* @__PURE__ */ jsx87(Textarea, {}) }) }) }) }),
-    /* @__PURE__ */ jsx87("section", { children: /* @__PURE__ */ jsxs42(WindowNormal, { title: "Insert image", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
-      /* @__PURE__ */ jsx87(Button, { themeColor: "primary", children: "Insert" }),
-      /* @__PURE__ */ jsx87(Button, { children: "Cancel" })
+    /* @__PURE__ */ jsx89("section", { children: /* @__PURE__ */ jsx89(WindowNormal, { title: "Insert comment", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
+      /* @__PURE__ */ jsx89(Button, { themeColor: "primary", children: "Insert" }),
+      /* @__PURE__ */ jsx89(Button, { children: "Cancel" }),
+      /* @__PURE__ */ jsx89("span", { className: "k-spacer" }),
+      /* @__PURE__ */ jsx89(Button, { fillMode: "clear", themeColor: "primary", children: "Remove comment" })
+    ] }), children: /* @__PURE__ */ jsx89(FormNormal, { formButtons: null, children: /* @__PURE__ */ jsx89(FormField, { label: "Comment", editor: /* @__PURE__ */ jsx89(Textarea, {}) }) }) }) }),
+    /* @__PURE__ */ jsx89("section", { children: /* @__PURE__ */ jsxs42(WindowNormal, { title: "Insert image", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
+      /* @__PURE__ */ jsx89(Button, { themeColor: "primary", children: "Insert" }),
+      /* @__PURE__ */ jsx89(Button, { children: "Cancel" })
     ] }), children: [
-      /* @__PURE__ */ jsx87(Dropzone, {}),
-      /* @__PURE__ */ jsx87(UploadNormal, { status: "upload" })
+      /* @__PURE__ */ jsx89(DropzoneWithNote, {}),
+      /* @__PURE__ */ jsx89(UploadNormal, { status: "upload" })
     ] }) }),
-    /* @__PURE__ */ jsx87("section", { children: /* @__PURE__ */ jsx87(WindowNormal, { title: "Insert Link", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
-      /* @__PURE__ */ jsx87(Button, { themeColor: "primary", children: "Insert" }),
-      /* @__PURE__ */ jsx87(Button, { children: "Cancel" }),
-      /* @__PURE__ */ jsx87("span", { className: "k-spacer" }),
-      /* @__PURE__ */ jsx87(Button, { fillMode: "clear", themeColor: "primary", children: "Remove link" })
+    /* @__PURE__ */ jsx89("section", { children: /* @__PURE__ */ jsx89(WindowNormal, { title: "Insert Link", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
+      /* @__PURE__ */ jsx89(Button, { themeColor: "primary", children: "Insert" }),
+      /* @__PURE__ */ jsx89(Button, { children: "Cancel" }),
+      /* @__PURE__ */ jsx89("span", { className: "k-spacer" }),
+      /* @__PURE__ */ jsx89(Button, { fillMode: "clear", themeColor: "primary", children: "Remove link" })
     ] }), children: /* @__PURE__ */ jsxs42(FormNormal, { formButtons: null, children: [
-      /* @__PURE__ */ jsx87(FormField, { label: "Select link", editor: /* @__PURE__ */ jsx87(DropdownList, { value: "URL" }) }),
-      /* @__PURE__ */ jsx87(FormField, { label: "URL address", editor: /* @__PURE__ */ jsx87(Textbox, { value: "Input value" }) })
+      /* @__PURE__ */ jsx89(FormField, { label: "Select link", editor: /* @__PURE__ */ jsx89(DropdownList, { value: "URL" }) }),
+      /* @__PURE__ */ jsx89(FormField, { label: "URL address", editor: /* @__PURE__ */ jsx89(Textbox, { value: "Input value" }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx87("section", { children: /* @__PURE__ */ jsx87(WindowNormal, { title: "Insert Link", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
-      /* @__PURE__ */ jsx87(Button, { themeColor: "primary", children: "Insert" }),
-      /* @__PURE__ */ jsx87(Button, { children: "Cancel" }),
-      /* @__PURE__ */ jsx87("span", { className: "k-spacer" }),
-      /* @__PURE__ */ jsx87(Button, { fillMode: "clear", themeColor: "primary", children: "Remove link" })
+    /* @__PURE__ */ jsx89("section", { children: /* @__PURE__ */ jsx89(WindowNormal, { title: "Insert Link", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
+      /* @__PURE__ */ jsx89(Button, { themeColor: "primary", children: "Insert" }),
+      /* @__PURE__ */ jsx89(Button, { children: "Cancel" }),
+      /* @__PURE__ */ jsx89("span", { className: "k-spacer" }),
+      /* @__PURE__ */ jsx89(Button, { fillMode: "clear", themeColor: "primary", children: "Remove link" })
     ] }), children: /* @__PURE__ */ jsxs42(FormNormal, { formButtons: null, children: [
-      /* @__PURE__ */ jsx87(FormField, { label: "Select link", editor: /* @__PURE__ */ jsx87(DropdownList, { value: "Internal" }) }),
-      /* @__PURE__ */ jsx87(FormField, { label: "Cell reference", editor: /* @__PURE__ */ jsx87(Textbox, { value: "B3:B11" }) }),
-      /* @__PURE__ */ jsx87(FormField, { label: "From sheet", editor: /* @__PURE__ */ jsxs42(ListBox, { style: { width: "100%" }, children: [
-        /* @__PURE__ */ jsx87(ListItem, { children: "Sheet 1" }),
-        /* @__PURE__ */ jsx87(ListItem, { children: "Sheet 2" }),
-        /* @__PURE__ */ jsx87(ListItem, { children: "Sheet 3" }),
-        /* @__PURE__ */ jsx87(ListItem, { children: "Sheet 4" })
+      /* @__PURE__ */ jsx89(FormField, { label: "Select link", editor: /* @__PURE__ */ jsx89(DropdownList, { value: "Internal" }) }),
+      /* @__PURE__ */ jsx89(FormField, { label: "Cell reference", editor: /* @__PURE__ */ jsx89(Textbox, { value: "B3:B11" }) }),
+      /* @__PURE__ */ jsx89(FormField, { label: "From sheet", editor: /* @__PURE__ */ jsxs42(ListBox, { style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx89(ListItem, { children: "Sheet 1" }),
+        /* @__PURE__ */ jsx89(ListItem, { children: "Sheet 2" }),
+        /* @__PURE__ */ jsx89(ListItem, { children: "Sheet 3" }),
+        /* @__PURE__ */ jsx89(ListItem, { children: "Sheet 4" })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx87("section", { children: /* @__PURE__ */ jsx87(WindowNormal, { title: "Insert Chart", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
-      /* @__PURE__ */ jsx87(Button, { themeColor: "primary", children: "Insert" }),
-      /* @__PURE__ */ jsx87(Button, { children: "Cancel" })
-    ] }), children: /* @__PURE__ */ jsx87(FormNormal, { formButtons: null, children: /* @__PURE__ */ jsx87(FormField, { label: "Select chart type", editor: /* @__PURE__ */ jsx87(DropdownList, { value: "Donut" }) }) }) }) })
+    /* @__PURE__ */ jsx89("section", { children: /* @__PURE__ */ jsx89(WindowNormal, { title: "Insert Chart", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ jsxs42(Fragment32, { children: [
+      /* @__PURE__ */ jsx89(Button, { themeColor: "primary", children: "Insert" }),
+      /* @__PURE__ */ jsx89(Button, { children: "Cancel" })
+    ] }), children: /* @__PURE__ */ jsx89(FormNormal, { formButtons: null, children: /* @__PURE__ */ jsx89(FormField, { label: "Select chart type", editor: /* @__PURE__ */ jsx89(DropdownList, { value: "Donut" }) }) }) }) })
   ] })
 ] });
 export {

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

@@ -2,10 +2,19 @@ export declare const DROPZONE_CLASSNAME = "k-external-dropzone";
 declare const states: "hover"[];
 export type KendoDropzoneProps = {
     icon?: string;
-    note?: string | boolean;
+    hint?: string | boolean;
+    note?: string;
 };
 export type KendoDropzoneState = {
     [K in (typeof states)[number]]?: boolean;
 };
-export declare const Dropzone: (props: KendoDropzoneProps & KendoDropzoneState & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Dropzone: {
+    (props: KendoDropzoneProps & KendoDropzoneState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: "hover"[];
+    className: string;
+    defaultProps: {
+        icon: string;
+        hint: string;
+    };
+};
+export default Dropzone;

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

@@ -1 +1,3 @@
 export * from './dropzone.spec';
+export * from './templates/dropzone-normal';
+export * from './templates/dropzone-with-note';

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

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

package/dist/types/dropzone/templates/dropzone-with-note.d.ts

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

package/dist/types/dropzone/tests/dropzone-states.d.ts

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

package/dist/types/index.d.ts

@@ -46,6 +46,7 @@ export * from './numerictextbox/index';
 export * from './searchbox/index';
 export * from './switch/index';
 export * from './upload/index';
+export * from './dropzone/index';
 export * from './fab/index';
 export * from './menu/index';
 export * from './toolbar/index';

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.0.3-dev.1",
+  "version": "7.0.3-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "90df5557fed86e541e77693108aad68842d55a2f"
+  "gitHead": "00fbdd430c74d792dadbb35dc7f15107c8973d09"
 }

package/src/dropzone/dropzone.spec.tsx

@@ -9,14 +9,15 @@ const states = [
 
 export type KendoDropzoneProps = {
     icon?: string;
-    note?: string | boolean;
+    hint?: string | boolean;
+    note?: string;
 };
 
 export type KendoDropzoneState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultProps = {
     icon: "upload",
-    note: "Only JPEG, PNG and SVG files are allowed."
+    hint: "Drag and drop files here to upload",
 };
 
 export const Dropzone = (
@@ -27,7 +28,8 @@ export const Dropzone = (
     const {
         hover,
         icon = defaultProps.icon,
-        note = defaultProps.note,
+        hint = defaultProps.hint,
+        note,
         ...other
     } = props;
 
@@ -45,9 +47,15 @@ export const Dropzone = (
         >
             <div className="k-dropzone-inner">
                 {icon && <Icon icon={icon} className="k-dropzone-icon" size={"xxxlarge"} />}
-                <span className="k-dropzone-hint">Drag and drop files here to upload</span>
-                {note && <span className="k-dropzone-note"> {note} </span>}
+                {hint && <span className="k-dropzone-hint">{hint}</span>}
+                {note && <span className="k-dropzone-note">{note}</span>}
             </div>
         </div>
     );
 };
+
+Dropzone.states = states;
+Dropzone.className = DROPZONE_CLASSNAME;
+Dropzone.defaultProps = defaultProps;
+
+export default Dropzone;

package/src/dropzone/index.ts

@@ -1 +1,3 @@
 export * from './dropzone.spec';
+export * from './templates/dropzone-normal';
+export * from './templates/dropzone-with-note';

package/src/dropzone/templates/dropzone-normal.tsx

@@ -0,0 +1,3 @@
+import { Dropzone } from "..";
+
+export const DropzoneNormal = (props) => <Dropzone {...props}/>;

package/src/dropzone/templates/dropzone-with-note.tsx

@@ -0,0 +1,7 @@
+import { Dropzone } from "..";
+
+export const DropzoneWithNote = (props) =>
+    <Dropzone
+        note="Only JPEG, PNG and SVG files are allowed."
+        {...props}
+    />;

package/src/dropzone/tests/dropzone-states.tsx

@@ -0,0 +1,22 @@
+import { Dropzone, DropzoneWithNote } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            { [ "normal", ...Dropzone.states ].map((state) => (
+                <section>
+                    <p>External dropzone {state}</p>
+                    <DropzoneWithNote { ...{ [state]: true }}/>
+                </section>
+            ))}
+
+            <section>
+                <p>External dropzone custom size</p>
+                <DropzoneWithNote style={{ height: "350px", width: "400px" }} />
+            </section>
+
+        </div>
+    </>
+);

package/src/dropzone/tests/dropzone.tsx

@@ -1,4 +1,4 @@
-import { Dropzone } from '../../dropzone';
+import { DropzoneNormal, DropzoneWithNote } from '..';
 
 
 export default () =>(
@@ -6,22 +6,24 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <p>External dropzone</p>
-                <Dropzone />
+                <p>External dropzone Empty</p>
+                <DropzoneNormal hint={false} />
             </section>
 
             <section>
-                {/* Hover dragging files */}
-                <p>External dropzone - hover dragging files</p>
-                <Dropzone hover />
+                <p>External dropzone with only Hint</p>
+                <DropzoneNormal />
             </section>
 
             <section>
-                {/* Hight set */}
-                <p>External dropzone</p>
-                <Dropzone style={{ height: "400px" }} />
+                <p>External dropzone with only Note</p>
+                <DropzoneWithNote hint={false} />
             </section>
 
+            <section>
+                <p>External dropzone with Hind & Note</p>
+                <DropzoneWithNote />
+            </section>
         </div>
     </>
 );

package/src/index.ts

@@ -60,7 +60,7 @@ export * from './numerictextbox/index';
 export * from './searchbox/index';
 export * from './switch/index';
 export * from './upload/index';
-// export * from './dropzone/index';
+export * from './dropzone/index';
 
 // Command interfaces
 export * from './fab/index';

package/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx

@@ -2,7 +2,7 @@ import { Button } from '../../button';
 import { UploadNormal } from '../../upload';
 import { Toolbar } from '../../toolbar';
 import { Pager } from '../../pager';
-import { Dropzone } from '../../dropzone';
+import { DropzoneNormal } from '../../dropzone';
 
 
 const styles = `
@@ -30,7 +30,7 @@ export default () =>(
                 <div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select">
                     <div className="k-pdf-viewer-pages">
                         <div className="k-page k-blank-page">
-                            <Dropzone note={false}/>
+                            <DropzoneNormal />
                             <UploadNormal empty status="upload"></UploadNormal>
                         </div>
                     </div>

package/src/spreadsheet/tests/spreadsheet-file-dialogs.tsx

@@ -4,7 +4,7 @@ import { FormNormal, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
 import { UploadNormal } from '../../upload';
-import { Dropzone } from '../../dropzone';
+import { DropzoneNormal } from '../../dropzone';
 
 
 const style = `
@@ -52,7 +52,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Dropzone note={false} />
+                    <DropzoneNormal />
 
                     <UploadNormal status="upload"/>
                 </WindowNormal>

package/src/spreadsheet/tests/spreadsheet-insert-dialogs.tsx

@@ -4,7 +4,7 @@ import { Button } from '../../button';
 import { FormNormal, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { UploadNormal } from '../../upload';
-import { Dropzone } from '../../dropzone';
+import { DropzoneWithNote } from '../../dropzone';
 import { DropdownList } from '../../dropdownlist';
 import { ListBox } from '../../listbox';
 import { ListItem } from '../../list';
@@ -44,7 +44,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Dropzone />
+                    <DropzoneWithNote />
 
                     <UploadNormal status="upload"></UploadNormal>
                 </WindowNormal>