@progress/kendo-themes-html 6.4.0-dev.6 → 6.4.1-dev.0

package/dist/cjs/avatar/tests/avatar-size-rounded.js

@@ -114,83 +114,11 @@ var States = {
   "readonly": "readonly"
 };
 
-// src/avatar/avatar.spec.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var AVATAR_CLASSNAME = `k-avatar`;
-var states = [
-  States.hover,
-  States.focus,
-  States.active,
-  States.selected,
-  States.disabled
-];
-var options = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline],
-  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 = {
-  type: "text" /* TEXT */,
-  size: Size.medium,
-  rounded: Roundness.full,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.primary,
-  border: false
-};
-var Avatar = (props) => {
-  const {
-    size = defaultProps.size,
-    rounded = defaultProps.rounded,
-    fillMode = defaultProps.fillMode,
-    themeColor = defaultProps.themeColor,
-    type = defaultProps.type,
-    border = defaultProps.border,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        AVATAR_CLASSNAME,
-        optionClassNames(AVATAR_CLASSNAME, {
-          size,
-          rounded,
-          fillMode,
-          themeColor
-        }),
-        {
-          [`${AVATAR_CLASSNAME}-bordered`]: border
-        }
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
-    }
-  );
-};
-Avatar.states = states;
-Avatar.options = options;
-Avatar.className = AVATAR_CLASSNAME;
-Avatar.defaultProps = defaultProps;
-
 // src/icon/font-icon.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FONTICON_CLASSNAME = `k-icon`;
-var states2 = [];
-var options2 = {
+var states = [];
+var options = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -205,7 +133,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {};
+var defaultProps = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -216,9 +144,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       ...other,
@@ -239,17 +167,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states2;
-FontIcon.options = options2;
+FontIcon.states = states;
+FontIcon.options = options;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps2;
+FontIcon.defaultProps = defaultProps;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-svg-icon`;
-var states3 = [];
-var options3 = {
+var states2 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -264,7 +192,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps2 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -273,15 +201,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps2.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "span",
       {
         ...other,
@@ -294,7 +222,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       ...other,
@@ -312,7 +240,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -326,10 +254,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states3;
-SvgIcon.options = options3;
+SvgIcon.states = states2;
+SvgIcon.options = options2;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps3;
+SvgIcon.defaultProps = defaultProps2;
 var svg_icon_spec_default = SvgIcon;
 
 // node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4232,13 +4160,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states4 = [];
-var options4 = {
+var states3 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4253,7 +4181,7 @@ var options4 = {
     ThemeColor.dark
   ]
 };
-var defaultProps4 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4262,125 +4190,138 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps4.type,
+    type = defaultProps3.type,
     rotate,
     flip,
-    viewBox = defaultProps4.viewBox,
+    viewBox = defaultProps3.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states4;
-Icon.options = options4;
-Icon.defaultProps = defaultProps4;
+Icon.states = states3;
+Icon.options = options3;
+Icon.defaultProps = defaultProps3;
 
-// src/avatar/tests/avatar-size-rounded.tsx
+// src/avatar/avatar.spec.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AVATAR_CLASSNAME = `k-avatar`;
+var states4 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options4 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps4 = {
+  type: "text" /* TEXT */,
+  size: Size.medium,
+  rounded: Roundness.full,
+  fillMode: FillMode.solid,
+  themeColor: ThemeColor.primary,
+  border: false
+};
+var Avatar = (props) => {
+  const {
+    size = defaultProps4.size,
+    rounded = defaultProps4.rounded,
+    fillMode = defaultProps4.fillMode,
+    themeColor = defaultProps4.themeColor,
+    type = defaultProps4.type,
+    border = defaultProps4.border,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        AVATAR_CLASSNAME,
+        optionClassNames(AVATAR_CLASSNAME, {
+          size,
+          rounded,
+          fillMode,
+          themeColor
+        }),
+        {
+          [`${AVATAR_CLASSNAME}-bordered`]: border
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
+    }
+  );
+};
+Avatar.states = states4;
+Avatar.options = options4;
+Avatar.className = AVATAR_CLASSNAME;
+Avatar.defaultProps = defaultProps4;
+var avatar_spec_default = Avatar;
+
+// src/avatar/templates/avatar-icon.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var AvatarIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(avatar_spec_default, { type: "icon", ...props });
+
+// src/avatar/templates/avatar-text.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AvatarText = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(avatar_spec_default, { type: "text", ...props });
+
+// src/avatar/templates/avatar-image.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AvatarImage = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(avatar_spec_default, { type: "image", ...props });
+
+// src/avatar/tests/avatar-size-rounded.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         grid-template-columns: 120px repeat(3, 1fr);
         align-items: center;
     }
 `;
-var avatar_size_rounded_default = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("small", { children: "rounded / size" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "null" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "small", themeColor: "primary", rounded: null, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "small", themeColor: "primary", rounded: null, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "small", themeColor: "primary", rounded: null, fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "medium", themeColor: "primary", rounded: null, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "medium", themeColor: "primary", rounded: null, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "medium", themeColor: "primary", rounded: null, fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "large", themeColor: "primary", rounded: null, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "large", themeColor: "primary", rounded: null, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "large", themeColor: "primary", rounded: null, fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "small", themeColor: "primary", rounded: "small", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "small", themeColor: "primary", rounded: "small", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "small", themeColor: "primary", rounded: "small", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "medium", themeColor: "primary", rounded: "small", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "medium", themeColor: "primary", rounded: "small", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "medium", themeColor: "primary", rounded: "small", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "large", themeColor: "primary", rounded: "small", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "large", themeColor: "primary", rounded: "small", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "large", themeColor: "primary", rounded: "small", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "small", themeColor: "primary", rounded: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "small", themeColor: "primary", rounded: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "small", themeColor: "primary", rounded: "medium", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "medium", themeColor: "primary", rounded: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "medium", themeColor: "primary", rounded: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "medium", themeColor: "primary", rounded: "medium", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "large", themeColor: "primary", rounded: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "large", themeColor: "primary", rounded: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "large", themeColor: "primary", rounded: "medium", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "small", themeColor: "primary", rounded: "large", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "small", themeColor: "primary", rounded: "large", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "small", themeColor: "primary", rounded: "large", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "medium", themeColor: "primary", rounded: "large", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "medium", themeColor: "primary", rounded: "large", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "medium", themeColor: "primary", rounded: "large", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "large", themeColor: "primary", rounded: "large", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "large", themeColor: "primary", rounded: "large", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "large", themeColor: "primary", rounded: "large", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "full" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "small", themeColor: "primary", rounded: "full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "small", themeColor: "primary", rounded: "full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "small", themeColor: "primary", rounded: "full", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "medium", themeColor: "primary", rounded: "full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "medium", themeColor: "primary", rounded: "full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "medium", themeColor: "primary", rounded: "full", fillMode: "outline", border: true, children: "JO" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", size: "large", themeColor: "primary", rounded: "full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", size: "large", themeColor: "primary", rounded: "full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", size: "large", themeColor: "primary", rounded: "full", fillMode: "outline", border: true, children: "JO" })
-    ] })
+var avatar_size_rounded_default = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("small", { children: "rounded / size" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "medium" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "large" }),
+    [null, ...Avatar.options.rounded].map((roundness) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: roundness || "null" }),
+      Avatar.options.size.map((size) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarImage, { size, themeColor: "primary", rounded: roundness, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarIcon, { size, themeColor: "primary", rounded: roundness, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: "x" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarText, { size, themeColor: "primary", rounded: roundness, fillMode: "outline", border: true, children: "JO" })
+      ] }))
+    ] }))
   ] })
 ] });