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

package/dist/bottom-nav/tests/bottom-nav-colors.js

@@ -97,6 +97,22 @@
       }
     );
   };
+  var stateClassNames = (_componentClassName, props) => {
+    return classNames({
+      "k-valid": props.valid,
+      "k-invalid": props.invalid,
+      "k-hover": props.hover,
+      "k-focus": props.focus,
+      "k-checked": props.checked,
+      "k-active": props.active,
+      "k-selected": props.selected,
+      "k-disabled": props.disabled,
+      "k-indeterminate": props.indeterminate && !props.checked,
+      "k-loading": props.loading,
+      "k-empty": props.empty,
+      "k-readonly": props.readonly
+    });
+  };
 
   // src/utils/theme.ts
   var Size = {
@@ -108,6 +124,13 @@
     "xxlarge": "xxlarge",
     "xxxlarge": "xxxlarge"
   };
+  var FillMode = {
+    "solid": "solid",
+    "flat": "flat",
+    "outline": "outline",
+    "clear": "clear",
+    "link": "link"
+  };
   var ThemeColor = {
     "inherit": "inherit",
     "base": "base",
@@ -122,12 +145,79 @@
     "light": "light",
     "inverse": "inverse"
   };
+  var States = {
+    "open": "open",
+    "hover": "hover",
+    "focus": "focus",
+    "active": "active",
+    "selected": "selected",
+    "disabled": "disabled",
+    "valid": "valid",
+    "invalid": "invalid",
+    "loading": "loading",
+    "required": "required",
+    "empty": "empty",
+    "indeterminate": "indeterminate",
+    "checked": "checked",
+    "readonly": "readonly"
+  };
 
-  // src/icon/icon.spec.tsx
+  // src/bottom-nav/bottom-nav.spec.tsx
   var import_jsx_runtime = __require("react/jsx-runtime");
-  var ICON_CLASSNAME = `k-icon`;
+  var BOTTOM_NAV_CLASSNAME = "k-bottom-nav";
   var states = [];
   var options = {
+    fillMode: [FillMode.solid, FillMode.flat],
+    themeColor: [
+      ThemeColor.primary,
+      ThemeColor.secondary,
+      ThemeColor.tertiary,
+      ThemeColor.info,
+      ThemeColor.success,
+      ThemeColor.warning,
+      ThemeColor.error,
+      ThemeColor.dark,
+      ThemeColor.light,
+      ThemeColor.inverse
+    ]
+  };
+  var defaultProps = {
+    fillMode: FillMode.solid,
+    themeColor: ThemeColor.primary,
+    flow: "horizontal",
+    border: false
+  };
+  var BottomNav = (props) => {
+    const {
+      fillMode = defaultProps.fillMode,
+      themeColor = defaultProps.themeColor,
+      flow = defaultProps.flow,
+      border = defaultProps.border,
+      dir
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: classNames(
+      props.className,
+      BOTTOM_NAV_CLASSNAME,
+      optionClassNames(BOTTOM_NAV_CLASSNAME, {
+        fillMode,
+        themeColor
+      }),
+      {
+        [`k-bottom-nav-item-flow-${flow}`]: flow,
+        "k-bottom-nav-border": border
+      }
+    ), dir, children: props.children });
+  };
+  BottomNav.states = states;
+  BottomNav.options = options;
+  BottomNav.className = BOTTOM_NAV_CLASSNAME;
+  BottomNav.defaultProps = defaultProps;
+
+  // src/icon/icon.spec.tsx
+  var import_jsx_runtime2 = __require("react/jsx-runtime");
+  var ICON_CLASSNAME = `k-icon`;
+  var states2 = [];
+  var options2 = {
     size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
     themeColor: [
       ThemeColor.base,
@@ -142,7 +232,7 @@
       ThemeColor.dark
     ]
   };
-  var defaultProps = {};
+  var defaultProps2 = {};
   var Icon = (props) => {
     const _a = props, {
       size,
@@ -158,9 +248,9 @@
       "flip"
     ]);
     if (!name) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -179,13 +269,50 @@
       })
     );
   };
-  Icon.states = states;
-  Icon.options = options;
+  Icon.states = states2;
+  Icon.options = options2;
   Icon.className = ICON_CLASSNAME;
-  Icon.defaultProps = defaultProps;
+  Icon.defaultProps = defaultProps2;
+
+  // src/bottom-nav/bottom-nav-item.tsx
+  var import_jsx_runtime3 = __require("react/jsx-runtime");
+  var BOTTOM_NAV_ITEM_CLASSNAME = "k-bottom-nav-item";
+  var states3 = [
+    States.focus,
+    States.selected,
+    States.disabled
+  ];
+  var options3 = {};
+  var defaultProps3 = {};
+  var BottomNavItem = (props) => {
+    const {
+      focus,
+      selected,
+      disabled,
+      icon,
+      text,
+      link
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: classNames(
+      BOTTOM_NAV_ITEM_CLASSNAME,
+      stateClassNames(BOTTOM_NAV_ITEM_CLASSNAME, {
+        focus,
+        selected,
+        disabled
+      })
+    ), children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: icon }),
+      text && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-bottom-nav-item-text", children: text }),
+      link && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-bottom-nav-link", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: link }) })
+    ] });
+  };
+  BottomNavItem.states = states3;
+  BottomNavItem.options = options3;
+  BottomNavItem.className = BOTTOM_NAV_ITEM_CLASSNAME;
+  BottomNavItem.defaultProps = defaultProps3;
 
   // src/bottom-nav/tests/bottom-nav-colors.tsx
-  var import_jsx_runtime2 = __require("react/jsx-runtime");
+  var import_jsx_runtime4 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
@@ -199,390 +326,174 @@
     }
 `;
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: "Solid Colors" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "colors k-d-grid k-grid-cols-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-col-start-1", children: "Primary ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-primary k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: styles }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: "Solid Colors" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "colors k-d-grid k-grid-cols-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-col-start-1", children: "Primary ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "primary", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Secondary ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-secondary k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Secondary ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "secondary", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Tertiary ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-tertiary k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Tertiary ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "tertiary", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Info ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-info k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Info ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "info", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Success ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-success k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Success ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "success", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Warning ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-warning k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Warning ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "warning", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Error ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-error k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Error ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "error", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Dark ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-dark k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Dark ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "dark", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Light ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-light k-bottom-nav-solid k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Light ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { themeColor: "light", flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: "Flat Colors" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "colors colors-flat k-d-grid k-grid-cols-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Primary ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: "Flat Colors" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "colors colors-flat k-d-grid k-grid-cols-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Primary ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "primary", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Secondary ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-secondary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Secondary ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "secondary", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Tertiary ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-tertiary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Tertiary ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "tertiary", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Info ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-info k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Info ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "info", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Success ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-success k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Success ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "success", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Warning ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-warning k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Warning ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "warning", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Error ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-error k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Error ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "error", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Dark ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-dark k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Dark ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "dark", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Light ThemeColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { className: "k-bottom-nav k-bottom-nav-light k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Normal" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-focus", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Focused" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-selected", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Selected" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "k-bottom-nav-item k-disabled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "k-bottom-nav-item-icon", name: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-bottom-nav-item-text", children: "Disabled" })
-              ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Light ThemeColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BottomNav, { fillMode: "flat", themeColor: "light", border: true, flow: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Focused", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Selected", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BottomNavItem, { icon: "email", text: "Disabled", disabled: true })
             ] })
           ] })
         ] })