@nodeblocks/frontend-how-to-use-block 0.0.4 → 0.0.6

package/dist/HowToUse.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import './how-to-use.css';
 import { CardProps, DefaultBlocks, DefaultSettings } from './blocks';
+import { DefaultBlocksFunction } from './lib';
 type HowToUseProps = {
     className: string;
     title: string;
@@ -8,12 +9,7 @@ type HowToUseProps = {
     linkHref?: string;
     linkText?: string;
     list: CardProps[];
-    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {
-        blocks: {
-            [x: string]: any;
-        };
-        settings?: DefaultSettings;
-    };
+    children?: DefaultBlocksFunction<DefaultBlocks, DefaultSettings>;
 };
 export declare const HowToUse: React.FC<HowToUseProps>;
 export default HowToUse;

package/dist/HowToUse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HowToUse.d.ts","sourceRoot":"","sources":["../src/HowToUse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAA6C,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhH,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,eAAe,KAAK;QACvE,MAAM,EAAE;YAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;SAAE,CAAC;QAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;KAC5B,CAAC;CACD,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyC5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"HowToUse.d.ts","sourceRoot":"","sources":["../src/HowToUse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAkC,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AACrG,OAAO,EAAc,qBAAqB,EAAa,MAAM,OAAO,CAAC;AAErE,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,qBAAqB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;CAClE,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuC5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/blocks.d.ts

@@ -11,6 +11,9 @@ export type DefaultBlocks = {
     HowToUseArrowIcon: React.FC;
     HowToUseCardList: React.FC<{
         list: CardProps[];
+        CardComponent: React.FC<CardProps>;
+        IconComponent: React.FC;
+        showArrows: boolean;
     }>;
 };
 export type DefaultSettings = {
@@ -21,27 +24,14 @@ export type CardProps = {
     description: string;
     icon: string;
 };
-export declare function setBlocks(defaultBlocks: DefaultBlocks, children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {
-    blocks: {
-        [x: string]: any;
-    };
-    settings?: DefaultSettings;
-}, settings?: DefaultSettings): {
-    blocks: {
-        [k: string]: any;
-    };
-    settings: {
-        showArrows?: boolean | undefined;
-    };
-};
 export declare function BottomLink({ href, children }: {
     href: string;
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function CardList({ list, Component, IconComponent, showArrows }: {
+export declare function CardList({ list, CardComponent, IconComponent, showArrows }: {
     list: CardProps[];
-    Component?: React.FC<CardProps>;
+    CardComponent?: React.FC<CardProps>;
     IconComponent?: React.FC;
     showArrows?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IACxB,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAClC,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,SAAS,EAAE,CAAA;KAAE,CAAC,CAAC;CACrD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AA2BF,wBAAgB,SAAS,CACrB,aAAa,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,eAAe,KAAK;IACrE,MAAM,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC9B,EACD,QAAQ,CAAC,EAAE,eAAe;;;;;;;EAiB7B;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAYzF;AACD,wBAAgB,SAAS,4CAExB;AAED,wBAAgB,QAAQ,CAAC,EACrB,IAAS,EACT,SAAgB,EAChB,aAAyB,EACzB,UAAiB,EACpB,EAAE;IACC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;CACnB,2CAOJ;AAED,eAAO,MAAM,eAAe;;CAE3B,CAAA;AAED,eAAO,MAAM,aAAa;0CA3EmB;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;iDAfpC,SAAS;;;;CAgGpD,CAAA"}
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IACxB,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAClC,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;QACvB,IAAI,EAAE,SAAS,EAAE,CAAC;QAClB,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;QACnC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;QACxB,UAAU,EAAE,OAAO,CAAA;KACtB,CAAC,CAAC;CACN,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AA0BF,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAYzF;AACD,wBAAgB,SAAS,4CAExB;AAED,wBAAgB,QAAQ,CAAC,EACrB,IAAS,EACT,aAAoB,EACpB,aAAyB,EACzB,UAAiB,EACpB,EAAE;IACC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;CACnB,2CAOJ;AAED,eAAO,MAAM,eAAe;;CAE3B,CAAA;AAED,eAAO,MAAM,aAAa;0CAjDmB;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;iDAfpC,SAAS;;;;CAsEpD,CAAA"}

package/dist/index.cjs.js

@@ -38,28 +38,15 @@ const Card = ({ title, description, icon }) => {
 const HowToUseHeader = ({ title, subtitle }) => {
     return (jsxRuntime.jsxs("div", { className: "nbb-section-header", children: [jsxRuntime.jsx("h6", { children: title }), jsxRuntime.jsx("h4", { children: subtitle })] }));
 };
-function setBlocks(defaultBlocks, children, settings) {
-    const { blocks: customBlocks = {}, settings: customSettings = {} } = children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };
-    return {
-        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
-            key,
-            customBlocks[key] || defaultComponent,
-        ])),
-        settings: {
-            ...settings,
-            ...customSettings,
-        }
-    };
-}
 function BottomLink({ href, children }) {
     return (jsxRuntime.jsx("div", { className: "nbb-sign-up", children: jsxRuntime.jsx("a", { href: href, rel: "noreferrer noopener", className: "nbb-sign-up-button", children: children }) }));
 }
 function ArrowIcon() {
     return jsxRuntime.jsx("span", { className: "material-symbols-outlined nbb-arrow", children: "expand_more" });
 }
-function CardList({ list = [], Component = Card, IconComponent = ArrowIcon, showArrows = true }) {
+function CardList({ list = [], CardComponent = Card, IconComponent = ArrowIcon, showArrows = true }) {
     return jsxRuntime.jsx("div", { className: "nbb-how-to-use-steps", children: list.map(c => {
-            return jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Component, { ...c }, c.title), showArrows && jsxRuntime.jsx(IconComponent, {})] }, c.title);
+            return jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(CardComponent, { ...c }, c.title), showArrows && jsxRuntime.jsx(IconComponent, {})] }, c.title);
         }) });
 }
 const defaultSettings = {
@@ -73,6 +60,38 @@ const defaultBlocks = {
     HowToUseCardList: CardList,
 };
 
+/**
+ * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ *
+ * @param defaultBlocks - The default blocks to be used.
+ * @param defaultOptions - The default options to be passed to the children function.
+ * @param children - An optional function that returns custom blocks and additional options.
+ * @returns An object containing the merged blocks and all options from both defaults and children.
+ */
+function setBlocks(defaultBlocks, defaultOptions, children) {
+    let currentChildren = children;
+    if (Array.isArray(children)) {
+        const functionChild = children.find((child) => typeof child === 'function');
+        if (!functionChild) {
+            return { blocks: defaultBlocks };
+        }
+        currentChildren = functionChild;
+    }
+    if (typeof currentChildren !== 'function') {
+        return { blocks: defaultBlocks };
+    }
+    const results = currentChildren
+        ? currentChildren({ defaultBlocks, ...defaultOptions })
+        : { blocks: {}, ...defaultOptions };
+    const customBlocks = results.blocks || {};
+    return {
+        ...results,
+        blocks: {
+            ...defaultBlocks,
+            ...customBlocks,
+        }
+    };
+}
 /**
  * Utility function to join class names together, ignoring undefined or nil values.
  * @param classes - The class names to join.
@@ -83,8 +102,8 @@ function classNames(...classes) {
 }
 
 const HowToUse = ({ className, title, subtitle, list, linkHref = '/sign-up', linkText = '無料登録して求人を探す', children, }) => {
-    const { blocks: { HowToUseHeader, HowToUseCard, HowToUseBottomLink, HowToUseArrowIcon, HowToUseCardList }, settings: { showArrows } } = setBlocks(defaultBlocks, children, defaultSettings);
-    return (jsxRuntime.jsx("div", { className: classNames('nbb-how-to-use', className), children: jsxRuntime.jsxs("div", { className: "nbb-how-to-use-section", children: [jsxRuntime.jsx(HowToUseHeader, { title: title, subtitle: subtitle }), jsxRuntime.jsx("div", { className: "nbb-how-to-use-steps", children: jsxRuntime.jsx(HowToUseCardList, { list: list, Component: HowToUseCard, IconComponent: HowToUseArrowIcon, showArrows: showArrows }) }), jsxRuntime.jsx(HowToUseBottomLink, { href: linkHref, children: linkText })] }) }));
+    const { blocks: { HowToUseHeader, HowToUseCardList, HowToUseCard, HowToUseArrowIcon, HowToUseBottomLink, }, settings: { showArrows } } = setBlocks(defaultBlocks, defaultSettings, children);
+    return (jsxRuntime.jsx("div", { className: classNames('nbb-how-to-use', className), children: jsxRuntime.jsxs("div", { className: "nbb-how-to-use-section", children: [jsxRuntime.jsx(HowToUseHeader, { title: title, subtitle: subtitle }), jsxRuntime.jsx(HowToUseCardList, { list: list, CardComponent: HowToUseCard, IconComponent: HowToUseArrowIcon, showArrows: showArrows }), jsxRuntime.jsx(HowToUseBottomLink, { href: linkHref, children: linkText })] }) }));
 };
 
 exports.HowToUse = HowToUse;

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/className.tsx","../src/HowToUse.tsx"],"sourcesContent":["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 HowToUse from \"./HowToUse\";\n\nexport type DefaultBlocks = {\n    HowToUseHeader: React.FC<{ title: string; subtitle: string }>;\n    HowToUseCard: React.FC<CardProps>;\n    HowToUseBottomLink: React.FC<{ href: string; children: React.ReactNode }>;\n    HowToUseArrowIcon: React.FC;\n    HowToUseCardList: React.FC<{ list: CardProps[] }>;\n}\n\nexport type DefaultSettings = {\n    showArrows: boolean;\n}\n\nexport type CardProps = {\n    title: string;\n    description: string;\n    icon: string;\n};\n\nconst Card = ({ title, description, icon }: CardProps) => {\n    return (\n        <article className=\"nbb-step-card\">\n            <header>\n                <span className=\"material-symbols-outlined\">{icon}</span>\n                <h6>{title}</h6>\n            </header>\n            <div className=\"nbb-step-text\">\n                <p>{description}</p>\n            </div>\n        </article>\n    );\n};\n\n\nconst HowToUseHeader = ({ title, subtitle }: { title: string; subtitle: string }) => {\n    return (\n        <div className=\"nbb-section-header\">\n            <h6>{title}</h6>\n            <h4>{subtitle}</h4>\n        </div>\n    );\n}\n\n\nexport function setBlocks(\n    defaultBlocks: DefaultBlocks,\n    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n        blocks: { [x: string]: any };\n        settings?: DefaultSettings;\n    },\n    settings?: DefaultSettings,\n) {\n    const { blocks: customBlocks = {}, settings: customSettings = {} } =\n        children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };\n\n    return {\n        blocks: Object.fromEntries(\n            Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n                key,\n                customBlocks[key] || defaultComponent,\n            ])\n        ),\n        settings: {\n            ...settings,\n            ...customSettings,\n        }\n    };\n}\n\nexport function BottomLink({ href, children }: { href: string; children: React.ReactNode }) {\n    return (\n        <div className=\"nbb-sign-up\">\n            <a\n                href={href}\n                rel=\"noreferrer noopener\"\n                className=\"nbb-sign-up-button\"\n            >\n                {children}\n            </a>\n        </div>\n    );\n}\nexport function ArrowIcon() {\n    return <span className=\"material-symbols-outlined nbb-arrow\">expand_more</span>;\n}\n\nexport function CardList({\n    list = [],\n    Component = Card,\n    IconComponent = ArrowIcon,\n    showArrows = true\n}: {\n    list: CardProps[],\n    Component?: React.FC<CardProps>,\n    IconComponent?: React.FC\n    showArrows?: boolean\n    }) {\n    return <div className=\"nbb-how-to-use-steps\">{list.map(c => {\n        return <div key={c.title} >\n            <Component key={c.title} {...c} />\n            {showArrows && <IconComponent />}\n        </div>;\n    })}</div>;\n}\n\nexport const defaultSettings = {\n    showArrows: true\n}\n\nexport const defaultBlocks = {\n    HowToUseHeader: HowToUseHeader,\n    HowToUseCard: Card,\n    HowToUseBottomLink: BottomLink,\n    HowToUseArrowIcon: ArrowIcon,\n    HowToUseCardList: CardList,\n}\n","type 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 React from 'react';\nimport './how-to-use.css';\nimport { defaultBlocks, defaultSettings, setBlocks, CardProps, DefaultBlocks, DefaultSettings } from './blocks';\nimport { classNames } from './className';\n\ntype HowToUseProps = {\n  className: string;\n  title: string;\n  subtitle: string;\n  linkHref?: string;\n  linkText?: string;\n  list: CardProps[];\nchildren?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n  blocks: { [x: string]: any };\n  settings?: DefaultSettings;\n};\n};\n\n\nexport const HowToUse: React.FC<HowToUseProps> = ({\n  className,\n  title,\n  subtitle,\n  list,\n  linkHref = '/sign-up',\n  linkText = '無料登録して求人を探す',\n  children,\n}) => {\n  \n  const {\n    blocks: {\n      HowToUseHeader,\n      HowToUseCard,\n      HowToUseBottomLink,\n      HowToUseArrowIcon,\n      HowToUseCardList\n    },\n    settings: {\n      showArrows\n    }\n  } = setBlocks(defaultBlocks, children, defaultSettings);\n\n  return (\n    <div className={classNames('nbb-how-to-use', className)}>\n      <div className=\"nbb-how-to-use-section\">\n        <HowToUseHeader title={title} subtitle={subtitle} />\n        <div className=\"nbb-how-to-use-steps\">\n          <HowToUseCardList\n            list={list}\n            Component={HowToUseCard}\n            IconComponent={HowToUseArrowIcon}\n            showArrows={showArrows}\n          />\n        </div>\n        <HowToUseBottomLink href={linkHref}>\n          {linkText}\n        </HowToUseBottomLink>\n      </div>\n    </div>\n  );\n};\n\nexport default HowToUse;\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/lib.ts","../src/HowToUse.tsx"],"sourcesContent":["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","export type DefaultBlocks = {\n    HowToUseHeader: React.FC<{ title: string; subtitle: string }>;\n    HowToUseCard: React.FC<CardProps>;\n    HowToUseBottomLink: React.FC<{ href: string; children: React.ReactNode }>;\n    HowToUseArrowIcon: React.FC;\n    HowToUseCardList: React.FC<{ \n        list: CardProps[], \n        CardComponent: React.FC<CardProps>,\n        IconComponent: React.FC,\n        showArrows: boolean\n    }>;\n}\n\nexport type DefaultSettings = {\n    showArrows: boolean;\n}\n\nexport type CardProps = {\n    title: string;\n    description: string;\n    icon: string;\n};\n\nconst Card = ({ title, description, icon }: CardProps) => {\n    return (\n        <article className=\"nbb-step-card\">\n            <header>\n                <span className=\"material-symbols-outlined\">{icon}</span>\n                <h6>{title}</h6>\n            </header>\n            <div className=\"nbb-step-text\">\n                <p>{description}</p>\n            </div>\n        </article>\n    );\n};\n\n\nconst HowToUseHeader = ({ title, subtitle }: { title: string; subtitle: string }) => {\n    return (\n        <div className=\"nbb-section-header\">\n            <h6>{title}</h6>\n            <h4>{subtitle}</h4>\n        </div>\n    );\n}\n\nexport function BottomLink({ href, children }: { href: string; children: React.ReactNode }) {\n    return (\n        <div className=\"nbb-sign-up\">\n            <a\n                href={href}\n                rel=\"noreferrer noopener\"\n                className=\"nbb-sign-up-button\"\n            >\n                {children}\n            </a>\n        </div>\n    );\n}\nexport function ArrowIcon() {\n    return <span className=\"material-symbols-outlined nbb-arrow\">expand_more</span>;\n}\n\nexport function CardList({\n    list = [],\n    CardComponent = Card,\n    IconComponent = ArrowIcon,\n    showArrows = true\n}: {\n    list: CardProps[],\n    CardComponent?: React.FC<CardProps>,\n    IconComponent?: React.FC,\n    showArrows?: boolean\n    }) {\n    return <div className=\"nbb-how-to-use-steps\">{list.map(c => {\n        return <div key={c.title} >\n            <CardComponent key={c.title} {...c} />\n            {showArrows && <IconComponent />}\n        </div>;\n    })}</div>;\n}\n\nexport const defaultSettings = {\n    showArrows: true\n}\n\nexport const defaultBlocks = {\n    HowToUseHeader: HowToUseHeader,\n    HowToUseCard: Card,\n    HowToUseBottomLink: BottomLink,\n    HowToUseArrowIcon: ArrowIcon,\n    HowToUseCardList: CardList,\n}\n","/**\n * Sets the blocks by merging default blocks with custom blocks provided by the children function.\n *\n * @param defaultBlocks - The default blocks to be used.\n * @param defaultOptions - The default options to be passed to the children function.\n * @param children - An optional function that returns custom blocks and additional options.\n * @returns An object containing the merged blocks and all options from both defaults and children.\n */\n\ntype BlockComponent = React.ComponentType<any>; // Or use a more specific component type\n\ntype BlocksObject<T = BlockComponent> = {\n  [key: string]: T;\n}\n\nexport type DefaultBlocksFunction<Blocks extends BlocksObject = BlocksObject, Options = {}> = ({defaultBlocks}: {defaultBlocks: Blocks } & Options) => {\n  blocks: Blocks;\n} & Options\n\nexport function setBlocks<Blocks extends BlocksObject, Options>(\n  defaultBlocks: Blocks,\n  defaultOptions: Options,\n  children?: DefaultBlocksFunction<Blocks, Options>\n): {\n  blocks: Blocks;\n  [key: string]: any;\n} {\n  let currentChildren = children;\n  if (Array.isArray(children)) {\n    const functionChild = children.find((child) => typeof child === 'function');\n    if (!functionChild) {\n      return { blocks: defaultBlocks };\n    }\n    currentChildren = functionChild;\n  }\n\n  if (typeof currentChildren !== 'function') {\n    return { blocks: defaultBlocks };\n  }\n\n  const results = currentChildren\n    ? currentChildren({ defaultBlocks, ...defaultOptions })\n    : { blocks: {}, ...defaultOptions };\n  \n  const customBlocks = results.blocks || {};\n  return {\n    ...results,\n    blocks: {\n      ...defaultBlocks,\n      ...customBlocks,\n    }\n  };\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}","import React from 'react';\nimport './how-to-use.css';\nimport { defaultBlocks, defaultSettings, CardProps, DefaultBlocks, DefaultSettings } from './blocks';\nimport { classNames, DefaultBlocksFunction, setBlocks } from './lib';\n\ntype HowToUseProps = {\n  className: string;\n  title: string;\n  subtitle: string;\n  linkHref?: string;\n  linkText?: string;\n  list: CardProps[];\n  children?: DefaultBlocksFunction<DefaultBlocks, DefaultSettings>;\n};\n\n\nexport const HowToUse: React.FC<HowToUseProps> = ({\n  className,\n  title,\n  subtitle,\n  list,\n  linkHref = '/sign-up',\n  linkText = '無料登録して求人を探す',\n  children,\n}) => {\n  \n  const {\n    blocks: {\n      HowToUseHeader,\n      HowToUseCardList,\n      HowToUseCard,\n      HowToUseArrowIcon,\n      HowToUseBottomLink,\n    },\n    settings: {\n      showArrows\n    }\n  } = setBlocks<DefaultBlocks, DefaultSettings>(defaultBlocks, defaultSettings, children);\n\n  return (\n    <div className={classNames('nbb-how-to-use', className)}>\n      <div className=\"nbb-how-to-use-section\">\n        <HowToUseHeader title={title} subtitle={subtitle} />\n        <HowToUseCardList\n            list={list}\n            CardComponent={HowToUseCard}\n            IconComponent={HowToUseArrowIcon}\n            showArrows={showArrows}\n        />\n        <HowToUseBottomLink href={linkHref}>\n          {linkText}\n        </HowToUseBottomLink>\n      </div>\n    </div>\n  );\n};\n\nexport default HowToUse;\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.esm.js

@@ -36,28 +36,15 @@ const Card = ({ title, description, icon }) => {
 const HowToUseHeader = ({ title, subtitle }) => {
     return (jsxs("div", { className: "nbb-section-header", children: [jsx("h6", { children: title }), jsx("h4", { children: subtitle })] }));
 };
-function setBlocks(defaultBlocks, children, settings) {
-    const { blocks: customBlocks = {}, settings: customSettings = {} } = children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };
-    return {
-        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
-            key,
-            customBlocks[key] || defaultComponent,
-        ])),
-        settings: {
-            ...settings,
-            ...customSettings,
-        }
-    };
-}
 function BottomLink({ href, children }) {
     return (jsx("div", { className: "nbb-sign-up", children: jsx("a", { href: href, rel: "noreferrer noopener", className: "nbb-sign-up-button", children: children }) }));
 }
 function ArrowIcon() {
     return jsx("span", { className: "material-symbols-outlined nbb-arrow", children: "expand_more" });
 }
-function CardList({ list = [], Component = Card, IconComponent = ArrowIcon, showArrows = true }) {
+function CardList({ list = [], CardComponent = Card, IconComponent = ArrowIcon, showArrows = true }) {
     return jsx("div", { className: "nbb-how-to-use-steps", children: list.map(c => {
-            return jsxs("div", { children: [jsx(Component, { ...c }, c.title), showArrows && jsx(IconComponent, {})] }, c.title);
+            return jsxs("div", { children: [jsx(CardComponent, { ...c }, c.title), showArrows && jsx(IconComponent, {})] }, c.title);
         }) });
 }
 const defaultSettings = {
@@ -71,6 +58,38 @@ const defaultBlocks = {
     HowToUseCardList: CardList,
 };
 
+/**
+ * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ *
+ * @param defaultBlocks - The default blocks to be used.
+ * @param defaultOptions - The default options to be passed to the children function.
+ * @param children - An optional function that returns custom blocks and additional options.
+ * @returns An object containing the merged blocks and all options from both defaults and children.
+ */
+function setBlocks(defaultBlocks, defaultOptions, children) {
+    let currentChildren = children;
+    if (Array.isArray(children)) {
+        const functionChild = children.find((child) => typeof child === 'function');
+        if (!functionChild) {
+            return { blocks: defaultBlocks };
+        }
+        currentChildren = functionChild;
+    }
+    if (typeof currentChildren !== 'function') {
+        return { blocks: defaultBlocks };
+    }
+    const results = currentChildren
+        ? currentChildren({ defaultBlocks, ...defaultOptions })
+        : { blocks: {}, ...defaultOptions };
+    const customBlocks = results.blocks || {};
+    return {
+        ...results,
+        blocks: {
+            ...defaultBlocks,
+            ...customBlocks,
+        }
+    };
+}
 /**
  * Utility function to join class names together, ignoring undefined or nil values.
  * @param classes - The class names to join.
@@ -81,8 +100,8 @@ function classNames(...classes) {
 }
 
 const HowToUse = ({ className, title, subtitle, list, linkHref = '/sign-up', linkText = '無料登録して求人を探す', children, }) => {
-    const { blocks: { HowToUseHeader, HowToUseCard, HowToUseBottomLink, HowToUseArrowIcon, HowToUseCardList }, settings: { showArrows } } = setBlocks(defaultBlocks, children, defaultSettings);
-    return (jsx("div", { className: classNames('nbb-how-to-use', className), children: jsxs("div", { className: "nbb-how-to-use-section", children: [jsx(HowToUseHeader, { title: title, subtitle: subtitle }), jsx("div", { className: "nbb-how-to-use-steps", children: jsx(HowToUseCardList, { list: list, Component: HowToUseCard, IconComponent: HowToUseArrowIcon, showArrows: showArrows }) }), jsx(HowToUseBottomLink, { href: linkHref, children: linkText })] }) }));
+    const { blocks: { HowToUseHeader, HowToUseCardList, HowToUseCard, HowToUseArrowIcon, HowToUseBottomLink, }, settings: { showArrows } } = setBlocks(defaultBlocks, defaultSettings, children);
+    return (jsx("div", { className: classNames('nbb-how-to-use', className), children: jsxs("div", { className: "nbb-how-to-use-section", children: [jsx(HowToUseHeader, { title: title, subtitle: subtitle }), jsx(HowToUseCardList, { list: list, CardComponent: HowToUseCard, IconComponent: HowToUseArrowIcon, showArrows: showArrows }), jsx(HowToUseBottomLink, { href: linkHref, children: linkText })] }) }));
 };
 
 export { HowToUse };

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/className.tsx","../src/HowToUse.tsx"],"sourcesContent":["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 HowToUse from \"./HowToUse\";\n\nexport type DefaultBlocks = {\n    HowToUseHeader: React.FC<{ title: string; subtitle: string }>;\n    HowToUseCard: React.FC<CardProps>;\n    HowToUseBottomLink: React.FC<{ href: string; children: React.ReactNode }>;\n    HowToUseArrowIcon: React.FC;\n    HowToUseCardList: React.FC<{ list: CardProps[] }>;\n}\n\nexport type DefaultSettings = {\n    showArrows: boolean;\n}\n\nexport type CardProps = {\n    title: string;\n    description: string;\n    icon: string;\n};\n\nconst Card = ({ title, description, icon }: CardProps) => {\n    return (\n        <article className=\"nbb-step-card\">\n            <header>\n                <span className=\"material-symbols-outlined\">{icon}</span>\n                <h6>{title}</h6>\n            </header>\n            <div className=\"nbb-step-text\">\n                <p>{description}</p>\n            </div>\n        </article>\n    );\n};\n\n\nconst HowToUseHeader = ({ title, subtitle }: { title: string; subtitle: string }) => {\n    return (\n        <div className=\"nbb-section-header\">\n            <h6>{title}</h6>\n            <h4>{subtitle}</h4>\n        </div>\n    );\n}\n\n\nexport function setBlocks(\n    defaultBlocks: DefaultBlocks,\n    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n        blocks: { [x: string]: any };\n        settings?: DefaultSettings;\n    },\n    settings?: DefaultSettings,\n) {\n    const { blocks: customBlocks = {}, settings: customSettings = {} } =\n        children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };\n\n    return {\n        blocks: Object.fromEntries(\n            Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n                key,\n                customBlocks[key] || defaultComponent,\n            ])\n        ),\n        settings: {\n            ...settings,\n            ...customSettings,\n        }\n    };\n}\n\nexport function BottomLink({ href, children }: { href: string; children: React.ReactNode }) {\n    return (\n        <div className=\"nbb-sign-up\">\n            <a\n                href={href}\n                rel=\"noreferrer noopener\"\n                className=\"nbb-sign-up-button\"\n            >\n                {children}\n            </a>\n        </div>\n    );\n}\nexport function ArrowIcon() {\n    return <span className=\"material-symbols-outlined nbb-arrow\">expand_more</span>;\n}\n\nexport function CardList({\n    list = [],\n    Component = Card,\n    IconComponent = ArrowIcon,\n    showArrows = true\n}: {\n    list: CardProps[],\n    Component?: React.FC<CardProps>,\n    IconComponent?: React.FC\n    showArrows?: boolean\n    }) {\n    return <div className=\"nbb-how-to-use-steps\">{list.map(c => {\n        return <div key={c.title} >\n            <Component key={c.title} {...c} />\n            {showArrows && <IconComponent />}\n        </div>;\n    })}</div>;\n}\n\nexport const defaultSettings = {\n    showArrows: true\n}\n\nexport const defaultBlocks = {\n    HowToUseHeader: HowToUseHeader,\n    HowToUseCard: Card,\n    HowToUseBottomLink: BottomLink,\n    HowToUseArrowIcon: ArrowIcon,\n    HowToUseCardList: CardList,\n}\n","type 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 React from 'react';\nimport './how-to-use.css';\nimport { defaultBlocks, defaultSettings, setBlocks, CardProps, DefaultBlocks, DefaultSettings } from './blocks';\nimport { classNames } from './className';\n\ntype HowToUseProps = {\n  className: string;\n  title: string;\n  subtitle: string;\n  linkHref?: string;\n  linkText?: string;\n  list: CardProps[];\nchildren?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n  blocks: { [x: string]: any };\n  settings?: DefaultSettings;\n};\n};\n\n\nexport const HowToUse: React.FC<HowToUseProps> = ({\n  className,\n  title,\n  subtitle,\n  list,\n  linkHref = '/sign-up',\n  linkText = '無料登録して求人を探す',\n  children,\n}) => {\n  \n  const {\n    blocks: {\n      HowToUseHeader,\n      HowToUseCard,\n      HowToUseBottomLink,\n      HowToUseArrowIcon,\n      HowToUseCardList\n    },\n    settings: {\n      showArrows\n    }\n  } = setBlocks(defaultBlocks, children, defaultSettings);\n\n  return (\n    <div className={classNames('nbb-how-to-use', className)}>\n      <div className=\"nbb-how-to-use-section\">\n        <HowToUseHeader title={title} subtitle={subtitle} />\n        <div className=\"nbb-how-to-use-steps\">\n          <HowToUseCardList\n            list={list}\n            Component={HowToUseCard}\n            IconComponent={HowToUseArrowIcon}\n            showArrows={showArrows}\n          />\n        </div>\n        <HowToUseBottomLink href={linkHref}>\n          {linkText}\n        </HowToUseBottomLink>\n      </div>\n    </div>\n  );\n};\n\nexport default HowToUse;\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/lib.ts","../src/HowToUse.tsx"],"sourcesContent":["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","export type DefaultBlocks = {\n    HowToUseHeader: React.FC<{ title: string; subtitle: string }>;\n    HowToUseCard: React.FC<CardProps>;\n    HowToUseBottomLink: React.FC<{ href: string; children: React.ReactNode }>;\n    HowToUseArrowIcon: React.FC;\n    HowToUseCardList: React.FC<{ \n        list: CardProps[], \n        CardComponent: React.FC<CardProps>,\n        IconComponent: React.FC,\n        showArrows: boolean\n    }>;\n}\n\nexport type DefaultSettings = {\n    showArrows: boolean;\n}\n\nexport type CardProps = {\n    title: string;\n    description: string;\n    icon: string;\n};\n\nconst Card = ({ title, description, icon }: CardProps) => {\n    return (\n        <article className=\"nbb-step-card\">\n            <header>\n                <span className=\"material-symbols-outlined\">{icon}</span>\n                <h6>{title}</h6>\n            </header>\n            <div className=\"nbb-step-text\">\n                <p>{description}</p>\n            </div>\n        </article>\n    );\n};\n\n\nconst HowToUseHeader = ({ title, subtitle }: { title: string; subtitle: string }) => {\n    return (\n        <div className=\"nbb-section-header\">\n            <h6>{title}</h6>\n            <h4>{subtitle}</h4>\n        </div>\n    );\n}\n\nexport function BottomLink({ href, children }: { href: string; children: React.ReactNode }) {\n    return (\n        <div className=\"nbb-sign-up\">\n            <a\n                href={href}\n                rel=\"noreferrer noopener\"\n                className=\"nbb-sign-up-button\"\n            >\n                {children}\n            </a>\n        </div>\n    );\n}\nexport function ArrowIcon() {\n    return <span className=\"material-symbols-outlined nbb-arrow\">expand_more</span>;\n}\n\nexport function CardList({\n    list = [],\n    CardComponent = Card,\n    IconComponent = ArrowIcon,\n    showArrows = true\n}: {\n    list: CardProps[],\n    CardComponent?: React.FC<CardProps>,\n    IconComponent?: React.FC,\n    showArrows?: boolean\n    }) {\n    return <div className=\"nbb-how-to-use-steps\">{list.map(c => {\n        return <div key={c.title} >\n            <CardComponent key={c.title} {...c} />\n            {showArrows && <IconComponent />}\n        </div>;\n    })}</div>;\n}\n\nexport const defaultSettings = {\n    showArrows: true\n}\n\nexport const defaultBlocks = {\n    HowToUseHeader: HowToUseHeader,\n    HowToUseCard: Card,\n    HowToUseBottomLink: BottomLink,\n    HowToUseArrowIcon: ArrowIcon,\n    HowToUseCardList: CardList,\n}\n","/**\n * Sets the blocks by merging default blocks with custom blocks provided by the children function.\n *\n * @param defaultBlocks - The default blocks to be used.\n * @param defaultOptions - The default options to be passed to the children function.\n * @param children - An optional function that returns custom blocks and additional options.\n * @returns An object containing the merged blocks and all options from both defaults and children.\n */\n\ntype BlockComponent = React.ComponentType<any>; // Or use a more specific component type\n\ntype BlocksObject<T = BlockComponent> = {\n  [key: string]: T;\n}\n\nexport type DefaultBlocksFunction<Blocks extends BlocksObject = BlocksObject, Options = {}> = ({defaultBlocks}: {defaultBlocks: Blocks } & Options) => {\n  blocks: Blocks;\n} & Options\n\nexport function setBlocks<Blocks extends BlocksObject, Options>(\n  defaultBlocks: Blocks,\n  defaultOptions: Options,\n  children?: DefaultBlocksFunction<Blocks, Options>\n): {\n  blocks: Blocks;\n  [key: string]: any;\n} {\n  let currentChildren = children;\n  if (Array.isArray(children)) {\n    const functionChild = children.find((child) => typeof child === 'function');\n    if (!functionChild) {\n      return { blocks: defaultBlocks };\n    }\n    currentChildren = functionChild;\n  }\n\n  if (typeof currentChildren !== 'function') {\n    return { blocks: defaultBlocks };\n  }\n\n  const results = currentChildren\n    ? currentChildren({ defaultBlocks, ...defaultOptions })\n    : { blocks: {}, ...defaultOptions };\n  \n  const customBlocks = results.blocks || {};\n  return {\n    ...results,\n    blocks: {\n      ...defaultBlocks,\n      ...customBlocks,\n    }\n  };\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}","import React from 'react';\nimport './how-to-use.css';\nimport { defaultBlocks, defaultSettings, CardProps, DefaultBlocks, DefaultSettings } from './blocks';\nimport { classNames, DefaultBlocksFunction, setBlocks } from './lib';\n\ntype HowToUseProps = {\n  className: string;\n  title: string;\n  subtitle: string;\n  linkHref?: string;\n  linkText?: string;\n  list: CardProps[];\n  children?: DefaultBlocksFunction<DefaultBlocks, DefaultSettings>;\n};\n\n\nexport const HowToUse: React.FC<HowToUseProps> = ({\n  className,\n  title,\n  subtitle,\n  list,\n  linkHref = '/sign-up',\n  linkText = '無料登録して求人を探す',\n  children,\n}) => {\n  \n  const {\n    blocks: {\n      HowToUseHeader,\n      HowToUseCardList,\n      HowToUseCard,\n      HowToUseArrowIcon,\n      HowToUseBottomLink,\n    },\n    settings: {\n      showArrows\n    }\n  } = setBlocks<DefaultBlocks, DefaultSettings>(defaultBlocks, defaultSettings, children);\n\n  return (\n    <div className={classNames('nbb-how-to-use', className)}>\n      <div className=\"nbb-how-to-use-section\">\n        <HowToUseHeader title={title} subtitle={subtitle} />\n        <HowToUseCardList\n            list={list}\n            CardComponent={HowToUseCard}\n            IconComponent={HowToUseArrowIcon}\n            showArrows={showArrows}\n        />\n        <HowToUseBottomLink href={linkHref}>\n          {linkText}\n        </HowToUseBottomLink>\n      </div>\n    </div>\n  );\n};\n\nexport default HowToUse;\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/lib.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ *
+ * @param defaultBlocks - The default blocks to be used.
+ * @param defaultOptions - The default options to be passed to the children function.
+ * @param children - An optional function that returns custom blocks and additional options.
+ * @returns An object containing the merged blocks and all options from both defaults and children.
+ */
+type BlockComponent = React.ComponentType<any>;
+type BlocksObject<T = BlockComponent> = {
+    [key: string]: T;
+};
+export type DefaultBlocksFunction<Blocks extends BlocksObject = BlocksObject, Options = {}> = ({ defaultBlocks }: {
+    defaultBlocks: Blocks;
+} & Options) => {
+    blocks: Blocks;
+} & Options;
+export declare function setBlocks<Blocks extends BlocksObject, Options>(defaultBlocks: Blocks, defaultOptions: Options, children?: DefaultBlocksFunction<Blocks, Options>): {
+    blocks: Blocks;
+    [key: string]: any;
+};
+type ClassName = string | ClassName[] | undefined | null;
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+export declare function classNames(...classes: ClassName[]): string;
+export {};
+//# sourceMappingURL=lib.d.ts.map

package/dist/lib.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,KAAK,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAE/C,KAAK,YAAY,CAAC,CAAC,GAAG,cAAc,IAAI;IACtC,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;CAClB,CAAA;AAED,MAAM,MAAM,qBAAqB,CAAC,MAAM,SAAS,YAAY,GAAG,YAAY,EAAE,OAAO,GAAG,EAAE,IAAI,CAAC,EAAC,aAAa,EAAC,EAAE;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,KAAK;IACrJ,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CAAA;AAEX,wBAAgB,SAAS,CAAC,MAAM,SAAS,YAAY,EAAE,OAAO,EAC5D,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,OAAO,EACvB,QAAQ,CAAC,EAAE,qBAAqB,CAAC,MAAM,EAAE,OAAO,CAAC,GAChD;IACD,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CA0BA;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-how-to-use-block",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "browser": "dist/index.iife.js",

package/dist/className.d.ts

@@ -1,9 +0,0 @@
-type ClassName = string | ClassName[] | undefined | null;
-/**
- * Utility function to join class names together, ignoring undefined or nil values.
- * @param classes - The class names to join.
- * @returns The joined class names.
- */
-export declare function classNames(...classes: ClassName[]): string;
-export {};
-//# sourceMappingURL=className.d.ts.map

package/dist/className.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"className.d.ts","sourceRoot":"","sources":["../src/className.tsx"],"names":[],"mappings":"AAAA,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"}