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

package/dist/cjs/loader/templates/loader-infinite.js

@@ -0,0 +1,250 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/loader/templates/loader-infinite.tsx
+var loader_infinite_exports = {};
+__export(loader_infinite_exports, {
+  LoaderInfinite: () => LoaderInfinite
+});
+module.exports = __toCommonJS(loader_infinite_exports);
+
+// 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"
+    }
+  );
+};
+
+// src/misc/theme.ts
+var Size = {
+  "xsmall": "xsmall",
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "xlarge": "xlarge",
+  "xxlarge": "xxlarge",
+  "xxxlarge": "xxxlarge"
+};
+var ThemeColor = {
+  "inherit": "inherit",
+  "base": "base",
+  "primary": "primary",
+  "secondary": "secondary",
+  "tertiary": "tertiary",
+  "info": "info",
+  "success": "success",
+  "warning": "warning",
+  "error": "error",
+  "dark": "dark",
+  "light": "light",
+  "inverse": "inverse"
+};
+
+// src/loader/loader.spec.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LOADER_CLASSNAME = `k-loader`;
+var LoaderAnimationMap = {
+  "pulsing": "pulsing-2",
+  "infinite-spinner": "spinner-3",
+  "converging-spinner": "spinner-4"
+};
+var states = [];
+var options = {
+  size: [Size.small, Size.medium, Size.large],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps = {
+  size: Size.medium,
+  themeColor: ThemeColor.primary,
+  animation: "pulsing"
+};
+var Loader = (props) => {
+  const {
+    size = defaultProps.size,
+    themeColor = defaultProps.themeColor,
+    animation = defaultProps.animation,
+    ...other
+  } = props;
+  const animationElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "k-loader-segment" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        LOADER_CLASSNAME,
+        {
+          [`k-loader-${LoaderAnimationMap[animation] || animation}`]: animation
+        },
+        optionClassNames(LOADER_CLASSNAME, {
+          size,
+          themeColor
+        })
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "k-loader-canvas", children: [
+        animation === "pulsing" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          animationElement,
+          animationElement
+        ] }),
+        animation === "infinite-spinner" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          animationElement,
+          animationElement,
+          animationElement
+        ] }),
+        animation === "converging-spinner" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          animationElement,
+          animationElement,
+          animationElement,
+          animationElement
+        ] })
+      ] })
+    }
+  );
+};
+Loader.states = states;
+Loader.options = options;
+Loader.className = LOADER_CLASSNAME;
+Loader.defaultProps = defaultProps;
+var loader_spec_default = Loader;
+
+// src/loader/loader-container.spec.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LOADERCONTAINER_CLASSNAME = `k-loader-container`;
+var states2 = [];
+var options2 = {
+  size: [Size.small, Size.medium, Size.large],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps2 = {
+  size: Size.medium,
+  themeColor: ThemeColor.primary,
+  loaderType: "pulsing",
+  position: "top",
+  overlay: "dark",
+  panel: false
+};
+var LoaderContainer = (props) => {
+  const {
+    size = defaultProps2.size,
+    themeColor = defaultProps2.themeColor,
+    loaderType = defaultProps2.loaderType,
+    position = defaultProps2.position,
+    overlay = defaultProps2.overlay,
+    panel = defaultProps2.panel,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        LOADERCONTAINER_CLASSNAME,
+        optionClassNames(LOADERCONTAINER_CLASSNAME, {
+          size
+        }),
+        {
+          [`k-loader-${position}`]: position
+        }
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `k-loader-container-overlay k-overlay-${overlay}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: classNames(
+          "k-loader-container-inner",
+          {
+            [`k-loader-container-panel`]: panel
+          }
+        ), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(loader_spec_default, { size, themeColor, animation: loaderType }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `k-loader-container-label !k-text-${themeColor}`, children: "Loading..." })
+        ] })
+      ]
+    }
+  );
+};
+LoaderContainer.states = states2;
+LoaderContainer.options = options2;
+LoaderContainer.className = LOADERCONTAINER_CLASSNAME;
+LoaderContainer.defaultProps = defaultProps2;
+
+// src/loader/templates/loader-normal.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-converging.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-container-normal.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-infinite.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var LoaderInfinite = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader, { animation: "infinite-spinner", ...props });

package/dist/cjs/loader/templates/loader-normal.js

@@ -0,0 +1,250 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/loader/templates/loader-normal.tsx
+var loader_normal_exports = {};
+__export(loader_normal_exports, {
+  LoaderNormal: () => LoaderNormal
+});
+module.exports = __toCommonJS(loader_normal_exports);
+
+// 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"
+    }
+  );
+};
+
+// src/misc/theme.ts
+var Size = {
+  "xsmall": "xsmall",
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "xlarge": "xlarge",
+  "xxlarge": "xxlarge",
+  "xxxlarge": "xxxlarge"
+};
+var ThemeColor = {
+  "inherit": "inherit",
+  "base": "base",
+  "primary": "primary",
+  "secondary": "secondary",
+  "tertiary": "tertiary",
+  "info": "info",
+  "success": "success",
+  "warning": "warning",
+  "error": "error",
+  "dark": "dark",
+  "light": "light",
+  "inverse": "inverse"
+};
+
+// src/loader/loader.spec.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LOADER_CLASSNAME = `k-loader`;
+var LoaderAnimationMap = {
+  "pulsing": "pulsing-2",
+  "infinite-spinner": "spinner-3",
+  "converging-spinner": "spinner-4"
+};
+var states = [];
+var options = {
+  size: [Size.small, Size.medium, Size.large],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps = {
+  size: Size.medium,
+  themeColor: ThemeColor.primary,
+  animation: "pulsing"
+};
+var Loader = (props) => {
+  const {
+    size = defaultProps.size,
+    themeColor = defaultProps.themeColor,
+    animation = defaultProps.animation,
+    ...other
+  } = props;
+  const animationElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "k-loader-segment" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        LOADER_CLASSNAME,
+        {
+          [`k-loader-${LoaderAnimationMap[animation] || animation}`]: animation
+        },
+        optionClassNames(LOADER_CLASSNAME, {
+          size,
+          themeColor
+        })
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "k-loader-canvas", children: [
+        animation === "pulsing" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          animationElement,
+          animationElement
+        ] }),
+        animation === "infinite-spinner" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          animationElement,
+          animationElement,
+          animationElement
+        ] }),
+        animation === "converging-spinner" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          animationElement,
+          animationElement,
+          animationElement,
+          animationElement
+        ] })
+      ] })
+    }
+  );
+};
+Loader.states = states;
+Loader.options = options;
+Loader.className = LOADER_CLASSNAME;
+Loader.defaultProps = defaultProps;
+var loader_spec_default = Loader;
+
+// src/loader/loader-container.spec.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LOADERCONTAINER_CLASSNAME = `k-loader-container`;
+var states2 = [];
+var options2 = {
+  size: [Size.small, Size.medium, Size.large],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps2 = {
+  size: Size.medium,
+  themeColor: ThemeColor.primary,
+  loaderType: "pulsing",
+  position: "top",
+  overlay: "dark",
+  panel: false
+};
+var LoaderContainer = (props) => {
+  const {
+    size = defaultProps2.size,
+    themeColor = defaultProps2.themeColor,
+    loaderType = defaultProps2.loaderType,
+    position = defaultProps2.position,
+    overlay = defaultProps2.overlay,
+    panel = defaultProps2.panel,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        LOADERCONTAINER_CLASSNAME,
+        optionClassNames(LOADERCONTAINER_CLASSNAME, {
+          size
+        }),
+        {
+          [`k-loader-${position}`]: position
+        }
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `k-loader-container-overlay k-overlay-${overlay}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: classNames(
+          "k-loader-container-inner",
+          {
+            [`k-loader-container-panel`]: panel
+          }
+        ), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(loader_spec_default, { size, themeColor, animation: loaderType }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `k-loader-container-label !k-text-${themeColor}`, children: "Loading..." })
+        ] })
+      ]
+    }
+  );
+};
+LoaderContainer.states = states2;
+LoaderContainer.options = options2;
+LoaderContainer.className = LOADERCONTAINER_CLASSNAME;
+LoaderContainer.defaultProps = defaultProps2;
+
+// src/loader/templates/loader-infinite.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-converging.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-container-normal.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-normal.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var LoaderNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader, { ...props });

package/dist/cjs/loader/tests/{loader-sizes.js → loader-colors.js}

@@ -16,12 +16,12 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/loader/tests/loader-sizes.tsx
-var loader_sizes_exports = {};
-__export(loader_sizes_exports, {
-  default: () => loader_sizes_default
+// src/loader/tests/loader-colors.tsx
+var loader_colors_exports = {};
+__export(loader_colors_exports, {
+  default: () => loader_colors_default
 });
-module.exports = __toCommonJS(loader_sizes_exports);
+module.exports = __toCommonJS(loader_colors_exports);
 
 // src/misc/class-names.ts
 var classNames = (...args) => {
@@ -236,23 +236,32 @@ LoaderContainer.options = options2;
 LoaderContainer.className = LOADERCONTAINER_CLASSNAME;
 LoaderContainer.defaultProps = defaultProps2;
 
-// src/loader/tests/loader-sizes.tsx
+// src/loader/templates/loader-normal.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var loader_sizes_default = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-4", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {}),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "col", children: "Pulsing 2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "col", children: "Spinner 3" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "col", children: "Spinner 4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Small" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "small", themeColor: "primary", animation: "pulsing" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "small", themeColor: "primary", animation: "infinite-spinner" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "small", themeColor: "primary", animation: "converging-spinner" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Medium" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "medium", themeColor: "primary", animation: "pulsing" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "medium", themeColor: "primary", animation: "infinite-spinner" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "medium", themeColor: "primary", animation: "converging-spinner" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Large" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "large", themeColor: "primary", animation: "pulsing" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "large", themeColor: "primary", animation: "infinite-spinner" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: "large", themeColor: "primary", animation: "converging-spinner" }) })
+var LoaderNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { ...props });
+
+// src/loader/templates/loader-infinite.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var LoaderInfinite = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Loader, { animation: "infinite-spinner", ...props });
+
+// src/loader/templates/loader-converging.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var LoaderConverging = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader, { animation: "converging-spinner", ...props });
+
+// src/loader/templates/loader-container-normal.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// src/loader/tests/loader-colors.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var loader_colors_default = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-4", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {}),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "col", children: "Pulsing 2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "col", children: "Spinner 3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "col", children: "Spinner 4" }),
+  Loader.options.themeColor.map((color) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoaderNormal, { size: "large", themeColor: color }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoaderInfinite, { size: "large", themeColor: color }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoaderConverging, { size: "large", themeColor: color }) })
+  ] }))
 ] }) });

package/dist/cjs/loader/tests/loader-container-colors.js

@@ -236,8 +236,21 @@ LoaderContainer.options = options2;
 LoaderContainer.className = LOADERCONTAINER_CLASSNAME;
 LoaderContainer.defaultProps = defaultProps2;
 
-// src/loader/tests/loader-container-colors.tsx
+// src/loader/templates/loader-normal.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-infinite.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-converging.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/loader/templates/loader-container-normal.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var LoaderContainerNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoaderContainer, { ...props });
+
+// src/loader/tests/loader-container-colors.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var styles = `
     .example {
         width: 100%;
@@ -245,28 +258,10 @@ var styles = `
         position: relative;
     }
 `;
-var loader_container_colors_default = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "primary", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "secondary", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Tertiary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "tertiary", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Info" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "info", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Success" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "success", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "warning", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Error" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "error", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Dark" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "dark", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Light" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "light", overlay: "dark", panel: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Inverse" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "example", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderContainer, { size: "large", position: "top", themeColor: "inverse", overlay: "dark", panel: true }) })
-  ] })
+var loader_container_colors_default = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: LoaderContainer.options.themeColor.map((color) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "example", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoaderContainerNormal, { size: "large", themeColor: color, panel: true })
+  ] }) })) })
 ] });