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

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

@@ -6134,6 +6134,8 @@ var MultiSelect = (props) => {
     disabled,
     readonly,
     opened,
+    adaptive,
+    adaptiveSettings,
     ...other
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
@@ -6198,7 +6200,22 @@ var MultiSelect = (props) => {
         ]
       }
     ),
-    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Popup, { className: "k-list-container k-multiselect-popup", children: popup })
+    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Popup, { className: "k-list-container k-multiselect-popup", children: popup }),
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        ActionSheetHeader,
+        {
+          actions: ["x"],
+          filter: true,
+          title: "Select Item"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "k-list-container", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(List, { size: "large", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ListItem, { text: "List item" }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ListItem, { text: "List item" }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ListItem, { text: "List item" })
+      ] }) })
+    ] })
   ] });
 };
 MultiSelect.states = states29;
@@ -6206,8 +6223,26 @@ MultiSelect.options = options27;
 MultiSelect.className = MULTISELECT_CLASSNAME;
 MultiSelect.defaultProps = defaultProps25;
 
-// src/form/form-field.tsx
+// src/multiselect/templates/multiselect-normal.tsx
 var import_jsx_runtime75 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-popup.tsx
+var import_jsx_runtime76 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-value.tsx
+var import_jsx_runtime77 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-arrow-button.tsx
+var import_jsx_runtime78 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-adaptive.tsx
+var import_jsx_runtime79 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-grouping.tsx
+var import_jsx_runtime80 = require("react/jsx-runtime");
+
+// src/form/form-field.tsx
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var FORMFIELD_CLASSNAME = "k-form-field";
 var states30 = [
   States.disabled
@@ -6225,7 +6260,7 @@ var FormField = (props) => {
     dir,
     colSpan
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
     "div",
     {
       className: classNames(
@@ -6238,19 +6273,19 @@ var FormField = (props) => {
       ),
       dir,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("label", { className: classNames(
+        label && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { className: classNames(
           "k-label",
           "k-form-label"
         ), children: [
           label,
-          optional && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
-          info && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "k-field-info", children: "(field info)" })
+          optional && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
+          info && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "k-field-info", children: "(field info)" })
         ] }),
-        orientation === "horizontal" && !label && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "k-label k-form-label k-label-empty" }),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "k-form-field-wrap", children: [
+        orientation === "horizontal" && !label && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "k-label k-form-label k-label-empty" }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "k-form-field-wrap", children: [
           editor,
-          hint && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "k-form-hint", children: hint }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "k-form-error", children: error })
+          hint && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "k-form-hint", children: hint }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "k-form-error", children: error })
         ] })
       ]
     }
@@ -6259,7 +6294,7 @@ var FormField = (props) => {
 FormField.className = FORMFIELD_CLASSNAME;
 
 // src/form/fieldset.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var FIELDSET_CLASSNAME = "k-form-fieldset";
 var Fieldset = (props) => {
   const {
@@ -6269,9 +6304,9 @@ var Fieldset = (props) => {
     gapX,
     gapY
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-    legend && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("legend", { className: "k-form-legend", children: legend }),
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
+    legend && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("legend", { className: "k-form-legend", children: legend }),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -6279,13 +6314,13 @@ var Fieldset = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: props.children })
+    ), children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_jsx_runtime82.Fragment, { children: props.children })
   ] });
 };
 Fieldset.className = FIELDSET_CLASSNAME;
 
 // src/form/form.spec.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var import_react = require("react");
 var FORM_CLASSNAME = "k-form";
 var states31 = [];
@@ -6309,7 +6344,7 @@ var Form = (props) => {
     tag = defaultProps26.tag,
     children
   } = props;
-  const Parent = ({ tag: tag2, className: className13, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("form", { className: className13, children: children2 }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: className13, children: children2 });
+  const Parent = ({ tag: tag2, className: className13, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("form", { className: className13, children: children2 }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: className13, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -6328,7 +6363,7 @@ var Form = (props) => {
       children.type === Fieldset && formChildren.push(/* @__PURE__ */ (0, import_react.createElement)(Fieldset, { ...children.props, key: `${(/* @__PURE__ */ new Date()).getTime()}` }));
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(Parent, { tag, className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Parent, { tag, className: classNames(
     props.className,
     FORM_CLASSNAME,
     optionClassNames(FORM_CLASSNAME, {
@@ -6338,7 +6373,7 @@ var Form = (props) => {
       [`${FORM_CLASSNAME}-${orientation}`]: orientation
     }
   ), children: [
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: classNames(
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -6346,8 +6381,8 @@ var Form = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: formChildren }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_jsx_runtime77.Fragment, { children: formChildren }),
-    formButtons && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "k-form-buttons", children: formButtons })
+    ), children: formChildren }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_jsx_runtime83.Fragment, { children: formChildren }),
+    formButtons && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "k-form-buttons", children: formButtons })
   ] });
 };
 Form.states = states31;
@@ -6356,83 +6391,83 @@ Form.className = FORM_CLASSNAME;
 Form.defaultProps = defaultProps26;
 
 // src/form/tests/form-field-dropdowns.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var styles = `
     section {
         padding: 20px;
         border: 1px dashed gray;
     }
 `;
-var form_field_dropdowns_default = () => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: "Vertical Form" }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: "Horizontal Form" }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(Form, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+var form_field_dropdowns_default = () => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { children: "Vertical Form" }),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { children: "Horizontal Form" }),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Form, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         FormField,
         {
           label: "AutoComplete:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Autocomplete, { placeholder: "Autocomplete..." })
+          editor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Autocomplete, { placeholder: "Autocomplete..." })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         FormField,
         {
           label: "ComboBox:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Combobox, { placeholder: "Combobox..." })
+          editor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Combobox, { placeholder: "Combobox..." })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         FormField,
         {
           label: "DropDownList:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DropdownList, { placeholder: "DropdownList..." })
+          editor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DropdownList, { placeholder: "DropdownList..." })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         FormField,
         {
           label: "MultiSelect:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          editor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             MultiSelect,
             {
-              tags: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Chip, { text: "Female", actions: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChipAction, { type: "remove" }) })
+              tags: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Chip, { text: "Female", actions: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ChipAction, { type: "remove" }) })
             }
           )
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(Form, { orientation: "horizontal", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Form, { orientation: "horizontal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         FormField,
         {
           label: "AutoComplete:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Autocomplete, { placeholder: "Autocomplete..." })
+          editor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Autocomplete, { placeholder: "Autocomplete..." })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         FormField,
         {
           label: "ComboBox:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Combobox, { placeholder: "Combobox..." })
+          editor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Combobox, { placeholder: "Combobox..." })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         FormField,
         {
           label: "DropDownList:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DropdownList, { placeholder: "DropdownList..." })
+          editor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DropdownList, { placeholder: "DropdownList..." })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         FormField,
         {
           label: "MultiSelect:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          editor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             MultiSelect,
             {
-              tags: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Chip, { text: "Female", actions: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChipAction, { type: "remove" }) })
+              tags: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Chip, { text: "Female", actions: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ChipAction, { type: "remove" }) })
             }
           )
         }

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

@@ -4579,8 +4579,7 @@ var states11 = [
   States.valid,
   States.invalid,
   States.required,
-  States.disabled,
-  States.loading
+  States.disabled
 ];
 var options10 = {
   size: [Size.small, Size.medium, Size.large],
@@ -4605,7 +4604,6 @@ var Textarea = (props) => {
     valid,
     invalid,
     required,
-    loading,
     disabled,
     ...other
   } = props;
@@ -4621,13 +4619,14 @@ var Textarea = (props) => {
       valid,
       invalid,
       required,
-      loading,
       disabled,
       className: classNames(props.className, TEXTAREA_CLASSNAME),
       children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         InputInnerTextarea,
         {
-          className: "!k-overflow-auto",
+          className: classNames(
+            "!k-overflow-auto"
+          ),
           value,
           placeholder,
           rows
@@ -4641,8 +4640,11 @@ Textarea.options = options10;
 Textarea.className = TEXTAREA_CLASSNAME;
 Textarea.defaultProps = defaultProps8;
 
-// src/textbox/textbox.spec.tsx
+// src/textarea/templates/textarea-normal.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// src/textbox/textbox.spec.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TEXTBOX_CLASSNAME = `k-textbox`;
 var states12 = [
   States.hover,
@@ -4685,7 +4687,7 @@ var Textbox = (props) => {
     showClearButton = defaultProps9.showClearButton,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     Input,
     {
       ...other,
@@ -4702,9 +4704,9 @@ var Textbox = (props) => {
       readonly,
       className: classNames(props.className, TEXTBOX_CLASSNAME),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputPrefix, { children: prefix }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputPrefix, { children: prefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           InputValidationIcon,
           {
             valid,
@@ -4713,14 +4715,14 @@ var Textbox = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           InputLoadingIcon,
           {
             loading,
             disabled
           }
         ),
-        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           InputClearValue,
           {
             loading,
@@ -4729,7 +4731,7 @@ var Textbox = (props) => {
             value
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputSuffix, { children: suffix })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputSuffix, { children: suffix })
       ]
     }
   );
@@ -4740,10 +4742,10 @@ Textbox.className = TEXTBOX_CLASSNAME;
 Textbox.defaultProps = defaultProps9;
 
 // src/textbox/templates/textbox-normal.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 
 // src/button/button.spec.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var BUTTON_CLASSNAME = `k-button`;
 var states13 = [
   States.hover,
@@ -4798,7 +4800,7 @@ var Button = (props) => {
   } = props;
   const hasIcon = icon !== void 0;
   const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "button",
     {
       ...other,
@@ -4823,18 +4825,18 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Icon,
           {
             className: classNames(iconClassName, "k-button-icon"),
             icon
           }
         ),
-        text ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-button-text", children: text }),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { icon: arrowIconName }) })
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { icon: arrowIconName }) })
       ]
     }
   );
@@ -4845,22 +4847,22 @@ Button.className = BUTTON_CLASSNAME;
 Button.defaultProps = defaultProps10;
 
 // src/button/templates/icon-button.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 
 // src/button/templates/icon-text-button.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 
 // src/button/templates/text-button.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 
 // src/textbox/templates/textbox-prefix.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 
 // src/textbox/templates/textbox-suffix.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 
 // src/form/form-field.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var FORMFIELD_CLASSNAME = "k-form-field";
 var states14 = [
   States.disabled
@@ -4878,7 +4880,7 @@ var FormField = (props) => {
     dir,
     colSpan
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: classNames(
@@ -4891,19 +4893,19 @@ var FormField = (props) => {
       ),
       dir,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: classNames(
+        label && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: classNames(
           "k-label",
           "k-form-label"
         ), children: [
           label,
-          optional && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
-          info && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-field-info", children: "(field info)" })
+          optional && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
+          info && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "k-field-info", children: "(field info)" })
         ] }),
-        orientation === "horizontal" && !label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-label k-form-label k-label-empty" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-form-field-wrap", children: [
+        orientation === "horizontal" && !label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "k-label k-form-label k-label-empty" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "k-form-field-wrap", children: [
           editor,
-          hint && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-form-hint", children: hint }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-form-error", children: error })
+          hint && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "k-form-hint", children: hint }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "k-form-error", children: error })
         ] })
       ]
     }
@@ -4912,7 +4914,7 @@ var FormField = (props) => {
 FormField.className = FORMFIELD_CLASSNAME;
 
 // src/form/fieldset.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var FIELDSET_CLASSNAME = "k-form-fieldset";
 var Fieldset = (props) => {
   const {
@@ -4922,9 +4924,9 @@ var Fieldset = (props) => {
     gapX,
     gapY
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-    legend && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("legend", { className: "k-form-legend", children: legend }),
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
+    legend && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("legend", { className: "k-form-legend", children: legend }),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -4932,13 +4934,13 @@ var Fieldset = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: props.children })
+    ), children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: props.children })
   ] });
 };
 Fieldset.className = FIELDSET_CLASSNAME;
 
 // src/form/form.spec.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var import_react = require("react");
 var FORM_CLASSNAME = "k-form";
 var states15 = [];
@@ -4962,7 +4964,7 @@ var Form = (props) => {
     tag = defaultProps11.tag,
     children
   } = props;
-  const Parent = ({ tag: tag2, className: className9, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("form", { className: className9, children: children2 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: className9, children: children2 });
+  const Parent = ({ tag: tag2, className: className9, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("form", { className: className9, children: children2 }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: className9, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -4981,7 +4983,7 @@ var Form = (props) => {
       children.type === Fieldset && formChildren.push(/* @__PURE__ */ (0, import_react.createElement)(Fieldset, { ...children.props, key: `${(/* @__PURE__ */ new Date()).getTime()}` }));
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Parent, { tag, className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Parent, { tag, className: classNames(
     props.className,
     FORM_CLASSNAME,
     optionClassNames(FORM_CLASSNAME, {
@@ -4991,7 +4993,7 @@ var Form = (props) => {
       [`${FORM_CLASSNAME}-${orientation}`]: orientation
     }
   ), children: [
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: classNames(
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -4999,8 +5001,8 @@ var Form = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: formChildren }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: formChildren }),
-    formButtons && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "k-form-buttons", children: formButtons })
+    ), children: formChildren }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: formChildren }),
+    formButtons && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "k-form-buttons", children: formButtons })
   ] });
 };
 Form.states = states15;
@@ -5009,36 +5011,36 @@ Form.className = FORM_CLASSNAME;
 Form.defaultProps = defaultProps11;
 
 // src/form/tests/form-field-fieldset.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var styles = `
     section {
         padding: 20px;
         border: 1px dashed gray;
     }
 `;
-var form_field_fieldset_default = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Vertical Form" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Horizontal Form" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Form, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fieldset, { legend: "Please fill in the fields:", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormField, { label: "First Name:", editor: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Textbox, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormField, { label: "Last Name:", editor: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Textbox, {}) })
+var form_field_fieldset_default = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: "Vertical Form" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: "Horizontal Form" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Form, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Fieldset, { legend: "Please fill in the fields:", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormField, { label: "First Name:", editor: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Textbox, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormField, { label: "Last Name:", editor: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Textbox, {}) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fieldset, { legend: "Please fill in your address details:", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormField, { label: "City:", editor: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Textbox, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormField, { label: "Address:", editor: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Textarea, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Fieldset, { legend: "Please fill in your address details:", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormField, { label: "City:", editor: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Textbox, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormField, { label: "Address:", editor: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Textarea, {}) })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Form, { orientation: "horizontal", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fieldset, { legend: "Please fill in the fields:", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormField, { label: "First Name:", editor: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Textbox, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormField, { label: "Last Name:", editor: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Textbox, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Form, { orientation: "horizontal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Fieldset, { legend: "Please fill in the fields:", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormField, { label: "First Name:", editor: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Textbox, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormField, { label: "Last Name:", editor: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Textbox, {}) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fieldset, { legend: "Please fill in your address details:", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormField, { label: "City:", editor: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Textbox, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormField, { label: "Address:", editor: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Textarea, { rows: 3 }) })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Fieldset, { legend: "Please fill in your address details:", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormField, { label: "City:", editor: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Textbox, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormField, { label: "Address:", editor: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Textarea, { rows: 3 }) })
       ] })
     ] }) })
   ] })