@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.1

package/dist/esm/form/tests/form-field-dropdowns.js

@@ -6115,6 +6115,8 @@ var MultiSelect = (props) => {
     disabled,
     readonly,
     opened,
+    adaptive,
+    adaptiveSettings,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs29(Fragment21, { children: [
@@ -6179,7 +6181,22 @@ var MultiSelect = (props) => {
         ]
       }
     ),
-    opened && popup && /* @__PURE__ */ jsx74(Popup, { className: "k-list-container k-multiselect-popup", children: popup })
+    opened && popup && /* @__PURE__ */ jsx74(Popup, { className: "k-list-container k-multiselect-popup", children: popup }),
+    adaptive && /* @__PURE__ */ jsxs29(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx74(
+        ActionSheetHeader,
+        {
+          actions: ["x"],
+          filter: true,
+          title: "Select Item"
+        }
+      ),
+      /* @__PURE__ */ jsx74("div", { className: "k-list-container", children: /* @__PURE__ */ jsxs29(List, { size: "large", children: [
+        /* @__PURE__ */ jsx74(ListItem, { text: "List item" }),
+        /* @__PURE__ */ jsx74(ListItem, { text: "List item" }),
+        /* @__PURE__ */ jsx74(ListItem, { text: "List item" })
+      ] }) })
+    ] })
   ] });
 };
 MultiSelect.states = states29;
@@ -6187,8 +6204,26 @@ MultiSelect.options = options27;
 MultiSelect.className = MULTISELECT_CLASSNAME;
 MultiSelect.defaultProps = defaultProps25;
 
+// src/multiselect/templates/multiselect-normal.tsx
+import { jsx as jsx75 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-popup.tsx
+import { jsx as jsx76, jsxs as jsxs30 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-value.tsx
+import { Fragment as Fragment22, jsx as jsx77 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-arrow-button.tsx
+import { jsx as jsx78 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-adaptive.tsx
+import { jsx as jsx79 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-grouping.tsx
+import { jsx as jsx80, jsxs as jsxs31 } from "react/jsx-runtime";
+
 // src/form/form-field.tsx
-import { jsx as jsx75, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs32 } from "react/jsx-runtime";
 var FORMFIELD_CLASSNAME = "k-form-field";
 var states30 = [
   States.disabled
@@ -6206,7 +6241,7 @@ var FormField = (props) => {
     dir,
     colSpan
   } = props;
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: classNames(
@@ -6219,19 +6254,19 @@ var FormField = (props) => {
       ),
       dir,
       children: [
-        label && /* @__PURE__ */ jsxs30("label", { className: classNames(
+        label && /* @__PURE__ */ jsxs32("label", { className: classNames(
           "k-label",
           "k-form-label"
         ), children: [
           label,
-          optional && /* @__PURE__ */ jsx75("span", { className: "k-label-optional", children: "(Optional)" }),
-          info && /* @__PURE__ */ jsx75("span", { className: "k-field-info", children: "(field info)" })
+          optional && /* @__PURE__ */ jsx81("span", { className: "k-label-optional", children: "(Optional)" }),
+          info && /* @__PURE__ */ jsx81("span", { className: "k-field-info", children: "(field info)" })
         ] }),
-        orientation === "horizontal" && !label && /* @__PURE__ */ jsx75("span", { className: "k-label k-form-label k-label-empty" }),
-        /* @__PURE__ */ jsxs30("div", { className: "k-form-field-wrap", children: [
+        orientation === "horizontal" && !label && /* @__PURE__ */ jsx81("span", { className: "k-label k-form-label k-label-empty" }),
+        /* @__PURE__ */ jsxs32("div", { className: "k-form-field-wrap", children: [
           editor,
-          hint && /* @__PURE__ */ jsx75("div", { className: "k-form-hint", children: hint }),
-          error && /* @__PURE__ */ jsx75("div", { className: "k-form-error", children: error })
+          hint && /* @__PURE__ */ jsx81("div", { className: "k-form-hint", children: hint }),
+          error && /* @__PURE__ */ jsx81("div", { className: "k-form-error", children: error })
         ] })
       ]
     }
@@ -6240,7 +6275,7 @@ var FormField = (props) => {
 FormField.className = FORMFIELD_CLASSNAME;
 
 // src/form/fieldset.tsx
-import { Fragment as Fragment22, jsx as jsx76, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
 var FIELDSET_CLASSNAME = "k-form-fieldset";
 var Fieldset = (props) => {
   const {
@@ -6250,9 +6285,9 @@ var Fieldset = (props) => {
     gapX,
     gapY
   } = props;
-  return /* @__PURE__ */ jsxs31("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-    legend && /* @__PURE__ */ jsx76("legend", { className: "k-form-legend", children: legend }),
-    layout === "grid" ? /* @__PURE__ */ jsx76("div", { className: classNames(
+  return /* @__PURE__ */ jsxs33("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
+    legend && /* @__PURE__ */ jsx82("legend", { className: "k-form-legend", children: legend }),
+    layout === "grid" ? /* @__PURE__ */ jsx82("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -6260,13 +6295,13 @@ var Fieldset = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: props.children }) : /* @__PURE__ */ jsx76(Fragment22, { children: props.children })
+    ), children: props.children }) : /* @__PURE__ */ jsx82(Fragment23, { children: props.children })
   ] });
 };
 Fieldset.className = FIELDSET_CLASSNAME;
 
 // src/form/form.spec.tsx
-import { Fragment as Fragment23, jsx as jsx77, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx83, jsxs as jsxs34 } from "react/jsx-runtime";
 import { createElement } from "react";
 var FORM_CLASSNAME = "k-form";
 var states31 = [];
@@ -6290,7 +6325,7 @@ var Form = (props) => {
     tag = defaultProps26.tag,
     children
   } = props;
-  const Parent = ({ tag: tag2, className: className13, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx77("form", { className: className13, children: children2 }) : /* @__PURE__ */ jsx77("div", { className: className13, children: children2 });
+  const Parent = ({ tag: tag2, className: className13, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx83("form", { className: className13, children: children2 }) : /* @__PURE__ */ jsx83("div", { className: className13, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -6309,7 +6344,7 @@ var Form = (props) => {
       children.type === Fieldset && formChildren.push(/* @__PURE__ */ createElement(Fieldset, { ...children.props, key: `${(/* @__PURE__ */ new Date()).getTime()}` }));
     }
   }
-  return /* @__PURE__ */ jsxs32(Parent, { tag, className: classNames(
+  return /* @__PURE__ */ jsxs34(Parent, { tag, className: classNames(
     props.className,
     FORM_CLASSNAME,
     optionClassNames(FORM_CLASSNAME, {
@@ -6319,7 +6354,7 @@ var Form = (props) => {
       [`${FORM_CLASSNAME}-${orientation}`]: orientation
     }
   ), children: [
-    layout === "grid" ? /* @__PURE__ */ jsx77("div", { className: classNames(
+    layout === "grid" ? /* @__PURE__ */ jsx83("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -6327,8 +6362,8 @@ var Form = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: formChildren }) : /* @__PURE__ */ jsx77(Fragment23, { children: formChildren }),
-    formButtons && /* @__PURE__ */ jsx77("div", { className: "k-form-buttons", children: formButtons })
+    ), children: formChildren }) : /* @__PURE__ */ jsx83(Fragment24, { children: formChildren }),
+    formButtons && /* @__PURE__ */ jsx83("div", { className: "k-form-buttons", children: formButtons })
   ] });
 };
 Form.states = states31;
@@ -6337,83 +6372,83 @@ Form.className = FORM_CLASSNAME;
 Form.defaultProps = defaultProps26;
 
 // src/form/tests/form-field-dropdowns.tsx
-import { Fragment as Fragment24, jsx as jsx78, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx84, jsxs as jsxs35 } from "react/jsx-runtime";
 var styles = `
     section {
         padding: 20px;
         border: 1px dashed gray;
     }
 `;
-var form_field_dropdowns_default = () => /* @__PURE__ */ jsxs33(Fragment24, { children: [
-  /* @__PURE__ */ jsx78("style", { children: styles }),
-  /* @__PURE__ */ jsxs33("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx78("span", { children: "Vertical Form" }),
-    /* @__PURE__ */ jsx78("span", { children: "Horizontal Form" }),
-    /* @__PURE__ */ jsx78("section", { children: /* @__PURE__ */ jsxs33(Form, { children: [
-      /* @__PURE__ */ jsx78(
+var form_field_dropdowns_default = () => /* @__PURE__ */ jsxs35(Fragment25, { children: [
+  /* @__PURE__ */ jsx84("style", { children: styles }),
+  /* @__PURE__ */ jsxs35("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ jsx84("span", { children: "Vertical Form" }),
+    /* @__PURE__ */ jsx84("span", { children: "Horizontal Form" }),
+    /* @__PURE__ */ jsx84("section", { children: /* @__PURE__ */ jsxs35(Form, { children: [
+      /* @__PURE__ */ jsx84(
         FormField,
         {
           label: "AutoComplete:",
-          editor: /* @__PURE__ */ jsx78(Autocomplete, { placeholder: "Autocomplete..." })
+          editor: /* @__PURE__ */ jsx84(Autocomplete, { placeholder: "Autocomplete..." })
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx84(
         FormField,
         {
           label: "ComboBox:",
-          editor: /* @__PURE__ */ jsx78(Combobox, { placeholder: "Combobox..." })
+          editor: /* @__PURE__ */ jsx84(Combobox, { placeholder: "Combobox..." })
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx84(
         FormField,
         {
           label: "DropDownList:",
-          editor: /* @__PURE__ */ jsx78(DropdownList, { placeholder: "DropdownList..." })
+          editor: /* @__PURE__ */ jsx84(DropdownList, { placeholder: "DropdownList..." })
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx84(
         FormField,
         {
           label: "MultiSelect:",
-          editor: /* @__PURE__ */ jsx78(
+          editor: /* @__PURE__ */ jsx84(
             MultiSelect,
             {
-              tags: /* @__PURE__ */ jsx78(Chip, { text: "Female", actions: /* @__PURE__ */ jsx78(ChipAction, { type: "remove" }) })
+              tags: /* @__PURE__ */ jsx84(Chip, { text: "Female", actions: /* @__PURE__ */ jsx84(ChipAction, { type: "remove" }) })
             }
           )
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx78("section", { children: /* @__PURE__ */ jsxs33(Form, { orientation: "horizontal", children: [
-      /* @__PURE__ */ jsx78(
+    /* @__PURE__ */ jsx84("section", { children: /* @__PURE__ */ jsxs35(Form, { orientation: "horizontal", children: [
+      /* @__PURE__ */ jsx84(
         FormField,
         {
           label: "AutoComplete:",
-          editor: /* @__PURE__ */ jsx78(Autocomplete, { placeholder: "Autocomplete..." })
+          editor: /* @__PURE__ */ jsx84(Autocomplete, { placeholder: "Autocomplete..." })
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx84(
         FormField,
         {
           label: "ComboBox:",
-          editor: /* @__PURE__ */ jsx78(Combobox, { placeholder: "Combobox..." })
+          editor: /* @__PURE__ */ jsx84(Combobox, { placeholder: "Combobox..." })
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx84(
         FormField,
         {
           label: "DropDownList:",
-          editor: /* @__PURE__ */ jsx78(DropdownList, { placeholder: "DropdownList..." })
+          editor: /* @__PURE__ */ jsx84(DropdownList, { placeholder: "DropdownList..." })
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx84(
         FormField,
         {
           label: "MultiSelect:",
-          editor: /* @__PURE__ */ jsx78(
+          editor: /* @__PURE__ */ jsx84(
             MultiSelect,
             {
-              tags: /* @__PURE__ */ jsx78(Chip, { text: "Female", actions: /* @__PURE__ */ jsx78(ChipAction, { type: "remove" }) })
+              tags: /* @__PURE__ */ jsx84(Chip, { text: "Female", actions: /* @__PURE__ */ jsx84(ChipAction, { type: "remove" }) })
             }
           )
         }

package/dist/esm/form/tests/form-field-fieldset.js

@@ -4560,8 +4560,7 @@ var states11 = [
   States.valid,
   States.invalid,
   States.required,
-  States.disabled,
-  States.loading
+  States.disabled
 ];
 var options10 = {
   size: [Size.small, Size.medium, Size.large],
@@ -4586,7 +4585,6 @@ var Textarea = (props) => {
     valid,
     invalid,
     required,
-    loading,
     disabled,
     ...other
   } = props;
@@ -4602,13 +4600,14 @@ var Textarea = (props) => {
       valid,
       invalid,
       required,
-      loading,
       disabled,
       className: classNames(props.className, TEXTAREA_CLASSNAME),
       children: /* @__PURE__ */ jsx15(
         InputInnerTextarea,
         {
-          className: "!k-overflow-auto",
+          className: classNames(
+            "!k-overflow-auto"
+          ),
           value,
           placeholder,
           rows
@@ -4622,8 +4621,11 @@ Textarea.options = options10;
 Textarea.className = TEXTAREA_CLASSNAME;
 Textarea.defaultProps = defaultProps8;
 
+// src/textarea/templates/textarea-normal.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+
 // src/textbox/textbox.spec.tsx
-import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs2 } from "react/jsx-runtime";
 var TEXTBOX_CLASSNAME = `k-textbox`;
 var states12 = [
   States.hover,
@@ -4683,9 +4685,9 @@ var Textbox = (props) => {
       readonly,
       className: classNames(props.className, TEXTBOX_CLASSNAME),
       children: [
-        /* @__PURE__ */ jsx16(InputPrefix, { children: prefix }),
-        /* @__PURE__ */ jsx16(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(InputPrefix, { children: prefix }),
+        /* @__PURE__ */ jsx17(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx17(
           InputValidationIcon,
           {
             valid,
@@ -4694,14 +4696,14 @@ var Textbox = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           InputLoadingIcon,
           {
             loading,
             disabled
           }
         ),
-        showClearButton && /* @__PURE__ */ jsx16(
+        showClearButton && /* @__PURE__ */ jsx17(
           InputClearValue,
           {
             loading,
@@ -4710,7 +4712,7 @@ var Textbox = (props) => {
             value
           }
         ),
-        /* @__PURE__ */ jsx16(InputSuffix, { children: suffix })
+        /* @__PURE__ */ jsx17(InputSuffix, { children: suffix })
       ]
     }
   );
@@ -4721,10 +4723,10 @@ Textbox.className = TEXTBOX_CLASSNAME;
 Textbox.defaultProps = defaultProps9;
 
 // src/textbox/templates/textbox-normal.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 
 // src/button/button.spec.tsx
-import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs3 } from "react/jsx-runtime";
 var BUTTON_CLASSNAME = `k-button`;
 var states13 = [
   States.hover,
@@ -4804,7 +4806,7 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ jsx18(
+        icon && /* @__PURE__ */ jsx19(
           Icon,
           {
             className: classNames(iconClassName, "k-button-icon"),
@@ -4812,10 +4814,10 @@ var Button = (props) => {
           }
         ),
         text ? /* @__PURE__ */ jsxs3(Fragment9, { children: [
-          text && /* @__PURE__ */ jsx18("span", { className: "k-button-text", children: text }),
+          text && /* @__PURE__ */ jsx19("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : props.children && /* @__PURE__ */ jsx18("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ jsx18("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx18(Icon, { icon: arrowIconName }) })
+        ] }) : props.children && /* @__PURE__ */ jsx19("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ jsx19("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx19(Icon, { icon: arrowIconName }) })
       ]
     }
   );
@@ -4826,22 +4828,22 @@ Button.className = BUTTON_CLASSNAME;
 Button.defaultProps = defaultProps10;
 
 // src/button/templates/icon-button.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 
 // src/button/templates/icon-text-button.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 
 // src/button/templates/text-button.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 
 // src/textbox/templates/textbox-prefix.tsx
-import { jsx as jsx22, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/textbox/templates/textbox-suffix.tsx
-import { jsx as jsx23, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs5 } from "react/jsx-runtime";
 
 // src/form/form-field.tsx
-import { jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
 var FORMFIELD_CLASSNAME = "k-form-field";
 var states14 = [
   States.disabled
@@ -4877,14 +4879,14 @@ var FormField = (props) => {
           "k-form-label"
         ), children: [
           label,
-          optional && /* @__PURE__ */ jsx24("span", { className: "k-label-optional", children: "(Optional)" }),
-          info && /* @__PURE__ */ jsx24("span", { className: "k-field-info", children: "(field info)" })
+          optional && /* @__PURE__ */ jsx25("span", { className: "k-label-optional", children: "(Optional)" }),
+          info && /* @__PURE__ */ jsx25("span", { className: "k-field-info", children: "(field info)" })
         ] }),
-        orientation === "horizontal" && !label && /* @__PURE__ */ jsx24("span", { className: "k-label k-form-label k-label-empty" }),
+        orientation === "horizontal" && !label && /* @__PURE__ */ jsx25("span", { className: "k-label k-form-label k-label-empty" }),
         /* @__PURE__ */ jsxs6("div", { className: "k-form-field-wrap", children: [
           editor,
-          hint && /* @__PURE__ */ jsx24("div", { className: "k-form-hint", children: hint }),
-          error && /* @__PURE__ */ jsx24("div", { className: "k-form-error", children: error })
+          hint && /* @__PURE__ */ jsx25("div", { className: "k-form-hint", children: hint }),
+          error && /* @__PURE__ */ jsx25("div", { className: "k-form-error", children: error })
         ] })
       ]
     }
@@ -4893,7 +4895,7 @@ var FormField = (props) => {
 FormField.className = FORMFIELD_CLASSNAME;
 
 // src/form/fieldset.tsx
-import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
 var FIELDSET_CLASSNAME = "k-form-fieldset";
 var Fieldset = (props) => {
   const {
@@ -4904,8 +4906,8 @@ var Fieldset = (props) => {
     gapY
   } = props;
   return /* @__PURE__ */ jsxs7("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-    legend && /* @__PURE__ */ jsx25("legend", { className: "k-form-legend", children: legend }),
-    layout === "grid" ? /* @__PURE__ */ jsx25("div", { className: classNames(
+    legend && /* @__PURE__ */ jsx26("legend", { className: "k-form-legend", children: legend }),
+    layout === "grid" ? /* @__PURE__ */ jsx26("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -4913,13 +4915,13 @@ var Fieldset = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: props.children }) : /* @__PURE__ */ jsx25(Fragment10, { children: props.children })
+    ), children: props.children }) : /* @__PURE__ */ jsx26(Fragment10, { children: props.children })
   ] });
 };
 Fieldset.className = FIELDSET_CLASSNAME;
 
 // src/form/form.spec.tsx
-import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
 import { createElement } from "react";
 var FORM_CLASSNAME = "k-form";
 var states15 = [];
@@ -4943,7 +4945,7 @@ var Form = (props) => {
     tag = defaultProps11.tag,
     children
   } = props;
-  const Parent = ({ tag: tag2, className: className9, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx26("form", { className: className9, children: children2 }) : /* @__PURE__ */ jsx26("div", { className: className9, children: children2 });
+  const Parent = ({ tag: tag2, className: className9, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx27("form", { className: className9, children: children2 }) : /* @__PURE__ */ jsx27("div", { className: className9, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -4972,7 +4974,7 @@ var Form = (props) => {
       [`${FORM_CLASSNAME}-${orientation}`]: orientation
     }
   ), children: [
-    layout === "grid" ? /* @__PURE__ */ jsx26("div", { className: classNames(
+    layout === "grid" ? /* @__PURE__ */ jsx27("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -4980,8 +4982,8 @@ var Form = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: formChildren }) : /* @__PURE__ */ jsx26(Fragment11, { children: formChildren }),
-    formButtons && /* @__PURE__ */ jsx26("div", { className: "k-form-buttons", children: formButtons })
+    ), children: formChildren }) : /* @__PURE__ */ jsx27(Fragment11, { children: formChildren }),
+    formButtons && /* @__PURE__ */ jsx27("div", { className: "k-form-buttons", children: formButtons })
   ] });
 };
 Form.states = states15;
@@ -4990,7 +4992,7 @@ Form.className = FORM_CLASSNAME;
 Form.defaultProps = defaultProps11;
 
 // src/form/tests/form-field-fieldset.tsx
-import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
 var styles = `
     section {
         padding: 20px;
@@ -4998,28 +5000,28 @@ var styles = `
     }
 `;
 var form_field_fieldset_default = () => /* @__PURE__ */ jsxs9(Fragment12, { children: [
-  /* @__PURE__ */ jsx27("style", { children: styles }),
+  /* @__PURE__ */ jsx28("style", { children: styles }),
   /* @__PURE__ */ jsxs9("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx27("span", { children: "Vertical Form" }),
-    /* @__PURE__ */ jsx27("span", { children: "Horizontal Form" }),
-    /* @__PURE__ */ jsx27("section", { children: /* @__PURE__ */ jsxs9(Form, { children: [
+    /* @__PURE__ */ jsx28("span", { children: "Vertical Form" }),
+    /* @__PURE__ */ jsx28("span", { children: "Horizontal Form" }),
+    /* @__PURE__ */ jsx28("section", { children: /* @__PURE__ */ jsxs9(Form, { children: [
       /* @__PURE__ */ jsxs9(Fieldset, { legend: "Please fill in the fields:", children: [
-        /* @__PURE__ */ jsx27(FormField, { label: "First Name:", editor: /* @__PURE__ */ jsx27(Textbox, {}) }),
-        /* @__PURE__ */ jsx27(FormField, { label: "Last Name:", editor: /* @__PURE__ */ jsx27(Textbox, {}) })
+        /* @__PURE__ */ jsx28(FormField, { label: "First Name:", editor: /* @__PURE__ */ jsx28(Textbox, {}) }),
+        /* @__PURE__ */ jsx28(FormField, { label: "Last Name:", editor: /* @__PURE__ */ jsx28(Textbox, {}) })
       ] }),
       /* @__PURE__ */ jsxs9(Fieldset, { legend: "Please fill in your address details:", children: [
-        /* @__PURE__ */ jsx27(FormField, { label: "City:", editor: /* @__PURE__ */ jsx27(Textbox, {}) }),
-        /* @__PURE__ */ jsx27(FormField, { label: "Address:", editor: /* @__PURE__ */ jsx27(Textarea, {}) })
+        /* @__PURE__ */ jsx28(FormField, { label: "City:", editor: /* @__PURE__ */ jsx28(Textbox, {}) }),
+        /* @__PURE__ */ jsx28(FormField, { label: "Address:", editor: /* @__PURE__ */ jsx28(Textarea, {}) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx27("section", { children: /* @__PURE__ */ jsxs9(Form, { orientation: "horizontal", children: [
+    /* @__PURE__ */ jsx28("section", { children: /* @__PURE__ */ jsxs9(Form, { orientation: "horizontal", children: [
       /* @__PURE__ */ jsxs9(Fieldset, { legend: "Please fill in the fields:", children: [
-        /* @__PURE__ */ jsx27(FormField, { label: "First Name:", editor: /* @__PURE__ */ jsx27(Textbox, {}) }),
-        /* @__PURE__ */ jsx27(FormField, { label: "Last Name:", editor: /* @__PURE__ */ jsx27(Textbox, {}) })
+        /* @__PURE__ */ jsx28(FormField, { label: "First Name:", editor: /* @__PURE__ */ jsx28(Textbox, {}) }),
+        /* @__PURE__ */ jsx28(FormField, { label: "Last Name:", editor: /* @__PURE__ */ jsx28(Textbox, {}) })
       ] }),
       /* @__PURE__ */ jsxs9(Fieldset, { legend: "Please fill in your address details:", children: [
-        /* @__PURE__ */ jsx27(FormField, { label: "City:", editor: /* @__PURE__ */ jsx27(Textbox, {}) }),
-        /* @__PURE__ */ jsx27(FormField, { label: "Address:", editor: /* @__PURE__ */ jsx27(Textarea, { rows: 3 }) })
+        /* @__PURE__ */ jsx28(FormField, { label: "City:", editor: /* @__PURE__ */ jsx28(Textbox, {}) }),
+        /* @__PURE__ */ jsx28(FormField, { label: "Address:", editor: /* @__PURE__ */ jsx28(Textarea, { rows: 3 }) })
       ] })
     ] }) })
   ] })