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

package/dist/cjs/dropzone/tests/dropzone.js

@@ -4322,13 +4322,14 @@ var states4 = [
 ];
 var defaultProps4 = {
   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 = defaultProps4.icon,
-    note = defaultProps4.note,
+    hint = defaultProps4.hint,
+    note,
     ...other
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -4345,30 +4346,47 @@ var Dropzone = (props) => {
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-dropzone-inner", children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon, className: "k-dropzone-icon", size: "xxxlarge" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-dropzone-hint", children: "Drag and drop files here to upload" }),
-        note && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "k-dropzone-note", children: [
-          " ",
-          note,
-          " "
-        ] })
+        hint && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-dropzone-hint", children: hint }),
+        note && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-dropzone-note", children: note })
       ] })
     }
   );
 };
+Dropzone.states = states4;
+Dropzone.className = DROPZONE_CLASSNAME;
+Dropzone.defaultProps = defaultProps4;
 
-// src/dropzone/tests/dropzone.tsx
+// src/dropzone/templates/dropzone-normal.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var dropzone_default = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "External dropzone" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dropzone, {})
+var DropzoneNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dropzone, { ...props });
+
+// src/dropzone/templates/dropzone-with-note.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DropzoneWithNote = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  Dropzone,
+  {
+    note: "Only JPEG, PNG and SVG files are allowed.",
+    ...props
+  }
+);
+
+// src/dropzone/tests/dropzone.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var dropzone_default = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "External dropzone Empty" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropzoneNormal, { hint: false })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "External dropzone with only Hint" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropzoneNormal, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "External dropzone - hover dragging files" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dropzone, { hover: true })
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "External dropzone with only Note" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropzoneWithNote, { hint: false })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "External dropzone" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dropzone, { style: { height: "400px" } })
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "External dropzone with Hind & Note" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropzoneWithNote, {})
   ] })
 ] }) });

package/dist/cjs/editor/tests/editor-find-replace.js

@@ -8007,8 +8007,181 @@ Form.options = options49;
 Form.className = FORM_CLASSNAME;
 Form.defaultProps = defaultProps46;
 
-// src/editor/tests/editor-find-replace.tsx
+// src/radio/radio.spec.tsx
 var import_jsx_runtime127 = require("react/jsx-runtime");
+var RADIOBUTTON_CLASSNAME = `k-radio`;
+var states54 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.checked
+];
+var options50 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps47 = {
+  size: Size.medium
+};
+var RadioButton = (props) => {
+  const {
+    id,
+    checked,
+    hover,
+    focus,
+    disabled,
+    invalid,
+    valid,
+    required,
+    size = defaultProps47.size,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "k-radio-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    "input",
+    {
+      ...other,
+      id,
+      type: "radio",
+      checked,
+      required,
+      className: classNames(
+        props.className,
+        RADIOBUTTON_CLASSNAME,
+        optionClassNames(RADIOBUTTON_CLASSNAME, { size }),
+        stateClassNames(RADIOBUTTON_CLASSNAME, { hover, focus, disabled, invalid, valid, checked })
+      )
+    }
+  ) });
+};
+RadioButton.states = states54;
+RadioButton.options = options50;
+RadioButton.className = RADIOBUTTON_CLASSNAME;
+RadioButton.defaultProps = defaultProps47;
+
+// src/radio/radio-group.spec.tsx
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var RADIOGROUP_CLASSNAME = `k-radio-list`;
+var states55 = [];
+var options51 = {};
+var defaultProps48 = {
+  layout: "vertical"
+};
+var RadioGroup = (props) => {
+  const {
+    layout = defaultProps48.layout,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    "ul",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        RADIOGROUP_CLASSNAME,
+        {
+          [`k-list-${layout}`]: layout
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+RadioGroup.states = states55;
+RadioGroup.options = options51;
+RadioGroup.className = RADIOGROUP_CLASSNAME;
+RadioGroup.defaultProps = defaultProps48;
+
+// src/radio/radio-item.spec.tsx
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var RADIOITEM_CLASSNAME = `k-radio-list-item`;
+var states56 = [];
+var options52 = {};
+var defaultProps49 = {};
+var RadioItem = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        RADIOITEM_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+RadioItem.states = states56;
+RadioItem.options = options52;
+RadioItem.className = RADIOITEM_CLASSNAME;
+RadioItem.defaultProps = defaultProps49;
+
+// src/radio/templates/radio-normal.tsx
+var import_jsx_runtime130 = require("react/jsx-runtime");
+
+// src/radio/templates/radio-with-label-after.tsx
+var import_jsx_runtime131 = require("react/jsx-runtime");
+
+// src/radio/templates/radio-with-label-before.tsx
+var import_jsx_runtime132 = require("react/jsx-runtime");
+
+// src/radio/templates/radio-inside-label.tsx
+var import_jsx_runtime133 = require("react/jsx-runtime");
+
+// src/form/templates/form-normal.tsx
+var import_jsx_runtime134 = require("react/jsx-runtime");
+var FormNormal = ({ size, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  Form,
+  {
+    formButtons: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { className: "k-form-submit", themeColor: "primary", size, children: "Submit" }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { className: "k-form-clear", size, children: "Clear" })
+    ] }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(Fieldset, { legend: "Form Legend", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FormField, { label: "Label", placeholder: "Input Value", editor: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Textbox, { size }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+        FormField,
+        {
+          label: "Label",
+          hint: "Hint text",
+          editor: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownList, { value: "Dropdown List", size })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+        FormField,
+        {
+          label: "City",
+          editor: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("ul", { className: "k-radio-list k-list-horizontal", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RadioButton, { checked: true, size }),
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("label", { className: "k-radio-label", children: "Label" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RadioButton, { size }),
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("label", { className: "k-radio-label", children: "Label" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RadioButton, { size }),
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("label", { className: "k-radio-label", children: "Label" })
+            ] })
+          ] })
+        }
+      )
+    ] }),
+    size,
+    ...other
+  }
+);
+
+// src/form/templates/form-horizontal.tsx
+var import_jsx_runtime135 = require("react/jsx-runtime");
+
+// src/editor/tests/editor-find-replace.tsx
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var styles = `
     .k-window {
         width: 100%;
@@ -8025,71 +8198,71 @@ var styles = `
         max-width: initial;
     }
 `;
-var editor_find_replace_default = () => /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: "Find Window" }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: "Replace Window" }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(WindowNormal, { title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("ul", { className: "k-tabstrip-items k-reset", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "k-link", children: "Find" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "k-link", children: "Replace" }) })
+var editor_find_replace_default = () => /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: "Find Window" }),
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: "Replace Window" }),
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(WindowNormal, { title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("ul", { className: "k-tabstrip-items k-reset", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-link", children: "Find" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-link", children: "Replace" }) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(Form, { tag: "div", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(FormField, { label: "Find What:", editor: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Textbox, { showClearButton: false, value: "editor" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(FormField, { editor: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(CheckboxGroup, { className: "k-search-options", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxWithLabelAfter, { children: "Match case" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(FormNormal, { formButtons: null, tag: "div", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(FormField, { label: "Find What:", editor: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Textbox, { showClearButton: false, value: "editor" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(FormField, { editor: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(CheckboxGroup, { className: "k-search-options", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxWithLabelAfter, { children: "Match case" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "k-matches-container", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: "1 of 3 matches" }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "k-matches-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: "1 of 3 matches" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(WindowNormal, { className: "k-editor-window", title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("ul", { className: "k-tabstrip-items k-reset", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "k-link", children: "Find" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "k-link", children: "Replace" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(WindowNormal, { className: "k-editor-window", title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("ul", { className: "k-tabstrip-items k-reset", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-link", children: "Find" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-link", children: "Replace" }) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(Form, { tag: "div", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(FormField, { label: "Find What:", editor: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Textbox, { showClearButton: false, value: "editor" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(FormField, { label: "Replace With:", editor: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Textbox, { showClearButton: false, value: "grid" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(FormField, { editor: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(ActionButtons, { alignment: "end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { children: "Replace" }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { children: "Replace All" })
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(FormNormal, { formButtons: null, tag: "div", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(FormField, { label: "Find What:", editor: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Textbox, { showClearButton: false, value: "editor" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(FormField, { label: "Replace With:", editor: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Textbox, { showClearButton: false, value: "grid" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(FormField, { editor: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(ActionButtons, { alignment: "end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { children: "Replace" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { children: "Replace All" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(FormField, { editor: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(CheckboxGroup, { className: "k-search-options", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxWithLabelAfter, { children: "Match case" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(FormField, { editor: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(CheckboxGroup, { className: "k-search-options", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxWithLabelAfter, { children: "Match case" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxItem, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "k-matches-container", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: "1 of 3 matches" }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "k-matches-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: "1 of 3 matches" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: "Text Highlight" }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(EditorNormal, { style: { height: "150px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(EditorToolbar, { resizable: true, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(ButtonGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { icon: "bold" }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { icon: "italic" }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { icon: "underline" }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { icon: "binoculars", selected: true })
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: "Text Highlight" }),
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(EditorNormal, { style: { height: "150px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EditorToolbar, { resizable: true, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(ButtonGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { icon: "bold" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { icon: "italic" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { icon: "underline" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Button, { icon: "binoculars", selected: true })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(EditorContent, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "ProseMirror", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "k-text-selected", children: "Word" }),
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EditorContent, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "ProseMirror", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-text-selected", children: "Word" }),
         " and few more ",
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "k-text-highlighted", children: "word" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-text-highlighted", children: "word" }),
         "s. And yet again. ",
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "k-text-highlighted", children: "Word" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "k-text-highlighted", children: "Word" }),
         "."
       ] }) })
     ] }) })