@nodeblocks/frontend-breadcrumb-block 0.1.0 → 0.2.0

package/dist/Breadcrumb.d.ts

@@ -1,10 +1,12 @@
-import { ComponentProps, ReactNode } from "react";
-import "./breadcrumb.css";
-import { BlocksOverride } from "./lib";
+import { ComponentProps, ReactNode } from 'react';
+import React from 'react';
+import './breadcrumb.css';
+import { BlocksOverride } from './lib';
+import { BreadcrumbsProps } from '@mui/material';
 declare const Breadcrumb: {
-    <CustomBlocks extends Record<string, ReactNode>>({ className, children, }: Omit<ComponentProps<"nav">, "children"> & {
+    <CustomBlocks extends Record<string, ReactNode>>({ children, maxItems, itemsBeforeCollapse, itemsAfterCollapse, ...breadcrumbsProps }: {
         children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;
-    }): import("react/jsx-runtime").JSX.Element;
+    } & Omit<BreadcrumbsProps, "children">): import("react/jsx-runtime").JSX.Element;
     BreadcrumbChevron: () => import("react/jsx-runtime").JSX.Element;
     BreadcrumbItem: ({ url, children, }: Omit<ComponentProps<"a">, "children"> & {
         url: string;
@@ -12,8 +14,8 @@ declare const Breadcrumb: {
     }) => import("react/jsx-runtime").JSX.Element;
 };
 declare const defaultBlocks: {
-    breadcrumbChevron: import("react").ReactElement<unknown, () => import("react/jsx-runtime").JSX.Element>;
-    breadcrumbItem: import("react").ReactElement<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children"> & {
+    breadcrumbChevron: React.ReactElement<unknown, () => import("react/jsx-runtime").JSX.Element>;
+    breadcrumbItem: React.ReactElement<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children"> & {
         url: string;
         children: ReactNode;
     }, ({ url, children, }: Omit<ComponentProps<"a">, "children"> & {

package/dist/Breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../src/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EACL,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,QAAA,MAAM,UAAU;KAAI,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,4BAG/D,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAC3C,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,EAAE,YAAY,CAAC,CAAC;KAC/D;;;;;;CA+BA,CAAC;AAKF,QAAA,MAAM,aAAa;;;;;;;;;CAGjB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../src/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAgD,MAAM,OAAO,CAAC;AACrF,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,QAAA,MAAM,UAAU;KAAI,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,wFAM/D;QACD,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,EAAE,YAAY,CAAC,CAAC;KAC/D,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;;;;;;CA8BrC,CAAC;AAKF,QAAA,MAAM,aAAa;;;;;;;;;CAGjB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/blocks.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from "react";
+import { ComponentProps, ReactNode } from 'react';
 export declare const BreadcrumbItem: ({ url, children, }: Omit<ComponentProps<"a">, "children"> & {
     url: string;
     children: ReactNode;

package/dist/blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,eAAO,MAAM,cAAc,GAAI,oBAG5B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAIA,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAe7B,CAAC"}
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD,eAAO,MAAM,cAAc,GAAI,oBAG5B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAcA,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAW7B,CAAC"}

package/dist/index.cjs.js

@@ -1,10 +1,27 @@
+
+
+          if (typeof global === 'undefined') {
+            var global = window;
+          }
+        
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
+var material = require('@mui/material');
 
-const BreadcrumbItem = ({ url, children, }) => (jsxRuntime.jsx("a", { href: url, className: "nbb-breadcrumb-item", children: children }));
-const BreadcrumbChevron = () => (jsxRuntime.jsx("span", { className: "nbb-breadcrumb-chevron", children: jsxRuntime.jsx("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z", fill: "white" }) }) }));
+const BreadcrumbItem = ({ url, children, }) => {
+    const theme = material.useTheme();
+    return (
+    // TODO: this is hardcoded for now until we setup the theme - then go back and use variables from the theme
+    jsxRuntime.jsx(material.Link, { underline: "hover", color: "inherit", href: url, fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.caption.fontWeight, children: children }));
+};
+const BreadcrumbChevron = () => {
+    const theme = material.useTheme();
+    return (
+    // TODO: this is hardcoded for now until we setup the theme - then go back and use variables from the theme
+    jsxRuntime.jsx(material.SvgIcon, { sx: { fontSize: theme.typography.caption.fontSize, color: theme.palette.primary.contrastText }, viewBox: "0 0 8 12", children: jsxRuntime.jsx("path", { d: "M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z" }) }));
+};
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -33,7 +50,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".nbb-breadcrumb {\n  --color-object-accent-primary: #006EAD;\n  --color-text-on-primary: #fff;\n\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  background-color: var(--color-object-accent-primary);\n  color: var(--color-text-on-primary);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-segment {\n  display: flex;\n  align-items: center;\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-item {\n  color: var(--color-text-on-primary);\n  text-decoration: none;\n  padding: 0 4px;\n  font-size: 12px;\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-item:hover {\n  text-decoration: underline;\n  color: var(--color-text-on-primary);\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-chevron {\n  margin: 0 4px;\n  min-width: 24px;\n  color: var(--color-text-on-primary);\n}\n";
+var css_248z = ".nbb-breadcrumb.MuiBreadcrumbs-root {\n  padding: calc(var(--mui-spacing) * 1.5) calc(var(--mui-spacing) * 2);\n  background-color: var(--mui-palette-primary-main);\n  color: var(--mui-palette-primary-contrastText);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.nbb-breadcrumb .MuiBreadcrumbs-ol {\n  gap: var(--mui-spacing);\n}\n\n.nbb-breadcrumb .MuiBreadcrumbs-li {\n  display: flex;\n  align-items: center;\n  gap: var(--mui-spacing);\n}\n\n.nbb-breadcrumb .MuiBreadcrumbs-separator {\n  display: none;\n}\n";
 styleInject(css_248z);
 
 /**
@@ -49,10 +66,7 @@ styleInject(css_248z);
  * });
  */
 function createDefaultBlocks(components) {
-    return Object.fromEntries(Object.entries(components).map(([key, Component]) => [
-        key,
-        react.createElement(Component, { key }),
-    ]));
+    return Object.fromEntries(Object.entries(components).map(([key, Component]) => [key, React.createElement(Component, { key })]));
 }
 /**
  * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
@@ -76,6 +90,7 @@ function createDefaultBlocks(components) {
  * </BlocksOverrideComponent>
  */
 function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }) {
+    // 1. standard "default" block use with no customization
     if (blocksOverride === undefined) {
         return children({
             // TODO: Remove this assertion
@@ -83,30 +98,32 @@ function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOr
             blockOrder: defaultBlockOrder,
         });
     }
-    if (typeof blocksOverride === "function") {
+    // 2.when user uses "child function" customization pattern, that returns the "override" object of blocks/blockOrder
+    if (typeof blocksOverride === 'function') {
         const { blocks, blockOrder } = blocksOverride({
             defaultBlocks,
             defaultBlockOrder,
         });
         return children({ blocks, blockOrder });
     }
+    // 3. when user uses "compound components" customization pattern, passing in their own chosen elements
     return blocksOverride;
 }
-/**
- * Utility function to join class names together, ignoring undefined or nil values.
- * @param classes - The class names to join.
- * @returns The joined class names.
- */
-function classNames(...classes) {
-    return classes.flat().filter(Boolean).join(" ");
-}
 
-const Breadcrumb = ({ className, children, }) => {
-    return (jsxRuntime.jsx("nav", { className: classNames("nbb-breadcrumb", className), children: jsxRuntime.jsx(BlocksOverrideComponent, { defaultBlocks: defaultBlocks, defaultBlockOrder: Object.keys(defaultBlocks), blocksOverride: children, children: ({ blocks: { breadcrumbChevron, breadcrumbItem, ...blocks }, blockOrder, }) => blockOrder
+const Breadcrumb = ({ children, maxItems = 8, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...breadcrumbsProps }) => {
+    return (jsxRuntime.jsx(material.Breadcrumbs, { ...breadcrumbsProps, className: "nbb-breadcrumb", "aria-label": "breadcrumb", maxItems: maxItems, itemsBeforeCollapse: itemsBeforeCollapse, itemsAfterCollapse: itemsAfterCollapse, children: BlocksOverrideComponent({
+            defaultBlocks: defaultBlocks,
+            defaultBlockOrder: Object.keys(defaultBlocks),
+            blocksOverride: children,
+            children: ({ blocks: { breadcrumbChevron, breadcrumbItem, ...blocks }, blockOrder }) => blockOrder
                 .filter((key) => key in blocks)
                 .map((key, index) => {
-                return (jsxRuntime.jsxs("span", { className: "nbb-breadcrumb-segment", children: [index > 0 && breadcrumbChevron, blocks[key]] }, `${index}-breadcrumb`));
-            }) }) }));
+                return (
+                // NOTE: the contents of this "children" property is only used for/rendered in the override child function "override" pattern
+                // for this to work, the user should pass in breadcrumbItem (or equivalent), and shouldn't pass in the breadcrumbChevron element to the blocks override object (since we append it here)
+                jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && breadcrumbChevron, blocks[key]] }, `${index}-breadcrumb`));
+            }),
+        }) }));
 };
 Breadcrumb.BreadcrumbChevron = BreadcrumbChevron;
 Breadcrumb.BreadcrumbItem = BreadcrumbItem;

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/blocks.tsx","../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/Breadcrumb.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from \"react\";\n\nexport const BreadcrumbItem = ({\n  url,\n  children,\n}: Omit<ComponentProps<\"a\">, \"children\"> & {\n  url: string;\n  children: ReactNode;\n}) => (\n  <a href={url} className=\"nbb-breadcrumb-item\">\n    {children}\n  </a>\n);\n\nexport const BreadcrumbChevron = () => (\n  <span className=\"nbb-breadcrumb-chevron\">\n    <svg\n      width=\"8\"\n      height=\"12\"\n      viewBox=\"0 0 8 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </span>\n);\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import {\n  ComponentProps,\n  createElement,\n  FunctionComponent,\n  ReactElement,\n  ReactNode,\n} from \"react\";\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n *   {({header, ...defaultBlocks}) => ({\n *     blocks: {\n *       ...defaultBlocks,\n *       header: {\n *         ...header,\n *         props: {\n *           ...header.props,\n *           label: \"Custom Label\"\n *         }\n *       },\n *       subheader: <CustomComponent />\n *     },\n *     blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n *   })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n  | (({\n      defaultBlocks,\n      defaultBlockOrder,\n    }: {\n      defaultBlocks: DefaultBlocks;\n      defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n    }) => {\n      blocks: Partial<DefaultBlocks> & CustomBlocks;\n      // NOTE: This specific combination allows proper autocomplete.\n      blockOrder:\n        | readonly (keyof DefaultBlocks)[]\n        | readonly (keyof CustomBlocks)[];\n    })\n  | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n *   title: Title,\n *   description: Description,\n *   form: Form,\n * });\n */\nexport function createDefaultBlocks<\n  T extends Record<string, FunctionComponent<any>>,\n>(\n  components: T\n): {\n  [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n  return Object.fromEntries(\n    Object.entries(components).map(([key, Component]) => [\n      key,\n      createElement(Component, { key }),\n    ])\n  ) as {\n    [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n  };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n *   defaultBlocks={defaultFormBlocks}\n *   blocksOverride={children}\n * >\n *   {({ blocks, blockOrder }) =>\n *     blockOrder.map((key) => (\n *       <Fragment key={String(key)}>{blocks[key]}</Fragment>\n *     ))\n *   }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n  DefaultBlocks extends Record<string, ReactNode>,\n  CustomBlocks extends Record<string, ReactNode>,\n>({\n  blocksOverride,\n  defaultBlocks,\n  defaultBlockOrder,\n  children,\n}: {\n  blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n  defaultBlocks: DefaultBlocks;\n  defaultBlockOrder: (keyof DefaultBlocks)[];\n  children: ({\n    blocks,\n    blockOrder,\n  }: {\n    // TODO: Possibly find an alternative to Partial<CustomBlocks>\n    blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n    blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n  }) => ReactNode;\n}) {\n  if (blocksOverride === undefined) {\n    return children({\n      // TODO: Remove this assertion\n      blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n      blockOrder: defaultBlockOrder,\n    });\n  }\n\n  if (typeof blocksOverride === \"function\") {\n    const { blocks, blockOrder } = blocksOverride({\n      defaultBlocks,\n      defaultBlockOrder,\n    });\n\n    return children({ blocks, blockOrder });\n  }\n\n  return blocksOverride;\n}\n\nexport function deepMerge<\n  A extends Record<string, any>,\n  B extends Record<string, any>,\n>(obj1: A, obj2: B) {\n  const result: Record<string, any> = { ...obj1 };\n\n  for (const key in obj2) {\n    if (obj2.hasOwnProperty(key)) {\n      const val1 = result[key];\n      const val2 = obj2[key];\n\n      if (Array.isArray(val1) || Array.isArray(val2)) {\n        // If either is an array, replace entirely with obj2's value\n        result[key] = val2;\n      } else if (\n        typeof val1 === \"object\" &&\n        val1 !== null &&\n        typeof val2 === \"object\" &&\n        val2 !== null\n      ) {\n        result[key] = deepMerge(val1, val2);\n      } else {\n        result[key] = val2;\n      }\n    }\n  }\n\n  return result as A & B;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(\" \");\n}\n","import { ComponentProps, ReactNode } from \"react\";\nimport { BreadcrumbChevron, BreadcrumbItem } from \"./blocks\";\nimport \"./breadcrumb.css\";\nimport {\n  BlocksOverride,\n  BlocksOverrideComponent,\n  classNames,\n  createDefaultBlocks,\n} from \"./lib\";\n\nconst Breadcrumb = <CustomBlocks extends Record<string, ReactNode>>({\n  className,\n  children,\n}: Omit<ComponentProps<\"nav\">, \"children\"> & {\n  children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n}) => {\n  return (\n    <nav className={classNames(\"nbb-breadcrumb\", className)}>\n      <BlocksOverrideComponent\n        defaultBlocks={defaultBlocks}\n        defaultBlockOrder={\n          Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[]\n        }\n        blocksOverride={children}\n      >\n        {({\n          blocks: { breadcrumbChevron, breadcrumbItem, ...blocks },\n          blockOrder,\n        }) =>\n          blockOrder\n            .filter((key) => key in blocks)\n            .map<ReactNode>((key, index) => {\n              return (\n                <span\n                  key={`${index}-breadcrumb`}\n                  className=\"nbb-breadcrumb-segment\"\n                >\n                  {index > 0 && breadcrumbChevron}\n                  {blocks[key]}\n                </span>\n              );\n            })\n        }\n      </BlocksOverrideComponent>\n    </nav>\n  );\n};\n\nBreadcrumb.BreadcrumbChevron = BreadcrumbChevron;\nBreadcrumb.BreadcrumbItem = BreadcrumbItem;\n\nconst defaultBlocks = createDefaultBlocks({\n  breadcrumbChevron: BreadcrumbChevron,\n  breadcrumbItem: BreadcrumbItem,\n});\n\nexport default Breadcrumb;\n"],"names":["_jsx","createElement","_jsxs"],"mappings":"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","x_google_ignoreList":[1]}
+{"version":3,"file":"index.cjs.js","sources":["../src/blocks.tsx","../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/Breadcrumb.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from 'react';\nimport { Link, SvgIcon, useTheme } from '@mui/material';\n\nexport const BreadcrumbItem = ({\n  url,\n  children,\n}: Omit<ComponentProps<'a'>, 'children'> & {\n  url: string;\n  children: ReactNode;\n}) => {\n  const theme = useTheme();\n  return (\n    // TODO: this is hardcoded for now until we setup the theme - then go back and use variables from the theme\n    <Link\n      underline=\"hover\"\n      color=\"inherit\"\n      href={url}\n      fontSize={theme.typography.caption.fontSize}\n      fontWeight={theme.typography.caption.fontWeight}\n    >\n      {children}\n    </Link>\n  );\n};\n\nexport const BreadcrumbChevron = () => {\n  const theme = useTheme();\n  return (\n    // TODO: this is hardcoded for now until we setup the theme - then go back and use variables from the theme\n    <SvgIcon\n      sx={{ fontSize: theme.typography.caption.fontSize, color: theme.palette.primary.contrastText }}\n      viewBox=\"0 0 8 12\"\n    >\n      <path d=\"M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z\" />\n    </SvgIcon>\n  );\n};\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { ComponentProps, createElement, FunctionComponent, ReactElement, ReactNode } from 'react';\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n *   {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({\n *     blocks: {\n *       ...defaultBlocks,\n *       header: {\n *         ...header,\n *         props: {\n *           ...header.props,\n *           label: \"Custom Label\"\n *         }\n *       },\n *       subheader: <CustomComponent />\n *     },\n *     blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n *   })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n  | (({\n      defaultBlocks,\n      defaultBlockOrder,\n    }: {\n      defaultBlocks: DefaultBlocks;\n      defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n    }) => {\n      blocks: Partial<DefaultBlocks> & CustomBlocks;\n      // NOTE: This specific combination allows proper autocomplete.\n      blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];\n    })\n  | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n *   title: Title,\n *   description: Description,\n *   form: Form,\n * });\n */\nexport function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(\n  components: T\n): {\n  [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n  return Object.fromEntries(\n    Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })])\n  ) as {\n    [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n  };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n *   defaultBlocks={defaultFormBlocks}\n *   blocksOverride={children}\n * >\n *   {({ blocks, blockOrder }) =>\n *     blockOrder.map((key) => (\n *       <Fragment key={String(key)}>{blocks[key]}</Fragment>\n *     ))\n *   }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n  DefaultBlocks extends Record<string, ReactNode>,\n  CustomBlocks extends Record<string, ReactNode>,\n>({\n  blocksOverride,\n  defaultBlocks,\n  defaultBlockOrder,\n  children,\n}: {\n  blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n  defaultBlocks: DefaultBlocks;\n  defaultBlockOrder: (keyof DefaultBlocks)[];\n  children: ({\n    blocks,\n    blockOrder,\n  }: {\n    // TODO: Possibly find an alternative to Partial<CustomBlocks>\n    blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n    blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n  }) => ReactNode;\n}) {\n  // 1. standard \"default\" block use with no customization\n  if (blocksOverride === undefined) {\n    return children({\n      // TODO: Remove this assertion\n      blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n      blockOrder: defaultBlockOrder,\n    });\n  }\n\n  // 2.when user uses \"child function\" customization pattern, that returns the \"override\" object of blocks/blockOrder\n  if (typeof blocksOverride === 'function') {\n    const { blocks, blockOrder } = blocksOverride({\n      defaultBlocks,\n      defaultBlockOrder,\n    });\n\n    return children({ blocks, blockOrder });\n  }\n\n  // 3. when user uses \"compound components\" customization pattern, passing in their own chosen elements\n  return blocksOverride;\n}\n\ntype MergeTypes<Object1, Object2> = {\n  [K in keyof Object1 | keyof Object2]: K extends keyof Object1\n    ? Object1[K]\n    : K extends keyof Object2\n      ? Object2[K]\n      : never;\n};\n\nexport function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B) {\n  const result: Record<string, any> = { ...obj1 };\n\n  for (const key in obj2) {\n    if (obj2.hasOwnProperty(key)) {\n      const val1 = result[key];\n      const val2 = obj2[key];\n\n      if (Array.isArray(val1) || Array.isArray(val2)) {\n        // If either is an array, replace entirely with obj2's value\n        result[key] = val2;\n      } else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {\n        result[key] = deepMerge(val1, val2);\n      } else {\n        result[key] = val2;\n      }\n    }\n  }\n\n  return result as MergeTypes<B, A>;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(' ');\n}\n","import { ComponentProps, ReactNode } from 'react';\nimport React from 'react';\nimport { BreadcrumbChevron, BreadcrumbItem } from './blocks';\nimport './breadcrumb.css';\nimport { BlocksOverride, BlocksOverrideComponent, createDefaultBlocks } from './lib';\nimport { Breadcrumbs, BreadcrumbsProps } from '@mui/material';\n\nconst Breadcrumb = <CustomBlocks extends Record<string, ReactNode>>({\n  children,\n  maxItems = 8,\n  itemsBeforeCollapse = 1,\n  itemsAfterCollapse = 1,\n  ...breadcrumbsProps\n}: {\n  children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n} & Omit<BreadcrumbsProps, 'children'>) => {\n  return (\n    <Breadcrumbs\n      {...breadcrumbsProps}\n      className=\"nbb-breadcrumb\"\n      aria-label=\"breadcrumb\"\n      maxItems={maxItems}\n      itemsBeforeCollapse={itemsBeforeCollapse}\n      itemsAfterCollapse={itemsAfterCollapse}\n    >\n      {BlocksOverrideComponent({\n        defaultBlocks: defaultBlocks,\n        defaultBlockOrder: Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[],\n        blocksOverride: children,\n        children: ({ blocks: { breadcrumbChevron, breadcrumbItem, ...blocks }, blockOrder }) =>\n          blockOrder\n            .filter((key) => key in blocks)\n            .map<ReactNode>((key, index) => {\n              return (\n                // NOTE: the contents of this \"children\" property is only used for/rendered in the override child function \"override\" pattern\n                // for this to work, the user should pass in breadcrumbItem (or equivalent), and shouldn't pass in the breadcrumbChevron element to the blocks override object (since we append it here)\n                <React.Fragment key={`${index}-breadcrumb`}>\n                  {index > 0 && breadcrumbChevron}\n                  {blocks[key]}\n                </React.Fragment>\n              );\n            }),\n      })}\n    </Breadcrumbs>\n  );\n};\n\nBreadcrumb.BreadcrumbChevron = BreadcrumbChevron;\nBreadcrumb.BreadcrumbItem = BreadcrumbItem;\n\nconst defaultBlocks = createDefaultBlocks({\n  breadcrumbChevron: BreadcrumbChevron,\n  breadcrumbItem: BreadcrumbItem,\n});\n\nexport default Breadcrumb;\n"],"names":["useTheme","_jsx","Link","SvgIcon","createElement","Breadcrumbs","_jsxs"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/index.esm.js

@@ -1,8 +1,25 @@
+
+
+          if (typeof global === 'undefined') {
+            var global = window;
+          }
+        
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createElement } from 'react';
+import React, { createElement } from 'react';
+import { useTheme, SvgIcon, Link, Breadcrumbs } from '@mui/material';
 
-const BreadcrumbItem = ({ url, children, }) => (jsx("a", { href: url, className: "nbb-breadcrumb-item", children: children }));
-const BreadcrumbChevron = () => (jsx("span", { className: "nbb-breadcrumb-chevron", children: jsx("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z", fill: "white" }) }) }));
+const BreadcrumbItem = ({ url, children, }) => {
+    const theme = useTheme();
+    return (
+    // TODO: this is hardcoded for now until we setup the theme - then go back and use variables from the theme
+    jsx(Link, { underline: "hover", color: "inherit", href: url, fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.caption.fontWeight, children: children }));
+};
+const BreadcrumbChevron = () => {
+    const theme = useTheme();
+    return (
+    // TODO: this is hardcoded for now until we setup the theme - then go back and use variables from the theme
+    jsx(SvgIcon, { sx: { fontSize: theme.typography.caption.fontSize, color: theme.palette.primary.contrastText }, viewBox: "0 0 8 12", children: jsx("path", { d: "M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z" }) }));
+};
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -31,7 +48,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".nbb-breadcrumb {\n  --color-object-accent-primary: #006EAD;\n  --color-text-on-primary: #fff;\n\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  background-color: var(--color-object-accent-primary);\n  color: var(--color-text-on-primary);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-segment {\n  display: flex;\n  align-items: center;\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-item {\n  color: var(--color-text-on-primary);\n  text-decoration: none;\n  padding: 0 4px;\n  font-size: 12px;\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-item:hover {\n  text-decoration: underline;\n  color: var(--color-text-on-primary);\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-chevron {\n  margin: 0 4px;\n  min-width: 24px;\n  color: var(--color-text-on-primary);\n}\n";
+var css_248z = ".nbb-breadcrumb.MuiBreadcrumbs-root {\n  padding: calc(var(--mui-spacing) * 1.5) calc(var(--mui-spacing) * 2);\n  background-color: var(--mui-palette-primary-main);\n  color: var(--mui-palette-primary-contrastText);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.nbb-breadcrumb .MuiBreadcrumbs-ol {\n  gap: var(--mui-spacing);\n}\n\n.nbb-breadcrumb .MuiBreadcrumbs-li {\n  display: flex;\n  align-items: center;\n  gap: var(--mui-spacing);\n}\n\n.nbb-breadcrumb .MuiBreadcrumbs-separator {\n  display: none;\n}\n";
 styleInject(css_248z);
 
 /**
@@ -47,10 +64,7 @@ styleInject(css_248z);
  * });
  */
 function createDefaultBlocks(components) {
-    return Object.fromEntries(Object.entries(components).map(([key, Component]) => [
-        key,
-        createElement(Component, { key }),
-    ]));
+    return Object.fromEntries(Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })]));
 }
 /**
  * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
@@ -74,6 +88,7 @@ function createDefaultBlocks(components) {
  * </BlocksOverrideComponent>
  */
 function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }) {
+    // 1. standard "default" block use with no customization
     if (blocksOverride === undefined) {
         return children({
             // TODO: Remove this assertion
@@ -81,30 +96,32 @@ function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOr
             blockOrder: defaultBlockOrder,
         });
     }
-    if (typeof blocksOverride === "function") {
+    // 2.when user uses "child function" customization pattern, that returns the "override" object of blocks/blockOrder
+    if (typeof blocksOverride === 'function') {
         const { blocks, blockOrder } = blocksOverride({
             defaultBlocks,
             defaultBlockOrder,
         });
         return children({ blocks, blockOrder });
     }
+    // 3. when user uses "compound components" customization pattern, passing in their own chosen elements
     return blocksOverride;
 }
-/**
- * Utility function to join class names together, ignoring undefined or nil values.
- * @param classes - The class names to join.
- * @returns The joined class names.
- */
-function classNames(...classes) {
-    return classes.flat().filter(Boolean).join(" ");
-}
 
-const Breadcrumb = ({ className, children, }) => {
-    return (jsx("nav", { className: classNames("nbb-breadcrumb", className), children: jsx(BlocksOverrideComponent, { defaultBlocks: defaultBlocks, defaultBlockOrder: Object.keys(defaultBlocks), blocksOverride: children, children: ({ blocks: { breadcrumbChevron, breadcrumbItem, ...blocks }, blockOrder, }) => blockOrder
+const Breadcrumb = ({ children, maxItems = 8, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...breadcrumbsProps }) => {
+    return (jsx(Breadcrumbs, { ...breadcrumbsProps, className: "nbb-breadcrumb", "aria-label": "breadcrumb", maxItems: maxItems, itemsBeforeCollapse: itemsBeforeCollapse, itemsAfterCollapse: itemsAfterCollapse, children: BlocksOverrideComponent({
+            defaultBlocks: defaultBlocks,
+            defaultBlockOrder: Object.keys(defaultBlocks),
+            blocksOverride: children,
+            children: ({ blocks: { breadcrumbChevron, breadcrumbItem, ...blocks }, blockOrder }) => blockOrder
                 .filter((key) => key in blocks)
                 .map((key, index) => {
-                return (jsxs("span", { className: "nbb-breadcrumb-segment", children: [index > 0 && breadcrumbChevron, blocks[key]] }, `${index}-breadcrumb`));
-            }) }) }));
+                return (
+                // NOTE: the contents of this "children" property is only used for/rendered in the override child function "override" pattern
+                // for this to work, the user should pass in breadcrumbItem (or equivalent), and shouldn't pass in the breadcrumbChevron element to the blocks override object (since we append it here)
+                jsxs(React.Fragment, { children: [index > 0 && breadcrumbChevron, blocks[key]] }, `${index}-breadcrumb`));
+            }),
+        }) }));
 };
 Breadcrumb.BreadcrumbChevron = BreadcrumbChevron;
 Breadcrumb.BreadcrumbItem = BreadcrumbItem;

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/blocks.tsx","../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/Breadcrumb.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from \"react\";\n\nexport const BreadcrumbItem = ({\n  url,\n  children,\n}: Omit<ComponentProps<\"a\">, \"children\"> & {\n  url: string;\n  children: ReactNode;\n}) => (\n  <a href={url} className=\"nbb-breadcrumb-item\">\n    {children}\n  </a>\n);\n\nexport const BreadcrumbChevron = () => (\n  <span className=\"nbb-breadcrumb-chevron\">\n    <svg\n      width=\"8\"\n      height=\"12\"\n      viewBox=\"0 0 8 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </span>\n);\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import {\n  ComponentProps,\n  createElement,\n  FunctionComponent,\n  ReactElement,\n  ReactNode,\n} from \"react\";\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n *   {({header, ...defaultBlocks}) => ({\n *     blocks: {\n *       ...defaultBlocks,\n *       header: {\n *         ...header,\n *         props: {\n *           ...header.props,\n *           label: \"Custom Label\"\n *         }\n *       },\n *       subheader: <CustomComponent />\n *     },\n *     blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n *   })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n  | (({\n      defaultBlocks,\n      defaultBlockOrder,\n    }: {\n      defaultBlocks: DefaultBlocks;\n      defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n    }) => {\n      blocks: Partial<DefaultBlocks> & CustomBlocks;\n      // NOTE: This specific combination allows proper autocomplete.\n      blockOrder:\n        | readonly (keyof DefaultBlocks)[]\n        | readonly (keyof CustomBlocks)[];\n    })\n  | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n *   title: Title,\n *   description: Description,\n *   form: Form,\n * });\n */\nexport function createDefaultBlocks<\n  T extends Record<string, FunctionComponent<any>>,\n>(\n  components: T\n): {\n  [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n  return Object.fromEntries(\n    Object.entries(components).map(([key, Component]) => [\n      key,\n      createElement(Component, { key }),\n    ])\n  ) as {\n    [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n  };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n *   defaultBlocks={defaultFormBlocks}\n *   blocksOverride={children}\n * >\n *   {({ blocks, blockOrder }) =>\n *     blockOrder.map((key) => (\n *       <Fragment key={String(key)}>{blocks[key]}</Fragment>\n *     ))\n *   }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n  DefaultBlocks extends Record<string, ReactNode>,\n  CustomBlocks extends Record<string, ReactNode>,\n>({\n  blocksOverride,\n  defaultBlocks,\n  defaultBlockOrder,\n  children,\n}: {\n  blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n  defaultBlocks: DefaultBlocks;\n  defaultBlockOrder: (keyof DefaultBlocks)[];\n  children: ({\n    blocks,\n    blockOrder,\n  }: {\n    // TODO: Possibly find an alternative to Partial<CustomBlocks>\n    blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n    blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n  }) => ReactNode;\n}) {\n  if (blocksOverride === undefined) {\n    return children({\n      // TODO: Remove this assertion\n      blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n      blockOrder: defaultBlockOrder,\n    });\n  }\n\n  if (typeof blocksOverride === \"function\") {\n    const { blocks, blockOrder } = blocksOverride({\n      defaultBlocks,\n      defaultBlockOrder,\n    });\n\n    return children({ blocks, blockOrder });\n  }\n\n  return blocksOverride;\n}\n\nexport function deepMerge<\n  A extends Record<string, any>,\n  B extends Record<string, any>,\n>(obj1: A, obj2: B) {\n  const result: Record<string, any> = { ...obj1 };\n\n  for (const key in obj2) {\n    if (obj2.hasOwnProperty(key)) {\n      const val1 = result[key];\n      const val2 = obj2[key];\n\n      if (Array.isArray(val1) || Array.isArray(val2)) {\n        // If either is an array, replace entirely with obj2's value\n        result[key] = val2;\n      } else if (\n        typeof val1 === \"object\" &&\n        val1 !== null &&\n        typeof val2 === \"object\" &&\n        val2 !== null\n      ) {\n        result[key] = deepMerge(val1, val2);\n      } else {\n        result[key] = val2;\n      }\n    }\n  }\n\n  return result as A & B;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(\" \");\n}\n","import { ComponentProps, ReactNode } from \"react\";\nimport { BreadcrumbChevron, BreadcrumbItem } from \"./blocks\";\nimport \"./breadcrumb.css\";\nimport {\n  BlocksOverride,\n  BlocksOverrideComponent,\n  classNames,\n  createDefaultBlocks,\n} from \"./lib\";\n\nconst Breadcrumb = <CustomBlocks extends Record<string, ReactNode>>({\n  className,\n  children,\n}: Omit<ComponentProps<\"nav\">, \"children\"> & {\n  children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n}) => {\n  return (\n    <nav className={classNames(\"nbb-breadcrumb\", className)}>\n      <BlocksOverrideComponent\n        defaultBlocks={defaultBlocks}\n        defaultBlockOrder={\n          Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[]\n        }\n        blocksOverride={children}\n      >\n        {({\n          blocks: { breadcrumbChevron, breadcrumbItem, ...blocks },\n          blockOrder,\n        }) =>\n          blockOrder\n            .filter((key) => key in blocks)\n            .map<ReactNode>((key, index) => {\n              return (\n                <span\n                  key={`${index}-breadcrumb`}\n                  className=\"nbb-breadcrumb-segment\"\n                >\n                  {index > 0 && breadcrumbChevron}\n                  {blocks[key]}\n                </span>\n              );\n            })\n        }\n      </BlocksOverrideComponent>\n    </nav>\n  );\n};\n\nBreadcrumb.BreadcrumbChevron = BreadcrumbChevron;\nBreadcrumb.BreadcrumbItem = BreadcrumbItem;\n\nconst defaultBlocks = createDefaultBlocks({\n  breadcrumbChevron: BreadcrumbChevron,\n  breadcrumbItem: BreadcrumbItem,\n});\n\nexport default Breadcrumb;\n"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[1]}
+{"version":3,"file":"index.esm.js","sources":["../src/blocks.tsx","../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/Breadcrumb.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from 'react';\nimport { Link, SvgIcon, useTheme } from '@mui/material';\n\nexport const BreadcrumbItem = ({\n  url,\n  children,\n}: Omit<ComponentProps<'a'>, 'children'> & {\n  url: string;\n  children: ReactNode;\n}) => {\n  const theme = useTheme();\n  return (\n    // TODO: this is hardcoded for now until we setup the theme - then go back and use variables from the theme\n    <Link\n      underline=\"hover\"\n      color=\"inherit\"\n      href={url}\n      fontSize={theme.typography.caption.fontSize}\n      fontWeight={theme.typography.caption.fontWeight}\n    >\n      {children}\n    </Link>\n  );\n};\n\nexport const BreadcrumbChevron = () => {\n  const theme = useTheme();\n  return (\n    // TODO: this is hardcoded for now until we setup the theme - then go back and use variables from the theme\n    <SvgIcon\n      sx={{ fontSize: theme.typography.caption.fontSize, color: theme.palette.primary.contrastText }}\n      viewBox=\"0 0 8 12\"\n    >\n      <path d=\"M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z\" />\n    </SvgIcon>\n  );\n};\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { ComponentProps, createElement, FunctionComponent, ReactElement, ReactNode } from 'react';\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n *   {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({\n *     blocks: {\n *       ...defaultBlocks,\n *       header: {\n *         ...header,\n *         props: {\n *           ...header.props,\n *           label: \"Custom Label\"\n *         }\n *       },\n *       subheader: <CustomComponent />\n *     },\n *     blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n *   })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n  | (({\n      defaultBlocks,\n      defaultBlockOrder,\n    }: {\n      defaultBlocks: DefaultBlocks;\n      defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n    }) => {\n      blocks: Partial<DefaultBlocks> & CustomBlocks;\n      // NOTE: This specific combination allows proper autocomplete.\n      blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];\n    })\n  | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n *   title: Title,\n *   description: Description,\n *   form: Form,\n * });\n */\nexport function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(\n  components: T\n): {\n  [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n  return Object.fromEntries(\n    Object.entries(components).map(([key, Component]) => [key, createElement(Component, { key })])\n  ) as {\n    [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n  };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n *   defaultBlocks={defaultFormBlocks}\n *   blocksOverride={children}\n * >\n *   {({ blocks, blockOrder }) =>\n *     blockOrder.map((key) => (\n *       <Fragment key={String(key)}>{blocks[key]}</Fragment>\n *     ))\n *   }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n  DefaultBlocks extends Record<string, ReactNode>,\n  CustomBlocks extends Record<string, ReactNode>,\n>({\n  blocksOverride,\n  defaultBlocks,\n  defaultBlockOrder,\n  children,\n}: {\n  blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n  defaultBlocks: DefaultBlocks;\n  defaultBlockOrder: (keyof DefaultBlocks)[];\n  children: ({\n    blocks,\n    blockOrder,\n  }: {\n    // TODO: Possibly find an alternative to Partial<CustomBlocks>\n    blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n    blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n  }) => ReactNode;\n}) {\n  // 1. standard \"default\" block use with no customization\n  if (blocksOverride === undefined) {\n    return children({\n      // TODO: Remove this assertion\n      blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n      blockOrder: defaultBlockOrder,\n    });\n  }\n\n  // 2.when user uses \"child function\" customization pattern, that returns the \"override\" object of blocks/blockOrder\n  if (typeof blocksOverride === 'function') {\n    const { blocks, blockOrder } = blocksOverride({\n      defaultBlocks,\n      defaultBlockOrder,\n    });\n\n    return children({ blocks, blockOrder });\n  }\n\n  // 3. when user uses \"compound components\" customization pattern, passing in their own chosen elements\n  return blocksOverride;\n}\n\ntype MergeTypes<Object1, Object2> = {\n  [K in keyof Object1 | keyof Object2]: K extends keyof Object1\n    ? Object1[K]\n    : K extends keyof Object2\n      ? Object2[K]\n      : never;\n};\n\nexport function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B) {\n  const result: Record<string, any> = { ...obj1 };\n\n  for (const key in obj2) {\n    if (obj2.hasOwnProperty(key)) {\n      const val1 = result[key];\n      const val2 = obj2[key];\n\n      if (Array.isArray(val1) || Array.isArray(val2)) {\n        // If either is an array, replace entirely with obj2's value\n        result[key] = val2;\n      } else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {\n        result[key] = deepMerge(val1, val2);\n      } else {\n        result[key] = val2;\n      }\n    }\n  }\n\n  return result as MergeTypes<B, A>;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(' ');\n}\n","import { ComponentProps, ReactNode } from 'react';\nimport React from 'react';\nimport { BreadcrumbChevron, BreadcrumbItem } from './blocks';\nimport './breadcrumb.css';\nimport { BlocksOverride, BlocksOverrideComponent, createDefaultBlocks } from './lib';\nimport { Breadcrumbs, BreadcrumbsProps } from '@mui/material';\n\nconst Breadcrumb = <CustomBlocks extends Record<string, ReactNode>>({\n  children,\n  maxItems = 8,\n  itemsBeforeCollapse = 1,\n  itemsAfterCollapse = 1,\n  ...breadcrumbsProps\n}: {\n  children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n} & Omit<BreadcrumbsProps, 'children'>) => {\n  return (\n    <Breadcrumbs\n      {...breadcrumbsProps}\n      className=\"nbb-breadcrumb\"\n      aria-label=\"breadcrumb\"\n      maxItems={maxItems}\n      itemsBeforeCollapse={itemsBeforeCollapse}\n      itemsAfterCollapse={itemsAfterCollapse}\n    >\n      {BlocksOverrideComponent({\n        defaultBlocks: defaultBlocks,\n        defaultBlockOrder: Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[],\n        blocksOverride: children,\n        children: ({ blocks: { breadcrumbChevron, breadcrumbItem, ...blocks }, blockOrder }) =>\n          blockOrder\n            .filter((key) => key in blocks)\n            .map<ReactNode>((key, index) => {\n              return (\n                // NOTE: the contents of this \"children\" property is only used for/rendered in the override child function \"override\" pattern\n                // for this to work, the user should pass in breadcrumbItem (or equivalent), and shouldn't pass in the breadcrumbChevron element to the blocks override object (since we append it here)\n                <React.Fragment key={`${index}-breadcrumb`}>\n                  {index > 0 && breadcrumbChevron}\n                  {blocks[key]}\n                </React.Fragment>\n              );\n            }),\n      })}\n    </Breadcrumbs>\n  );\n};\n\nBreadcrumb.BreadcrumbChevron = BreadcrumbChevron;\nBreadcrumb.BreadcrumbItem = BreadcrumbItem;\n\nconst defaultBlocks = createDefaultBlocks({\n  breadcrumbChevron: BreadcrumbChevron,\n  breadcrumbItem: BreadcrumbItem,\n});\n\nexport default Breadcrumb;\n"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/lib.d.ts

@@ -1,10 +1,10 @@
-import { ComponentProps, FunctionComponent, ReactElement, ReactNode } from "react";
+import { ComponentProps, FunctionComponent, ReactElement, ReactNode } from 'react';
 /**
  * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.
  *
  * @example
  * <Block>
- *   {({header, ...defaultBlocks}) => ({
+ *   {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({
  *     blocks: {
  *       ...defaultBlocks,
  *       header: {
@@ -72,7 +72,10 @@ export declare function BlocksOverrideComponent<DefaultBlocks extends Record<str
         blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];
     }) => ReactNode;
 }): ReactNode;
-export declare function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B): A & B;
+type MergeTypes<Object1, Object2> = {
+    [K in keyof Object1 | keyof Object2]: K extends keyof Object1 ? Object1[K] : K extends keyof Object2 ? Object2[K] : never;
+};
+export declare function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B): MergeTypes<B, A>;
 type ClassName = string | ClassName[] | undefined | null;
 /**
  * Utility function to join class names together, ignoring undefined or nil values.

package/dist/lib.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAEd,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,cAAc,CAAC,aAAa,EAAE,YAAY,IAClD,CAAC,CAAC,EACA,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;CACrD,KAAK;IACJ,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC;IAE9C,UAAU,EACN,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,GAChC,SAAS,CAAC,MAAM,YAAY,CAAC,EAAE,CAAC;CACrC,CAAC,GACF,SAAS,CAAC;AAEd;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAEhD,UAAU,EAAE,CAAC,GACZ;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CASA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC/C,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC9C,EACA,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,cAAc,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAC5D,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,MAAM,EACN,UAAU,GACX,EAAE;QAED,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QACvD,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,EAAE,CAAC;KACnE,KAAK,SAAS,CAAC;CACjB,aAmBA;AAED,wBAAgB,SAAS,CACvB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAwBC,CAAC,GAAG,CAAC,CACvB;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}
+{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAiB,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,cAAc,CAAC,aAAa,EAAE,YAAY,IAClD,CAAC,CAAC,EACA,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;CACrD,KAAK;IACJ,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC;IAE9C,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,YAAY,CAAC,EAAE,CAAC;CAChF,CAAC,GACF,SAAS,CAAC;AAEd;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAClF,UAAU,EAAE,CAAC,GACZ;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CAMA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC/C,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC9C,EACA,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,cAAc,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAC5D,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,MAAM,EACN,UAAU,GACX,EAAE;QAED,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QACvD,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,EAAE,CAAC;KACnE,KAAK,SAAS,CAAC;CACjB,aAsBA;AAED,KAAK,UAAU,CAAC,OAAO,EAAE,OAAO,IAAI;KACjC,CAAC,IAAI,MAAM,OAAO,GAAG,MAAM,OAAO,GAAG,CAAC,SAAS,MAAM,OAAO,GACzD,OAAO,CAAC,CAAC,CAAC,GACV,CAAC,SAAS,MAAM,OAAO,GACrB,OAAO,CAAC,CAAC,CAAC,GACV,KAAK;CACZ,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAmBrF,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAClC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodeblocks/frontend-breadcrumb-block",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "browser": "dist/index.iife.js",
@@ -11,21 +11,25 @@
   ],
   "scripts": {
     "build": "rollup -c",
-    "watch": "rollup -c --watch"
+    "watch": "rm -rf dist && cross-env NODE_ENV=development rollup -c --watch"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.0.0"
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "@mui/material": "^7.3.4",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "rollup": "^4.28.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-serve": "^1.1.1",
     "tslib": "^2.8.1",

package/readme.md

@@ -3,24 +3,29 @@
 Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
 
 ### ✨ Features
+
 - **🚀 Bundling with Rollup:** Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
 - **💙 TypeScript Support:** We've included a pre-configured `tsconfig.json` to ensure your TypeScript setup is strict, efficient, and ready to go.
 - **⚙️ Peer Dependencies:** Keep bundle sizes lean with React and React DOM set as peer dependencies.
 - **🎨 CSS Support:** Easily import and process CSS files, giving you more control over your styles.
 
 ### 🛠️ How to Use
+
 1. **Clone this repository** 🌀:
+
    ```bash
    git clone <repository-url>
    cd <repository-directory>
    ```
 
 2. **Install dependencies** 📦:
+
    ```bash
    npm install
    ```
 
 3. **Start development** 🛠️:
+
    ```bash
    npm run watch
    ```
@@ -48,10 +53,12 @@ This ensures Nodeblocks libraries integrate seamlessly with different workflows.
    npm link
    ```
 2. In the test project you want to run:
+
    ```bash
    npm i
    npm link @basaldev/frontend-starter-kit
    ```
-(Note that in real life your library would not be called frontend-starter-kit.)
 
-3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.
+   (Note that in real life your library would not be called frontend-starter-kit.)
+
+3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.