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

package/dist/esm/spreadsheet/tests/spreadsheet-filter-menu.js

@@ -5061,8 +5061,20 @@ TreeviewItem.className = TREEVIEWITEM_CLASSNAME;
 TreeviewItem.defaultProps = defaultProps13;
 var treeview_item_spec_default = TreeviewItem;
 
-// src/animation-container/animation-container.spec.tsx
+// src/treeview/templates/treeview-normal.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
+
+// src/treeview/templates/treeview-hierarchy.tsx
+import { jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/treeview/templates/treeview-icons.tsx
+import { jsx as jsx31, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// src/treeview/templates/treeview-checkboxes.tsx
+import { jsx as jsx32, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/animation-container/animation-container.spec.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
 var ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
 var states18 = [];
 var options17 = {};
@@ -5076,7 +5088,7 @@ var AnimationContainer = (props) => {
     offset,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       ...other,
@@ -5088,7 +5100,7 @@ var AnimationContainer = (props) => {
           ["k-animation-container-fixed"]: positionMode === "fixed"
         }
       ),
-      children: /* @__PURE__ */ jsx29("div", { className: "k-child-animation-container", style: animationStyle, children: props.children })
+      children: /* @__PURE__ */ jsx33("div", { className: "k-child-animation-container", style: animationStyle, children: props.children })
     }
   );
 };
@@ -5098,7 +5110,7 @@ AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
 AnimationContainer.defaultProps = defaultProps14;
 
 // src/spreadsheet/tests/spreadsheet-filter-menu.tsx
-import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs10 } from "react/jsx-runtime";
 var style = `
     .k-animation-container {
         width: min-content;
@@ -5106,46 +5118,46 @@ var style = `
         overflow: visible;
     }
 `;
-var spreadsheet_filter_menu_default = () => /* @__PURE__ */ jsxs7(Fragment12, { children: [
-  /* @__PURE__ */ jsx30("style", { children: style }),
-  /* @__PURE__ */ jsx30("div", { id: "test-area", className: "k-d-grid", children: /* @__PURE__ */ jsx30("section", { children: /* @__PURE__ */ jsx30(AnimationContainer, { children: /* @__PURE__ */ jsxs7("div", { className: "k-spreadsheet-filter-menu k-column-menu k-popup k-group k-reset", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "k-columnmenu-item-wrapper", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx30(Icon, { icon: "sort-asc-small" }),
+var spreadsheet_filter_menu_default = () => /* @__PURE__ */ jsxs10(Fragment12, { children: [
+  /* @__PURE__ */ jsx34("style", { children: style }),
+  /* @__PURE__ */ jsx34("div", { id: "test-area", className: "k-d-grid", children: /* @__PURE__ */ jsx34("section", { children: /* @__PURE__ */ jsx34(AnimationContainer, { children: /* @__PURE__ */ jsxs10("div", { className: "k-spreadsheet-filter-menu k-column-menu k-popup k-group k-reset", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "k-columnmenu-item-wrapper", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "k-columnmenu-item", children: [
+        /* @__PURE__ */ jsx34(Icon, { icon: "sort-asc-small" }),
         "Sort range A to Z"
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "k-columnmenu-item", children: [
-        /* @__PURE__ */ jsx30(Icon, { icon: "sort-desc-small" }),
+      /* @__PURE__ */ jsxs10("div", { className: "k-columnmenu-item", children: [
+        /* @__PURE__ */ jsx34(Icon, { icon: "sort-desc-small" }),
         "Sort range Z to A"
       ] })
     ] }),
-    /* @__PURE__ */ jsx30("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsx30("div", { className: "k-spreadsheet-condition-filter k-expander", children: /* @__PURE__ */ jsxs7("div", { className: "k-columnmenu-item", children: [
+    /* @__PURE__ */ jsx34("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsx34("div", { className: "k-spreadsheet-condition-filter k-expander", children: /* @__PURE__ */ jsxs10("div", { className: "k-columnmenu-item", children: [
       "Filter by condition",
-      /* @__PURE__ */ jsx30("span", { className: "k-spacer" }),
-      /* @__PURE__ */ jsx30("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx30(Icon, { icon: "chevron-down" }) })
+      /* @__PURE__ */ jsx34("span", { className: "k-spacer" }),
+      /* @__PURE__ */ jsx34("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx34(Icon, { icon: "chevron-down" }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx30("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsxs7("div", { className: "k-expander", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "k-columnmenu-item", children: [
+    /* @__PURE__ */ jsx34("div", { className: "k-columnmenu-item-wrapper", children: /* @__PURE__ */ jsxs10("div", { className: "k-expander", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "k-columnmenu-item", children: [
         "Filter by value",
-        /* @__PURE__ */ jsx30("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsx30("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx30(Icon, { icon: "chevron-up" }) })
+        /* @__PURE__ */ jsx34("span", { className: "k-spacer" }),
+        /* @__PURE__ */ jsx34("span", { className: "k-expander-indicator", children: /* @__PURE__ */ jsx34(Icon, { icon: "chevron-up" }) })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "k-columnmenu-item-content", children: [
-        /* @__PURE__ */ jsx30(Searchbox, { placeholder: "Search..." }),
-        /* @__PURE__ */ jsx30("div", { className: "k-spreadsheet-value-treeview-wrapper", children: /* @__PURE__ */ jsx30(Treeview, { children: /* @__PURE__ */ jsx30(TreeviewItem, { text: "All", showCheckbox: true, expanded: true, children: /* @__PURE__ */ jsxs7(TreeviewGroup, { children: [
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$14.87", showCheckbox: true, checked: true }),
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$21.10", showCheckbox: true }),
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$16.79", showCheckbox: true }),
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$11.39", showCheckbox: true }),
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$41.36", showCheckbox: true }),
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$13.19", showCheckbox: true }),
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$41.94", showCheckbox: true }),
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$23.95", showCheckbox: true }),
-          /* @__PURE__ */ jsx30(TreeviewItem, { text: "$16.16", showCheckbox: true })
+      /* @__PURE__ */ jsxs10("div", { className: "k-columnmenu-item-content", children: [
+        /* @__PURE__ */ jsx34(Searchbox, { placeholder: "Search..." }),
+        /* @__PURE__ */ jsx34("div", { className: "k-spreadsheet-value-treeview-wrapper", children: /* @__PURE__ */ jsx34(Treeview, { children: /* @__PURE__ */ jsx34(TreeviewItem, { text: "All", showCheckbox: true, expanded: true, children: /* @__PURE__ */ jsxs10(TreeviewGroup, { children: [
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$14.87", showCheckbox: true, checked: true }),
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$21.10", showCheckbox: true }),
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$16.79", showCheckbox: true }),
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$11.39", showCheckbox: true }),
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$41.36", showCheckbox: true }),
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$13.19", showCheckbox: true }),
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$41.94", showCheckbox: true }),
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$23.95", showCheckbox: true }),
+          /* @__PURE__ */ jsx34(TreeviewItem, { text: "$16.16", showCheckbox: true })
         ] }) }) }) }),
-        /* @__PURE__ */ jsxs7(ActionButtons, { alignment: "stretched", children: [
-          /* @__PURE__ */ jsx30(Button, { themeColor: "primary", children: "Apply" }),
-          /* @__PURE__ */ jsx30(Button, { children: "Clear" })
+        /* @__PURE__ */ jsxs10(ActionButtons, { alignment: "stretched", children: [
+          /* @__PURE__ */ jsx34(Button, { themeColor: "primary", children: "Apply" }),
+          /* @__PURE__ */ jsx34(Button, { children: "Clear" })
         ] })
       ] })
     ] }) })

package/dist/esm/spreadsheet/tests/spreadsheet-tools-popup.js

@@ -6174,7 +6174,7 @@ ColorPicker.className = COLORPICKER_CLASSNAME;
 ColorPicker.defaultProps = defaultProps26;
 
 // src/split-button/split-button.spec.tsx
-import { jsx as jsx75, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx75, jsxs as jsxs35 } from "react/jsx-runtime";
 var SPLITBUTTON_CLASSNAME = `k-split-button`;
 var states31 = [
   States.hover,
@@ -6222,52 +6222,57 @@ var SplitButton = (props) => {
     icon,
     text,
     arrowIconName = defaultProps27.arrowIconName,
+    popup,
+    opened,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs35(
-    "div",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        SPLITBUTTON_CLASSNAME,
-        "k-button-group",
-        optionClassNames(SPLITBUTTON_CLASSNAME, {
-          rounded
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsx75(
-          Button,
-          {
-            text,
-            icon,
-            size,
-            rounded,
-            fillMode,
-            themeColor,
-            hover,
-            focus,
-            active,
-            selected,
-            disabled,
-            children: props.children
-          }
+  return /* @__PURE__ */ jsxs35(Fragment23, { children: [
+    /* @__PURE__ */ jsxs35(
+      "div",
+      {
+        ...other,
+        className: classNames(
+          props.className,
+          SPLITBUTTON_CLASSNAME,
+          "k-button-group",
+          optionClassNames(SPLITBUTTON_CLASSNAME, {
+            rounded
+          })
         ),
-        /* @__PURE__ */ jsx75(
-          Button,
-          {
-            className: "k-split-button-arrow",
-            icon: arrowIconName,
-            size,
-            rounded,
-            fillMode,
-            disabled
-          }
-        )
-      ]
-    }
-  );
+        children: [
+          /* @__PURE__ */ jsx75(
+            Button,
+            {
+              text,
+              icon,
+              size,
+              rounded,
+              fillMode,
+              themeColor,
+              hover,
+              focus,
+              active,
+              selected,
+              disabled,
+              children: props.children
+            }
+          ),
+          /* @__PURE__ */ jsx75(
+            Button,
+            {
+              className: "k-split-button-arrow",
+              icon: arrowIconName,
+              size,
+              rounded,
+              fillMode,
+              disabled
+            }
+          )
+        ]
+      }
+    ),
+    opened && popup && /* @__PURE__ */ jsx75(Popup, { className: "k-menu-popup", children: popup })
+  ] });
 };
 SplitButton.states = states31;
 SplitButton.options = options29;
@@ -6664,7 +6669,7 @@ ToolbarItem.className = TOOLBARITEM_CLASSNAME;
 ToolbarItem.defaultProps = defaultProps30;
 
 // src/spreadsheet/tests/spreadsheet-tools-popup.tsx
-import { Fragment as Fragment23, jsx as jsx80, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx80, jsxs as jsxs36 } from "react/jsx-runtime";
 var style = `
     .k-spreadsheet-view {
         overflow: hidden;
@@ -6681,7 +6686,7 @@ var style = `
         white-space: normal;
     }
 `;
-var spreadsheet_tools_popup_default = () => /* @__PURE__ */ jsxs36(Fragment23, { children: [
+var spreadsheet_tools_popup_default = () => /* @__PURE__ */ jsxs36(Fragment24, { children: [
   /* @__PURE__ */ jsx80("style", { children: style }),
   /* @__PURE__ */ jsxs36("div", { id: "test-area", children: [
     /* @__PURE__ */ jsxs36("div", { style: { width: "100%" }, className: "k-widget k-spreadsheet", children: [

package/dist/esm/spreadsheet/tests/spreadsheet.js

@@ -6174,7 +6174,7 @@ ColorPicker.className = COLORPICKER_CLASSNAME;
 ColorPicker.defaultProps = defaultProps26;
 
 // src/split-button/split-button.spec.tsx
-import { jsx as jsx75, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx75, jsxs as jsxs35 } from "react/jsx-runtime";
 var SPLITBUTTON_CLASSNAME = `k-split-button`;
 var states31 = [
   States.hover,
@@ -6222,52 +6222,57 @@ var SplitButton = (props) => {
     icon,
     text,
     arrowIconName = defaultProps27.arrowIconName,
+    popup,
+    opened,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs35(
-    "div",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        SPLITBUTTON_CLASSNAME,
-        "k-button-group",
-        optionClassNames(SPLITBUTTON_CLASSNAME, {
-          rounded
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsx75(
-          Button,
-          {
-            text,
-            icon,
-            size,
-            rounded,
-            fillMode,
-            themeColor,
-            hover,
-            focus,
-            active,
-            selected,
-            disabled,
-            children: props.children
-          }
+  return /* @__PURE__ */ jsxs35(Fragment23, { children: [
+    /* @__PURE__ */ jsxs35(
+      "div",
+      {
+        ...other,
+        className: classNames(
+          props.className,
+          SPLITBUTTON_CLASSNAME,
+          "k-button-group",
+          optionClassNames(SPLITBUTTON_CLASSNAME, {
+            rounded
+          })
         ),
-        /* @__PURE__ */ jsx75(
-          Button,
-          {
-            className: "k-split-button-arrow",
-            icon: arrowIconName,
-            size,
-            rounded,
-            fillMode,
-            disabled
-          }
-        )
-      ]
-    }
-  );
+        children: [
+          /* @__PURE__ */ jsx75(
+            Button,
+            {
+              text,
+              icon,
+              size,
+              rounded,
+              fillMode,
+              themeColor,
+              hover,
+              focus,
+              active,
+              selected,
+              disabled,
+              children: props.children
+            }
+          ),
+          /* @__PURE__ */ jsx75(
+            Button,
+            {
+              className: "k-split-button-arrow",
+              icon: arrowIconName,
+              size,
+              rounded,
+              fillMode,
+              disabled
+            }
+          )
+        ]
+      }
+    ),
+    opened && popup && /* @__PURE__ */ jsx75(Popup, { className: "k-menu-popup", children: popup })
+  ] });
 };
 SplitButton.states = states31;
 SplitButton.options = options29;
@@ -6664,7 +6669,7 @@ ToolbarItem.className = TOOLBARITEM_CLASSNAME;
 ToolbarItem.defaultProps = defaultProps30;
 
 // src/spreadsheet/tests/spreadsheet.tsx
-import { Fragment as Fragment23, jsx as jsx80, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx80, jsxs as jsxs36 } from "react/jsx-runtime";
 var style = `
     .k-spreadsheet-view {
         overflow: hidden;
@@ -6681,7 +6686,7 @@ var style = `
         white-space: normal;
     }
 `;
-var spreadsheet_default = () => /* @__PURE__ */ jsxs36(Fragment23, { children: [
+var spreadsheet_default = () => /* @__PURE__ */ jsxs36(Fragment24, { children: [
   /* @__PURE__ */ jsx80("style", { children: style }),
   /* @__PURE__ */ jsx80("div", { id: "test-area", children: /* @__PURE__ */ jsxs36("div", { style: { width: "100%" }, className: "k-widget k-spreadsheet", children: [
     /* @__PURE__ */ jsxs36("div", { className: "k-tabstrip-wrapper", children: [

package/dist/esm/switch/switch.spec.js

@@ -61,6 +61,12 @@ var Size = {
   "xxlarge": "xxlarge",
   "xxxlarge": "xxxlarge"
 };
+var Roundness = {
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "full": "full"
+};
 var States = {
   "open": "open",
   "hover": "hover",
@@ -88,12 +94,14 @@ var states = [
   States.checked
 ];
 var options = {
-  size: [Size.small, Size.medium, Size.large]
+  size: [Size.small, Size.medium, Size.large],
+  trackRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  thumbRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
 };
 var defaultProps = {
   size: Size.medium,
-  trackRounded: "full",
-  thumbRounded: "full"
+  trackRounded: Roundness.full,
+  thumbRounded: Roundness.full
 };
 var Switch = (props) => {
   const {
@@ -134,9 +142,9 @@ var Switch = (props) => {
           {
             className: classNames(
               "k-switch-track",
-              {
-                [`k-rounded-${trackRounded}`]: trackRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: trackRounded
+              })
             ),
             children: [
               onLabel && /* @__PURE__ */ jsx("span", { className: "k-switch-label-on", children: onLabel }),
@@ -149,9 +157,9 @@ var Switch = (props) => {
           {
             className: classNames(
               "k-switch-thumb",
-              {
-                [`k-rounded-${thumbRounded}`]: thumbRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: thumbRounded
+              })
             )
           }
         ) })

package/dist/esm/switch/templates/switch-checked.js

@@ -0,0 +1,181 @@
+// src/misc/class-names.ts
+var classNames = (...args) => {
+  return args.filter((arg) => arg !== true && Boolean(arg)).map((arg) => {
+    return Array.isArray(arg) ? classNames(...arg) : typeof arg === "object" ? Object.keys(arg).map((key, idx) => arg[idx] || arg[key] && key || null).filter((el) => el !== null).join(" ") : arg;
+  }).filter((arg) => Boolean(arg)).join(" ");
+};
+
+// src/misc/component-class-names.ts
+var optionClassNames = (componentClassName, props) => {
+  return classNames(
+    {
+      [`${componentClassName}-xs`]: props.size === "xsmall",
+      [`${componentClassName}-sm`]: props.size === "small",
+      [`${componentClassName}-md`]: props.size === "medium",
+      [`${componentClassName}-lg`]: props.size === "large",
+      [`${componentClassName}-xl`]: props.size === "xlarge",
+      [`${componentClassName}-xxl`]: props.size === "xxlarge",
+      [`${componentClassName}-xxxl`]: props.size === "xxxlarge"
+    },
+    {
+      [`${componentClassName}-${props.fillMode}`]: props.fillMode
+    },
+    {
+      [`${componentClassName}-${props.fillMode}-${props.themeColor}`]: props.fillMode && props.themeColor
+    },
+    {
+      [`${componentClassName}-${props.themeColor}`]: props.themeColor && props.fillMode === void 0
+    },
+    {
+      "k-rounded-sm": props.rounded === "small",
+      "k-rounded-md": props.rounded === "medium",
+      "k-rounded-lg": props.rounded === "large",
+      "k-rounded-full": props.rounded === "full"
+    }
+  );
+};
+var stateClassNames = (_componentClassName, props) => {
+  return classNames({
+    "k-valid": props.valid,
+    "k-invalid": props.invalid,
+    "k-hover": props.hover,
+    "k-focus": props.focus,
+    "k-checked": props.checked,
+    "k-active": props.active,
+    "k-selected": props.selected,
+    "k-disabled": props.disabled,
+    "k-indeterminate": props.indeterminate && !props.checked,
+    "k-loading": props.loading,
+    "k-empty": props.empty,
+    "k-readonly": props.readonly
+  });
+};
+
+// src/misc/theme.ts
+var Size = {
+  "xsmall": "xsmall",
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "xlarge": "xlarge",
+  "xxlarge": "xxlarge",
+  "xxxlarge": "xxxlarge"
+};
+var Roundness = {
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "full": "full"
+};
+var States = {
+  "open": "open",
+  "hover": "hover",
+  "focus": "focus",
+  "active": "active",
+  "selected": "selected",
+  "disabled": "disabled",
+  "valid": "valid",
+  "invalid": "invalid",
+  "loading": "loading",
+  "required": "required",
+  "empty": "empty",
+  "indeterminate": "indeterminate",
+  "checked": "checked",
+  "readonly": "readonly"
+};
+
+// src/switch/switch.spec.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SWITCH_CLASSNAME = `k-switch`;
+var states = [
+  States.hover,
+  States.focus,
+  States.disabled,
+  States.checked
+];
+var options = {
+  size: [Size.small, Size.medium, Size.large],
+  trackRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  thumbRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
+};
+var defaultProps = {
+  size: Size.medium,
+  trackRounded: Roundness.full,
+  thumbRounded: Roundness.full
+};
+var Switch = (props) => {
+  const {
+    checked,
+    onLabel,
+    offLabel,
+    size = defaultProps.size,
+    trackRounded = defaultProps.trackRounded,
+    thumbRounded = defaultProps.thumbRounded,
+    hover,
+    focus,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SWITCH_CLASSNAME,
+        optionClassNames(SWITCH_CLASSNAME, {
+          size
+        }),
+        stateClassNames(SWITCH_CLASSNAME, {
+          hover,
+          focus,
+          disabled
+        }),
+        {
+          [`${SWITCH_CLASSNAME}-on`]: checked,
+          [`${SWITCH_CLASSNAME}-off`]: !checked
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: classNames(
+              "k-switch-track",
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: trackRounded
+              })
+            ),
+            children: [
+              onLabel && /* @__PURE__ */ jsx("span", { className: "k-switch-label-on", children: onLabel }),
+              offLabel && /* @__PURE__ */ jsx("span", { className: "k-switch-label-off", children: offLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "k-switch-thumb-wrap", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              "k-switch-thumb",
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: thumbRounded
+              })
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+Switch.states = states;
+Switch.options = options;
+Switch.className = SWITCH_CLASSNAME;
+Switch.defaultProps = defaultProps;
+var switch_spec_default = Switch;
+
+// src/switch/templates/switch-checked.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SwitchChecked = (props) => /* @__PURE__ */ jsx2(switch_spec_default, { ...props, checked: true });
+export {
+  SwitchChecked
+};