feather-k-demo-utils 0.0.28 → 0.0.30

package/DEMO-UTILS.md

@@ -79,17 +79,19 @@ Notes:
 - `FEATHERK_STYLES_CDN_URL` should point at the exact `@featherk/styles` CSS you want to showcase.
 - `PUBLISH_DATE` can be injected at build time (for CI) or defaulted as shown.
 
-## 4) Render DemoStats in your app
 
-```html
+## 4) Render DemoStats, DemoDebug, and DemoSettings in your app
+
+### DemoStats
+
+```vue
 <script setup lang="ts">
 import { computed } from "vue";
 import { DemoStats } from "feather-k-demo-utils";
 import { getFeatherkStylesVersionFromUrl } from "feather-k-demo-utils/utils";
 
 const PUBLISH_DATE = import.meta.env.PUBLISH_DATE;
-const version = computed(() => getFeatherkStylesVersionFromUrl(import.meta.env.FEATHERK_STYLES_CDN_URL),
-);
+const version = computed(() => getFeatherkStylesVersionFromUrl(import.meta.env.FEATHERK_STYLES_CDN_URL));
 </script>
 
 <template>
@@ -99,6 +101,39 @@ const version = computed(() => getFeatherkStylesVersionFromUrl(import.meta.env.F
 
 `DemoStats` renders the version and publish date, and links to the demo-utils README if the publish date is missing.
 
+### DemoDebug
+
+Collapsible debug panel. Slot content is only shown if provided.
+
+```vue
+<script setup lang="ts">
+import { DemoDebug } from "feather-k-demo-utils";
+const debugInfo = { foo: 'bar', count: 42 };
+</script>
+
+<template>
+  <DemoDebug>
+    <pre>{{ debugInfo }}</pre>
+  </DemoDebug>
+</template>
+```
+
+### DemoSettings
+
+Collapsible settings panel. Slot content is only shown if provided.
+
+```vue
+<script setup lang="ts">
+import { DemoSettings } from "feather-k-demo-utils";
+</script>
+
+<template>
+  <DemoSettings>
+    <div>Settings content here</div>
+  </DemoSettings>
+</template>
+```
+
 ## 5) (Optional) Pin the dependency version
 
 ```json
@@ -131,3 +166,97 @@ const version = computed(() => getFeatherkStylesVersionFromUrl(import.meta.env.F
 </div>
 
 Keep this aligned with whichever demo-utils release you want to display.
+```
+
+### Required Demo Shell Structure
+
+All demo components must use the following structure for consistent styling:
+
+```html
+<div class="demo-app">
+  <div class="featherk-demo">
+    <form class="demo-form">
+      <div class="fk-field-block">
+        <!-- Field content here -->
+      </div>
+      <div class="demo-actions">
+        <!-- Action buttons here -->
+      </div>
+    </form>
+    <div class="demo-notes">
+      <!-- Notes content here -->
+    </div>
+  </div>
+</div>
+```
+
+**Always use these class names and hierarchy in your demo components.**
+This ensures demo-utils styles and features work as intended.
+
+# Multi-Demo Navigation with DropDownList
+
+In projects where multiple demos or feature showcases are included in a single repository, it's helpful to provide a simple navigation mechanism for users to switch between demos. A common and user-friendly approach is to use a DropDownList to select and display the desired demo component.
+
+## Example: Demo Navigation in a Vue App
+
+Below is a pattern used in the `feather-k-autocomplete` repo, which you can adapt for your own multi-demo projects. This approach uses the Kendo UI for Vue `DropDownList` to allow users to select a demo from a list, and then conditionally renders the selected demo component.
+
+### 1. Add the DropDownList for Demo Selection
+
+```vue
+<template>
+  <div>
+    <Label for="demo-selection">Select a demo:</Label>
+    <DropDownList
+      id="demo-selection"
+      :dataItems="[ 'Basic', 'ComboBox', 'Complex', 'ComplexComboBox', 'FastForm', 'TabularComboBox', 'Yup' ]"
+      :value="demo"
+      @change="(e) => (demo = e.value)"
+    />
+    <!-- Render the selected demo -->
+    <Basic v-if="demo === 'Basic'" />
+    <ComboBox v-if="demo === 'ComboBox'" />
+    <Complex v-if="demo === 'Complex'" />
+    <ComplexComboBox v-if="demo === 'ComplexComboBox'" />
+    <FastForm v-if="demo === 'FastForm'" />
+    <Yup v-if="demo === 'Yup'" />
+    <TabularComboBox v-if="demo === 'TabularComboBox'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { Label } from "@progress/kendo-vue-labels";
+import Basic from "./components/Basic.vue";
+import ComboBox from "./components/ComboBox.vue";
+import Complex from "./components/Complex.vue";
+import ComplexComboBox from "./components/ComplexComboBox.vue";
+import FastForm from "./components/FastForm.vue";
+import TabularComboBox from "./components/TabularComboBox.vue";
+import Yup from "./components/Yup.vue";
+
+const demo = ref("TabularComboBox");
+</script>
+```
+
+### 2. How It Works
+- The `DropDownList` is populated with the names of your demo components.
+- This uses Kendo UI for Vue's DropDownList v6.4.1
+- The `demo` ref holds the currently selected demo name.
+- The `@change` event updates the `demo` value.
+- Each demo component is conditionally rendered using `v-if` based on the current selection.
+
+### 3. Adapting for Your Project
+- Replace the items in `dataItems` with your own demo/component names.
+- Import your demo components and add the corresponding `v-if` blocks.
+- Set the initial value of `demo` to the default demo you want to show.
+
+### 4. Prompt for Setup in Other Projects
+When setting up multi-demo navigation in a new project, prompt yourself or your team with:
+- Create the options list with a single default "Demo" option.
+- I'll take care of importing and registering
+- Is the DropDownList visible and accessible at the top of the demo page? Yes.
+- Is the default demo selection appropriate for your audience? Yes.
+
+This pattern keeps your demo navigation simple, scalable, and user-friendly.

package/README.md

@@ -4,20 +4,25 @@ Shared demo utilities for Feather K Vue component demo repositories.
 
 ## Purpose
 
+
 `feather-k-demo-utils` centralizes common demo functionality used across feather-k-<control> demo projects, including:
 
 - Shared demo styles
-- Shared demo UI components (such as `DemoStats`)
+- Shared demo UI components (such as `DemoStats`, `DemoDebug`, and `DemoSettings`)
 - Shared utility helpers (for example, CDN/version helpers)
 
 This package is intended for internal/demo scenarios and consistency across Feather K demos, not as a general-purpose application UI library.
 
+
 ## What's Included
 
 - `feather-k-demo-utils` (root exports)
 	- Demo components and top-level exports
 - `feather-k-demo-utils/components`
-	- Component-focused exports
+	- Component-focused exports:
+		- `DemoStats`: Demo stats footer
+		- `DemoDebug`: Collapsible debug panel (slot-based)
+		- `DemoSettings`: Collapsible settings panel (slot-based)
 - `feather-k-demo-utils/utils`
 	- Utility helpers used by demo apps
 - `feather-k-demo-utils/styles/demo.css`
@@ -37,14 +42,36 @@ Import demo styles once in your app entry:
 import "feather-k-demo-utils/styles/demo.css";
 ```
 
+
 Import what you need:
 
 ```ts
-import { DemoStats } from "feather-k-demo-utils";
+import { DemoStats, DemoDebug, DemoSettings } from "feather-k-demo-utils";
 import { getFeatherkStylesVersionFromUrl } from "feather-k-demo-utils/utils";
 ```
 
-For full integration steps (Vite env setup, stylesheet injection, and `DemoStats` usage), see [DEMO-UTILS.md](https://github.com/NantHealth/feather-k-demo-utils/blob/integration/DEMO-UTILS.md).
+### DemoDebug
+
+Collapsible debug panel. Slot content is only shown if provided.
+
+```vue
+<DemoDebug>
+	<pre>{{ debugInfo }}</pre>
+</DemoDebug>
+```
+
+### DemoSettings
+
+Collapsible settings panel. Slot content is only shown if provided.
+
+```vue
+<DemoSettings>
+	<div>Settings content here</div>
+</DemoSettings>
+```
+
+
+For full integration steps (Vite env setup, stylesheet injection, and component usage), see [DEMO-UTILS.md](https://github.com/NantHealth/feather-k-demo-utils/blob/integration/DEMO-UTILS.md).
 
 ## Publishing
 

package/lib/DemoSettings.vue_vue_type_script_setup_true_lang-oD1BkxXn.js

@@ -0,0 +1,82 @@
+import { defineComponent as c, openBlock as o, createElementBlock as a, toDisplayString as u, createCommentVNode as d, createElementVNode as h, computed as i, useSlots as m, normalizeClass as g, renderSlot as b } from "vue";
+const v = { key: 0 }, _ = { key: 1 }, f = { key: 2 }, k = /* @__PURE__ */ c({
+  __name: "DemoStats",
+  props: {
+    publishDate: {},
+    version: {}
+  },
+  setup(t) {
+    const l = () => {
+      const s = document.querySelector(".demo-stats");
+      s && s.classList.toggle("active");
+    };
+    return (s, n) => t.publishDate || t.version ? (o(), a("div", {
+      key: 0,
+      class: "demo-stats tb-v8_2_0 active",
+      tabindex: "0",
+      role: "region",
+      "aria-label": "Demo Stats",
+      onClick: l
+    }, [
+      t.version ? (o(), a("div", v, "using @featherk/styles@" + u(t.version), 1)) : d("", !0),
+      t.publishDate ? (o(), a("div", _, "Published: " + u(t.publishDate), 1)) : (o(), a("div", f, [...n[0] || (n[0] = [
+        h("a", {
+          href: "https://github.com/NantHealth/feather-k-demo-utils/blob/integration/README.md",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { "pointer-events": "auto !important" }
+        }, " Setup Publish Date ", -1)
+      ])]))
+    ])) : d("", !0);
+  }
+}), D = /* @__PURE__ */ c({
+  __name: "DemoDebug",
+  setup(t) {
+    const l = i(() => {
+      const e = m();
+      return !!e.default && e.default().some((r) => r.children);
+    }), s = () => {
+      const e = document.querySelector(".demo-debug");
+      e && e.classList.toggle("active");
+    }, n = i(() => ({
+      "demo-debug": !0,
+      "tb-v8_2_0": !0,
+      hidden: !l.value
+    }));
+    return (e, r) => (o(), a("div", {
+      class: g(n.value),
+      onClick: s,
+      tabindex: "0"
+    }, [
+      b(e.$slots, "default")
+    ], 2));
+  }
+}), y = /* @__PURE__ */ c({
+  __name: "DemoSettings",
+  setup(t) {
+    const l = i(() => {
+      const e = m();
+      return !!e.default && e.default().some((r) => r.children);
+    }), s = () => {
+      const e = document.querySelector(".demo-settings");
+      e && e.classList.toggle("active");
+    }, n = i(() => ({
+      "demo-settings": !0,
+      "tb-v8_2_0": !0,
+      hidden: !l.value
+      // active: true,
+    }));
+    return (e, r) => (o(), a("div", {
+      class: g(n.value),
+      onClick: s,
+      tabindex: "0"
+    }, [
+      b(e.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  D as _,
+  y as a,
+  k as b
+};

package/lib/components/DemoDebug.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/DemoSettings.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/DemoStats.vue.d.ts

@@ -2,5 +2,5 @@ type __VLS_Props = {
     publishDate?: string;
     version?: string;
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/lib/components/Main.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/lib/components/index.d.ts

@@ -1 +1,3 @@
 export { default as DemoStats } from './DemoStats.vue';
+export { default as DemoDebug } from './DemoDebug.vue';
+export { default as DemoSettings } from './DemoSettings.vue';

package/lib/components/index.es.js

@@ -1,4 +1,6 @@
-import { _ as a } from "../DemoStats.vue_vue_type_script_setup_true_lang-JUBFuGaw.js";
+import { _ as o, a as s, b as t } from "../DemoSettings.vue_vue_type_script_setup_true_lang-oD1BkxXn.js";
 export {
-  a as DemoStats
+  o as DemoDebug,
+  s as DemoSettings,
+  t as DemoStats
 };

package/lib/index.es.js

@@ -1,10 +1,12 @@
-import { F as s, a as t, f as a, g as S, b as o } from "./cdnVersion-DGJCb4AH.js";
-import { _ as F } from "./DemoStats.vue_vue_type_script_setup_true_lang-JUBFuGaw.js";
+import { F as a, a as t, f as r, g as o, b as S } from "./cdnVersion-DGJCb4AH.js";
+import { _ as m, a as F, b as _ } from "./DemoSettings.vue_vue_type_script_setup_true_lang-oD1BkxXn.js";
 export {
-  F as DemoStats,
-  s as FEATHERK_STYLES_CDN_URL,
+  m as DemoDebug,
+  F as DemoSettings,
+  _ as DemoStats,
+  a as FEATHERK_STYLES_CDN_URL,
   t as FEATHERK_STYLES_VERSION,
-  a as featherkStylesVersion,
-  S as getFeatherKStylesCdnUrl,
-  o as getFeatherkStylesVersionFromUrl
+  r as featherkStylesVersion,
+  o as getFeatherKStylesCdnUrl,
+  S as getFeatherkStylesVersionFromUrl
 };

package/lib/styles/demo.css

@@ -145,30 +145,153 @@
   }
 }
 
+.demo-debug {
+  position: fixed;
+  font-family: var(--kendo-font-family-monospace);
+  left: var(--kendo-spacing-4);
+  bottom: var(--kendo-spacing-4);
+  background-color: var(--kendo-color-light);
+  color: var(--kendo-color-light);
+  font-size: var(--kendo-font-size-sm);
+  margin: var(--kendo-spacing-2);
+  padding: var(--kendo-spacing-2);
+  padding-left: 2em;
+  border-radius: var(--kendo-border-radius-md);
+  width: 30rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  left: -30rem;
+  transition: left 0.3s ease;
+  &:hover {
+    background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
+    color: var(--kendo-color-dark);
+  }
+  &.active,
+  &:focus-visible {
+    left: -2em;
+    outline: 2px solid var(--kendo-color-primary-subtle-active);
+    outline-offset: 4px;
+    color: initial;
+  }
+  &::before {
+    content: "DEBUG";
+    font-weight: bold;
+    font-size: var(--kendo-font-size-lg);
+    display: block;
+    margin-bottom: var(--kendo-spacing-2);
+  }
+  &::after {
+    content: "🐛";
+    content: "🐜";
+    content: "🪳";
+    content: "🐞";
+    font-size: var(--kendo-font-size-xl);
+    color: var(--kendo-color-secondary);
+    position: absolute;
+    top: 0.25em;
+    right: 0.25em;
+    display: block;
+    margin-top: 0;
+  }
+}
+
+.demo-settings {
+  position: fixed;
+  left: var(--kendo-spacing-4);
+  top: var(--kendo-spacing-4);
+  background-color: hsl(from var(--kendo-color-light) h s l / 0.95);
+  color: hsl(from var(--kendo-color-light) h s l / 0.95);
+  font-size: var(--kendo-font-size-sm);
+  margin: var(--kendo-spacing-2);
+  padding: var(--kendo-spacing-2);
+  padding-left: 2em;
+  border-radius: var(--kendo-border-radius-md);
+  width: 30rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  left: -30rem;
+  transition: left 0.3s ease;
+  &:hover {
+    background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
+  }
+
+  &.active,
+  &:focus-visible {
+    left: -2em;
+    outline: 2px solid var(--kendo-color-primary-emphasis);
+    outline-offset: 4px;
+    color: initial;
+  }
+
+  &::before {
+    content: "SETTINGS";
+    font-weight: bold;
+    font-size: var(--kendo-font-size-lg);
+    display: block;
+    margin-bottom: var(--kendo-spacing-2);
+  }
+  &::after {
+    content: "\2699";
+    content: "⚙️";
+    font-size: var(--kendo-font-size-xl);
+    position: absolute;
+    top: 0.25em;
+    right: 0.25em;
+    display: block;
+    margin-top: 0;
+  }
+}
+
 /* TODO:  DemoStats.vue SCOPED STYLES NOT WORKING - moved to demo.css */
-.demo-stats-wrapper {
-  .demo-stats {
-    position: fixed;
-    right: var(--kendo-spacing-4);
-    bottom: var(--kendo-spacing-4);
-    background: hsl(from var(--kendo-color-primary) h s 90% / 0.3);
-    color: var(--kendo-color-primary-subtle);
-    font-size: var(--kendo-font-size-sm);
-    margin: var(--kendo-spacing-2);
-    padding: var(--kendo-spacing-2);
-    border-radius: var(--kendo-border-radius-md);
-    box-shadow: var(--kendo-elevation-2);
-    &:hover {
-      background: hsl(from var(--kendo-color-primary) h s 90% / 0.5);
-      color: var(--kendo-color-primary);
-      box-shadow: var(--kendo-elevation-4);
-    }
-    &:focus,
-    &:focus-visible {
-      background: var(--kendo-color-primary);
-      color: var(--kendo-color-surface);
-      outline: 2px solid var(--kendo-color-primary);
-      outline-offset: 2px;
-    }
+.demo-stats {
+  position: fixed;
+  text-align: right;
+  bottom: var(--kendo-spacing-4);
+  right: var(--kendo-spacing-4);
+  background-color: var(--kendo-color-light);
+  color: var(--kendo-color-light);
+  font-size: var(--kendo-font-size-sm);
+  /* color: var(--kendo-color-primary-subtle); */
+  margin: var(--kendo-spacing-2);
+  padding: var(--kendo-spacing-2);
+  padding-right: 2em;
+  border-radius: var(--kendo-border-radius-md);
+  width: 30rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  transition: right 0.3s ease;
+  right: -30rem;
+  &:hover {
+    background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
   }
+  &.active,
+  &:focus-visible {
+    right: -2em;
+    outline: 2px solid var(--kendo-color-primary-emphasis);
+    outline-offset: 4px;
+    color: initial;
+  }
+  &::before {
+    content: "STATS";
+    font-weight: bold;
+    font-size: var(--kendo-font-size-lg);
+    display: block;
+    margin-bottom: var(--kendo-spacing-2);
+    /* position: absolute; */
+    left: 0.5em;
+    top: 0.25em;
+  }
+  &::after {
+    content: "📊";
+    font-size: var(--kendo-font-size-xl);
+    position: absolute;
+    top: 0.25em;
+    left: 0.25em;
+    display: block;
+    margin-top: 0;
+  }
+}
+
+.hidden {
+  display: none;
 }

package/lib/utils/index.es.js

@@ -1,10 +1,12 @@
-import { F as s, a as t, f as a, g as S, b as o } from "../cdnVersion-DGJCb4AH.js";
-import { _ as F } from "../DemoStats.vue_vue_type_script_setup_true_lang-JUBFuGaw.js";
+import { F as a, a as t, f as r, g as o, b as S } from "../cdnVersion-DGJCb4AH.js";
+import { _ as m, a as F, b as _ } from "../DemoSettings.vue_vue_type_script_setup_true_lang-oD1BkxXn.js";
 export {
-  F as DemoStats,
-  s as FEATHERK_STYLES_CDN_URL,
+  m as DemoDebug,
+  F as DemoSettings,
+  _ as DemoStats,
+  a as FEATHERK_STYLES_CDN_URL,
   t as FEATHERK_STYLES_VERSION,
-  a as featherkStylesVersion,
-  S as getFeatherKStylesCdnUrl,
-  o as getFeatherkStylesVersionFromUrl
+  r as featherkStylesVersion,
+  o as getFeatherKStylesCdnUrl,
+  S as getFeatherkStylesVersionFromUrl
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "feather-k-demo-utils",
   "private": false,
-  "version": "0.0.28",
+  "version": "0.0.30",
   "type": "module",
   "main": "lib/index.es.js",
   "module": "lib/index.es.js",

package/lib/DemoStats.vue_vue_type_script_setup_true_lang-JUBFuGaw.js

@@ -1,32 +0,0 @@
-import { defineComponent as a, openBlock as t, createElementBlock as o, toDisplayString as i, createCommentVNode as n, createElementVNode as r } from "vue";
-const l = { class: "demo-stats-wrapper tb-v8_2_0" }, d = {
-  key: 0,
-  class: "demo-stats",
-  tabindex: "0",
-  role: "region",
-  "aria-label": "Demo Stats"
-}, m = { key: 0 }, h = { key: 1 }, u = { key: 2 }, v = /* @__PURE__ */ a({
-  __name: "DemoStats",
-  props: {
-    publishDate: {},
-    version: {}
-  },
-  setup(e) {
-    return (c, s) => (t(), o("div", l, [
-      e.publishDate || e.version ? (t(), o("div", d, [
-        e.version ? (t(), o("div", m, "using @featherk/styles@" + i(e.version), 1)) : n("", !0),
-        e.publishDate ? (t(), o("div", h, "Published: " + i(e.publishDate), 1)) : (t(), o("div", u, [...s[0] || (s[0] = [
-          r("a", {
-            href: "https://github.com/NantHealth/feather-k-demo-utils/blob/integration/README.md",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            style: { "pointer-events": "auto !important" }
-          }, " Setup Publish Date ", -1)
-        ])]))
-      ])) : n("", !0)
-    ]));
-  }
-});
-export {
-  v as _
-};