@haroonwaves/blog-kit-react 1.3.1 → 2.0.0

package/README.md

@@ -1,7 +1,7 @@
 # @haroonwaves/blog-kit-react
 
 React components and hooks for rendering markdown blogs. Includes blog renderer with syntax
-highlighting, blog cards, lists, and search functionality.
+highlighting, blog cards, lists with built-in search, filtering, and customization.
 
 ## Installation
 
@@ -22,8 +22,8 @@ For complete documentation, API reference, and examples, please visit the
 
 ## Quick Links
 
-- [Quick Start](https://blog-kit.haroonwaves.com/docs/quick-start)
-- [React Package Usage](https://blog-kit.haroonwaves.com/docs/react-package)
+- [Getting Started](https://blog-kit.haroonwaves.com/docs/getting-started)
+- [Guides](https://blog-kit.haroonwaves.com/docs/guides)
 - [API Reference](https://blog-kit.haroonwaves.com/docs/api-reference)
 
 ## Related Packages

package/dist/index.cjs

@@ -30,15 +30,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  BlogCard: () => BlogCard,
-  BlogList: () => BlogList,
-  BlogPlaceholder: () => BlogPlaceholder,
-  BlogRenderer: () => BlogRenderer,
-  useBlogs: () => useBlogs
+  ContentCard: () => ContentCard,
+  ContentList: () => ContentList,
+  ContentPlaceholder: () => ContentPlaceholder,
+  ContentRenderer: () => ContentRenderer,
+  Filter: () => Filter,
+  filterContent: () => filterContent,
+  getAvailableCategories: () => getAvailableCategories,
+  useContent: () => useContent
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/BlogRenderer.tsx
+// src/components/ContentRenderer.tsx
 var import_react = require("react");
 var import_react_markdown = __toESM(require("react-markdown"), 1);
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
@@ -78,7 +81,7 @@ function Badge({ children, className }) {
   );
 }
 
-// src/components/BlogRenderer.tsx
+// src/components/ContentRenderer.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultComponents = {
   h1: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -124,8 +127,20 @@ var defaultComponents = {
     }
   ),
   p: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "bk:mb-4 bk:leading-7 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
-  ul: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "bk:mb-4 bk:ml-6 bk:list-disc bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
-  ol: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "bk:mb-4 bk:ml-6 bk:list-decimal bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
+  ul: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "ul",
+    {
+      className: "bk:mb-4 bk:ml-6 bk:list-disc bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300",
+      ...props
+    }
+  ),
+  ol: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "ol",
+    {
+      className: "bk:mb-4 bk:ml-6 bk:list-decimal bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300",
+      ...props
+    }
+  ),
   li: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { ...props }),
   code: ({ className, children, ...props }) => {
     const isInline = !className;
@@ -175,15 +190,27 @@ var defaultComponents = {
       ...props
     }
   ) }),
-  thead: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: "bk:bg-gray-50 bk:dark:bg-gray-800 bk:text-gray-700 bk:dark:text-gray-200", ...props }),
+  thead: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "thead",
+    {
+      className: "bk:bg-gray-50 bk:dark:bg-gray-800 bk:text-gray-700 bk:dark:text-gray-200",
+      ...props
+    }
+  ),
   tbody: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { ...props }),
-  tr: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "bk:border-b bk:last:border-b-0 bk:border-gray-200 bk:dark:border-gray-700", ...props }),
+  tr: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "tr",
+    {
+      className: "bk:border-b bk:last:border-b-0 bk:border-gray-200 bk:dark:border-gray-700",
+      ...props
+    }
+  ),
   th: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "bk:px-4 bk:py-3 bk:text-left bk:font-semibold", ...props }),
   td: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "bk:px-4 bk:py-3 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
   input: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "checkbox", disabled: true, className: "bk:mr-2 bk:accent-blue-600", ...props })
 };
-function BlogRenderer({
-  content,
+function ContentRenderer({
+  body,
   metadata,
   className = "",
   components,
@@ -211,16 +238,16 @@ function BlogRenderer({
         remarkPlugins: [import_remark_gfm.default],
         rehypePlugins: [import_rehype_raw.default, import_rehype_prism_plus.default, import_rehype_slug_custom_id.default],
         components: mergedComponents,
-        children: content
+        children: body
       }
     ) })
   ] });
 }
 
-// src/components/BlogCard.tsx
+// src/components/ContentCard.tsx
 var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function BlogCard({
+function ContentCard({
   metadata,
   basePath = "/blog",
   renderLink,
@@ -263,56 +290,170 @@ function BlogCard({
   );
 }
 
-// src/components/BlogList.tsx
+// src/components/ContentList.tsx
+var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function BlogList({
+function ContentList({
   metadata,
+  title,
+  description,
   basePath = "/blog",
   renderLink,
   className = "",
-  emptyMessage = "No blog posts found.",
-  cardProps
+  emptyMessage = "No content found.",
+  cardProps,
+  classNames = {}
 }) {
-  if (metadata.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `bk:text-center bk:text-gray-500 bk:dark:text-gray-400 bk:py-12 ${className}`, children: emptyMessage });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `bk:flex bk:flex-col bk:gap-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    BlogCard,
-    {
-      metadata: meta,
-      basePath,
-      renderLink,
-      ...cardProps
-    },
-    meta.slug
-  )) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bk:w-full", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "h1",
+      {
+        className: `bk:text-4xl bk:font-bold bk:mb-4 bk:mt-8 bk:text-gray-800 bk:dark:text-gray-100 ${classNames.title ?? ""}`,
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "p",
+      {
+        className: `bk:text-gray-600 bk:dark:text-gray-400 bk:mb-8 ${classNames.description ?? ""}`,
+        children: description
+      }
+    ),
+    metadata.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `bk:text-center bk:text-gray-500 bk:dark:text-gray-400 bk:py-12 ${className}`,
+        children: emptyMessage
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `bk:flex bk:flex-col bk:gap-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ContentCard,
+      {
+        metadata: meta,
+        basePath,
+        renderLink,
+        ...cardProps
+      },
+      meta.slug
+    )) })
+  ] });
 }
 
-// src/components/BlogPlaceholder.tsx
+// src/components/Filter.tsx
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function BlogPlaceholder({ count = 3, className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+function Filter({
+  searchTerm,
+  setSearchTerm,
+  selectedCategory,
+  setSelectedCategory,
+  categories,
+  contentCount,
+  className = "",
+  placeholder = "Search content...",
+  classNames = {}
+}) {
+  const pillBase = `bk:px-2.5 bk:py-1 bk:cursor-pointer bk:rounded-md bk:text-xs bk:font-medium bk:transition-colors ${classNames.pill ?? ""}`;
+  const pillActive = `bk:bg-gray-700 bk:dark:bg-gray-200 bk:text-white bk:dark:text-gray-800 ${classNames.activePill ?? ""}`;
+  const pillInactive = `bk:bg-gray-100 bk:dark:bg-gray-700 bk:text-gray-500 bk:dark:text-gray-300 bk:hover:bg-gray-200 bk:dark:hover:bg-gray-600 ${classNames.inactivePill ?? ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `bk:flex bk:flex-col bk:gap-4 bk:mb-6 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bk:flex bk:flex-col bk:sm:flex-row bk:gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bk:relative bk:flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "svg",
+          {
+            className: "bk:absolute bk:left-3 bk:top-1/2 bk:-translate-y-1/2 bk:w-3.5 bk:h-3.5 bk:text-gray-400 bk:pointer-events-none",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            id: "content-search",
+            type: "search",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            placeholder,
+            className: `bk:w-full bk:pl-8 bk:pr-4 bk:py-2 bk:rounded-md bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:bg-white bk:dark:bg-gray-800 bk:text-sm bk:text-gray-700 bk:dark:text-gray-200 bk:placeholder-gray-400 bk:focus:outline-none bk:focus:border-gray-400 bk:dark:focus:border-gray-500 bk:transition-colors ${classNames.input ?? ""}`
+          }
+        )
+      ] }),
+      categories.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className: `bk:flex bk:flex-wrap bk:gap-2 bk:items-center ${classNames.categoryContainer ?? ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: () => setSelectedCategory(null),
+                className: `${pillBase} ${selectedCategory === null ? pillActive : pillInactive}`,
+                children: "All"
+              }
+            ),
+            categories.slice(0, 3).map((cat) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: () => setSelectedCategory(cat),
+                className: `${pillBase} ${selectedCategory === cat ? pillActive : pillInactive}`,
+                children: cat
+              },
+              cat
+            ))
+          ]
+        }
+      )
+    ] }),
+    contentCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "p",
+      {
+        className: `bk:text-[10px] bk:uppercase bk:tracking-wider bk:text-gray-400 bk:dark:text-gray-500 ${classNames.contentCount ?? ""}`,
+        children: [
+          contentCount,
+          " ",
+          contentCount === 1 ? "item" : "items",
+          " found"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ContentPlaceholder.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ContentPlaceholder({ count = 3, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: "bk:bg-white bk:dark:bg-gray-800 bk:rounded-lg bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:p-6 bk:animate-pulse",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bk:h-6 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:w-3/4" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bk:h-6 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:w-3/4" })
       ]
     },
     i
   )) });
 }
 
-// src/hooks/useBlogs.ts
-var import_react4 = require("react");
+// src/hooks/useContent.ts
+var import_react6 = require("react");
 
 // src/hooks/useDebounce.ts
-var import_react3 = require("react");
+var import_react5 = require("react");
 function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react3.useState)(value);
-  (0, import_react3.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react5.useState)(value);
+  (0, import_react5.useEffect)(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -323,33 +464,40 @@ function useDebounce(value, delay) {
   return debouncedValue;
 }
 
-// src/hooks/useBlogs.ts
-function useBlogs(blogsMeta) {
-  const [filteredBlogs, setFilteredBlogs] = (0, import_react4.useState)(blogsMeta);
-  const [searchTerm, setSearchTerm] = (0, import_react4.useState)("");
-  const [selectedCategory, setSelectedCategory] = (0, import_react4.useState)(null);
+// src/utils/filter-utils.ts
+function filterContent(items, searchTerm = "", selectedCategory = null) {
+  let filtered = items;
+  if (searchTerm) {
+    const lowerSearch = searchTerm.toLowerCase();
+    filtered = filtered.filter(
+      (item) => (item.title?.toLowerCase() || "").includes(lowerSearch) || (item.description?.toLowerCase() || "").includes(lowerSearch)
+    );
+  }
+  if (selectedCategory) {
+    filtered = filtered.filter((item) => {
+      const categories = item.categories ?? [];
+      return categories.includes(selectedCategory);
+    });
+  }
+  return filtered;
+}
+function getAvailableCategories(items) {
+  return Array.from(new Set(items.flatMap((item) => item.categories ?? [])));
+}
+
+// src/hooks/useContent.ts
+function useContent(allContentMeta) {
+  const [searchTerm, setSearchTerm] = (0, import_react6.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react6.useState)(null);
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
-  const getBlogCategories = (blog) => {
-    return blog.categories ?? [];
-  };
-  (0, import_react4.useEffect)(() => {
-    let filtered = blogsMeta;
-    if (debouncedSearchTerm) {
-      filtered = filtered.filter(
-        (blog) => blog.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) || blog.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
-      );
-    }
-    if (selectedCategory) {
-      filtered = filtered.filter((blog) => {
-        const blogCategories = getBlogCategories(blog);
-        return blogCategories.includes(selectedCategory);
-      });
-    }
-    setFilteredBlogs(filtered);
-  }, [blogsMeta, debouncedSearchTerm, selectedCategory]);
-  const categories = Array.from(new Set(blogsMeta.flatMap((blog) => getBlogCategories(blog))));
+  const metadata = (0, import_react6.useMemo)(() => {
+    return filterContent(allContentMeta, debouncedSearchTerm, selectedCategory);
+  }, [allContentMeta, debouncedSearchTerm, selectedCategory]);
+  const categories = (0, import_react6.useMemo)(() => {
+    return getAvailableCategories(allContentMeta);
+  }, [allContentMeta]);
   return {
-    metadata: filteredBlogs,
+    metadata,
     searchTerm,
     setSearchTerm,
     selectedCategory,
@@ -359,9 +507,12 @@ function useBlogs(blogsMeta) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BlogCard,
-  BlogList,
-  BlogPlaceholder,
-  BlogRenderer,
-  useBlogs
+  ContentCard,
+  ContentList,
+  ContentPlaceholder,
+  ContentRenderer,
+  Filter,
+  filterContent,
+  getAvailableCategories,
+  useContent
 });

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default from 'react';
 
-interface BlogMeta {
+interface ContentMeta {
     title: string;
     description: string;
     date: string;
@@ -10,28 +10,28 @@ interface BlogMeta {
     slug: string;
     readingTime: string;
 }
-interface Blog {
-    metadata: BlogMeta;
-    content: string;
+interface Content {
+    metadata: ContentMeta;
+    body: string;
 }
-interface BlogConfig {
+interface ContentConfig {
     contentDirectory: string;
-    blogSubdirectory?: string;
+    contentSubdirectory?: string;
 }
 
-interface BlogRendererProps {
-    content: string;
-    metadata: BlogMeta;
+interface ContentRendererProps {
+    body: string;
+    metadata: ContentMeta;
     className?: string;
     components?: Record<string, react__default.ComponentType<any>>;
     showCategory?: boolean;
     showReadingTime?: boolean;
     showDate?: boolean;
 }
-declare function BlogRenderer({ content, metadata, className, components, showCategory, showReadingTime, showDate, }: BlogRendererProps): react_jsx_runtime.JSX.Element;
+declare function ContentRenderer({ body, metadata, className, components, showCategory, showReadingTime, showDate, }: ContentRendererProps): react_jsx_runtime.JSX.Element;
 
-interface BlogCardProps {
-    metadata: BlogMeta;
+interface ContentCardProps {
+    metadata: ContentMeta;
     basePath?: string;
     renderLink?: (href: string, children: react__default.ReactNode) => react__default.ReactNode;
     className?: string;
@@ -39,26 +39,56 @@ interface BlogCardProps {
     showReadingTime?: boolean;
     showDate?: boolean;
 }
-declare function BlogCard({ metadata, basePath, renderLink, className, showCategory, showReadingTime, showDate, }: BlogCardProps): react_jsx_runtime.JSX.Element;
+declare function ContentCard({ metadata, basePath, renderLink, className, showCategory, showReadingTime, showDate, }: ContentCardProps): react_jsx_runtime.JSX.Element;
 
-interface BlogListProps {
-    metadata: BlogMeta[];
+interface ContentListProps {
+    metadata: ContentMeta[];
+    title?: string;
+    description?: string;
     basePath?: string;
-    renderLink?: BlogCardProps['renderLink'];
+    renderLink?: ContentCardProps['renderLink'];
     className?: string;
     emptyMessage?: string;
-    cardProps?: Omit<BlogCardProps, 'metadata' | 'basePath' | 'renderLink'>;
+    cardProps?: Omit<ContentCardProps, 'metadata' | 'basePath' | 'renderLink'>;
+    classNames?: {
+        title?: string;
+        description?: string;
+    };
 }
-declare function BlogList({ metadata, basePath, renderLink, className, emptyMessage, cardProps, }: BlogListProps): react_jsx_runtime.JSX.Element;
+/**
+ * A pure, stateless ContentList component that renders a list of content cards.
+ * Accepts metadata and renders it exactly as provided.
+ */
+declare function ContentList({ metadata, title, description, basePath, renderLink, className, emptyMessage, cardProps, classNames, }: ContentListProps): react_jsx_runtime.JSX.Element;
 
-interface BlogPlaceholderProps {
+interface FilterProps {
+    searchTerm: string;
+    setSearchTerm: (searchTerm: string) => void;
+    selectedCategory: string | null;
+    setSelectedCategory: (selectedCategory: string | null) => void;
+    categories: string[];
+    contentCount?: number;
+    className?: string;
+    placeholder?: string;
+    classNames?: {
+        input?: string;
+        categoryContainer?: string;
+        pill?: string;
+        activePill?: string;
+        inactivePill?: string;
+        contentCount?: string;
+    };
+}
+declare function Filter({ searchTerm, setSearchTerm, selectedCategory, setSelectedCategory, categories, contentCount, className, placeholder, classNames, }: FilterProps): react_jsx_runtime.JSX.Element;
+
+interface ContentPlaceholderProps {
     count?: number;
     className?: string;
 }
-declare function BlogPlaceholder({ count, className }: BlogPlaceholderProps): react_jsx_runtime.JSX.Element;
+declare function ContentPlaceholder({ count, className }: ContentPlaceholderProps): react_jsx_runtime.JSX.Element;
 
-declare function useBlogs(blogsMeta: BlogMeta[]): {
-    metadata: BlogMeta[];
+declare function useContent(allContentMeta: ContentMeta[]): {
+    metadata: ContentMeta[];
     searchTerm: string;
     setSearchTerm: react.Dispatch<react.SetStateAction<string>>;
     selectedCategory: string | null;
@@ -66,4 +96,7 @@ declare function useBlogs(blogsMeta: BlogMeta[]): {
     categories: string[];
 };
 
-export { type Blog, BlogCard, type BlogCardProps, type BlogConfig, BlogList, type BlogListProps, type BlogMeta, BlogPlaceholder, type BlogPlaceholderProps, BlogRenderer, type BlogRendererProps, useBlogs };
+declare function filterContent(items: ContentMeta[], searchTerm?: string, selectedCategory?: string | null): ContentMeta[];
+declare function getAvailableCategories(items: ContentMeta[]): string[];
+
+export { type Content, ContentCard, type ContentCardProps, type ContentConfig, ContentList, type ContentListProps, type ContentMeta, ContentPlaceholder, type ContentPlaceholderProps, ContentRenderer, type ContentRendererProps, Filter, type FilterProps, filterContent, getAvailableCategories, useContent };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default from 'react';
 
-interface BlogMeta {
+interface ContentMeta {
     title: string;
     description: string;
     date: string;
@@ -10,28 +10,28 @@ interface BlogMeta {
     slug: string;
     readingTime: string;
 }
-interface Blog {
-    metadata: BlogMeta;
-    content: string;
+interface Content {
+    metadata: ContentMeta;
+    body: string;
 }
-interface BlogConfig {
+interface ContentConfig {
     contentDirectory: string;
-    blogSubdirectory?: string;
+    contentSubdirectory?: string;
 }
 
-interface BlogRendererProps {
-    content: string;
-    metadata: BlogMeta;
+interface ContentRendererProps {
+    body: string;
+    metadata: ContentMeta;
     className?: string;
     components?: Record<string, react__default.ComponentType<any>>;
     showCategory?: boolean;
     showReadingTime?: boolean;
     showDate?: boolean;
 }
-declare function BlogRenderer({ content, metadata, className, components, showCategory, showReadingTime, showDate, }: BlogRendererProps): react_jsx_runtime.JSX.Element;
+declare function ContentRenderer({ body, metadata, className, components, showCategory, showReadingTime, showDate, }: ContentRendererProps): react_jsx_runtime.JSX.Element;
 
-interface BlogCardProps {
-    metadata: BlogMeta;
+interface ContentCardProps {
+    metadata: ContentMeta;
     basePath?: string;
     renderLink?: (href: string, children: react__default.ReactNode) => react__default.ReactNode;
     className?: string;
@@ -39,26 +39,56 @@ interface BlogCardProps {
     showReadingTime?: boolean;
     showDate?: boolean;
 }
-declare function BlogCard({ metadata, basePath, renderLink, className, showCategory, showReadingTime, showDate, }: BlogCardProps): react_jsx_runtime.JSX.Element;
+declare function ContentCard({ metadata, basePath, renderLink, className, showCategory, showReadingTime, showDate, }: ContentCardProps): react_jsx_runtime.JSX.Element;
 
-interface BlogListProps {
-    metadata: BlogMeta[];
+interface ContentListProps {
+    metadata: ContentMeta[];
+    title?: string;
+    description?: string;
     basePath?: string;
-    renderLink?: BlogCardProps['renderLink'];
+    renderLink?: ContentCardProps['renderLink'];
     className?: string;
     emptyMessage?: string;
-    cardProps?: Omit<BlogCardProps, 'metadata' | 'basePath' | 'renderLink'>;
+    cardProps?: Omit<ContentCardProps, 'metadata' | 'basePath' | 'renderLink'>;
+    classNames?: {
+        title?: string;
+        description?: string;
+    };
 }
-declare function BlogList({ metadata, basePath, renderLink, className, emptyMessage, cardProps, }: BlogListProps): react_jsx_runtime.JSX.Element;
+/**
+ * A pure, stateless ContentList component that renders a list of content cards.
+ * Accepts metadata and renders it exactly as provided.
+ */
+declare function ContentList({ metadata, title, description, basePath, renderLink, className, emptyMessage, cardProps, classNames, }: ContentListProps): react_jsx_runtime.JSX.Element;
 
-interface BlogPlaceholderProps {
+interface FilterProps {
+    searchTerm: string;
+    setSearchTerm: (searchTerm: string) => void;
+    selectedCategory: string | null;
+    setSelectedCategory: (selectedCategory: string | null) => void;
+    categories: string[];
+    contentCount?: number;
+    className?: string;
+    placeholder?: string;
+    classNames?: {
+        input?: string;
+        categoryContainer?: string;
+        pill?: string;
+        activePill?: string;
+        inactivePill?: string;
+        contentCount?: string;
+    };
+}
+declare function Filter({ searchTerm, setSearchTerm, selectedCategory, setSelectedCategory, categories, contentCount, className, placeholder, classNames, }: FilterProps): react_jsx_runtime.JSX.Element;
+
+interface ContentPlaceholderProps {
     count?: number;
     className?: string;
 }
-declare function BlogPlaceholder({ count, className }: BlogPlaceholderProps): react_jsx_runtime.JSX.Element;
+declare function ContentPlaceholder({ count, className }: ContentPlaceholderProps): react_jsx_runtime.JSX.Element;
 
-declare function useBlogs(blogsMeta: BlogMeta[]): {
-    metadata: BlogMeta[];
+declare function useContent(allContentMeta: ContentMeta[]): {
+    metadata: ContentMeta[];
     searchTerm: string;
     setSearchTerm: react.Dispatch<react.SetStateAction<string>>;
     selectedCategory: string | null;
@@ -66,4 +96,7 @@ declare function useBlogs(blogsMeta: BlogMeta[]): {
     categories: string[];
 };
 
-export { type Blog, BlogCard, type BlogCardProps, type BlogConfig, BlogList, type BlogListProps, type BlogMeta, BlogPlaceholder, type BlogPlaceholderProps, BlogRenderer, type BlogRendererProps, useBlogs };
+declare function filterContent(items: ContentMeta[], searchTerm?: string, selectedCategory?: string | null): ContentMeta[];
+declare function getAvailableCategories(items: ContentMeta[]): string[];
+
+export { type Content, ContentCard, type ContentCardProps, type ContentConfig, ContentList, type ContentListProps, type ContentMeta, ContentPlaceholder, type ContentPlaceholderProps, ContentRenderer, type ContentRendererProps, Filter, type FilterProps, filterContent, getAvailableCategories, useContent };

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/components/BlogRenderer.tsx
+// src/components/ContentRenderer.tsx
 import "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -38,7 +38,7 @@ function Badge({ children, className }) {
   );
 }
 
-// src/components/BlogRenderer.tsx
+// src/components/ContentRenderer.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var defaultComponents = {
   h1: (props) => /* @__PURE__ */ jsx2(
@@ -84,8 +84,20 @@ var defaultComponents = {
     }
   ),
   p: (props) => /* @__PURE__ */ jsx2("p", { className: "bk:mb-4 bk:leading-7 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
-  ul: (props) => /* @__PURE__ */ jsx2("ul", { className: "bk:mb-4 bk:ml-6 bk:list-disc bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
-  ol: (props) => /* @__PURE__ */ jsx2("ol", { className: "bk:mb-4 bk:ml-6 bk:list-decimal bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
+  ul: (props) => /* @__PURE__ */ jsx2(
+    "ul",
+    {
+      className: "bk:mb-4 bk:ml-6 bk:list-disc bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300",
+      ...props
+    }
+  ),
+  ol: (props) => /* @__PURE__ */ jsx2(
+    "ol",
+    {
+      className: "bk:mb-4 bk:ml-6 bk:list-decimal bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300",
+      ...props
+    }
+  ),
   li: (props) => /* @__PURE__ */ jsx2("li", { ...props }),
   code: ({ className, children, ...props }) => {
     const isInline = !className;
@@ -135,15 +147,27 @@ var defaultComponents = {
       ...props
     }
   ) }),
-  thead: (props) => /* @__PURE__ */ jsx2("thead", { className: "bk:bg-gray-50 bk:dark:bg-gray-800 bk:text-gray-700 bk:dark:text-gray-200", ...props }),
+  thead: (props) => /* @__PURE__ */ jsx2(
+    "thead",
+    {
+      className: "bk:bg-gray-50 bk:dark:bg-gray-800 bk:text-gray-700 bk:dark:text-gray-200",
+      ...props
+    }
+  ),
   tbody: (props) => /* @__PURE__ */ jsx2("tbody", { ...props }),
-  tr: (props) => /* @__PURE__ */ jsx2("tr", { className: "bk:border-b bk:last:border-b-0 bk:border-gray-200 bk:dark:border-gray-700", ...props }),
+  tr: (props) => /* @__PURE__ */ jsx2(
+    "tr",
+    {
+      className: "bk:border-b bk:last:border-b-0 bk:border-gray-200 bk:dark:border-gray-700",
+      ...props
+    }
+  ),
   th: (props) => /* @__PURE__ */ jsx2("th", { className: "bk:px-4 bk:py-3 bk:text-left bk:font-semibold", ...props }),
   td: (props) => /* @__PURE__ */ jsx2("td", { className: "bk:px-4 bk:py-3 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
   input: (props) => /* @__PURE__ */ jsx2("input", { type: "checkbox", disabled: true, className: "bk:mr-2 bk:accent-blue-600", ...props })
 };
-function BlogRenderer({
-  content,
+function ContentRenderer({
+  body,
   metadata,
   className = "",
   components,
@@ -171,16 +195,16 @@ function BlogRenderer({
         remarkPlugins: [remarkGfm],
         rehypePlugins: [rehypeRaw, rehypePrismPlus, rehypeSlugCustomId],
         components: mergedComponents,
-        children: content
+        children: body
       }
     ) })
   ] });
 }
 
-// src/components/BlogCard.tsx
+// src/components/ContentCard.tsx
 import "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function BlogCard({
+function ContentCard({
   metadata,
   basePath = "/blog",
   renderLink,
@@ -223,50 +247,164 @@ function BlogCard({
   );
 }
 
-// src/components/BlogList.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function BlogList({
+// src/components/ContentList.tsx
+import "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ContentList({
   metadata,
+  title,
+  description,
   basePath = "/blog",
   renderLink,
   className = "",
-  emptyMessage = "No blog posts found.",
-  cardProps
+  emptyMessage = "No content found.",
+  cardProps,
+  classNames = {}
 }) {
-  if (metadata.length === 0) {
-    return /* @__PURE__ */ jsx4("div", { className: `bk:text-center bk:text-gray-500 bk:dark:text-gray-400 bk:py-12 ${className}`, children: emptyMessage });
-  }
-  return /* @__PURE__ */ jsx4("div", { className: `bk:flex bk:flex-col bk:gap-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ jsx4(
-    BlogCard,
-    {
-      metadata: meta,
-      basePath,
-      renderLink,
-      ...cardProps
-    },
-    meta.slug
-  )) });
+  return /* @__PURE__ */ jsxs3("div", { className: "bk:w-full", children: [
+    title && /* @__PURE__ */ jsx4(
+      "h1",
+      {
+        className: `bk:text-4xl bk:font-bold bk:mb-4 bk:mt-8 bk:text-gray-800 bk:dark:text-gray-100 ${classNames.title ?? ""}`,
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx4(
+      "p",
+      {
+        className: `bk:text-gray-600 bk:dark:text-gray-400 bk:mb-8 ${classNames.description ?? ""}`,
+        children: description
+      }
+    ),
+    metadata.length === 0 ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `bk:text-center bk:text-gray-500 bk:dark:text-gray-400 bk:py-12 ${className}`,
+        children: emptyMessage
+      }
+    ) : /* @__PURE__ */ jsx4("div", { className: `bk:flex bk:flex-col bk:gap-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ jsx4(
+      ContentCard,
+      {
+        metadata: meta,
+        basePath,
+        renderLink,
+        ...cardProps
+      },
+      meta.slug
+    )) })
+  ] });
+}
+
+// src/components/Filter.tsx
+import "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Filter({
+  searchTerm,
+  setSearchTerm,
+  selectedCategory,
+  setSelectedCategory,
+  categories,
+  contentCount,
+  className = "",
+  placeholder = "Search content...",
+  classNames = {}
+}) {
+  const pillBase = `bk:px-2.5 bk:py-1 bk:cursor-pointer bk:rounded-md bk:text-xs bk:font-medium bk:transition-colors ${classNames.pill ?? ""}`;
+  const pillActive = `bk:bg-gray-700 bk:dark:bg-gray-200 bk:text-white bk:dark:text-gray-800 ${classNames.activePill ?? ""}`;
+  const pillInactive = `bk:bg-gray-100 bk:dark:bg-gray-700 bk:text-gray-500 bk:dark:text-gray-300 bk:hover:bg-gray-200 bk:dark:hover:bg-gray-600 ${classNames.inactivePill ?? ""}`;
+  return /* @__PURE__ */ jsxs4("div", { className: `bk:flex bk:flex-col bk:gap-4 bk:mb-6 ${className}`, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "bk:flex bk:flex-col bk:sm:flex-row bk:gap-3", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "bk:relative bk:flex-1", children: [
+        /* @__PURE__ */ jsx5(
+          "svg",
+          {
+            className: "bk:absolute bk:left-3 bk:top-1/2 bk:-translate-y-1/2 bk:w-3.5 bk:h-3.5 bk:text-gray-400 bk:pointer-events-none",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx5(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            id: "content-search",
+            type: "search",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            placeholder,
+            className: `bk:w-full bk:pl-8 bk:pr-4 bk:py-2 bk:rounded-md bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:bg-white bk:dark:bg-gray-800 bk:text-sm bk:text-gray-700 bk:dark:text-gray-200 bk:placeholder-gray-400 bk:focus:outline-none bk:focus:border-gray-400 bk:dark:focus:border-gray-500 bk:transition-colors ${classNames.input ?? ""}`
+          }
+        )
+      ] }),
+      categories.length > 0 && /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: `bk:flex bk:flex-wrap bk:gap-2 bk:items-center ${classNames.categoryContainer ?? ""}`,
+          children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                onClick: () => setSelectedCategory(null),
+                className: `${pillBase} ${selectedCategory === null ? pillActive : pillInactive}`,
+                children: "All"
+              }
+            ),
+            categories.slice(0, 3).map((cat) => /* @__PURE__ */ jsx5(
+              "button",
+              {
+                onClick: () => setSelectedCategory(cat),
+                className: `${pillBase} ${selectedCategory === cat ? pillActive : pillInactive}`,
+                children: cat
+              },
+              cat
+            ))
+          ]
+        }
+      )
+    ] }),
+    contentCount !== void 0 && /* @__PURE__ */ jsxs4(
+      "p",
+      {
+        className: `bk:text-[10px] bk:uppercase bk:tracking-wider bk:text-gray-400 bk:dark:text-gray-500 ${classNames.contentCount ?? ""}`,
+        children: [
+          contentCount,
+          " ",
+          contentCount === 1 ? "item" : "items",
+          " found"
+        ]
+      }
+    )
+  ] });
 }
 
-// src/components/BlogPlaceholder.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function BlogPlaceholder({ count = 3, className = "" }) {
-  return /* @__PURE__ */ jsx5("div", { className: `${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs3(
+// src/components/ContentPlaceholder.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ContentPlaceholder({ count = 3, className = "" }) {
+  return /* @__PURE__ */ jsx6("div", { className: `${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs5(
     "div",
     {
       className: "bk:bg-white bk:dark:bg-gray-800 bk:rounded-lg bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:p-6 bk:animate-pulse",
       children: [
-        /* @__PURE__ */ jsx5("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-3" }),
-        /* @__PURE__ */ jsx5("div", { className: "bk:h-6 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-2" }),
-        /* @__PURE__ */ jsx5("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:w-3/4" })
+        /* @__PURE__ */ jsx6("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-3" }),
+        /* @__PURE__ */ jsx6("div", { className: "bk:h-6 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-2" }),
+        /* @__PURE__ */ jsx6("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:w-3/4" })
       ]
     },
     i
   )) });
 }
 
-// src/hooks/useBlogs.ts
-import { useState as useState2, useEffect as useEffect2 } from "react";
+// src/hooks/useContent.ts
+import { useState as useState2, useMemo } from "react";
 
 // src/hooks/useDebounce.ts
 import { useEffect, useState } from "react";
@@ -283,33 +421,40 @@ function useDebounce(value, delay) {
   return debouncedValue;
 }
 
-// src/hooks/useBlogs.ts
-function useBlogs(blogsMeta) {
-  const [filteredBlogs, setFilteredBlogs] = useState2(blogsMeta);
+// src/utils/filter-utils.ts
+function filterContent(items, searchTerm = "", selectedCategory = null) {
+  let filtered = items;
+  if (searchTerm) {
+    const lowerSearch = searchTerm.toLowerCase();
+    filtered = filtered.filter(
+      (item) => (item.title?.toLowerCase() || "").includes(lowerSearch) || (item.description?.toLowerCase() || "").includes(lowerSearch)
+    );
+  }
+  if (selectedCategory) {
+    filtered = filtered.filter((item) => {
+      const categories = item.categories ?? [];
+      return categories.includes(selectedCategory);
+    });
+  }
+  return filtered;
+}
+function getAvailableCategories(items) {
+  return Array.from(new Set(items.flatMap((item) => item.categories ?? [])));
+}
+
+// src/hooks/useContent.ts
+function useContent(allContentMeta) {
   const [searchTerm, setSearchTerm] = useState2("");
   const [selectedCategory, setSelectedCategory] = useState2(null);
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
-  const getBlogCategories = (blog) => {
-    return blog.categories ?? [];
-  };
-  useEffect2(() => {
-    let filtered = blogsMeta;
-    if (debouncedSearchTerm) {
-      filtered = filtered.filter(
-        (blog) => blog.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) || blog.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
-      );
-    }
-    if (selectedCategory) {
-      filtered = filtered.filter((blog) => {
-        const blogCategories = getBlogCategories(blog);
-        return blogCategories.includes(selectedCategory);
-      });
-    }
-    setFilteredBlogs(filtered);
-  }, [blogsMeta, debouncedSearchTerm, selectedCategory]);
-  const categories = Array.from(new Set(blogsMeta.flatMap((blog) => getBlogCategories(blog))));
+  const metadata = useMemo(() => {
+    return filterContent(allContentMeta, debouncedSearchTerm, selectedCategory);
+  }, [allContentMeta, debouncedSearchTerm, selectedCategory]);
+  const categories = useMemo(() => {
+    return getAvailableCategories(allContentMeta);
+  }, [allContentMeta]);
   return {
-    metadata: filteredBlogs,
+    metadata,
     searchTerm,
     setSearchTerm,
     selectedCategory,
@@ -318,9 +463,12 @@ function useBlogs(blogsMeta) {
   };
 }
 export {
-  BlogCard,
-  BlogList,
-  BlogPlaceholder,
-  BlogRenderer,
-  useBlogs
+  ContentCard,
+  ContentList,
+  ContentPlaceholder,
+  ContentRenderer,
+  Filter,
+  filterContent,
+  getAvailableCategories,
+  useContent
 };

package/dist/style.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial}}}@layer theme{:root,:host{--bk-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bk-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bk-color-orange-100:oklch(95.4% .038 75.164);--bk-color-orange-300:oklch(83.7% .128 66.29);--bk-color-orange-500:oklch(70.5% .213 47.604);--bk-color-orange-900:oklch(40.8% .123 38.172);--bk-color-amber-100:oklch(96.2% .059 95.617);--bk-color-amber-300:oklch(87.9% .169 91.605);--bk-color-amber-500:oklch(76.9% .188 70.08);--bk-color-amber-900:oklch(41.4% .112 45.904);--bk-color-emerald-100:oklch(95% .052 163.051);--bk-color-emerald-300:oklch(84.5% .143 164.978);--bk-color-emerald-500:oklch(69.6% .17 162.48);--bk-color-emerald-900:oklch(37.8% .077 168.94);--bk-color-teal-100:oklch(95.3% .051 180.801);--bk-color-teal-300:oklch(85.5% .138 181.071);--bk-color-teal-500:oklch(70.4% .14 182.503);--bk-color-teal-900:oklch(38.6% .063 188.416);--bk-color-cyan-100:oklch(95.6% .045 203.388);--bk-color-cyan-300:oklch(86.5% .127 207.078);--bk-color-cyan-500:oklch(71.5% .143 215.221);--bk-color-cyan-900:oklch(39.8% .07 227.392);--bk-color-blue-100:oklch(93.2% .032 255.585);--bk-color-blue-300:oklch(80.9% .105 251.813);--bk-color-blue-400:oklch(70.7% .165 254.624);--bk-color-blue-500:oklch(62.3% .214 259.815);--bk-color-blue-600:oklch(54.6% .245 262.881);--bk-color-blue-700:oklch(48.8% .243 264.376);--bk-color-blue-800:oklch(42.4% .199 265.638);--bk-color-blue-900:oklch(37.9% .146 265.522);--bk-color-violet-100:oklch(94.3% .029 294.588);--bk-color-violet-300:oklch(81.1% .111 293.571);--bk-color-violet-500:oklch(60.6% .25 292.717);--bk-color-violet-900:oklch(38% .189 293.745);--bk-color-fuchsia-100:oklch(95.2% .037 318.852);--bk-color-fuchsia-300:oklch(83.3% .145 321.434);--bk-color-fuchsia-500:oklch(66.7% .295 322.15);--bk-color-fuchsia-900:oklch(40.1% .17 325.612);--bk-color-rose-100:oklch(94.1% .03 12.58);--bk-color-rose-300:oklch(81% .117 11.638);--bk-color-rose-400:oklch(71.2% .194 13.428);--bk-color-rose-500:oklch(64.5% .246 16.439);--bk-color-rose-600:oklch(58.6% .253 17.585);--bk-color-rose-900:oklch(41% .159 10.272);--bk-color-gray-50:oklch(98.5% .002 247.839);--bk-color-gray-100:oklch(96.7% .003 264.542);--bk-color-gray-200:oklch(92.8% .006 264.531);--bk-color-gray-300:oklch(87.2% .01 258.338);--bk-color-gray-400:oklch(70.7% .022 261.325);--bk-color-gray-500:oklch(55.1% .027 264.364);--bk-color-gray-600:oklch(44.6% .03 256.802);--bk-color-gray-700:oklch(37.3% .034 259.733);--bk-color-gray-800:oklch(27.8% .033 256.848);--bk-color-neutral-900:oklch(20.5% 0 0);--bk-color-white:#fff;--bk-spacing:.25rem;--bk-text-xs:.75rem;--bk-text-xs--line-height:calc(1/.75);--bk-text-sm:.875rem;--bk-text-sm--line-height:calc(1.25/.875);--bk-text-base:1rem;--bk-text-base--line-height:calc(1.5/1);--bk-text-lg:1.125rem;--bk-text-lg--line-height:calc(1.75/1.125);--bk-text-xl:1.25rem;--bk-text-xl--line-height:calc(1.75/1.25);--bk-text-2xl:1.5rem;--bk-text-2xl--line-height:calc(2/1.5);--bk-text-3xl:1.875rem;--bk-text-3xl--line-height:calc(2.25/1.875);--bk-text-4xl:2.25rem;--bk-text-4xl--line-height:calc(2.5/2.25);--bk-font-weight-medium:500;--bk-font-weight-semibold:600;--bk-tracking-tight:-.025em;--bk-tracking-wide:.025em;--bk-radius-lg:.5rem;--bk-radius-xl:.75rem;--bk-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--bk-default-font-family:var(--bk-font-sans);--bk-default-mono-font-family:var(--bk-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--bk-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--bk-default-font-feature-settings,normal);font-variation-settings:var(--bk-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--bk-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--bk-default-mono-font-feature-settings,normal);font-variation-settings:var(--bk-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.bk\:my-6{margin-block:calc(var(--bk-spacing)*6)}.bk\:my-9{margin-block:calc(var(--bk-spacing)*9)}.bk\:mt-4{margin-top:calc(var(--bk-spacing)*4)}.bk\:mt-5{margin-top:calc(var(--bk-spacing)*5)}.bk\:mt-6{margin-top:calc(var(--bk-spacing)*6)}.bk\:mt-8{margin-top:calc(var(--bk-spacing)*8)}.bk\:mt-10{margin-top:calc(var(--bk-spacing)*10)}.bk\:mt-auto{margin-top:auto}.bk\:mr-2{margin-right:calc(var(--bk-spacing)*2)}.bk\:mb-2{margin-bottom:calc(var(--bk-spacing)*2)}.bk\:mb-3{margin-bottom:calc(var(--bk-spacing)*3)}.bk\:mb-4{margin-bottom:calc(var(--bk-spacing)*4)}.bk\:mb-5{margin-bottom:calc(var(--bk-spacing)*5)}.bk\:ml-6{margin-left:calc(var(--bk-spacing)*6)}.bk\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.bk\:flex{display:flex}.bk\:inline-flex{display:inline-flex}.bk\:h-4{height:calc(var(--bk-spacing)*4)}.bk\:h-6{height:calc(var(--bk-spacing)*6)}.bk\:h-auto{height:auto}.bk\:min-h-\[200px\]{min-height:200px}.bk\:w-3\/4{width:75%}.bk\:w-full{width:100%}.bk\:max-w-full{max-width:100%}.bk\:max-w-none{max-width:none}.bk\:shrink-0{flex-shrink:0}.bk\:animate-pulse{animation:var(--bk-animate-pulse)}.bk\:list-decimal{list-style-type:decimal}.bk\:list-disc{list-style-type:disc}.bk\:flex-col{flex-direction:column}.bk\:flex-nowrap{flex-wrap:nowrap}.bk\:flex-wrap{flex-wrap:wrap}.bk\:items-center{align-items:center}.bk\:justify-between{justify-content:space-between}.bk\:gap-1\.5{gap:calc(var(--bk-spacing)*1.5)}.bk\:gap-2{gap:calc(var(--bk-spacing)*2)}.bk\:gap-3{gap:calc(var(--bk-spacing)*3)}.bk\:gap-6{gap:calc(var(--bk-spacing)*6)}:where(.bk\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--bk-spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--bk-spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.bk\:overflow-hidden{overflow:hidden}.bk\:overflow-x-auto{overflow-x:auto}.bk\:rounded{border-radius:.25rem}.bk\:rounded-full{border-radius:3.40282e38px}.bk\:rounded-lg{border-radius:var(--bk-radius-lg)}.bk\:rounded-xl{border-radius:var(--bk-radius-xl)}.bk\:border{border-style:var(--tw-border-style);border-width:1px}.bk\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.bk\:border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.bk\:border-blue-500{border-color:var(--bk-color-blue-500)}.bk\:border-gray-200{border-color:var(--bk-color-gray-200)}.bk\:border-transparent{border-color:#0000}.bk\:bg-amber-100{background-color:var(--bk-color-amber-100)}.bk\:bg-blue-100{background-color:var(--bk-color-blue-100)}.bk\:bg-cyan-100{background-color:var(--bk-color-cyan-100)}.bk\:bg-emerald-100{background-color:var(--bk-color-emerald-100)}.bk\:bg-fuchsia-100{background-color:var(--bk-color-fuchsia-100)}.bk\:bg-gray-50{background-color:var(--bk-color-gray-50)}.bk\:bg-gray-100{background-color:var(--bk-color-gray-100)}.bk\:bg-gray-200{background-color:var(--bk-color-gray-200)}.bk\:bg-orange-100{background-color:var(--bk-color-orange-100)}.bk\:bg-rose-100{background-color:var(--bk-color-rose-100)}.bk\:bg-teal-100{background-color:var(--bk-color-teal-100)}.bk\:bg-violet-100{background-color:var(--bk-color-violet-100)}.bk\:bg-white{background-color:var(--bk-color-white)}.bk\:p-6{padding:calc(var(--bk-spacing)*6)}.bk\:px-1\.5{padding-inline:calc(var(--bk-spacing)*1.5)}.bk\:px-2\.5{padding-inline:calc(var(--bk-spacing)*2.5)}.bk\:px-4{padding-inline:calc(var(--bk-spacing)*4)}.bk\:py-0\.5{padding-block:calc(var(--bk-spacing)*.5)}.bk\:py-3{padding-block:calc(var(--bk-spacing)*3)}.bk\:py-12{padding-block:calc(var(--bk-spacing)*12)}.bk\:pl-4{padding-left:calc(var(--bk-spacing)*4)}.bk\:text-center{text-align:center}.bk\:text-left{text-align:left}.bk\:font-mono{font-family:var(--bk-font-mono)}.bk\:text-2xl{font-size:var(--bk-text-2xl);line-height:var(--tw-leading,var(--bk-text-2xl--line-height))}.bk\:text-3xl{font-size:var(--bk-text-3xl);line-height:var(--tw-leading,var(--bk-text-3xl--line-height))}.bk\:text-base{font-size:var(--bk-text-base);line-height:var(--tw-leading,var(--bk-text-base--line-height))}.bk\:text-lg{font-size:var(--bk-text-lg);line-height:var(--tw-leading,var(--bk-text-lg--line-height))}.bk\:text-sm{font-size:var(--bk-text-sm);line-height:var(--tw-leading,var(--bk-text-sm--line-height))}.bk\:text-xl{font-size:var(--bk-text-xl);line-height:var(--tw-leading,var(--bk-text-xl--line-height))}.bk\:text-xs{font-size:var(--bk-text-xs);line-height:var(--tw-leading,var(--bk-text-xs--line-height))}.bk\:leading-6{--tw-leading:calc(var(--bk-spacing)*6);line-height:calc(var(--bk-spacing)*6)}.bk\:leading-7{--tw-leading:calc(var(--bk-spacing)*7);line-height:calc(var(--bk-spacing)*7)}.bk\:font-medium{--tw-font-weight:var(--bk-font-weight-medium);font-weight:var(--bk-font-weight-medium)}.bk\:font-semibold{--tw-font-weight:var(--bk-font-weight-semibold);font-weight:var(--bk-font-weight-semibold)}.bk\:tracking-tight{--tw-tracking:var(--bk-tracking-tight);letter-spacing:var(--bk-tracking-tight)}.bk\:tracking-wide{--tw-tracking:var(--bk-tracking-wide);letter-spacing:var(--bk-tracking-wide)}.bk\:whitespace-nowrap{white-space:nowrap}.bk\:text-amber-500{color:var(--bk-color-amber-500)}.bk\:text-blue-500{color:var(--bk-color-blue-500)}.bk\:text-blue-600{color:var(--bk-color-blue-600)}.bk\:text-cyan-500{color:var(--bk-color-cyan-500)}.bk\:text-emerald-500{color:var(--bk-color-emerald-500)}.bk\:text-fuchsia-500{color:var(--bk-color-fuchsia-500)}.bk\:text-gray-500{color:var(--bk-color-gray-500)}.bk\:text-gray-600{color:var(--bk-color-gray-600)}.bk\:text-gray-700{color:var(--bk-color-gray-700)}.bk\:text-gray-800{color:var(--bk-color-gray-800)}.bk\:text-orange-500{color:var(--bk-color-orange-500)}.bk\:text-rose-500{color:var(--bk-color-rose-500)}.bk\:text-rose-600{color:var(--bk-color-rose-600)}.bk\:text-teal-500{color:var(--bk-color-teal-500)}.bk\:text-violet-500{color:var(--bk-color-violet-500)}.bk\:uppercase{text-transform:uppercase}.bk\:italic{font-style:italic}.bk\:underline{text-decoration-line:underline}.bk\:underline-offset-4{text-underline-offset:4px}.bk\:accent-blue-600{accent-color:var(--bk-color-blue-600)}.bk\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.bk\:first\:mt-0:first-child{margin-top:calc(var(--bk-spacing)*0)}.bk\:last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.bk\:hover\:border-gray-300:hover{border-color:var(--bk-color-gray-300)}.bk\:hover\:text-blue-700:hover{color:var(--bk-color-blue-700)}.bk\:hover\:text-blue-800:hover{color:var(--bk-color-blue-800)}.bk\:hover\:underline:hover{text-decoration-line:underline}}@media (min-width:48rem){.bk\:md\:text-2xl{font-size:var(--bk-text-2xl);line-height:var(--tw-leading,var(--bk-text-2xl--line-height))}.bk\:md\:text-3xl{font-size:var(--bk-text-3xl);line-height:var(--tw-leading,var(--bk-text-3xl--line-height))}.bk\:md\:text-4xl{font-size:var(--bk-text-4xl);line-height:var(--tw-leading,var(--bk-text-4xl--line-height))}}.bk\:dark\:border-gray-700:is(html.dark *){border-color:var(--bk-color-gray-700)}.bk\:dark\:border-neutral-900:is(html.dark *){border-color:var(--bk-color-neutral-900)}.bk\:dark\:bg-amber-900\/30:is(html.dark *){background-color:var(--bk-color-amber-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-amber-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-amber-900)30%,transparent)}}.bk\:dark\:bg-blue-900\/30:is(html.dark *){background-color:var(--bk-color-blue-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-blue-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-blue-900)30%,transparent)}}.bk\:dark\:bg-cyan-900\/30:is(html.dark *){background-color:var(--bk-color-cyan-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-cyan-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-cyan-900)30%,transparent)}}.bk\:dark\:bg-emerald-900\/30:is(html.dark *){background-color:var(--bk-color-emerald-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-emerald-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-emerald-900)30%,transparent)}}.bk\:dark\:bg-fuchsia-900\/30:is(html.dark *){background-color:var(--bk-color-fuchsia-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-fuchsia-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-fuchsia-900)30%,transparent)}}.bk\:dark\:bg-gray-700:is(html.dark *){background-color:var(--bk-color-gray-700)}.bk\:dark\:bg-gray-800:is(html.dark *){background-color:var(--bk-color-gray-800)}.bk\:dark\:bg-orange-900\/30:is(html.dark *){background-color:var(--bk-color-orange-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-orange-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-orange-900)30%,transparent)}}.bk\:dark\:bg-rose-900\/30:is(html.dark *){background-color:var(--bk-color-rose-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-rose-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-rose-900)30%,transparent)}}.bk\:dark\:bg-teal-900\/30:is(html.dark *){background-color:var(--bk-color-teal-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-teal-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-teal-900)30%,transparent)}}.bk\:dark\:bg-violet-900\/30:is(html.dark *){background-color:var(--bk-color-violet-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-violet-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-violet-900)30%,transparent)}}.bk\:dark\:text-amber-300:is(html.dark *){color:var(--bk-color-amber-300)}.bk\:dark\:text-blue-300:is(html.dark *){color:var(--bk-color-blue-300)}.bk\:dark\:text-blue-400:is(html.dark *){color:var(--bk-color-blue-400)}.bk\:dark\:text-cyan-300:is(html.dark *){color:var(--bk-color-cyan-300)}.bk\:dark\:text-emerald-300:is(html.dark *){color:var(--bk-color-emerald-300)}.bk\:dark\:text-fuchsia-300:is(html.dark *){color:var(--bk-color-fuchsia-300)}.bk\:dark\:text-gray-100:is(html.dark *){color:var(--bk-color-gray-100)}.bk\:dark\:text-gray-200:is(html.dark *){color:var(--bk-color-gray-200)}.bk\:dark\:text-gray-300:is(html.dark *){color:var(--bk-color-gray-300)}.bk\:dark\:text-gray-400:is(html.dark *){color:var(--bk-color-gray-400)}.bk\:dark\:text-orange-300:is(html.dark *){color:var(--bk-color-orange-300)}.bk\:dark\:text-rose-300:is(html.dark *){color:var(--bk-color-rose-300)}.bk\:dark\:text-rose-400:is(html.dark *){color:var(--bk-color-rose-400)}.bk\:dark\:text-teal-300:is(html.dark *){color:var(--bk-color-teal-300)}.bk\:dark\:text-violet-300:is(html.dark *){color:var(--bk-color-violet-300)}@media (hover:hover){.bk\:dark\:hover\:border-gray-600:is(html.dark *):hover{border-color:var(--bk-color-gray-600)}.bk\:dark\:hover\:text-blue-300:is(html.dark *):hover{color:var(--bk-color-blue-300)}}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial}}}@layer theme{:root,:host{--bk-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bk-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bk-color-orange-100:oklch(95.4% .038 75.164);--bk-color-orange-300:oklch(83.7% .128 66.29);--bk-color-orange-500:oklch(70.5% .213 47.604);--bk-color-orange-900:oklch(40.8% .123 38.172);--bk-color-amber-100:oklch(96.2% .059 95.617);--bk-color-amber-300:oklch(87.9% .169 91.605);--bk-color-amber-500:oklch(76.9% .188 70.08);--bk-color-amber-900:oklch(41.4% .112 45.904);--bk-color-emerald-100:oklch(95% .052 163.051);--bk-color-emerald-300:oklch(84.5% .143 164.978);--bk-color-emerald-500:oklch(69.6% .17 162.48);--bk-color-emerald-900:oklch(37.8% .077 168.94);--bk-color-teal-100:oklch(95.3% .051 180.801);--bk-color-teal-300:oklch(85.5% .138 181.071);--bk-color-teal-500:oklch(70.4% .14 182.503);--bk-color-teal-900:oklch(38.6% .063 188.416);--bk-color-cyan-100:oklch(95.6% .045 203.388);--bk-color-cyan-300:oklch(86.5% .127 207.078);--bk-color-cyan-500:oklch(71.5% .143 215.221);--bk-color-cyan-900:oklch(39.8% .07 227.392);--bk-color-blue-100:oklch(93.2% .032 255.585);--bk-color-blue-300:oklch(80.9% .105 251.813);--bk-color-blue-400:oklch(70.7% .165 254.624);--bk-color-blue-500:oklch(62.3% .214 259.815);--bk-color-blue-600:oklch(54.6% .245 262.881);--bk-color-blue-700:oklch(48.8% .243 264.376);--bk-color-blue-800:oklch(42.4% .199 265.638);--bk-color-blue-900:oklch(37.9% .146 265.522);--bk-color-violet-100:oklch(94.3% .029 294.588);--bk-color-violet-300:oklch(81.1% .111 293.571);--bk-color-violet-500:oklch(60.6% .25 292.717);--bk-color-violet-900:oklch(38% .189 293.745);--bk-color-fuchsia-100:oklch(95.2% .037 318.852);--bk-color-fuchsia-300:oklch(83.3% .145 321.434);--bk-color-fuchsia-500:oklch(66.7% .295 322.15);--bk-color-fuchsia-900:oklch(40.1% .17 325.612);--bk-color-rose-100:oklch(94.1% .03 12.58);--bk-color-rose-300:oklch(81% .117 11.638);--bk-color-rose-400:oklch(71.2% .194 13.428);--bk-color-rose-500:oklch(64.5% .246 16.439);--bk-color-rose-600:oklch(58.6% .253 17.585);--bk-color-rose-900:oklch(41% .159 10.272);--bk-color-gray-50:oklch(98.5% .002 247.839);--bk-color-gray-100:oklch(96.7% .003 264.542);--bk-color-gray-200:oklch(92.8% .006 264.531);--bk-color-gray-300:oklch(87.2% .01 258.338);--bk-color-gray-400:oklch(70.7% .022 261.325);--bk-color-gray-500:oklch(55.1% .027 264.364);--bk-color-gray-600:oklch(44.6% .03 256.802);--bk-color-gray-700:oklch(37.3% .034 259.733);--bk-color-gray-800:oklch(27.8% .033 256.848);--bk-color-neutral-900:oklch(20.5% 0 0);--bk-color-white:#fff;--bk-spacing:.25rem;--bk-text-xs:.75rem;--bk-text-xs--line-height:calc(1/.75);--bk-text-sm:.875rem;--bk-text-sm--line-height:calc(1.25/.875);--bk-text-base:1rem;--bk-text-base--line-height:calc(1.5/1);--bk-text-lg:1.125rem;--bk-text-lg--line-height:calc(1.75/1.125);--bk-text-xl:1.25rem;--bk-text-xl--line-height:calc(1.75/1.25);--bk-text-2xl:1.5rem;--bk-text-2xl--line-height:calc(2/1.5);--bk-text-3xl:1.875rem;--bk-text-3xl--line-height:calc(2.25/1.875);--bk-text-4xl:2.25rem;--bk-text-4xl--line-height:calc(2.5/2.25);--bk-font-weight-medium:500;--bk-font-weight-semibold:600;--bk-font-weight-bold:700;--bk-tracking-tight:-.025em;--bk-tracking-wide:.025em;--bk-tracking-wider:.05em;--bk-radius-md:.375rem;--bk-radius-lg:.5rem;--bk-radius-xl:.75rem;--bk-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--bk-default-font-family:var(--bk-font-sans);--bk-default-mono-font-family:var(--bk-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--bk-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--bk-default-font-feature-settings,normal);font-variation-settings:var(--bk-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--bk-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--bk-default-mono-font-feature-settings,normal);font-variation-settings:var(--bk-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.bk\:pointer-events-none{pointer-events:none}.bk\:absolute{position:absolute}.bk\:relative{position:relative}.bk\:top-1\/2{top:50%}.bk\:left-3{left:calc(var(--bk-spacing)*3)}.bk\:my-6{margin-block:calc(var(--bk-spacing)*6)}.bk\:my-9{margin-block:calc(var(--bk-spacing)*9)}.bk\:mt-4{margin-top:calc(var(--bk-spacing)*4)}.bk\:mt-5{margin-top:calc(var(--bk-spacing)*5)}.bk\:mt-6{margin-top:calc(var(--bk-spacing)*6)}.bk\:mt-8{margin-top:calc(var(--bk-spacing)*8)}.bk\:mt-10{margin-top:calc(var(--bk-spacing)*10)}.bk\:mt-auto{margin-top:auto}.bk\:mr-2{margin-right:calc(var(--bk-spacing)*2)}.bk\:mb-2{margin-bottom:calc(var(--bk-spacing)*2)}.bk\:mb-3{margin-bottom:calc(var(--bk-spacing)*3)}.bk\:mb-4{margin-bottom:calc(var(--bk-spacing)*4)}.bk\:mb-5{margin-bottom:calc(var(--bk-spacing)*5)}.bk\:mb-6{margin-bottom:calc(var(--bk-spacing)*6)}.bk\:mb-8{margin-bottom:calc(var(--bk-spacing)*8)}.bk\:ml-6{margin-left:calc(var(--bk-spacing)*6)}.bk\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.bk\:flex{display:flex}.bk\:inline-flex{display:inline-flex}.bk\:h-3\.5{height:calc(var(--bk-spacing)*3.5)}.bk\:h-4{height:calc(var(--bk-spacing)*4)}.bk\:h-6{height:calc(var(--bk-spacing)*6)}.bk\:h-auto{height:auto}.bk\:min-h-\[200px\]{min-height:200px}.bk\:w-3\.5{width:calc(var(--bk-spacing)*3.5)}.bk\:w-3\/4{width:75%}.bk\:w-full{width:100%}.bk\:max-w-full{max-width:100%}.bk\:max-w-none{max-width:none}.bk\:flex-1{flex:1}.bk\:shrink-0{flex-shrink:0}.bk\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.bk\:animate-pulse{animation:var(--bk-animate-pulse)}.bk\:cursor-pointer{cursor:pointer}.bk\:list-decimal{list-style-type:decimal}.bk\:list-disc{list-style-type:disc}.bk\:flex-col{flex-direction:column}.bk\:flex-nowrap{flex-wrap:nowrap}.bk\:flex-wrap{flex-wrap:wrap}.bk\:items-center{align-items:center}.bk\:justify-between{justify-content:space-between}.bk\:gap-1\.5{gap:calc(var(--bk-spacing)*1.5)}.bk\:gap-2{gap:calc(var(--bk-spacing)*2)}.bk\:gap-3{gap:calc(var(--bk-spacing)*3)}.bk\:gap-4{gap:calc(var(--bk-spacing)*4)}.bk\:gap-6{gap:calc(var(--bk-spacing)*6)}:where(.bk\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--bk-spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--bk-spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.bk\:overflow-hidden{overflow:hidden}.bk\:overflow-x-auto{overflow-x:auto}.bk\:rounded{border-radius:.25rem}.bk\:rounded-full{border-radius:3.40282e38px}.bk\:rounded-lg{border-radius:var(--bk-radius-lg)}.bk\:rounded-md{border-radius:var(--bk-radius-md)}.bk\:rounded-xl{border-radius:var(--bk-radius-xl)}.bk\:border{border-style:var(--tw-border-style);border-width:1px}.bk\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.bk\:border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.bk\:border-blue-500{border-color:var(--bk-color-blue-500)}.bk\:border-gray-200{border-color:var(--bk-color-gray-200)}.bk\:border-transparent{border-color:#0000}.bk\:bg-amber-100{background-color:var(--bk-color-amber-100)}.bk\:bg-blue-100{background-color:var(--bk-color-blue-100)}.bk\:bg-cyan-100{background-color:var(--bk-color-cyan-100)}.bk\:bg-emerald-100{background-color:var(--bk-color-emerald-100)}.bk\:bg-fuchsia-100{background-color:var(--bk-color-fuchsia-100)}.bk\:bg-gray-50{background-color:var(--bk-color-gray-50)}.bk\:bg-gray-100{background-color:var(--bk-color-gray-100)}.bk\:bg-gray-200{background-color:var(--bk-color-gray-200)}.bk\:bg-gray-700{background-color:var(--bk-color-gray-700)}.bk\:bg-orange-100{background-color:var(--bk-color-orange-100)}.bk\:bg-rose-100{background-color:var(--bk-color-rose-100)}.bk\:bg-teal-100{background-color:var(--bk-color-teal-100)}.bk\:bg-violet-100{background-color:var(--bk-color-violet-100)}.bk\:bg-white{background-color:var(--bk-color-white)}.bk\:p-6{padding:calc(var(--bk-spacing)*6)}.bk\:px-1\.5{padding-inline:calc(var(--bk-spacing)*1.5)}.bk\:px-2\.5{padding-inline:calc(var(--bk-spacing)*2.5)}.bk\:px-4{padding-inline:calc(var(--bk-spacing)*4)}.bk\:py-0\.5{padding-block:calc(var(--bk-spacing)*.5)}.bk\:py-1{padding-block:calc(var(--bk-spacing)*1)}.bk\:py-2{padding-block:calc(var(--bk-spacing)*2)}.bk\:py-3{padding-block:calc(var(--bk-spacing)*3)}.bk\:py-12{padding-block:calc(var(--bk-spacing)*12)}.bk\:pr-4{padding-right:calc(var(--bk-spacing)*4)}.bk\:pl-4{padding-left:calc(var(--bk-spacing)*4)}.bk\:pl-8{padding-left:calc(var(--bk-spacing)*8)}.bk\:text-center{text-align:center}.bk\:text-left{text-align:left}.bk\:font-mono{font-family:var(--bk-font-mono)}.bk\:text-2xl{font-size:var(--bk-text-2xl);line-height:var(--tw-leading,var(--bk-text-2xl--line-height))}.bk\:text-3xl{font-size:var(--bk-text-3xl);line-height:var(--tw-leading,var(--bk-text-3xl--line-height))}.bk\:text-4xl{font-size:var(--bk-text-4xl);line-height:var(--tw-leading,var(--bk-text-4xl--line-height))}.bk\:text-base{font-size:var(--bk-text-base);line-height:var(--tw-leading,var(--bk-text-base--line-height))}.bk\:text-lg{font-size:var(--bk-text-lg);line-height:var(--tw-leading,var(--bk-text-lg--line-height))}.bk\:text-sm{font-size:var(--bk-text-sm);line-height:var(--tw-leading,var(--bk-text-sm--line-height))}.bk\:text-xl{font-size:var(--bk-text-xl);line-height:var(--tw-leading,var(--bk-text-xl--line-height))}.bk\:text-xs{font-size:var(--bk-text-xs);line-height:var(--tw-leading,var(--bk-text-xs--line-height))}.bk\:text-\[10px\]{font-size:10px}.bk\:leading-6{--tw-leading:calc(var(--bk-spacing)*6);line-height:calc(var(--bk-spacing)*6)}.bk\:leading-7{--tw-leading:calc(var(--bk-spacing)*7);line-height:calc(var(--bk-spacing)*7)}.bk\:font-bold{--tw-font-weight:var(--bk-font-weight-bold);font-weight:var(--bk-font-weight-bold)}.bk\:font-medium{--tw-font-weight:var(--bk-font-weight-medium);font-weight:var(--bk-font-weight-medium)}.bk\:font-semibold{--tw-font-weight:var(--bk-font-weight-semibold);font-weight:var(--bk-font-weight-semibold)}.bk\:tracking-tight{--tw-tracking:var(--bk-tracking-tight);letter-spacing:var(--bk-tracking-tight)}.bk\:tracking-wide{--tw-tracking:var(--bk-tracking-wide);letter-spacing:var(--bk-tracking-wide)}.bk\:tracking-wider{--tw-tracking:var(--bk-tracking-wider);letter-spacing:var(--bk-tracking-wider)}.bk\:whitespace-nowrap{white-space:nowrap}.bk\:text-amber-500{color:var(--bk-color-amber-500)}.bk\:text-blue-500{color:var(--bk-color-blue-500)}.bk\:text-blue-600{color:var(--bk-color-blue-600)}.bk\:text-cyan-500{color:var(--bk-color-cyan-500)}.bk\:text-emerald-500{color:var(--bk-color-emerald-500)}.bk\:text-fuchsia-500{color:var(--bk-color-fuchsia-500)}.bk\:text-gray-400{color:var(--bk-color-gray-400)}.bk\:text-gray-500{color:var(--bk-color-gray-500)}.bk\:text-gray-600{color:var(--bk-color-gray-600)}.bk\:text-gray-700{color:var(--bk-color-gray-700)}.bk\:text-gray-800{color:var(--bk-color-gray-800)}.bk\:text-orange-500{color:var(--bk-color-orange-500)}.bk\:text-rose-500{color:var(--bk-color-rose-500)}.bk\:text-rose-600{color:var(--bk-color-rose-600)}.bk\:text-teal-500{color:var(--bk-color-teal-500)}.bk\:text-violet-500{color:var(--bk-color-violet-500)}.bk\:text-white{color:var(--bk-color-white)}.bk\:uppercase{text-transform:uppercase}.bk\:italic{font-style:italic}.bk\:underline{text-decoration-line:underline}.bk\:underline-offset-4{text-underline-offset:4px}.bk\:placeholder-gray-400::placeholder{color:var(--bk-color-gray-400)}.bk\:accent-blue-600{accent-color:var(--bk-color-blue-600)}.bk\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.bk\:first\:mt-0:first-child{margin-top:calc(var(--bk-spacing)*0)}.bk\:last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.bk\:hover\:border-gray-300:hover{border-color:var(--bk-color-gray-300)}.bk\:hover\:bg-gray-200:hover{background-color:var(--bk-color-gray-200)}.bk\:hover\:text-blue-700:hover{color:var(--bk-color-blue-700)}.bk\:hover\:text-blue-800:hover{color:var(--bk-color-blue-800)}.bk\:hover\:underline:hover{text-decoration-line:underline}}.bk\:focus\:border-gray-400:focus{border-color:var(--bk-color-gray-400)}.bk\:focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}@media (min-width:40rem){.bk\:sm\:flex-row{flex-direction:row}}@media (min-width:48rem){.bk\:md\:text-2xl{font-size:var(--bk-text-2xl);line-height:var(--tw-leading,var(--bk-text-2xl--line-height))}.bk\:md\:text-3xl{font-size:var(--bk-text-3xl);line-height:var(--tw-leading,var(--bk-text-3xl--line-height))}.bk\:md\:text-4xl{font-size:var(--bk-text-4xl);line-height:var(--tw-leading,var(--bk-text-4xl--line-height))}}.bk\:dark\:border-gray-700:is(html.dark *){border-color:var(--bk-color-gray-700)}.bk\:dark\:border-neutral-900:is(html.dark *){border-color:var(--bk-color-neutral-900)}.bk\:dark\:bg-amber-900\/30:is(html.dark *){background-color:var(--bk-color-amber-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-amber-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-amber-900)30%,transparent)}}.bk\:dark\:bg-blue-900\/30:is(html.dark *){background-color:var(--bk-color-blue-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-blue-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-blue-900)30%,transparent)}}.bk\:dark\:bg-cyan-900\/30:is(html.dark *){background-color:var(--bk-color-cyan-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-cyan-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-cyan-900)30%,transparent)}}.bk\:dark\:bg-emerald-900\/30:is(html.dark *){background-color:var(--bk-color-emerald-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-emerald-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-emerald-900)30%,transparent)}}.bk\:dark\:bg-fuchsia-900\/30:is(html.dark *){background-color:var(--bk-color-fuchsia-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-fuchsia-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-fuchsia-900)30%,transparent)}}.bk\:dark\:bg-gray-200:is(html.dark *){background-color:var(--bk-color-gray-200)}.bk\:dark\:bg-gray-700:is(html.dark *){background-color:var(--bk-color-gray-700)}.bk\:dark\:bg-gray-800:is(html.dark *){background-color:var(--bk-color-gray-800)}.bk\:dark\:bg-orange-900\/30:is(html.dark *){background-color:var(--bk-color-orange-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-orange-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-orange-900)30%,transparent)}}.bk\:dark\:bg-rose-900\/30:is(html.dark *){background-color:var(--bk-color-rose-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-rose-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-rose-900)30%,transparent)}}.bk\:dark\:bg-teal-900\/30:is(html.dark *){background-color:var(--bk-color-teal-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-teal-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-teal-900)30%,transparent)}}.bk\:dark\:bg-violet-900\/30:is(html.dark *){background-color:var(--bk-color-violet-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-violet-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-violet-900)30%,transparent)}}.bk\:dark\:text-amber-300:is(html.dark *){color:var(--bk-color-amber-300)}.bk\:dark\:text-blue-300:is(html.dark *){color:var(--bk-color-blue-300)}.bk\:dark\:text-blue-400:is(html.dark *){color:var(--bk-color-blue-400)}.bk\:dark\:text-cyan-300:is(html.dark *){color:var(--bk-color-cyan-300)}.bk\:dark\:text-emerald-300:is(html.dark *){color:var(--bk-color-emerald-300)}.bk\:dark\:text-fuchsia-300:is(html.dark *){color:var(--bk-color-fuchsia-300)}.bk\:dark\:text-gray-100:is(html.dark *){color:var(--bk-color-gray-100)}.bk\:dark\:text-gray-200:is(html.dark *){color:var(--bk-color-gray-200)}.bk\:dark\:text-gray-300:is(html.dark *){color:var(--bk-color-gray-300)}.bk\:dark\:text-gray-400:is(html.dark *){color:var(--bk-color-gray-400)}.bk\:dark\:text-gray-500:is(html.dark *){color:var(--bk-color-gray-500)}.bk\:dark\:text-gray-800:is(html.dark *){color:var(--bk-color-gray-800)}.bk\:dark\:text-orange-300:is(html.dark *){color:var(--bk-color-orange-300)}.bk\:dark\:text-rose-300:is(html.dark *){color:var(--bk-color-rose-300)}.bk\:dark\:text-rose-400:is(html.dark *){color:var(--bk-color-rose-400)}.bk\:dark\:text-teal-300:is(html.dark *){color:var(--bk-color-teal-300)}.bk\:dark\:text-violet-300:is(html.dark *){color:var(--bk-color-violet-300)}@media (hover:hover){.bk\:dark\:hover\:border-gray-600:is(html.dark *):hover{border-color:var(--bk-color-gray-600)}.bk\:dark\:hover\:bg-gray-600:is(html.dark *):hover{background-color:var(--bk-color-gray-600)}.bk\:dark\:hover\:text-blue-300:is(html.dark *):hover{color:var(--bk-color-blue-300)}}.bk\:dark\:focus\:border-gray-500:is(html.dark *):focus{border-color:var(--bk-color-gray-500)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haroonwaves/blog-kit-react",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",