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

package/dist/esm/dropzone/tests/dropzone.js

@@ -4303,13 +4303,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__ */ jsx4(
@@ -4326,31 +4327,48 @@ var Dropzone = (props) => {
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "k-dropzone-inner", children: [
         icon && /* @__PURE__ */ jsx4(Icon, { icon, className: "k-dropzone-icon", size: "xxxlarge" }),
-        /* @__PURE__ */ jsx4("span", { className: "k-dropzone-hint", children: "Drag and drop files here to upload" }),
-        note && /* @__PURE__ */ jsxs("span", { className: "k-dropzone-note", children: [
-          " ",
-          note,
-          " "
-        ] })
+        hint && /* @__PURE__ */ jsx4("span", { className: "k-dropzone-hint", children: hint }),
+        note && /* @__PURE__ */ jsx4("span", { className: "k-dropzone-note", children: note })
       ] })
     }
   );
 };
+Dropzone.states = states4;
+Dropzone.className = DROPZONE_CLASSNAME;
+Dropzone.defaultProps = defaultProps4;
+
+// src/dropzone/templates/dropzone-normal.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DropzoneNormal = (props) => /* @__PURE__ */ jsx5(Dropzone, { ...props });
+
+// src/dropzone/templates/dropzone-with-note.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DropzoneWithNote = (props) => /* @__PURE__ */ jsx6(
+  Dropzone,
+  {
+    note: "Only JPEG, PNG and SVG files are allowed.",
+    ...props
+  }
+);
 
 // src/dropzone/tests/dropzone.tsx
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var dropzone_default = () => /* @__PURE__ */ jsx5(Fragment4, { children: /* @__PURE__ */ jsxs2("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var dropzone_default = () => /* @__PURE__ */ jsx7(Fragment4, { children: /* @__PURE__ */ jsxs2("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+  /* @__PURE__ */ jsxs2("section", { children: [
+    /* @__PURE__ */ jsx7("p", { children: "External dropzone Empty" }),
+    /* @__PURE__ */ jsx7(DropzoneNormal, { hint: false })
+  ] }),
   /* @__PURE__ */ jsxs2("section", { children: [
-    /* @__PURE__ */ jsx5("p", { children: "External dropzone" }),
-    /* @__PURE__ */ jsx5(Dropzone, {})
+    /* @__PURE__ */ jsx7("p", { children: "External dropzone with only Hint" }),
+    /* @__PURE__ */ jsx7(DropzoneNormal, {})
   ] }),
   /* @__PURE__ */ jsxs2("section", { children: [
-    /* @__PURE__ */ jsx5("p", { children: "External dropzone - hover dragging files" }),
-    /* @__PURE__ */ jsx5(Dropzone, { hover: true })
+    /* @__PURE__ */ jsx7("p", { children: "External dropzone with only Note" }),
+    /* @__PURE__ */ jsx7(DropzoneWithNote, { hint: false })
   ] }),
   /* @__PURE__ */ jsxs2("section", { children: [
-    /* @__PURE__ */ jsx5("p", { children: "External dropzone" }),
-    /* @__PURE__ */ jsx5(Dropzone, { style: { height: "400px" } })
+    /* @__PURE__ */ jsx7("p", { children: "External dropzone with Hind & Note" }),
+    /* @__PURE__ */ jsx7(DropzoneWithNote, {})
   ] })
 ] }) });
 export {

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

@@ -7988,8 +7988,181 @@ Form.options = options49;
 Form.className = FORM_CLASSNAME;
 Form.defaultProps = defaultProps46;
 
+// src/radio/radio.spec.tsx
+import { jsx as jsx127 } from "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__ */ jsx127("span", { className: "k-radio-wrap", children: /* @__PURE__ */ jsx127(
+    "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
+import { jsx as jsx128 } from "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__ */ jsx128(
+    "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
+import { jsx as jsx129 } from "react/jsx-runtime";
+var RADIOITEM_CLASSNAME = `k-radio-list-item`;
+var states56 = [];
+var options52 = {};
+var defaultProps49 = {};
+var RadioItem = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx129(
+    "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
+import { jsx as jsx130 } from "react/jsx-runtime";
+
+// src/radio/templates/radio-with-label-after.tsx
+import { Fragment as Fragment35, jsx as jsx131, jsxs as jsxs54 } from "react/jsx-runtime";
+
+// src/radio/templates/radio-with-label-before.tsx
+import { Fragment as Fragment36, jsx as jsx132, jsxs as jsxs55 } from "react/jsx-runtime";
+
+// src/radio/templates/radio-inside-label.tsx
+import { Fragment as Fragment37, jsx as jsx133, jsxs as jsxs56 } from "react/jsx-runtime";
+
+// src/form/templates/form-normal.tsx
+import { Fragment as Fragment38, jsx as jsx134, jsxs as jsxs57 } from "react/jsx-runtime";
+var FormNormal = ({ size, ...other }) => /* @__PURE__ */ jsx134(
+  Form,
+  {
+    formButtons: /* @__PURE__ */ jsxs57(Fragment38, { children: [
+      /* @__PURE__ */ jsx134(Button, { className: "k-form-submit", themeColor: "primary", size, children: "Submit" }),
+      /* @__PURE__ */ jsx134(Button, { className: "k-form-clear", size, children: "Clear" })
+    ] }),
+    children: /* @__PURE__ */ jsxs57(Fieldset, { legend: "Form Legend", children: [
+      /* @__PURE__ */ jsx134(FormField, { label: "Label", placeholder: "Input Value", editor: /* @__PURE__ */ jsx134(Textbox, { size }) }),
+      /* @__PURE__ */ jsx134(
+        FormField,
+        {
+          label: "Label",
+          hint: "Hint text",
+          editor: /* @__PURE__ */ jsx134(DropdownList, { value: "Dropdown List", size })
+        }
+      ),
+      /* @__PURE__ */ jsx134(
+        FormField,
+        {
+          label: "City",
+          editor: /* @__PURE__ */ jsxs57("ul", { className: "k-radio-list k-list-horizontal", children: [
+            /* @__PURE__ */ jsxs57("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ jsx134(RadioButton, { checked: true, size }),
+              /* @__PURE__ */ jsx134("label", { className: "k-radio-label", children: "Label" })
+            ] }),
+            /* @__PURE__ */ jsxs57("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ jsx134(RadioButton, { size }),
+              /* @__PURE__ */ jsx134("label", { className: "k-radio-label", children: "Label" })
+            ] }),
+            /* @__PURE__ */ jsxs57("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ jsx134(RadioButton, { size }),
+              /* @__PURE__ */ jsx134("label", { className: "k-radio-label", children: "Label" })
+            ] })
+          ] })
+        }
+      )
+    ] }),
+    size,
+    ...other
+  }
+);
+
+// src/form/templates/form-horizontal.tsx
+import { Fragment as Fragment39, jsx as jsx135, jsxs as jsxs58 } from "react/jsx-runtime";
+
 // src/editor/tests/editor-find-replace.tsx
-import { Fragment as Fragment35, jsx as jsx127, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment40, jsx as jsx136, jsxs as jsxs59 } from "react/jsx-runtime";
 var styles = `
     .k-window {
         width: 100%;
@@ -8006,71 +8179,71 @@ var styles = `
         max-width: initial;
     }
 `;
-var editor_find_replace_default = () => /* @__PURE__ */ jsxs54(Fragment35, { children: [
-  /* @__PURE__ */ jsx127("style", { children: styles }),
-  /* @__PURE__ */ jsxs54("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx127("span", { children: "Find Window" }),
-    /* @__PURE__ */ jsx127("span", { children: "Replace Window" }),
-    /* @__PURE__ */ jsx127("section", { children: /* @__PURE__ */ jsx127(WindowNormal, { title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ jsxs54("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
-      /* @__PURE__ */ jsx127("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ jsxs54("ul", { className: "k-tabstrip-items k-reset", children: [
-        /* @__PURE__ */ jsx127("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ jsx127("span", { className: "k-link", children: "Find" }) }),
-        /* @__PURE__ */ jsx127("li", { className: "k-item", children: /* @__PURE__ */ jsx127("span", { className: "k-link", children: "Replace" }) })
+var editor_find_replace_default = () => /* @__PURE__ */ jsxs59(Fragment40, { children: [
+  /* @__PURE__ */ jsx136("style", { children: styles }),
+  /* @__PURE__ */ jsxs59("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ jsx136("span", { children: "Find Window" }),
+    /* @__PURE__ */ jsx136("span", { children: "Replace Window" }),
+    /* @__PURE__ */ jsx136("section", { children: /* @__PURE__ */ jsx136(WindowNormal, { title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ jsxs59("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
+      /* @__PURE__ */ jsx136("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ jsxs59("ul", { className: "k-tabstrip-items k-reset", children: [
+        /* @__PURE__ */ jsx136("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ jsx136("span", { className: "k-link", children: "Find" }) }),
+        /* @__PURE__ */ jsx136("li", { className: "k-item", children: /* @__PURE__ */ jsx136("span", { className: "k-link", children: "Replace" }) })
       ] }) }),
-      /* @__PURE__ */ jsx127("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ jsxs54(Form, { tag: "div", children: [
-        /* @__PURE__ */ jsx127(FormField, { label: "Find What:", editor: /* @__PURE__ */ jsx127(Textbox, { showClearButton: false, value: "editor" }) }),
-        /* @__PURE__ */ jsx127(FormField, { editor: /* @__PURE__ */ jsxs54(CheckboxGroup, { className: "k-search-options", children: [
-          /* @__PURE__ */ jsx127(CheckboxItem, { children: /* @__PURE__ */ jsx127(CheckboxWithLabelAfter, { children: "Match case" }) }),
-          /* @__PURE__ */ jsx127(CheckboxItem, { children: /* @__PURE__ */ jsx127(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
-          /* @__PURE__ */ jsx127(CheckboxItem, { children: /* @__PURE__ */ jsx127(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
-          /* @__PURE__ */ jsx127(CheckboxItem, { children: /* @__PURE__ */ jsx127(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
+      /* @__PURE__ */ jsx136("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ jsxs59(FormNormal, { formButtons: null, tag: "div", children: [
+        /* @__PURE__ */ jsx136(FormField, { label: "Find What:", editor: /* @__PURE__ */ jsx136(Textbox, { showClearButton: false, value: "editor" }) }),
+        /* @__PURE__ */ jsx136(FormField, { editor: /* @__PURE__ */ jsxs59(CheckboxGroup, { className: "k-search-options", children: [
+          /* @__PURE__ */ jsx136(CheckboxItem, { children: /* @__PURE__ */ jsx136(CheckboxWithLabelAfter, { children: "Match case" }) }),
+          /* @__PURE__ */ jsx136(CheckboxItem, { children: /* @__PURE__ */ jsx136(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
+          /* @__PURE__ */ jsx136(CheckboxItem, { children: /* @__PURE__ */ jsx136(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
+          /* @__PURE__ */ jsx136(CheckboxItem, { children: /* @__PURE__ */ jsx136(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
         ] }) }),
-        /* @__PURE__ */ jsxs54("div", { className: "k-matches-container", children: [
-          /* @__PURE__ */ jsx127(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
-          /* @__PURE__ */ jsx127("span", { children: "1 of 3 matches" }),
-          /* @__PURE__ */ jsx127(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
+        /* @__PURE__ */ jsxs59("div", { className: "k-matches-container", children: [
+          /* @__PURE__ */ jsx136(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
+          /* @__PURE__ */ jsx136("span", { children: "1 of 3 matches" }),
+          /* @__PURE__ */ jsx136(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx127("section", { children: /* @__PURE__ */ jsx127(WindowNormal, { className: "k-editor-window", title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ jsxs54("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
-      /* @__PURE__ */ jsx127("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ jsxs54("ul", { className: "k-tabstrip-items k-reset", children: [
-        /* @__PURE__ */ jsx127("li", { className: "k-item", children: /* @__PURE__ */ jsx127("span", { className: "k-link", children: "Find" }) }),
-        /* @__PURE__ */ jsx127("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ jsx127("span", { className: "k-link", children: "Replace" }) })
+    /* @__PURE__ */ jsx136("section", { children: /* @__PURE__ */ jsx136(WindowNormal, { className: "k-editor-window", title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ jsxs59("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
+      /* @__PURE__ */ jsx136("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ jsxs59("ul", { className: "k-tabstrip-items k-reset", children: [
+        /* @__PURE__ */ jsx136("li", { className: "k-item", children: /* @__PURE__ */ jsx136("span", { className: "k-link", children: "Find" }) }),
+        /* @__PURE__ */ jsx136("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ jsx136("span", { className: "k-link", children: "Replace" }) })
       ] }) }),
-      /* @__PURE__ */ jsx127("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ jsxs54(Form, { tag: "div", children: [
-        /* @__PURE__ */ jsx127(FormField, { label: "Find What:", editor: /* @__PURE__ */ jsx127(Textbox, { showClearButton: false, value: "editor" }) }),
-        /* @__PURE__ */ jsx127(FormField, { label: "Replace With:", editor: /* @__PURE__ */ jsx127(Textbox, { showClearButton: false, value: "grid" }) }),
-        /* @__PURE__ */ jsx127(FormField, { editor: /* @__PURE__ */ jsxs54(ActionButtons, { alignment: "end", children: [
-          /* @__PURE__ */ jsx127(Button, { children: "Replace" }),
-          /* @__PURE__ */ jsx127(Button, { children: "Replace All" })
+      /* @__PURE__ */ jsx136("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ jsxs59(FormNormal, { formButtons: null, tag: "div", children: [
+        /* @__PURE__ */ jsx136(FormField, { label: "Find What:", editor: /* @__PURE__ */ jsx136(Textbox, { showClearButton: false, value: "editor" }) }),
+        /* @__PURE__ */ jsx136(FormField, { label: "Replace With:", editor: /* @__PURE__ */ jsx136(Textbox, { showClearButton: false, value: "grid" }) }),
+        /* @__PURE__ */ jsx136(FormField, { editor: /* @__PURE__ */ jsxs59(ActionButtons, { alignment: "end", children: [
+          /* @__PURE__ */ jsx136(Button, { children: "Replace" }),
+          /* @__PURE__ */ jsx136(Button, { children: "Replace All" })
         ] }) }),
-        /* @__PURE__ */ jsx127(FormField, { editor: /* @__PURE__ */ jsxs54(CheckboxGroup, { className: "k-search-options", children: [
-          /* @__PURE__ */ jsx127(CheckboxItem, { children: /* @__PURE__ */ jsx127(CheckboxWithLabelAfter, { children: "Match case" }) }),
-          /* @__PURE__ */ jsx127(CheckboxItem, { children: /* @__PURE__ */ jsx127(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
-          /* @__PURE__ */ jsx127(CheckboxItem, { children: /* @__PURE__ */ jsx127(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
-          /* @__PURE__ */ jsx127(CheckboxItem, { children: /* @__PURE__ */ jsx127(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
+        /* @__PURE__ */ jsx136(FormField, { editor: /* @__PURE__ */ jsxs59(CheckboxGroup, { className: "k-search-options", children: [
+          /* @__PURE__ */ jsx136(CheckboxItem, { children: /* @__PURE__ */ jsx136(CheckboxWithLabelAfter, { children: "Match case" }) }),
+          /* @__PURE__ */ jsx136(CheckboxItem, { children: /* @__PURE__ */ jsx136(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
+          /* @__PURE__ */ jsx136(CheckboxItem, { children: /* @__PURE__ */ jsx136(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
+          /* @__PURE__ */ jsx136(CheckboxItem, { children: /* @__PURE__ */ jsx136(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
         ] }) }),
-        /* @__PURE__ */ jsxs54("div", { className: "k-matches-container", children: [
-          /* @__PURE__ */ jsx127(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
-          /* @__PURE__ */ jsx127("span", { children: "1 of 3 matches" }),
-          /* @__PURE__ */ jsx127(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
+        /* @__PURE__ */ jsxs59("div", { className: "k-matches-container", children: [
+          /* @__PURE__ */ jsx136(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
+          /* @__PURE__ */ jsx136("span", { children: "1 of 3 matches" }),
+          /* @__PURE__ */ jsx136(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx127("span", { children: "Text Highlight" }),
-    /* @__PURE__ */ jsx127("span", {}),
-    /* @__PURE__ */ jsx127("section", { children: /* @__PURE__ */ jsxs54(EditorNormal, { style: { height: "150px" }, children: [
-      /* @__PURE__ */ jsx127(EditorToolbar, { resizable: true, children: /* @__PURE__ */ jsxs54(ButtonGroup, { children: [
-        /* @__PURE__ */ jsx127(Button, { icon: "bold" }),
-        /* @__PURE__ */ jsx127(Button, { icon: "italic" }),
-        /* @__PURE__ */ jsx127(Button, { icon: "underline" }),
-        /* @__PURE__ */ jsx127(Button, { icon: "binoculars", selected: true })
+    /* @__PURE__ */ jsx136("span", { children: "Text Highlight" }),
+    /* @__PURE__ */ jsx136("span", {}),
+    /* @__PURE__ */ jsx136("section", { children: /* @__PURE__ */ jsxs59(EditorNormal, { style: { height: "150px" }, children: [
+      /* @__PURE__ */ jsx136(EditorToolbar, { resizable: true, children: /* @__PURE__ */ jsxs59(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx136(Button, { icon: "bold" }),
+        /* @__PURE__ */ jsx136(Button, { icon: "italic" }),
+        /* @__PURE__ */ jsx136(Button, { icon: "underline" }),
+        /* @__PURE__ */ jsx136(Button, { icon: "binoculars", selected: true })
       ] }) }),
-      /* @__PURE__ */ jsx127(EditorContent, { children: /* @__PURE__ */ jsxs54("div", { className: "ProseMirror", children: [
-        /* @__PURE__ */ jsx127("span", { className: "k-text-selected", children: "Word" }),
+      /* @__PURE__ */ jsx136(EditorContent, { children: /* @__PURE__ */ jsxs59("div", { className: "ProseMirror", children: [
+        /* @__PURE__ */ jsx136("span", { className: "k-text-selected", children: "Word" }),
         " and few more ",
-        /* @__PURE__ */ jsx127("span", { className: "k-text-highlighted", children: "word" }),
+        /* @__PURE__ */ jsx136("span", { className: "k-text-highlighted", children: "word" }),
         "s. And yet again. ",
-        /* @__PURE__ */ jsx127("span", { className: "k-text-highlighted", children: "Word" }),
+        /* @__PURE__ */ jsx136("span", { className: "k-text-highlighted", children: "Word" }),
         "."
       ] }) })
     ] }) })