npm - @progress/kendo-themes-html - Versions diffs - 10.1.1-dev.1 → 10.2.0-dev.1 - Mend

@progress/kendo-themes-html 10.1.1-dev.1 → 10.2.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (951) hide show

package/dist/esm/chart-wizard/tests/chart-wizard.mjs CHANGED Viewed

@@ -4109,12 +4109,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states55 = [
   States.disabled
 ];
-var options52 = {};
+var options52 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions50 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions50.size,
     palette,
     columns = defaultOptions50.columns,
     tileSize,
@@ -4145,7 +4149,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx160("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx160("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -4666,7 +4671,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs72(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx172(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx172(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })
@@ -17399,8 +17404,8 @@ var ChartWizardNormal = (props) => /* @__PURE__ */ jsx923(
           /* @__PURE__ */ jsx923("clipPath", { id: "kdef4", children: /* @__PURE__ */ jsx923("path", { d: "M0 0 L 1337 0 1337 400 0 400Z", stroke: "#000", strokeLinejoin: "miter", fill: "none" }) })
         ] }),
         /* @__PURE__ */ jsxs515("g", { children: [
-          /* @__PURE__ */ jsx923("path", { d: "M0 0 L 1337 0 1337 400 0 400Z", stroke: "none", className: "k-var--background" }),
-          /* @__PURE__ */ jsx923("path", { d: "M38 68 L 1319 68 1319 338 38 338Z", stroke: "none", className: "k-var--background", fillOpacity: "0" }),
+          /* @__PURE__ */ jsx923("path", { d: "M0 0 L 1337 0 1337 400 0 400Z", stroke: "none", fill: "var(--kendo-chart-bg)" }),
+          /* @__PURE__ */ jsx923("path", { d: "M38 68 L 1319 68 1319 338 38 338Z", stroke: "none", fill: "var(--kendo-chart-bg)", fillOpacity: "0" }),
           /* @__PURE__ */ jsx923("path", { d: "M38.5 311.5 L 1319.5 311.5", stroke: "#c8c8c8", strokeWidth: "1", fill: "none" }),
           /* @__PURE__ */ jsx923("path", { d: "M38.5 284.5 L 1319.5 284.5", stroke: "#c8c8c8", strokeWidth: "1", fill: "none" }),
           /* @__PURE__ */ jsx923("path", { d: "M38.5 257.5 L 1319.5 257.5", stroke: "#c8c8c8", strokeWidth: "1", fill: "none" }),
@@ -17426,39 +17431,39 @@ var ChartWizardNormal = (props) => /* @__PURE__ */ jsx923(
           /* @__PURE__ */ jsx923("path", { d: "M1319.5 338.5 L 1319.5 342.5", stroke: "#c8c8c8", strokeWidth: "1", fill: "none" })
         ] }),
         /* @__PURE__ */ jsx923("g", { children: /* @__PURE__ */ jsxs515("g", { clipPath: "url(#kdef4)", children: [
-          /* @__PURE__ */ jsx923("path", { d: "M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338", stroke: "none", className: "k-var--series-a", fillOpacity: "0.8" }),
-          /* @__PURE__ */ jsx923("path", { d: "M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338", stroke: "none", className: "k-var--series-b", fillOpacity: "0.8" }),
-          /* @__PURE__ */ jsx923("path", { d: "M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338", stroke: "none", className: "k-var--series-c", fillOpacity: "0.8" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "465", cy: "182.382", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "465", cy: "204.693", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "607.333", cy: "198.623", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "749.667", cy: "184.004", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "892", cy: "217.504", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1034.333", cy: "190.248", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1176.667", cy: "301.374", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "607.333", cy: "104.676", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "465", cy: "104.394", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "322.667", cy: "175.28", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "322.667", cy: "123.637", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "180.333", cy: "122.364", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "749.667", cy: "97.467", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "749.667", cy: "176.017", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "892", cy: "210.938", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "892", cy: "176.674", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "607.333", cy: "175.187", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "322.667", cy: "275.955", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "38", cy: "176.446", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1034.333", cy: "118.411", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1176.667", cy: "100.803", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1319", cy: "136.943", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "38", cy: "202.161", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "180.333", cy: "192.178", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1034.333", cy: "258.883", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1176.667", cy: "170.657", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1319", cy: "192.258", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "38", cy: "232.19", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "180.333", cy: "223.949", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-          /* @__PURE__ */ jsx923("circle", { cx: "1319", cy: "153.894", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("path", { d: "M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338", stroke: "none", fill: "var(--kendo-chart-series-1)", fillOpacity: "0.8" }),
+          /* @__PURE__ */ jsx923("path", { d: "M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338", stroke: "none", fill: "var(--kendo-chart-series-2)", fillOpacity: "0.8" }),
+          /* @__PURE__ */ jsx923("path", { d: "M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338", stroke: "none", fill: "var(--kendo-chart-series-3)", fillOpacity: "0.8" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "465", cy: "182.382", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "465", cy: "204.693", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "607.333", cy: "198.623", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "749.667", cy: "184.004", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "892", cy: "217.504", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1034.333", cy: "190.248", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1176.667", cy: "301.374", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "607.333", cy: "104.676", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "465", cy: "104.394", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "322.667", cy: "175.28", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "322.667", cy: "123.637", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "180.333", cy: "122.364", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "749.667", cy: "97.467", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "749.667", cy: "176.017", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "892", cy: "210.938", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "892", cy: "176.674", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "607.333", cy: "175.187", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "322.667", cy: "275.955", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "38", cy: "176.446", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1034.333", cy: "118.411", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1176.667", cy: "100.803", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1319", cy: "136.943", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "38", cy: "202.161", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "180.333", cy: "192.178", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1034.333", cy: "258.883", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1176.667", cy: "170.657", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1319", cy: "192.258", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "38", cy: "232.19", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "180.333", cy: "223.949", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+          /* @__PURE__ */ jsx923("circle", { cx: "1319", cy: "153.894", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
           /* @__PURE__ */ jsx923("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "24.5", y: "358", stroke: "none", fillOpacity: "1", children: "2002" }),
           /* @__PURE__ */ jsx923("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "166.833", y: "358", stroke: "none", fillOpacity: "1", children: "2003" }),
           /* @__PURE__ */ jsx923("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "309.167", y: "358", stroke: "none", fillOpacity: "1", children: "2004" }),
@@ -17483,17 +17488,17 @@ var ChartWizardNormal = (props) => /* @__PURE__ */ jsx923(
           /* @__PURE__ */ jsx923("text", { style: { font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "558", y: "29", stroke: "none", fillOpacity: "1", children: "Gross domestic product growth" }),
           /* @__PURE__ */ jsx923("text", { style: { font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "611", y: "47", stroke: "none", fillOpacity: "1", children: "/GDP annual %/" }),
           /* @__PURE__ */ jsxs515("g", { transform: "matrix(1,0,0,1,590.5,371)", children: [
-            /* @__PURE__ */ jsx923("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#008fd3", strokeWidth: "0", className: "k-var--series-a" }),
+            /* @__PURE__ */ jsx923("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#008fd3", strokeWidth: "0", fill: "var(--kendo-chart-series-1)" }),
             /* @__PURE__ */ jsx923("g", { children: /* @__PURE__ */ jsx923("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "21", y: "11", stroke: "none", fillOpacity: "1", children: "India" }) }),
             /* @__PURE__ */ jsx923("path", { style: { cursor: "pointer" }, d: "M0 0 L 47 0 47 14 0 14Z", stroke: "none", fill: "#fff", fillOpacity: "0" })
           ] }),
           /* @__PURE__ */ jsxs515("g", { transform: "matrix(1,0,0,1,643.5,371)", children: [
-            /* @__PURE__ */ jsx923("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#99d101", strokeWidth: "0", className: "k-var--series-b" }),
+            /* @__PURE__ */ jsx923("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#99d101", strokeWidth: "0", fill: "var(--kendo-chart-series-2)" }),
             /* @__PURE__ */ jsx923("g", { children: /* @__PURE__ */ jsx923("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "21", y: "11", stroke: "none", fillOpacity: "1", children: "World" }) }),
             /* @__PURE__ */ jsx923("path", { style: { cursor: "pointer" }, d: "M0 0 L 52 0 52 14 0 14Z", stroke: "none", fill: "#fff", fillOpacity: "0" })
           ] }),
           /* @__PURE__ */ jsxs515("g", { transform: "matrix(1,0,0,1,701.5,371)", children: [
-            /* @__PURE__ */ jsx923("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#f39b02", strokeWidth: "0", className: "k-var--series-c" }),
+            /* @__PURE__ */ jsx923("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#f39b02", strokeWidth: "0", fill: "var(--kendo-chart-series-3)" }),
             /* @__PURE__ */ jsx923("g", { children: /* @__PURE__ */ jsx923("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "21", y: "11", stroke: "none", fillOpacity: "1", children: "Haiti" }) }),
             /* @__PURE__ */ jsx923("path", { style: { cursor: "pointer" }, d: "M0 0 L 45 0 45 14 0 14Z", stroke: "none", fill: "#fff", fillOpacity: "0" })
           ] })

package/dist/esm/chart-wizard/tests/tab-chart-sections-expanded.mjs CHANGED Viewed

@@ -4172,12 +4172,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states56 = [
   States.disabled
 ];
-var options53 = {};
+var options53 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions51 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions51.size,
     palette,
     columns = defaultOptions51.columns,
     tileSize,
@@ -4208,7 +4212,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx163("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx163("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -4729,7 +4734,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx175("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx175(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx175(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx175("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx175(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx175(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs73(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx175(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx175(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/chart-wizard/tests/tab-data-sections-expanded.mjs CHANGED Viewed

@@ -3926,12 +3926,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states51 = [
   States.disabled
 ];
-var options45 = {};
+var options45 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions45 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions45.size,
     palette,
     columns = defaultOptions45.columns,
     tileSize,
@@ -3962,7 +3966,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx154("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx154("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -4079,7 +4084,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx156("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx156(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx156(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx156("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx156(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx156(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs64(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx156(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx156(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/chart-wizard/tests/tab-format-sections-expanded.mjs CHANGED Viewed

@@ -3023,12 +3023,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states43 = [
   States.disabled
 ];
-var options40 = {};
+var options40 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions39 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions39.size,
     palette,
     columns = defaultOptions39.columns,
     tileSize,
@@ -3059,7 +3063,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx115("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx115("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -3176,7 +3181,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx117("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx117(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx117(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx117("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx117(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx117(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs56(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx117(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx117(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/coloreditor/color-editor.spec.mjs CHANGED Viewed

@@ -2401,12 +2401,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states34 = [
   States.disabled
 ];
-var options33 = {};
+var options33 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions33 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions33.size,
     palette,
     columns = defaultOptions33.columns,
     tileSize,
@@ -2437,7 +2441,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx88("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx88("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -2594,7 +2599,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs40(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx91(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx91(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/coloreditor/templates/coloreditor-group.mjs CHANGED Viewed

@@ -2401,12 +2401,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states34 = [
   States.disabled
 ];
-var options33 = {};
+var options33 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions33 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions33.size,
     palette,
     columns = defaultOptions33.columns,
     tileSize,
@@ -2437,7 +2441,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx88("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx88("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -2594,7 +2599,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs40(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx91(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx91(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/coloreditor/templates/coloreditor-normal.mjs CHANGED Viewed

@@ -2401,12 +2401,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states34 = [
   States.disabled
 ];
-var options33 = {};
+var options33 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions33 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions33.size,
     palette,
     columns = defaultOptions33.columns,
     tileSize,
@@ -2437,7 +2441,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx88("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx88("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -2594,7 +2599,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs40(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx91(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx91(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/coloreditor/templates/coloreditor-palette-group.mjs CHANGED Viewed

@@ -2401,12 +2401,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states34 = [
   States.disabled
 ];
-var options33 = {};
+var options33 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions33 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions33.size,
     palette,
     columns = defaultOptions33.columns,
     tileSize,
@@ -2437,7 +2441,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx88("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx88("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -2594,7 +2599,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs40(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx91(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx91(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/coloreditor/templates/coloreditor-palette.mjs CHANGED Viewed

@@ -2401,12 +2401,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states34 = [
   States.disabled
 ];
-var options33 = {};
+var options33 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions33 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions33.size,
     palette,
     columns = defaultOptions33.columns,
     tileSize,
@@ -2437,7 +2441,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx88("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx88("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -2594,7 +2599,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs40(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx91(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx91(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/coloreditor/tests/coloreditor-focused-colorgradient.mjs CHANGED Viewed

@@ -2401,12 +2401,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states34 = [
   States.disabled
 ];
-var options33 = {};
+var options33 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions33 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions33.size,
     palette,
     columns = defaultOptions33.columns,
     tileSize,
@@ -2437,7 +2441,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx88("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx88("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -2594,7 +2599,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs40(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx91(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx91(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/coloreditor/tests/coloreditor-rtl.mjs CHANGED Viewed

@@ -2401,12 +2401,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states34 = [
   States.disabled
 ];
-var options33 = {};
+var options33 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions33 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions33.size,
     palette,
     columns = defaultOptions33.columns,
     tileSize,
@@ -2437,7 +2441,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx88("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx88("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -2594,7 +2599,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs40(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx91(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx91(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/coloreditor/tests/coloreditor-sizes.mjs CHANGED Viewed

@@ -2401,12 +2401,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states34 = [
   States.disabled
 ];
-var options33 = {};
+var options33 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions33 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions33.size,
     palette,
     columns = defaultOptions33.columns,
     tileSize,
@@ -2437,7 +2441,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx88("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx88("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -2594,7 +2599,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx91("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx91(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx91(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs40(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx91(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx91(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })