@progress/kendo-themes-html 5.6.1-dev.4 → 5.6.1-dev.7

package/dist/badge/tests/badge-misc.js

@@ -47,6 +47,30 @@
     return Object.keys(result).map((key) => result[key] && key || null).filter((el) => el !== null).join(" ");
   };
 
+  // src/utils/theme.ts
+  var kendoThemeMaps = {
+    sizeMap: {
+      small: "sm",
+      medium: "md",
+      large: "lg"
+    },
+    roundedMap: {
+      small: "sm",
+      medium: "md",
+      large: "lg"
+    },
+    calloutMap: {
+      top: "n",
+      bottom: "s",
+      left: "w",
+      right: "e"
+    },
+    orientationMap: {
+      vertical: "vstack",
+      horizontal: "hstack"
+    }
+  };
+
   // src/icon/icon.tsx
   var Icon = class extends React.Component {
     render() {
@@ -68,6 +92,48 @@
     }
   };
 
+  // src/badge/badge.tsx
+  var React2 = __toESM(__require("react"));
+  var Badge = class extends React2.Component {
+    render() {
+      const {
+        children,
+        className,
+        size,
+        rounded,
+        fillMode,
+        themeColor,
+        cutoutBorder,
+        position,
+        align,
+        ...htmlAttributes
+      } = this.props;
+      return /* @__PURE__ */ React2.createElement("span", {
+        style: this.props.style,
+        ...htmlAttributes,
+        className: classNames(
+          "k-badge",
+          {
+            [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
+            [`k-badge-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+            [`k-badge-${fillMode}`]: fillMode,
+            [`k-badge-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),
+            [`k-badge-${position}`]: position,
+            [`k-${align}`]: align,
+            ["k-badge-border-cutout"]: cutoutBorder
+          },
+          className
+        )
+      }, children);
+    }
+  };
+  Badge.defaultProps = {
+    size: "medium",
+    fillMode: "solid",
+    themeColor: "primary",
+    cutoutBorder: false
+  };
+
   // src/badge/tests/badge-misc.tsx
   var root = import_client.default.createRoot(
     document.getElementById("app")
@@ -98,238 +164,244 @@
       className: "col"
     }, "Pill"), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "col"
-    }, "Circle"), /* @__PURE__ */ import_react.default.createElement("span", null, "Small"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-solid k-badge-success"
-    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-solid k-badge-success"
+    }, "Circle"), /* @__PURE__ */ import_react.default.createElement("span", null, "Small"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "small",
+      themeColor: "success"
+    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "small",
+      themeColor: "success"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "check"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-solid k-badge-success k-badge-rounded"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "small",
+      rounded: "small",
+      themeColor: "success"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "check"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-solid k-badge-success k-badge-pill"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "small",
+      rounded: "full",
+      themeColor: "success"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "check"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-solid k-badge-success k-badge-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "small",
+      rounded: "full",
+      themeColor: "success"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "check"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, "^ outline"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-outline k-badge-primary"
-    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-outline k-badge-primary"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-outline k-badge-primary k-badge-rounded"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-outline k-badge-primary k-badge-pill"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-sm k-badge-outline k-badge-primary k-badge-circle"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Normal"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-info"
-    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-info"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, "^ outline"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      size: "small"
+    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      size: "small"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "x-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      size: "small",
+      rounded: "small"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "x-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      size: "small",
+      rounded: "full"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "x-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      size: "small",
+      rounded: "full"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "x-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, "Normal"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      themeColor: "info"
+    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      themeColor: "info"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "calendar"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-info k-badge-rounded"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      themeColor: "info",
+      rounded: "medium"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "calendar"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-info k-badge-pill"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      themeColor: "info",
+      rounded: "full"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "calendar"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-info k-badge-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      themeColor: "info",
+      rounded: "full"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "calendar"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, "^ outline"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-outline k-badge-tertiary"
-    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-outline k-badge-tertiary"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-outline k-badge-tertiary k-badge-rounded"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-outline k-badge-tertiary k-badge-pill"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-outline k-badge-tertiary k-badge-circle"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Large"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-solid k-badge-warning"
-    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-solid k-badge-warning"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, "^ outline"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      themeColor: "tertiary"
+    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      themeColor: "tertiary"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "plus-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      themeColor: "tertiary",
+      rounded: "medium"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "plus-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      themeColor: "tertiary",
+      rounded: "full"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "plus-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      fillMode: "outline",
+      themeColor: "tertiary",
+      rounded: "full"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "plus-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, "Large"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      themeColor: "warning"
+    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      themeColor: "warning"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "bell"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-solid k-badge-warning k-badge-rounded"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      themeColor: "warning",
+      rounded: "large"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "bell"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-solid k-badge-warning k-badge-pill"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      themeColor: "warning",
+      rounded: "full"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "bell"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-solid k-badge-warning k-badge-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      themeColor: "warning",
+      rounded: "full"
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       className: "k-badge-icon",
       name: "bell"
-    }))), /* @__PURE__ */ import_react.default.createElement("span", null, "^ outline"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-outline k-badge-error"
-    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-outline k-badge-error"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-outline k-badge-error k-badge-rounded"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-outline k-badge-error k-badge-pill"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-lg k-badge-outline k-badge-error k-badge-circle"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge-icon k-svg-icon"
-    }, /* @__PURE__ */ import_react.default.createElement("svg", {
-      viewBox: "0 0 50 50"
-    }, /* @__PURE__ */ import_react.default.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "25"
-    }))))), /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement("span", null, "Rectangle"), /* @__PURE__ */ import_react.default.createElement("span", null, "Rounded"), /* @__PURE__ */ import_react.default.createElement("span", null, "Pill"), /* @__PURE__ */ import_react.default.createElement("span", null, "Circle"), /* @__PURE__ */ import_react.default.createElement("span", null, "Dot"), /* @__PURE__ */ import_react.default.createElement("span", null, "Inline"), /* @__PURE__ */ import_react.default.createElement("div", {
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, "^ outline"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      fillMode: "outline",
+      themeColor: "error"
+    }, "99")), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      fillMode: "outline",
+      themeColor: "error"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "x-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      fillMode: "outline",
+      themeColor: "error",
+      rounded: "large"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "x-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      fillMode: "outline",
+      themeColor: "error",
+      rounded: "full"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "x-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      size: "large",
+      fillMode: "outline",
+      themeColor: "error",
+      rounded: "full"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-badge-icon",
+      name: "x-circle"
+    }))), /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement("span", null, "Rectangle"), /* @__PURE__ */ import_react.default.createElement("span", null, "Rounded"), /* @__PURE__ */ import_react.default.createElement("span", null, "Pill"), /* @__PURE__ */ import_react.default.createElement("span", null, "Circle"), /* @__PURE__ */ import_react.default.createElement("span", null, "Dot"), /* @__PURE__ */ import_react.default.createElement("span", null, "Inline"), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout"
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      cutoutBorder: true
     }, "Rect")), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-rounded"
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      rounded: "medium",
+      cutoutBorder: true
     }, "Round")), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-pill"
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      rounded: "full",
+      cutoutBorder: true
     }, "Pill")), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-circle"
-    }, "99+")), /* @__PURE__ */ import_react.default.createElement("div", {
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      rounded: "full",
+      cutoutBorder: true
+    }, "1")), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-dot"
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      rounded: "full",
+      cutoutBorder: true
     })), /* @__PURE__ */ import_react.default.createElement("span", null, "Edge"), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-edge k-top-end"
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      position: "edge",
+      align: "top-end",
+      cutoutBorder: true
     }, "Rect")), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-rounded k-badge-edge k-top-end"
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      rounded: "medium",
+      position: "edge",
+      align: "top-end",
+      cutoutBorder: true
     }, "Round")), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-pill k-badge-edge k-top-end"
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      rounded: "full",
+      position: "edge",
+      align: "top-end",
+      cutoutBorder: true
     }, "Pill")), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-circle k-badge-edge k-top-end"
-    }, "99+")), /* @__PURE__ */ import_react.default.createElement("div", {
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      rounded: "full",
+      position: "edge",
+      align: "top-end",
+      cutoutBorder: true
+    }, "1")), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-badge-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-badge k-badge-md k-badge-solid k-badge-primary k-badge-border-cutout k-badge-dot k-badge-edge k-top-end"
+    }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+      rounded: "full",
+      position: "edge",
+      align: "top-end",
+      cutoutBorder: true
     }))))
   );
 })();