feat(dev): Added react docs for Pattern + refactor

This adds support for not only documenating components, but also
constants and functions that may be exported next to components.

packages/react/components/DiffViewer/index.mjs

@@ -2,7 +2,24 @@ import React from 'react'
 import { diffWords, diffJson } from 'diff'
 import ReactDiffViewer from 'react-diff-viewer-continued'
 
+/**
+ * A method to diff JSON content
+ *
+ * @public
+ * @param {object} from - Once side of the diff
+ * @param {object} to - Other side of the diff
+ * @returns {object}
+ */
 export const diffJSON = (from, to) => diffJson(from, to)
+
+/**
+ * A method to diff string content
+ *
+ * @public
+ * @param {string} from - Once side of the diff
+ * @param {string} to - Other side of the diff
+ * @returns {object}
+ */
 export const diffCheck = (from, to) => diffWords(from, to)
 
 export const DiffViewer = (props) => <ReactDiffViewer {...props} />

packages/react/components/Echart/index.mjs

@@ -3,6 +3,12 @@ import * as _echarts from 'echarts'
 import ReactECharts from 'echarts-for-react'
 import { Popout } from '@freesewing/react/components/Popout'
 
+/**
+ * Re-export of Apache Echarts
+ *
+ * @public
+ * @constant
+ */
 export const echarts = _echarts
 
 echarts.registerTheme('light', {

packages/react/components/LineDrawing/index.mjs

@@ -36,10 +36,13 @@ import { Uma, UmaFront, UmaBack } from './uma.mjs'
 import { Umbra, UmbraFront, UmbraBack } from './umbra.mjs'
 import { Wahid, WahidFront, WahidBack } from './wahid.mjs'
 
-/*
+/**
- * Bundle all fronts
+ * An object where the key is the design name and the value the front LineDrawing component
+ *
+ * @constant
+ * @public
  */
-const lineDrawingsFront = {
+export const lineDrawingsFront = {
   aaron: AaronFront,
   albert: AlbertFront,
   bee: BeeFront,
@@ -83,10 +86,13 @@ const lineDrawingsFront = {
   wahid: WahidFront,
 }
 
-/*
+/**
- * Bundle all backs
+ * An object where the key is the design name and the value the back LineDrawing component
+ *
+ * @constant
+ * @public
  */
-const lineDrawingsBack = {
+export const lineDrawingsBack = {
   aaron: AaronBack,
   bella: BellaBack,
   bent: BentBack,
@@ -116,10 +122,13 @@ const lineDrawingsBack = {
   wahid: WahidBack,
 }
 
-/*
+/**
- * Bundle all linedrawings
+ * An object where the key is the design name and the value the full LineDrawing component
+ *
+ * @constant
+ * @public
  */
-const lineDrawings = {
+export const lineDrawings = {
   aaron: Aaron,
   albert: Albert,
   bee: Bee,
@@ -146,17 +155,13 @@ const lineDrawings = {
   huey: Huey,
   hugo: Hugo,
   jane: Jane,
-
   lucy: Lucy,
   lumina: Lumina,
   lumira: Lumira,
   lunetius: Lunetius,
   noble: Noble,
-
   simon: Simon,
-
   teagan: Teagan,
-
   tristan: Tristan,
   uma: Uma,
   umbra: Umbra,
@@ -167,10 +172,6 @@ const lineDrawings = {
  * Named exports
  */
 export {
-  // Bundles
-  lineDrawings,
-  lineDrawingsBack,
-  lineDrawingsFront,
   // Aaron
   Aaron,
   AaronFront,

packages/react/components/Pattern/circle.mjs

@@ -1,5 +1,13 @@
 import React from 'react'
 
+/**
+ * A component to render a circle inside a FreeSewing pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} props.point - The point that holds the circle info
+ * @returns {JSX.Element}
+ */
 export const Circle = ({ point }) =>
   point.attributes.list['data-circle'].map((r, i) => {
     const circleProps = point.attributes.circleProps

packages/react/components/Pattern/defs.mjs

@@ -86,12 +86,20 @@ const PaperlessDefs = ({ units = 'metric', stacks }) =>
     <MetricPaperlessDefs stacks={stacks} />
   )
 
-export const Defs = (props) =>
+/**
-  props.svg ? (
+ * A component to render the defs section of an SVG element inside a FreeSewing pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {Svg} props.svg - The FreeSewing Svg object for the pattern
+ * @param {object} props.settings - The settings for the pattern
+ * @param {object} props.stacks - The pattern stacks
+ * @returns {JSX.Element}
+ */
+export const Defs = ({ svg, stacks, settings = {} }) =>
+  svg ? (
     <defs>
-      {props.svg.defs.list ? sanitize(Object.values(props.svg.defs.list).join('')) : null}
+      {svg.defs.list ? sanitize(Object.values(svg.defs.list).join('')) : null}
-      {props.settings[0].paperless ? (
+      {settings[0]?.paperless ? <PaperlessDefs units={settings[0].units} stacks={stacks} /> : null}
-        <PaperlessDefs units={props.settings[0].units} stacks={props.stacks} />
-      ) : null}
     </defs>
   ) : null

packages/react/components/Pattern/grid.mjs

@@ -1,7 +1,14 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// eslint-disable-next-line no-unused-vars
 import React from 'react'
 
+/**
+ * A component to render the grid for a paperless FreeSewing pattern' stack
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {Stack} props.stack - The FreeSewing Stack object for the pattern
+ * @param {string} props.stackName - The name of the FreeSewing Stack
+ * @returns {JSX.Element}
+ */
 export const Grid = ({ stack, stackName }) => (
   <rect
     x={stack.topLeft.x}

packages/react/components/Pattern/group.mjs

@@ -1,7 +1,13 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// eslint-disable-next-line no-unused-vars
 import React, { forwardRef } from 'react'
 
+/**
+ * A component to render an SVG group
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - The component children, will be rendered inside the group
+ * @returns {JSX.Element}
+ */
 export const Group = forwardRef((props, ref) => (
   <g {...props} ref={ref}>
     {props.children}

packages/react/components/Pattern/index.mjs

@@ -16,8 +16,11 @@ import { Circle as DefaultCircle } from './circle.mjs'
 import { getId, getProps, withinPartBounds, translateStrings } from './utils.mjs'
 import { Link as WebLink } from '@freesewing/react/components/Link'
 
-/*
+/**
- * Allow people to override these components
+ * Default pattern components that you can override
+ *
+ * @public
+ * @constant
  */
 const defaultComponents = {
   Svg: DefaultSvg,
@@ -34,9 +37,17 @@ const defaultComponents = {
   Circle: DefaultCircle,
 }
 
-/*
+/**
- * The pattern component
+ * A component to render a FreeSewing pattern based on its renderProps
- * FIXME: document props
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - The component children, if they are set, we will not render any stacks
+ * @param {string} [props.className = 'freesewing pattern'] - SVG classes to set on the SVG element
+ * @param {object} [props.components = {}] - Any custom components to use in the pattern
+ * @param {object} [props.string = {}] - Strings to use for translation
+ * @param {object} props.renderProps - The pattern's renderProps as generated by FreeSewing core
+ * @returns {JSX.Element}
  */
 const Pattern = forwardRef((props, ref) => {
   if (!props.renderProps) return null
@@ -102,3 +113,17 @@ export {
   // The Pattern component itself
   Pattern,
 }
+
+// Also export default components
+export const Svg = DefaultSvg
+export const Defs = DefaultDefs
+export const Group = DefaultGroup
+export const Stack = DefaultStack
+export const Part = DefaultPart
+export const Point = DefaultPoint
+export const Path = DefaultPath
+export const Snippet = DefaultSnippet
+export const Grid = DefaultGrid
+export const Text = DefaultText
+export const TextOnPath = DefaultTextOnPath
+export const Circle = DefaultCircle

packages/react/components/Pattern/part.mjs

@@ -2,6 +2,20 @@
 import React, { forwardRef } from 'react'
 import { getId, getProps } from './utils.mjs'
 
+/**
+ * A component to render an inner FreeSewing Part in a pattern (no group)
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.stackName - The name of the stack the part belongs to
+ * @param {string} props.partName - The name of the part
+ * @param {object} props.part - The part object itself
+ * @param {object} props.settings - The pattern settings object
+ * @param {object} props.components - An object holding the pattern compnents to use
+ * @param {object} props.strings - An object holding translations
+ * @param {object} props.drillProps - An object holding extra props to pass down (used in Xray mode)
+ * @returns {JSX.Element}
+ */
 export const PartInner = forwardRef(
   ({ stackName, partName, part, settings, components, strings, drillProps }, ref) => {
     const { Group, Path, Point, Snippet } = components
@@ -50,6 +64,20 @@ export const PartInner = forwardRef(
 
 PartInner.displayName = 'PartInner'
 
+/**
+ * A component to render a FreeSewing Part (group) in a pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.stackName - The name of the stack the part belongs to
+ * @param {string} props.partName - The name of the part
+ * @param {object} props.part - The part object itself
+ * @param {object} props.settings - The pattern settings object
+ * @param {object} props.components - An object holding the pattern compnents to use
+ * @param {object} props.strings - An object holding translations
+ * @param {object} props.drillProps - An object holding extra props to pass down (used in Xray mode)
+ * @returns {JSX.Element}
+ */
 export const Part = ({ stackName, partName, part, settings, components, strings, drillProps }) => {
   const { Group } = components
 

packages/react/components/Pattern/path.mjs

@@ -2,6 +2,20 @@
 import React from 'react'
 import { getId, getProps } from './utils.mjs'
 
+/**
+ * A component to render a FreeSewing Path in a pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.stackName - The name of the stack the part belongs to
+ * @param {string} props.partName - The name of the part
+ * @param {string} props.pathName - The name of the path
+ * @param {object} props.path - The path object itself
+ * @param {object} props.settings - The pattern settings object
+ * @param {object} props.components - An object holding the pattern compnents to use
+ * @param {object} props.strings - An object holding translations
+ * @returns {JSX.Element}
+ */
 export const Path = ({ stackName, pathName, path, partName, settings, components, strings }) => {
   // Don't render hidden paths
   if (path.hidden) return null

packages/react/components/Pattern/point.mjs

@@ -2,10 +2,25 @@
 import React from 'react'
 import { withinPartBounds } from './utils.mjs'
 
+/**
+ * A component to render a FreeSewing Point in a pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.stackName - The name of the stack the part belongs to
+ * @param {string} props.partName - The name of the part
+ * @param {string} props.pointName - The name of the point
+ * @param {object} props.point - The point object itself
+ * @param {object} props.components - An object holding the pattern compnents to use
+ * @param {object} props.strings - An object holding translations
+ * @returns {JSX.Element}
+ */
 export const Point = ({ stackName, partName, pointName, part, point, components, strings }) => {
   /*
    * Don't include points outside the part bounding box
    * Unless the `data-render-always` attribute is set
+   *
+   * FIXME: This is undocumented
    */
   if (!withinPartBounds(point, part) && !point.attributes.list['data-render-always']) return null
 

packages/react/components/Pattern/snippet.mjs

@@ -1,8 +1,16 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
 // eslint-disable-next-line no-unused-vars
 import React from 'react'
 import { getProps } from './utils.mjs'
 
+/**
+ * A component to render a FreeSewing Snippet in a pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} props.snippet - The snippet object itself
+ * @param {object} props.settings - The pattern settings object
+ * @returns {JSX.Element}
+ */
 export const Snippet = ({ snippet, settings }) => {
   if (!snippet?.anchor || !snippet.def) return null
   if (!settings[0].complete && !snippet.attributes.list?.['data-force']?.[0]) return null

packages/react/components/Pattern/stack.mjs

@@ -1,6 +1,19 @@
 import React from 'react'
 import { getProps } from './utils.mjs'
 
+/**
+ * A component to render a FreeSewing Stack inside a pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.stackName - The name of the stack the part belongs to
+ * @param {object} props.stack - The stack object itself
+ * @param {object} props.settings - The pattern settings object
+ * @param {object} props.components - An object holding the pattern components to use
+ * @param {object} props.strings - An object holding translations
+ * @param {object} props.drillProps - An object holding extra props to pass down (used in Xray mode)
+ * @returns {JSX.Element}
+ */
 export const Stack = ({ stackName, stack, settings, components, strings, drillProps }) => {
   const { Group, Part, Grid } = components
 

packages/react/components/Pattern/svg.mjs

@@ -2,6 +2,21 @@
 import React from 'react'
 import { forwardRef } from 'react'
 
+/**
+ * A component to render an SVG tag to hold a FreeSewing pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - The component children, will be rendered inside the SVG tag
+ * @param {strign} [props.className = 'freesewing pattern'] - The CSS classes to apply to the SVG tag
+ * @param {string} [props.embed = true] - Set this to false to output SVG suitable for printing rather than auto-scaled SVG
+ * @param {number} props.heigth - The pattern height in mm
+ * @param {string} [props.locale = en] - The locale/language to use
+ * @param {object} [props.style = {}] - Any additional style to apply to the SVG tag
+ * @param {object} [props.viewBox = false] - Set this to use a custom viewBox attribute rather than the default  0 0 width height
+ * @param {number} props.width - The pattern width in mm
+ * @returns {JSX.Element}
+ */
 export const Svg = forwardRef(
   (
     {

packages/react/components/Pattern/text.mjs

@@ -2,6 +2,15 @@
 import React from 'react'
 import { translateStrings } from './utils.mjs'
 
+/**
+ * A component to render a tspan tag in a FreeSewing pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} props.point - The point that the text is defined on
+ * @param {object} strings - The translation strings
+ * @returns {JSX.Element}
+ */
 export const TextSpans = ({ point, strings }) => {
   const translated = translateStrings(point.attributes.list['data-text'], strings)
   const text = []
@@ -27,12 +36,31 @@ export const TextSpans = ({ point, strings }) => {
   return text
 }
 
+/**
+ * A component to render a text tag in a FreeSewing pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} props.point - The point that the text is defined on
+ * @param {object} strings - The translation strings
+ * @returns {JSX.Element}
+ */
 export const Text = ({ point, strings }) => (
   <text x={point.x} y={point.y} {...point.attributes.textProps}>
     <TextSpans point={point} strings={strings} />
   </text>
 )
 
+/**
+ * A component to render a text along a path in a FreeSewing pattern
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} props.path - The path that the text is to be rendered along
+ * @param {string} props.pathId - The ID of the path
+ * @param {object} strings - The translation strings
+ * @returns {JSX.Element}
+ */
 export const TextOnPath = ({ path, pathId, strings }) => {
   const textPathProps = {
     xlinkHref: '#' + pathId,

packages/react/components/Pattern/utils.mjs

@@ -1,5 +1,47 @@
 import React from 'react'
 
+/**
+ * A method to generated an ID for an object part of a FreeSewing pattern
+ *
+ * @public
+ * @param {object} parameters - All parameters passed as an object
+ * @param {object} [parameters.settings = {}] - The pattern settings
+ * @param {string} [parameters.stackName = false] - An optional stack name
+ * @param {string} [parameters.partName = false] - An optional part name
+ * @param {string} [parameters.pathName = false] - An optional path name
+ * @param {string} [parameters.pointName = false] - An optional point name
+ * @param {string} [parameters.snippetName = false] - An optional snippet name
+ * @param {string} [parameters.name = false] - An optional name
+ * @param {Part} parameters.part - The part to check the point against
+ * @returns {string}
+ */
+export const getId = ({
+  settings = {},
+  stackName = false,
+  partName = false,
+  pathName = false,
+  pointName = false,
+  snippetName = false,
+  name = false,
+}) => {
+  let id = settings.idPrefix || ''
+  if (stackName) id += `${stackName}-`
+  if (partName) id += `${partName}-`
+  if (pathName) id += `${pathName}-`
+  if (pointName) id += `${pointName}-`
+  if (snippetName) id += `${snippetName}-`
+  if (name) id += name
+
+  return id
+}
+
+/**
+ * A method to extract React props from an classic object
+ *
+ * @public
+ * @param {object} obj - The object to extract props from
+ * @returns {object}
+ */
 export const getProps = (obj) => {
   /** I can't believe it but there seems to be no method on NPM todo this */
   const cssKey = (key) => {
@@ -38,34 +80,15 @@ export const getProps = (obj) => {
   return props
 }
 
-export const withinPartBounds = (point, part) =>
+/**
-  point.x >= part.topLeft.x &&
+ * A method to translate strings for a FreeSewing pattern
-  point.x <= part.bottomRight.x &&
+ *
-  point.y >= part.topLeft.y &&
+ * @public
-  point.y <= part.bottomRight.y
+ * @param {object} [settings = {}] - The pattern settings
-    ? true
+ * @param {array} list - An array with strings (or arrays of strings) to translate
-    : false
+ * @param {object} [translations = {}] - An object holding translations
-
+ * @returns {string}
-export const getId = ({
+ */
-  settings = {},
-  stackName = false,
-  partName = false,
-  pathName = false,
-  pointName = false,
-  snippetName = false,
-  name = false,
-}) => {
-  let id = settings.idPrefix || ''
-  if (stackName) id += `${stackName}-`
-  if (partName) id += `${partName}-`
-  if (pathName) id += `${pathName}-`
-  if (pointName) id += `${pointName}-`
-  if (snippetName) id += `${snippetName}-`
-  if (name) id += name
-
-  return id
-}
-
 export const translateStrings = (list, translations = {}) => {
   let translated = ''
   if (!list) return translated
@@ -80,3 +103,19 @@ export const translateStrings = (list, translations = {}) => {
 
   return translated
 }
+
+/**
+ * A method to determine whether a FreeSewing point is within the bounding box of a FreeSewing part
+ *
+ * @public
+ * @param {Point} point - The point to check
+ * @param {Part} part - The part to check the point against
+ * @returns {boolean}
+ */
+export const withinPartBounds = (point, part) =>
+  point.x >= part.topLeft.x &&
+  point.x <= part.bottomRight.x &&
+  point.y >= part.topLeft.y &&
+  point.y <= part.bottomRight.y
+    ? true
+    : false

packages/react/mkdocs.sh

@@ -9,6 +9,7 @@ jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/rea
 jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/components/control.json
 jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/react/components/curatedset.json
 jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json
+jsdoc -c jsdoc.json components/DiffViewer/* > ../../sites/dev/prebuild/jsdoc/react/components/diffviewer.json
 jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json
 jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json
 jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json
@@ -27,3 +28,4 @@ jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/rea
 jsdoc -c jsdoc.json components/Null/* > ../../sites/dev/prebuild/jsdoc/react/components/null.json
 jsdoc -c jsdoc.json components/Number/* > ../../sites/dev/prebuild/jsdoc/react/components/number.json
 jsdoc -c jsdoc.json components/Patrons/* > ../../sites/dev/prebuild/jsdoc/react/components/patrons.json
+jsdoc -c jsdoc.json components/Pattern/* > ../../sites/dev/prebuild/jsdoc/react/components/pattern.json

sites/dev/docs/reference/packages/react/components/account/readme.mdx

@@ -89,7 +89,11 @@ import {
 
 <DocusaurusDoc>
 
-The **Account** component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Account** component family provides the following [components](#components):
 
 - [AccountStatus ](#accountstatus)
 - [Apikeys ](#apikeys)
@@ -130,47 +134,47 @@ The **Account** component family provides the following components:
 - [UserRole ](#userrole)
 - [Website ](#website)
 
-## AccountStatus
+### AccountStatus
 
 <ComponentDocs docs={jsdocAccountStatus} example={AccountStatusExample} />
 
-## Apikeys
+### Apikeys
 
 <ComponentDocs docs={jsdocApikeys} example={ApikeysExample} />
 
-## Avatar
+### Avatar
 
 <ComponentDocs docs={jsdocAvatar} example={AvatarExample} />
 
-## Bio
+### Bio
 
 <ComponentDocs docs={jsdocBio} example={BioExample} />
 
-## BookmarkButton
+### BookmarkButton
 
 <ComponentDocs docs={jsdocBookmarkButton} example={BookmarkButtonExample} />
 
-## Bookmarks
+### Bookmarks
 
 <ComponentDocs docs={jsdocBookmarks} example={BookmarksExample} />
 
-## Compare
+### Compare
 
 <ComponentDocs docs={jsdocCompare} example={CompareExample} />
 
-## Consent
+### Consent
 
 <ComponentDocs docs={jsdocConsent} example={ConsentExample} />
 
-## Control
+### Control
 
 <ComponentDocs docs={jsdocControl} example={ControlExample} />
 
-## Email
+### Email
 
 <ComponentDocs docs={jsdocEmail} example={EmailExample} />
 
-## EmailChangeConfirmation
+### EmailChangeConfirmation
 
 <MiniNote>
   #### Requires a valid callback URL This component will not work without the proper <code>id</code>{' '}
@@ -180,111 +184,111 @@ The **Account** component family provides the following components:
 
 <ComponentDocs docs={jsdocEmailChangeConfirmation} example={EmailChangeConfirmationExample} />
 
-## Export
+### Export
 
 <ComponentDocs docs={jsdocExport} example={ExportExample} />
 
-## Github
+### Github
 
 <ComponentDocs docs={jsdocGithub} example={GithubExample} />
 
-## ImportSet
+### ImportSet
 
 <ComponentDocs docs={jsdocImportSet} example={ImportSetExample} />
 
-## Instagram
+### Instagram
 
 <ComponentDocs docs={jsdocInstagram} example={InstagramExample} />
 
-## Links
+### Links
 
 <ComponentDocs docs={jsdocLinks} example={LinksExample} />
 
-## Mastodon
+### Mastodon
 
 <ComponentDocs docs={jsdocMastodon} example={MastodonExample} />
 
-## Mfa
+### Mfa
 
 <ComponentDocs docs={jsdocMfa} example={MfaExample} />
 
-## MsetCard
+### MsetCard
 
 <ComponentDocs docs={jsdocMsetCard} example={MsetCardExample} />
 
-## NewSet
+### NewSet
 
 <ComponentDocs docs={jsdocNewSet} example={NewSetExample} />
 
-## Newsletter
+### Newsletter
 
 <ComponentDocs docs={jsdocNewsletter} example={NewsletterExample} />
 
-## Password
+### Password
 
 <ComponentDocs docs={jsdocPassword} example={PasswordExample} />
 
-## Pattern
+### Pattern
 
 <ComponentDocs docs={jsdocPattern} example={PatternExample} />
 
-## PatternCard
+### PatternCard
 
 <ComponentDocs docs={jsdocPatternCard} example={PatternCardExample} />
 
-## Patterns
+### Patterns
 
 <ComponentDocs docs={jsdocPatterns} example={PatternsExample} />
 
-## Reddit
+### Reddit
 
 <ComponentDocs docs={jsdocReddit} example={RedditExample} />
 
-## Reload
+### Reload
 
 <ComponentDocs docs={jsdocReload} example={ReloadExample} />
 
-## Remove
+### Remove
 
 <ComponentDocs docs={jsdocRemove} example={RemoveExample} />
 
-## Restrict
+### Restrict
 
 <ComponentDocs docs={jsdocRestrict} example={RestrictExample} />
 
-## Set
+### Set
 
 <ComponentDocs docs={jsdocSet} example={SetExample} />
 
-## Sets
+### Sets
 
 <ComponentDocs docs={jsdocSets} example={SetsExample} />
 
-## Tiktok
+### Tiktok
 
 <ComponentDocs docs={jsdocTiktok} example={TiktokExample} />
 
-## Twitch
+### Twitch
 
 <ComponentDocs docs={jsdocTwitch} example={TwitchExample} />
 
-## Units
+### Units
 
 <ComponentDocs docs={jsdocUnits} example={UnitsExample} />
 
-## UserId
+### UserId
 
 <ComponentDocs docs={jsdocUserId} example={UserIdExample} />
 
-## Username
+### Username
 
 <ComponentDocs docs={jsdocUsername} example={UsernameExample} />
 
-## UserRole
+### UserRole
 
 <ComponentDocs docs={jsdocUserRole} example={UserRoleExample} />
 
-## Website
+### Website
 
 <ComponentDocs docs={jsdocWebsite} example={WebsiteExample} />
 

sites/dev/docs/reference/packages/react/components/admin/readme.mdx

@@ -8,25 +8,25 @@ import {
   jsdocSubscriberAdministration,
   jsdocUserAdministration,
 } from '@site/prebuild/jsdoc/components.admin.mjs'
-import {
+import { UserAdministration, SubscriberAdministration } from '@freesewing/react/components/Admin'
-  UserAdministration,
-  SubscriberAdministration
-} from '@freesewing/react/components/Admin'
 
 <DocusaurusDoc>
 
-The **Admin** component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Admin** component family provides the following [components](#components):
 
 - [SubscriberAdministration ](#subscriberadministration)
 - [UserAdministration ](#useradministration)
 
-## SubscriberAdministration
+### SubscriberAdministration
 
 <ComponentDocs docs={jsdocSubscriberAdministration} example={SubscriberAdministration} />
 
-## UserAdministration
+### UserAdministration
 
 <ComponentDocs docs={jsdocUserAdministration} example={UserAdministration} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx

@@ -10,15 +10,18 @@ import { BreadcrumbsExample } from './_examples.js'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Breadcrumbs** component family provides the following components:
 
 - [Breadcrumbs ](#breadcrumbs)
 
-## Breadcrumbs
+### Breadcrumbs
 
 <MiniNote>This component is different from the Docusaurus breadcrumbs</MiniNote>
 <br />
 <ComponentDocs docs={jsdocBreadcrumbs} example={BreadcrumbsExample} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/button/readme.mdx

@@ -4,21 +4,28 @@ title: Button
 
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
-import { jsdocCopyToClipboardButton, jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
+import {
+  jsdocCopyToClipboardButton,
+  jsdocIconButton,
+} from '@site/prebuild/jsdoc/components.button.mjs'
 import { CopyToClipboardButtonExample, IconButtonExample } from './_examples.js'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Button** component family provides the following components:
 
 - [CopyToClipboardButton](#copytoclipboardbutton)
 - [IconButton](#iconbutton)
 
-## CopyToClipboardButton
+### CopyToClipboardButton
 
 <ComponentDocs docs={jsdocCopyToClipboardButton} example={CopyToClipboardButtonExample} />
 
-## IconButton
+### IconButton
 
 <ComponentDocs docs={jsdocIconButton} example={IconButtonExample} />
 

sites/dev/docs/reference/packages/react/components/collection/readme.mdx

@@ -9,16 +9,21 @@ import { CollectionExample, DesignInfoExample } from './_examples.js'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Collection** component family provides the following components:
 
 - [Collection](#collection)
 - [DesignInfo](#designinfo)
 
-## Collection
+### Collection
+
 <ComponentDocs docs={jsdocCollection} example={CollectionExample} />
 
-## DesignInfo
+### DesignInfo
+
 <ComponentDocs docs={jsdocDesignInfo} example={DesignInfoExample} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/control/readme.mdx

@@ -9,13 +9,16 @@ import { ControlScoreExample } from './_examples.js'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Control** component family provides the following components:
 
 - [ControlScore](#controlscore)
 
-## ControlScore
+### ControlScore
 
 <ComponentDocs docs={jsdocControlScore} example={ControlScoreExample} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx

@@ -4,21 +4,29 @@ title: CuratedSet
 
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
-import { jsdocCuratedSet, jsdocCuratedSetLineup } from '@site/prebuild/jsdoc/components.curatedset.mjs'
+import {
+  jsdocCuratedSet,
+  jsdocCuratedSetLineup,
+} from '@site/prebuild/jsdoc/components.curatedset.mjs'
 import { CuratedSetLineupExample, CuratedSetExample } from './_examples.js'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **CuratedSet** component family provides the following components:
 
 - [CuratedSet](#curatedset)
 - [CuratedSetLineup](#curatedsetlineup)
 
-## CuratedSet
+### CuratedSet
+
 <ComponentDocs docs={jsdocCuratedSet} example={CuratedSetExample} />
 
-## CuratedSetLineup
+### CuratedSetLineup
+
 <ComponentDocs docs={jsdocCuratedSetLineup} example={CuratedSetLineupExample} />
 
-
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx

@@ -3,26 +3,45 @@ title: DiffViewer
 ---
 
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { FunctionDocs } from '@site/src/components/function-docs.js'
+import * as fndoc from '@site/prebuild/jsdoc/functions.diffviewer.mjs'
 
 <DocusaurusDoc>
 
-The **DiffViewer** component family provides the following components:
+- [Components](#components)
-
+- [Functions](#functions)
-- [DiffViewer](#diffviewer): A re-export of [react-diff-viewer-continued][dv]
-
-In addition, it also exports the following functions:
-
-- [diffJSON](#diffjson): A re-export of the [diffJson][jsd] function of the [jsdiff package][jsd]
-- [diffCheck](#diffcheck): A re-export of the [diffWords][jsd] function of the [jsdiff package][jsd]
 
 :::tip
+
 #### Not FreeSewing code
+
 This component family only contains re-exports of code by other maintainers.\
 Since they are a dependency, we provide them as part of the <code>@freesewing/react</code> package for convenience.
 
 Please refer to the documentation for [react-diff-viewer-continued][dv] and [jsdiff][jsd].
 :::
 
+## Components
+
+The **DiffViewer** component family provides the following components:
+
+- [DiffViewer](#diffviewer): A re-export of [react-diff-viewer-continued][dv]
+
+## Functions
+
+The **DiffViewer** family also exports the following functions:
+
+- [diffJSON](#diffjson): A re-export of the [diffJson][jsd] function of the [jsdiff package][jsd]
+- [diffCheck](#diffcheck): A re-export of the [diffWords][jsd] function of the [jsdiff package][jsd]
+
+### diffJSON
+
+<FunctionDocs docs={fndoc.jsdocdiffJSON} />
+
+### diffCheck
+
+<FunctionDocs docs={fndoc.jsdocdiffCheck} />
+
 </DocusaurusDoc>
 
 [dv]: https://github.com/aeolun/react-diff-viewer-continued?tab=readme-ov-file#usage

sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx

@@ -9,27 +9,30 @@ import {
   jsdocDocusaurusPage,
   jsdocNavbarItem,
 } from '@site/prebuild/jsdoc/components.docusaurus.mjs'
-import {
+import { DocusaurusDocExample, DocusaurusPageExample, NavbarItemExample } from './_examples.js'
-  DocusaurusDocExample,
-  DocusaurusPageExample,
-  NavbarItemExample,
-} from './_examples.js'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Docusaurus** component family provides the following components:
 
 - [DocusaurusDoc](#docusaurusdoc)
 - [DocusaurusPage](#docusauruspage)
 - [NavbarItem](#navbaritem)
 
-## DocusaurusDoc
+### DocusaurusDoc
+
 <ComponentDocs docs={jsdocDocusaurusDoc} example={DocusaurusDocExample} />
 
-## DocusaurusPage
+### DocusaurusPage
+
 <ComponentDocs docs={jsdocDocusaurusPage} example={DocusaurusPageExample} />
 
-## NavbarItem
+### NavbarItem
+
 <ComponentDocs docs={jsdocNavbarItem} example={NavbarItemExample} />
 
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/echart/readme.mdx

@@ -6,29 +6,40 @@ import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import { jsdocChartWrapper } from '@site/prebuild/jsdoc/components.echart.mjs'
 import { ChartWrapperExample } from './_examples.js'
+import { ConstantDocs } from '@site/src/components/constant-docs.js'
+import * as cdoc from '@site/prebuild/jsdoc/constants.echart.mjs'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+- [Constants](#constants)
+
+## Components
+
 The **Echart** component family provides the following components:
 
 - [ChartWrapper](#chartwrapper)
 
-In addition, it also exports the following objects:
-
-- [echarts](#echarts)
-
 ## EchartWrapper
 
 <ComponentDocs docs={jsdocChartWrapper} example={ChartWrapperExample} />
 
-## echarts
+## Constants
 
-This is a re-export of [Apache Echarts](https://echarts.apache.org/).
+The **Echart** family provides the following constants:
+
+- [echarts](#echarts)
+
+### echarts
 
 :::tip
+
 #### Not FreeSewing code
+
 We re-export <code>echarts</code> for convenience.
 Please refer to the documentation for [Apache Echarts](https://echarts.apache.org/).
 :::
 
+<ConstantDocs docs={cdoc.jsdocecharts} />
+
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/editor/readme.mdx

@@ -9,11 +9,16 @@ import { Editor } from '@freesewing/react/components/Editor'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Editor** component family provides the following components:
 
 - [Editor](#editor)
 
-## Editor
+### Editor
+
 <ComponentDocs docs={jsdocEditor} example={Editor} />
 
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/heading/readme.mdx

@@ -12,17 +12,14 @@ import {
   jsdocH5,
   jsdocH6,
 } from '@site/prebuild/jsdoc/components.heading.mjs'
-import {
+import { H1Example, H2Example, H3Example, H4Example, H5Example, H6Example } from './_examples.js'
-  H1Example,
-  H2Example,
-  H3Example,
-  H4Example,
-  H5Example,
-  H6Example,
-} from './_examples.js'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Button** component family provides the following components:
 
 - [H1](#h1)
@@ -32,23 +29,28 @@ The **Button** component family provides the following components:
 - [H5](#h5)
 - [H6](#h6)
 
-## H1
+### H1
+
 <ComponentDocs docs={jsdocH1} example={H1Example} />
 
-## H2
+### H2
+
 <ComponentDocs docs={jsdocH2} example={H2Example} />
 
-## H3
+### H3
+
 <ComponentDocs docs={jsdocH3} example={H3Example} />
 
-## H4
+### H4
+
 <ComponentDocs docs={jsdocH4} example={H4Example} />
 
-## H5
+### H5
+
 <ComponentDocs docs={jsdocH5} example={H5Example} />
 
-## H6
+### H6
+
 <ComponentDocs docs={jsdocH6} example={H6Example} />
 
-
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/highlight/readme.mdx

@@ -9,13 +9,16 @@ import { HighlightExample } from './_examples.js'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Highlight** component family provides the following components:
 
 - [Highlight](#highlight)
 
-## Highlight
+### Highlight
 
 <ComponentDocs docs={jsdocHighlight} example={HighlightExample} />
 
-
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/icon/readme.mdx

@@ -116,7 +116,11 @@ import {
 
 <DocusaurusDoc>
 
-The __Icon__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Icon** component family provides the following components:
 
 - [ApplyIcon](#applyicon)
 - [AsideIcon](#asideicon)
@@ -230,430 +234,748 @@ The __Icon__ component family provides the following components:
 To make it easier to pick an Icon, here is a visual overview:
 
 <div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:gap-2 tw:my-2">
-<a href="#applyicon"><ApplyIcon /></a>
+  <a href="#applyicon">
-<a href="#asideicon"><AsideIcon /></a>
+    <ApplyIcon />
-<a href="#backicon"><BackIcon /></a>
+  </a>
-<a href="#beakericon"><BeakerIcon /></a>
+  <a href="#asideicon">
-<a href="#bookmarkicon"><BookmarkIcon /></a>
+    <AsideIcon />
-<a href="#boolnoicon"><BoolNoIcon /></a>
+  </a>
-<a href="#boolyesicon"><BoolYesIcon /></a>
+  <a href="#backicon">
-<a href="#bulleticon"><BulletIcon /></a>
+    <BackIcon />
-<a href="#chaticon"><ChatIcon /></a>
+  </a>
-<a href="#circleicon"><CircleIcon /></a>
+  <a href="#beakericon">
-<a href="#cisfemaleicon"><CisFemaleIcon /></a>
+    <BeakerIcon />
-<a href="#cismaleicon"><CisMaleIcon /></a>
+  </a>
-<a href="#cloneicon"><CloneIcon /></a>
+  <a href="#bookmarkicon">
-<a href="#closeicon"><CloseIcon /></a>
+    <BookmarkIcon />
-<a href="#codeicon"><CodeIcon /></a>
+  </a>
-<a href="#compareicon"><CompareIcon /></a>
+  <a href="#boolnoicon">
-<a href="#controlicon"><ControlIcon /></a>
+    <BoolNoIcon />
-<a href="#copyicon"><CopyIcon /></a>
+  </a>
-<a href="#coverpageicon"><CoverPageIcon /></a>
+  <a href="#boolyesicon">
-<a href="#curatedmeasurementsseticon"><CuratedMeasurementsSetIcon /></a>
+    <BoolYesIcon />
-<a href="#designicon"><DesignIcon /></a>
+  </a>
-<a href="#detailicon"><DetailIcon /></a>
+  <a href="#bulleticon">
-<a href="#docsicon"><DocsIcon /></a>
+    <BulletIcon />
-<a href="#downicon"><DownIcon /></a>
+  </a>
-<a href="#downloadicon"><DownloadIcon /></a>
+  <a href="#chaticon">
-<a href="#editicon"><EditIcon /></a>
+    <ChatIcon />
-<a href="#emailicon"><EmailIcon /></a>
+  </a>
-<a href="#erroricon"><ErrorIcon /></a>
+  <a href="#circleicon">
-<a href="#expandicon"><ExpandIcon /></a>
+    <CircleIcon />
-<a href="#exporticon"><ExportIcon /></a>
+  </a>
-<a href="#failureicon"><FailureIcon /></a>
+  <a href="#cisfemaleicon">
-<a href="#filtericon"><FilterIcon /></a>
+    <CisFemaleIcon />
-<a href="#fingerprinticon"><FingerprintIcon /></a>
+  </a>
-<a href="#fixmeicon"><FixmeIcon /></a>
+  <a href="#cismaleicon">
-<a href="#flagicon"><FlagIcon /></a>
+    <CisMaleIcon />
-<a href="#flipicon"><FlipIcon /></a>
+  </a>
-<a href="#freesewingicon"><FreeSewingIcon /></a>
+  <a href="#cloneicon">
-<a href="#gaugeicon"><GaugeIcon /></a>
+    <CloneIcon />
-<a href="#githubicon"><GitHubIcon /></a>
+  </a>
-<a href="#googleicon"><GoogleIcon /></a>
+  <a href="#closeicon">
-<a href="#groupicon"><GroupIcon /></a>
+    <CloseIcon />
-<a href="#hearticon"><HeartIcon /></a>
+  </a>
-<a href="#helpicon"><HelpIcon /></a>
+  <a href="#codeicon">
-<a href="#iconwrapper"><IconWrapper /></a>
+    <CodeIcon />
-<a href="#includeicon"><IncludeIcon /></a>
+  </a>
-<a href="#instagramicon"><InstagramIcon /></a>
+  <a href="#compareicon">
-<a href="#keyicon"><KeyIcon /></a>
+    <CompareIcon />
-<a href="#kioskicon"><KioskIcon /></a>
+  </a>
-<a href="#lefticon"><LeftIcon /></a>
+  <a href="#controlicon">
-<a href="#linkicon"><LinkIcon /></a>
+    <ControlIcon />
-<a href="#listicon"><ListIcon /></a>
+  </a>
-<a href="#lockicon"><LockIcon /></a>
+  <a href="#copyicon">
-<a href="#marginicon"><MarginIcon /></a>
+    <CopyIcon />
-<a href="#mastodonicon"><MastodonIcon /></a>
+  </a>
-<a href="#measurementsicon"><MeasurementsIcon /></a>
+  <a href="#coverpageicon">
-<a href="#measurementsseticon"><MeasurementsSetIcon /></a>
+    <CoverPageIcon />
-<a href="#menuicon"><MenuIcon /></a>
+  </a>
-<a href="#newmeasurementsseticon"><NewMeasurementsSetIcon /></a>
+  <a href="#curatedmeasurementsseticon">
-<a href="#newpatternicon"><NewPatternIcon /></a>
+    <CuratedMeasurementsSetIcon />
-<a href="#newslettericon"><NewsletterIcon /></a>
+  </a>
-<a href="#noicon"><NoIcon /></a>
+  <a href="#designicon">
-<a href="#okicon"><OkIcon /></a>
+    <DesignIcon />
-<a href="#optionsicon"><OptionsIcon /></a>
+  </a>
-<a href="#pagemarginicon"><PageMarginIcon /></a>
+  <a href="#detailicon">
-<a href="#pageorientationicon"><PageOrientationIcon /></a>
+    <DetailIcon />
-<a href="#pagesizeicon"><PageSizeIcon /></a>
+  </a>
-<a href="#paperlessicon"><PaperlessIcon /></a>
+  <a href="#docsicon">
-<a href="#patternicon"><PatternIcon /></a>
+    <DocsIcon />
-<a href="#plusicon"><PlusIcon /></a>
+  </a>
-<a href="#printicon"><PrintIcon /></a>
+  <a href="#downicon">
-<a href="#privacyicon"><PrivacyIcon /></a>
+    <DownIcon />
-<a href="#redditicon"><RedditIcon /></a>
+  </a>
-<a href="#reloadicon"><ReloadIcon /></a>
+  <a href="#downloadicon">
-<a href="#resetallicon"><ResetAllIcon /></a>
+    <DownloadIcon />
-<a href="#reseticon"><ResetIcon /></a>
+  </a>
-<a href="#righticon"><RightIcon /></a>
+  <a href="#editicon">
-<a href="#rocketicon"><RocketIcon /></a>
+    <EditIcon />
-<a href="#rotateicon"><RotateIcon /></a>
+  </a>
-<a href="#rssicon"><RssIcon /></a>
+  <a href="#emailicon">
-<a href="#saicon"><SaIcon /></a>
+    <EmailIcon />
-<a href="#saveasicon"><SaveAsIcon /></a>
+  </a>
-<a href="#saveicon"><SaveIcon /></a>
+  <a href="#erroricon">
-<a href="#scaleicon"><ScaleIcon /></a>
+    <ErrorIcon />
-<a href="#searchicon"><SearchIcon /></a>
+  </a>
-<a href="#settingsicon"><SettingsIcon /></a>
+  <a href="#expandicon">
-<a href="#shieldicon"><ShieldIcon /></a>
+    <ExpandIcon />
-<a href="#showcaseicon"><ShowcaseIcon /></a>
+  </a>
-<a href="#signouticon"><SignoutIcon /></a>
+  <a href="#exporticon">
-<a href="#spinnericon"><SpinnerIcon /></a>
+    <ExportIcon />
-<a href="#successicon"><SuccessIcon /></a>
+  </a>
-<a href="#tiktokicon"><TikTokIcon /></a>
+  <a href="#failureicon">
-<a href="#tipicon"><TipIcon /></a>
+    <FailureIcon />
-<a href="#trashicon"><TrashIcon /></a>
+  </a>
-<a href="#twitchicon"><TwitchIcon /></a>
+  <a href="#filtericon">
-<a href="#uiicon"><UiIcon /></a>
+    <FilterIcon />
-<a href="#undoicon"><UndoIcon /></a>
+  </a>
-<a href="#unitsicon"><UnitsIcon /></a>
+  <a href="#fingerprinticon">
-<a href="#upicon"><UpIcon /></a>
+    <FingerprintIcon />
-<a href="#uploadicon"><UploadIcon /></a>
+  </a>
-<a href="#usericon"><UserIcon /></a>
+  <a href="#fixmeicon">
-<a href="#uxicon"><UxIcon /></a>
+    <FixmeIcon />
-<a href="#warningicon"><WarningIcon /></a>
+  </a>
-<a href="#wrenchicon"><WrenchIcon /></a>
+  <a href="#flagicon">
-<a href="#xrayicon"><XrayIcon /></a>
+    <FlagIcon />
-<a href="#zoominicon"><ZoomInIcon /></a>
+  </a>
-<a href="#zoomouticon"><ZoomOutIcon /></a>
+  <a href="#flipicon">
+    <FlipIcon />
+  </a>
+  <a href="#freesewingicon">
+    <FreeSewingIcon />
+  </a>
+  <a href="#gaugeicon">
+    <GaugeIcon />
+  </a>
+  <a href="#githubicon">
+    <GitHubIcon />
+  </a>
+  <a href="#googleicon">
+    <GoogleIcon />
+  </a>
+  <a href="#groupicon">
+    <GroupIcon />
+  </a>
+  <a href="#hearticon">
+    <HeartIcon />
+  </a>
+  <a href="#helpicon">
+    <HelpIcon />
+  </a>
+  <a href="#iconwrapper">
+    <IconWrapper />
+  </a>
+  <a href="#includeicon">
+    <IncludeIcon />
+  </a>
+  <a href="#instagramicon">
+    <InstagramIcon />
+  </a>
+  <a href="#keyicon">
+    <KeyIcon />
+  </a>
+  <a href="#kioskicon">
+    <KioskIcon />
+  </a>
+  <a href="#lefticon">
+    <LeftIcon />
+  </a>
+  <a href="#linkicon">
+    <LinkIcon />
+  </a>
+  <a href="#listicon">
+    <ListIcon />
+  </a>
+  <a href="#lockicon">
+    <LockIcon />
+  </a>
+  <a href="#marginicon">
+    <MarginIcon />
+  </a>
+  <a href="#mastodonicon">
+    <MastodonIcon />
+  </a>
+  <a href="#measurementsicon">
+    <MeasurementsIcon />
+  </a>
+  <a href="#measurementsseticon">
+    <MeasurementsSetIcon />
+  </a>
+  <a href="#menuicon">
+    <MenuIcon />
+  </a>
+  <a href="#newmeasurementsseticon">
+    <NewMeasurementsSetIcon />
+  </a>
+  <a href="#newpatternicon">
+    <NewPatternIcon />
+  </a>
+  <a href="#newslettericon">
+    <NewsletterIcon />
+  </a>
+  <a href="#noicon">
+    <NoIcon />
+  </a>
+  <a href="#okicon">
+    <OkIcon />
+  </a>
+  <a href="#optionsicon">
+    <OptionsIcon />
+  </a>
+  <a href="#pagemarginicon">
+    <PageMarginIcon />
+  </a>
+  <a href="#pageorientationicon">
+    <PageOrientationIcon />
+  </a>
+  <a href="#pagesizeicon">
+    <PageSizeIcon />
+  </a>
+  <a href="#paperlessicon">
+    <PaperlessIcon />
+  </a>
+  <a href="#patternicon">
+    <PatternIcon />
+  </a>
+  <a href="#plusicon">
+    <PlusIcon />
+  </a>
+  <a href="#printicon">
+    <PrintIcon />
+  </a>
+  <a href="#privacyicon">
+    <PrivacyIcon />
+  </a>
+  <a href="#redditicon">
+    <RedditIcon />
+  </a>
+  <a href="#reloadicon">
+    <ReloadIcon />
+  </a>
+  <a href="#resetallicon">
+    <ResetAllIcon />
+  </a>
+  <a href="#reseticon">
+    <ResetIcon />
+  </a>
+  <a href="#righticon">
+    <RightIcon />
+  </a>
+  <a href="#rocketicon">
+    <RocketIcon />
+  </a>
+  <a href="#rotateicon">
+    <RotateIcon />
+  </a>
+  <a href="#rssicon">
+    <RssIcon />
+  </a>
+  <a href="#saicon">
+    <SaIcon />
+  </a>
+  <a href="#saveasicon">
+    <SaveAsIcon />
+  </a>
+  <a href="#saveicon">
+    <SaveIcon />
+  </a>
+  <a href="#scaleicon">
+    <ScaleIcon />
+  </a>
+  <a href="#searchicon">
+    <SearchIcon />
+  </a>
+  <a href="#settingsicon">
+    <SettingsIcon />
+  </a>
+  <a href="#shieldicon">
+    <ShieldIcon />
+  </a>
+  <a href="#showcaseicon">
+    <ShowcaseIcon />
+  </a>
+  <a href="#signouticon">
+    <SignoutIcon />
+  </a>
+  <a href="#spinnericon">
+    <SpinnerIcon />
+  </a>
+  <a href="#successicon">
+    <SuccessIcon />
+  </a>
+  <a href="#tiktokicon">
+    <TikTokIcon />
+  </a>
+  <a href="#tipicon">
+    <TipIcon />
+  </a>
+  <a href="#trashicon">
+    <TrashIcon />
+  </a>
+  <a href="#twitchicon">
+    <TwitchIcon />
+  </a>
+  <a href="#uiicon">
+    <UiIcon />
+  </a>
+  <a href="#undoicon">
+    <UndoIcon />
+  </a>
+  <a href="#unitsicon">
+    <UnitsIcon />
+  </a>
+  <a href="#upicon">
+    <UpIcon />
+  </a>
+  <a href="#uploadicon">
+    <UploadIcon />
+  </a>
+  <a href="#usericon">
+    <UserIcon />
+  </a>
+  <a href="#uxicon">
+    <UxIcon />
+  </a>
+  <a href="#warningicon">
+    <WarningIcon />
+  </a>
+  <a href="#wrenchicon">
+    <WrenchIcon />
+  </a>
+  <a href="#xrayicon">
+    <XrayIcon />
+  </a>
+  <a href="#zoominicon">
+    <ZoomInIcon />
+  </a>
+  <a href="#zoomouticon">
+    <ZoomOutIcon />
+  </a>
 </div>
 
-## ApplyIcon
+### ApplyIcon
+
 <ComponentDocs docs={jsdoc.jsdocApplyIcon} example={ApplyIcon} />
 
-## AsideIcon
+### AsideIcon
+
 <ComponentDocs docs={jsdoc.jsdocAsideIcon} example={AsideIcon} />
 
-## BackIcon
+### BackIcon
+
 <ComponentDocs docs={jsdoc.jsdocBackIcon} example={BackIcon} />
 
-## BeakerIcon
+### BeakerIcon
+
 <ComponentDocs docs={jsdoc.jsdocBeakerIcon} example={BeakerIcon} />
 
-## BookmarkIcon
+### BookmarkIcon
+
 <ComponentDocs docs={jsdoc.jsdocBookmarkIcon} example={BookmarkIcon} />
 
-## BoolNoIcon
+### BoolNoIcon
+
 <ComponentDocs docs={jsdoc.jsdocBoolNoIcon} example={BoolNoIcon} />
 
-## BoolYesIcon
+### BoolYesIcon
+
 <ComponentDocs docs={jsdoc.jsdocBoolYesIcon} example={BoolYesIcon} />
 
-## BulletIcon
+### BulletIcon
+
 <ComponentDocs docs={jsdoc.jsdocBulletIcon} example={BulletIcon} />
 
-## ChatIcon
+### ChatIcon
+
 <ComponentDocs docs={jsdoc.jsdocChatIcon} example={ChatIcon} />
 
-## CircleIcon
+### CircleIcon
+
 <ComponentDocs docs={jsdoc.jsdocCircleIcon} example={CircleIcon} />
 
-## CisFemaleIcon
+### CisFemaleIcon
+
 <ComponentDocs docs={jsdoc.jsdocCisFemaleIcon} example={CisFemaleIcon} />
 
-## CisMaleIcon
+### CisMaleIcon
+
 <ComponentDocs docs={jsdoc.jsdocCisMaleIcon} example={CisMaleIcon} />
 
-## CloneIcon
+### CloneIcon
+
 <ComponentDocs docs={jsdoc.jsdocCloneIcon} example={CloneIcon} />
 
-## CloseIcon
+### CloseIcon
+
 <ComponentDocs docs={jsdoc.jsdocCloseIcon} example={CloseIcon} />
 
-## CodeIcon
+### CodeIcon
+
 <ComponentDocs docs={jsdoc.jsdocCodeIcon} example={CodeIcon} />
 
-## CompareIcon
+### CompareIcon
+
 <ComponentDocs docs={jsdoc.jsdocCompareIcon} example={CompareIcon} />
 
-## ControlIcon
+### ControlIcon
+
 <ComponentDocs docs={jsdoc.jsdocControlIcon} example={ControlIcon} />
 
-## CopyIcon
+### CopyIcon
+
 <ComponentDocs docs={jsdoc.jsdocCopyIcon} example={CopyIcon} />
 
-## CoverPageIcon
+### CoverPageIcon
+
 <ComponentDocs docs={jsdoc.jsdocCoverPageIcon} example={CoverPageIcon} />
 
-## CuratedMeasurementsSetIcon
+### CuratedMeasurementsSetIcon
+
 <ComponentDocs docs={jsdoc.jsdocCuratedMeasurementsSetIcon} example={CuratedMeasurementsSetIcon} />
 
-## DesignIcon
+### DesignIcon
+
 <ComponentDocs docs={jsdoc.jsdocDesignIcon} example={DesignIcon} />
 
-## DetailIcon
+### DetailIcon
+
 <ComponentDocs docs={jsdoc.jsdocDetailIcon} example={DetailIcon} />
 
-## DocsIcon
+### DocsIcon
+
 <ComponentDocs docs={jsdoc.jsdocDocsIcon} example={DocsIcon} />
 
-## DownIcon
+### DownIcon
+
 <ComponentDocs docs={jsdoc.jsdocDownIcon} example={DownIcon} />
 
-## DownloadIcon
+### DownloadIcon
+
 <ComponentDocs docs={jsdoc.jsdocDownloadIcon} example={DownloadIcon} />
 
-## EditIcon
+### EditIcon
+
 <ComponentDocs docs={jsdoc.jsdocEditIcon} example={EditIcon} />
 
-## EmailIcon
+### EmailIcon
+
 <ComponentDocs docs={jsdoc.jsdocEmailIcon} example={EmailIcon} />
 
-## ErrorIcon
+### ErrorIcon
+
 <ComponentDocs docs={jsdoc.jsdocErrorIcon} example={ErrorIcon} />
 
-## ExpandIcon
+### ExpandIcon
+
 <ComponentDocs docs={jsdoc.jsdocExpandIcon} example={ExpandIcon} />
 
-## ExportIcon
+### ExportIcon
+
 <ComponentDocs docs={jsdoc.jsdocExportIcon} example={ExportIcon} />
 
-## FailureIcon
+### FailureIcon
+
 <ComponentDocs docs={jsdoc.jsdocFailureIcon} example={FailureIcon} />
 
-## FilterIcon
+### FilterIcon
+
 <ComponentDocs docs={jsdoc.jsdocFilterIcon} example={FilterIcon} />
 
-## FingerprintIcon
+### FingerprintIcon
+
 <ComponentDocs docs={jsdoc.jsdocFingerprintIcon} example={FingerprintIcon} />
 
-## FixmeIcon
+### FixmeIcon
+
 <ComponentDocs docs={jsdoc.jsdocFixmeIcon} example={FixmeIcon} />
 
-## FlagIcon
+### FlagIcon
+
 <ComponentDocs docs={jsdoc.jsdocFlagIcon} example={FlagIcon} />
 
-## FlipIcon
+### FlipIcon
+
 <ComponentDocs docs={jsdoc.jsdocFlipIcon} example={FlipIcon} />
 
-## FreeSewingIcon
+### FreeSewingIcon
+
 <ComponentDocs docs={jsdoc.jsdocFreeSewingIcon} example={FreeSewingIcon} />
 
-## GaugeIcon
+### GaugeIcon
+
 <ComponentDocs docs={jsdoc.jsdocGaugeIcon} example={GaugeIcon} />
 
-## GitHubIcon
+### GitHubIcon
+
 <ComponentDocs docs={jsdoc.jsdocGitHubIcon} example={GitHubIcon} />
 
-## GoogleIcon
+### GoogleIcon
+
 <ComponentDocs docs={jsdoc.jsdocGoogleIcon} example={GoogleIcon} />
 
-## GroupIcon
+### GroupIcon
+
 <ComponentDocs docs={jsdoc.jsdocGroupIcon} example={GroupIcon} />
 
-## HeartIcon
+### HeartIcon
+
 <ComponentDocs docs={jsdoc.jsdocHeartIcon} example={HeartIcon} />
 
-## HelpIcon
+### HelpIcon
+
 <ComponentDocs docs={jsdoc.jsdocHelpIcon} example={HelpIcon} />
 
-## IconWrapper
+### IconWrapper
+
 <ComponentDocs docs={jsdoc.jsdocIconWrapper} example={IconWrapper} />
 
-## IncludeIcon
+### IncludeIcon
+
 <ComponentDocs docs={jsdoc.jsdocIncludeIcon} example={IncludeIcon} />
 
-## InstagramIcon
+### InstagramIcon
+
 <ComponentDocs docs={jsdoc.jsdocInstagramIcon} example={InstagramIcon} />
 
-## KeyIcon
+### KeyIcon
+
 <ComponentDocs docs={jsdoc.jsdocKeyIcon} example={KeyIcon} />
 
-## KioskIcon
+### KioskIcon
+
 <ComponentDocs docs={jsdoc.jsdocKioskIcon} example={KioskIcon} />
 
-## LeftIcon
+### LeftIcon
+
 <ComponentDocs docs={jsdoc.jsdocLeftIcon} example={LeftIcon} />
 
-## LinkIcon
+### LinkIcon
+
 <ComponentDocs docs={jsdoc.jsdocLinkIcon} example={LinkIcon} />
 
-## ListIcon
+### ListIcon
+
 <ComponentDocs docs={jsdoc.jsdocListIcon} example={ListIcon} />
 
-## LockIcon
+### LockIcon
+
 <ComponentDocs docs={jsdoc.jsdocLockIcon} example={LockIcon} />
 
-## MarginIcon
+### MarginIcon
+
 <ComponentDocs docs={jsdoc.jsdocMarginIcon} example={MarginIcon} />
 
-## MastodonIcon
+### MastodonIcon
+
 <ComponentDocs docs={jsdoc.jsdocMastodonIcon} example={MastodonIcon} />
 
-## MeasurementsIcon
+### MeasurementsIcon
+
 <ComponentDocs docs={jsdoc.jsdocMeasurementsIcon} example={MeasurementsIcon} />
 
-## MeasurementsSetIcon
+### MeasurementsSetIcon
+
 <ComponentDocs docs={jsdoc.jsdocMeasurementsSetIcon} example={MeasurementsSetIcon} />
 
-## MenuIcon
+### MenuIcon
+
 <ComponentDocs docs={jsdoc.jsdocMenuIcon} example={MenuIcon} />
 
-## NewMeasurementsSetIcon
+### NewMeasurementsSetIcon
+
 <ComponentDocs docs={jsdoc.jsdocNewMeasurementsSetIcon} example={NewMeasurementsSetIcon} />
 
-## NewPatternIcon
+### NewPatternIcon
+
 <ComponentDocs docs={jsdoc.jsdocNewPatternIcon} example={NewPatternIcon} />
 
-## NewsletterIcon
+### NewsletterIcon
+
 <ComponentDocs docs={jsdoc.jsdocNewsletterIcon} example={NewsletterIcon} />
 
-## NoIcon
+### NoIcon
+
 <ComponentDocs docs={jsdoc.jsdocNoIcon} example={NoIcon} />
 
-## OkIcon
+### OkIcon
+
 <ComponentDocs docs={jsdoc.jsdocOkIcon} example={OkIcon} />
 
-## OptionsIcon
+### OptionsIcon
+
 <ComponentDocs docs={jsdoc.jsdocOptionsIcon} example={OptionsIcon} />
 
-## PageMarginIcon
+### PageMarginIcon
+
 <ComponentDocs docs={jsdoc.jsdocPageMarginIcon} example={PageMarginIcon} />
 
-## PageOrientationIcon
+### PageOrientationIcon
+
 <ComponentDocs docs={jsdoc.jsdocPageOrientationIcon} example={PageOrientationIcon} />
 
-## PageSizeIcon
+### PageSizeIcon
+
 <ComponentDocs docs={jsdoc.jsdocPageSizeIcon} example={PageSizeIcon} />
 
-## PaperlessIcon
+### PaperlessIcon
+
 <ComponentDocs docs={jsdoc.jsdocPaperlessIcon} example={PaperlessIcon} />
 
-## PatternIcon
+### PatternIcon
+
 <ComponentDocs docs={jsdoc.jsdocPatternIcon} example={PatternIcon} />
 
-## PlusIcon
+### PlusIcon
+
 <ComponentDocs docs={jsdoc.jsdocPlusIcon} example={PlusIcon} />
 
-## PrintIcon
+### PrintIcon
+
 <ComponentDocs docs={jsdoc.jsdocPrintIcon} example={PrintIcon} />
 
-## PrivacyIcon
+### PrivacyIcon
+
 <ComponentDocs docs={jsdoc.jsdocPrivacyIcon} example={PrivacyIcon} />
 
-## RedditIcon
+### RedditIcon
+
 <ComponentDocs docs={jsdoc.jsdocRedditIcon} example={RedditIcon} />
 
-## ReloadIcon
+### ReloadIcon
+
 <ComponentDocs docs={jsdoc.jsdocReloadIcon} example={ReloadIcon} />
 
-## ResetAllIcon
+### ResetAllIcon
+
 <ComponentDocs docs={jsdoc.jsdocResetAllIcon} example={ResetAllIcon} />
 
-## ResetIcon
+### ResetIcon
+
 <ComponentDocs docs={jsdoc.jsdocResetIcon} example={ResetIcon} />
 
-## RightIcon
+### RightIcon
+
 <ComponentDocs docs={jsdoc.jsdocRightIcon} example={RightIcon} />
 
-## RocketIcon
+### RocketIcon
+
 <ComponentDocs docs={jsdoc.jsdocRocketIcon} example={RocketIcon} />
 
-## RotateIcon
+### RotateIcon
+
 <ComponentDocs docs={jsdoc.jsdocRotateIcon} example={RotateIcon} />
 
-## RssIcon
+### RssIcon
+
 <ComponentDocs docs={jsdoc.jsdocRssIcon} example={RssIcon} />
 
-## SaIcon
+### SaIcon
+
 <ComponentDocs docs={jsdoc.jsdocSaIcon} example={SaIcon} />
 
-## SaveAsIcon
+### SaveAsIcon
+
 <ComponentDocs docs={jsdoc.jsdocSaveAsIcon} example={SaveAsIcon} />
 
-## SaveIcon
+### SaveIcon
+
 <ComponentDocs docs={jsdoc.jsdocSaveIcon} example={SaveIcon} />
 
-## ScaleIcon
+### ScaleIcon
+
 <ComponentDocs docs={jsdoc.jsdocScaleIcon} example={ScaleIcon} />
 
-## SearchIcon
+### SearchIcon
+
 <ComponentDocs docs={jsdoc.jsdocSearchIcon} example={SearchIcon} />
 
-## SettingsIcon
+### SettingsIcon
+
 <ComponentDocs docs={jsdoc.jsdocSettingsIcon} example={SettingsIcon} />
 
-## ShieldIcon
+### ShieldIcon
+
 <ComponentDocs docs={jsdoc.jsdocShieldIcon} example={ShieldIcon} />
 
-## ShowcaseIcon
+### ShowcaseIcon
+
 <ComponentDocs docs={jsdoc.jsdocShowcaseIcon} example={ShowcaseIcon} />
 
-## SignoutIcon
+### SignoutIcon
+
 <ComponentDocs docs={jsdoc.jsdocSignoutIcon} example={SignoutIcon} />
 
-## SpinnerIcon
+### SpinnerIcon
+
 <ComponentDocs docs={jsdoc.jsdocSpinnerIcon} example={SpinnerIcon} />
 
-## SuccessIcon
+### SuccessIcon
+
 <ComponentDocs docs={jsdoc.jsdocSuccessIcon} example={SuccessIcon} />
 
-## TikTokIcon
+### TikTokIcon
+
 <ComponentDocs docs={jsdoc.jsdocTikTokIcon} example={TikTokIcon} />
 
-## TipIcon
+### TipIcon
+
 <ComponentDocs docs={jsdoc.jsdocTipIcon} example={TipIcon} />
 
-## TrashIcon
+### TrashIcon
+
 <ComponentDocs docs={jsdoc.jsdocTrashIcon} example={TrashIcon} />
 
-## TwitchIcon
+### TwitchIcon
+
 <ComponentDocs docs={jsdoc.jsdocTwitchIcon} example={TwitchIcon} />
 
-## UiIcon
+### UiIcon
+
 <ComponentDocs docs={jsdoc.jsdocUiIcon} example={UiIcon} />
 
-## UndoIcon
+### UndoIcon
+
 <ComponentDocs docs={jsdoc.jsdocUndoIcon} example={UndoIcon} />
 
-## UnitsIcon
+### UnitsIcon
+
 <ComponentDocs docs={jsdoc.jsdocUnitsIcon} example={UnitsIcon} />
 
-## UpIcon
+### UpIcon
+
 <ComponentDocs docs={jsdoc.jsdocUpIcon} example={UpIcon} />
 
-## UploadIcon
+### UploadIcon
+
 <ComponentDocs docs={jsdoc.jsdocUploadIcon} example={UploadIcon} />
 
-## UserIcon
+### UserIcon
+
 <ComponentDocs docs={jsdoc.jsdocUserIcon} example={UserIcon} />
 
-## UxIcon
+### UxIcon
+
 <ComponentDocs docs={jsdoc.jsdocUxIcon} example={UxIcon} />
 
-## WarningIcon
+### WarningIcon
+
 <ComponentDocs docs={jsdoc.jsdocWarningIcon} example={WarningIcon} />
 
-## WrenchIcon
+### WrenchIcon
+
 <ComponentDocs docs={jsdoc.jsdocWrenchIcon} example={WrenchIcon} />
 
-## XrayIcon
+### XrayIcon
+
 <ComponentDocs docs={jsdoc.jsdocXrayIcon} example={XrayIcon} />
 
-## ZoomInIcon
+### ZoomInIcon
+
 <ComponentDocs docs={jsdoc.jsdocZoomInIcon} example={ZoomInIcon} />
 
-## ZoomOutIcon
+### ZoomOutIcon
+
 <ComponentDocs docs={jsdoc.jsdocZoomOutIcon} example={ZoomOutIcon} />
 
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/input/readme.mdx

@@ -43,6 +43,10 @@ import {
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Input** component family provides the following components:
 
 - [ActiveImageInput](#activeimageinput)
@@ -62,52 +66,68 @@ The **Input** component family provides the following components:
 - [StringInput](#stringinput)
 - [ToggleInput](#toggleinput)
 
-## ActiveImageInput
+### ActiveImageInput
+
 <ComponentDocs docs={jsdocActiveImageInput} example={ActiveImageInputExample} />
 
-## ButtonFrame
+### ButtonFrame
+
 <ComponentDocs docs={jsdocButtonFrame} example={ButtonFrameExample} />
 
-## DesignInput
+### DesignInput
+
 <ComponentDocs docs={jsdocDesignInput} example={DesignInputExample} />
 
-## EmailInput
+### EmailInput
+
 <ComponentDocs docs={jsdocEmailInput} example={EmailInputExample} />
 
-## Fieldset
+### Fieldset
+
 <ComponentDocs docs={jsdocFieldset} example={FieldsetExample} />
 
-## FileInput
+### FileInput
+
 <ComponentDocs docs={jsdocFileInput} example={FileInputExample} />
 
-## ImageInput
+### ImageInput
+
 <ComponentDocs docs={jsdocImageInput} example={ImageInputExample} />
 
-## ListInput
+### ListInput
+
 <ComponentDocs docs={jsdocListInput} example={ListInputExample} />
 
-## MarkdownInput
+### MarkdownInput
+
 <ComponentDocs docs={jsdocMarkdownInput} example={MarkdownInputExample} />
 
-## MeasurementInput
+### MeasurementInput
+
 <ComponentDocs docs={jsdocMeasurementInput} example={MeasurementInputExample} />
 
-## MfaInput
+### MfaInput
+
 <ComponentDocs docs={jsdocMfaInput} example={MfaInputExample} />
 
-## NumberInput
+### NumberInput
+
 <ComponentDocs docs={jsdocNumberInput} example={NumberInputExample} />
 
-## PassiveImageInput
+### PassiveImageInput
+
 <ComponentDocs docs={jsdocPassiveImageInput} example={PassiveImageInputExample} />
 
-## PasswordInput
+### PasswordInput
+
 <ComponentDocs docs={jsdocPasswordInput} example={PasswordInputExample} />
 
-## StringInput
+### StringInput
+
 <ComponentDocs docs={jsdocStringInput} example={StringInputExample} />
 
-## ToggleInput
+### ToggleInput
+
 <ComponentDocs docs={jsdocToggleInput} example={ToggleInputExample} />
 
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/json/readme.mdx

@@ -1,20 +1,24 @@
 ---
 title: Json
 ---
+
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.json.mjs'
 import { JsonExample } from './_examples.js'
 
-
 <DocusaurusDoc>
 
-The __Json__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Json** component family provides the following components:
 
 - [Json](#json)
 
-## Json
+### Json
+
 <ComponentDocs docs={jsdoc.jsdocJson} example={JsonExample} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/keyval/readme.mdx

@@ -1,21 +1,24 @@
 ---
 title: KeyVal
 ---
+
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.keyval.mjs'
 import { KeyValExample } from './_examples.js'
 
-
 <DocusaurusDoc>
 
-The __KeyVal__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **KeyVal** component family provides the following components:
 
 - [KeyVal](#keyval)
 
-## KeyVal
+### KeyVal
+
 <ComponentDocs docs={jsdoc.jsdocKeyVal} example={KeyValExample} />
 
 </DocusaurusDoc>
-
-

sites/dev/docs/reference/packages/react/components/layout/readme.mdx

@@ -15,10 +15,13 @@ import {
   NoTitleLayoutExample,
 } from './_examples.js'
 
-
 <DocusaurusDoc>
 
-The __Layout__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Layout** component family provides the following components:
 
 - [BaseLayout](#baselayout)
 - [BaseLayoutLeft](#baselayoutleft)
@@ -28,25 +31,32 @@ The __Layout__ component family provides the following components:
 - [Layout](#layout)
 - [NoTitleLayout](#notitlelayout)
 
-## BaseLayout
+### BaseLayout
+
 <ComponentDocs docs={jsdoc.jsdocBaseLayout} example={BaseLayoutExample} />
 
-## BaseLayoutLeft
+### BaseLayoutLeft
+
 <ComponentDocs docs={jsdoc.jsdocBaseLayoutLeft} example={BaseLayoutLeftExample} />
 
-## BaseLayoutProse
+### BaseLayoutProse
+
 <ComponentDocs docs={jsdoc.jsdocBaseLayoutProse} example={BaseLayoutProseExample} />
 
-## BaseLayoutRight
+### BaseLayoutRight
+
 <ComponentDocs docs={jsdoc.jsdocBaseLayoutRight} example={BaseLayoutRightExample} />
 
-## BaseLayoutWide
+### BaseLayoutWide
+
 <ComponentDocs docs={jsdoc.jsdocBaseLayoutWide} example={BaseLayoutWideExample} />
 
-## Layout
+### Layout
+
 <ComponentDocs docs={jsdoc.jsdocLayout} example={LayoutExample} />
 
-## NoTitleLayout
+### NoTitleLayout
+
 <ComponentDocs docs={jsdoc.jsdocNoTitleLayout} example={NoTitleLayoutExample} />
 
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx

@@ -5,6 +5,8 @@ title: Linedrawing
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.linedrawing.mjs'
+import { ConstantDocs } from '@site/src/components/constant-docs.js'
+import * as cdoc from '@site/prebuild/jsdoc/constants.linedrawing.mjs'
 import {
   AaronExample,
   AlbertExample,
@@ -111,13 +113,10 @@ import {
 
 <DocusaurusDoc>
 
-:::tip
+- [Components](#components)
-This component family also exports the following helper objects:
+- [Constants](#constants)
 
-- `lineDrawings`: An object where the key is the design name and the value the full LineDrawing component
+## Components
-- `lineDrawingsBack`: An object where the key is the design name and the value the back LineDrawing component
-- `lineDrawingsFront`: An object where the key is the design name and the value the front LineDrawing component
-:::
 
 :::warning
 All FreeSewing designs SHOULD have the full and front line drawing component.
@@ -126,413 +125,532 @@ The back component is optional.
 If there is no specific front component, the front component MUST be exported as a copy of the full component.
 :::
 
-The __LineDrawing__ component family provides the following components:
+The **LineDrawing** component family provides the following components:
 
-  - [AaronBack](#aaronback)
+- [AaronBack](#aaronback)
-  - [AaronFront](#aaronfront)
+- [AaronFront](#aaronfront)
-  - [Aaron](#aaron)
+- [Aaron](#aaron)
-  - [AlbertFront](#albertfront)
+- [AlbertFront](#albertfront)
-  - [Albert](#albert)
+- [Albert](#albert)
-  - [BeeFront](#beefront)
+- [BeeFront](#beefront)
-  - [Bee](#bee)
+- [Bee](#bee)
-  - [BellaBack](#bellaback)
+- [BellaBack](#bellaback)
-  - [BellaFront](#bellafront)
+- [BellaFront](#bellafront)
-  - [Bella](#bella)
+- [Bella](#bella)
-  - [BenjaminFront](#benjaminfront)
+- [BenjaminFront](#benjaminfront)
-  - [Benjamin](#benjamin)
+- [Benjamin](#benjamin)
-  - [BentBack](#bentback)
+- [BentBack](#bentback)
-  - [BentFront](#bentfront)
+- [BentFront](#bentfront)
-  - [Bent](#bent)
+- [Bent](#bent)
-  - [BibiBack](#bibiback)
+- [BibiBack](#bibiback)
-  - [BibiFront](#bibifront)
+- [BibiFront](#bibifront)
-  - [Bibi](#bibi)
+- [Bibi](#bibi)
-  - [BobBack](#bobback)
+- [BobBack](#bobback)
-  - [BobFront](#bobfront)
+- [BobFront](#bobfront)
-  - [Bob](#bob)
+- [Bob](#bob)
-  - [BreannaBack](#breannaback)
+- [BreannaBack](#breannaback)
-  - [BreannaFront](#breannafront)
+- [BreannaFront](#breannafront)
-  - [Breanna](#breanna)
+- [Breanna](#breanna)
-  - [BrianBack](#brianback)
+- [BrianBack](#brianback)
-  - [BrianFront](#brianfront)
+- [BrianFront](#brianfront)
-  - [Brian](#brian)
+- [Brian](#brian)
-  - [BruceBack](#bruceback)
+- [BruceBack](#bruceback)
-  - [BruceFront](#brucefront)
+- [BruceFront](#brucefront)
-  - [Bruce](#bruce)
+- [Bruce](#bruce)
-  - [CarlitaBack](#carlitaback)
+- [CarlitaBack](#carlitaback)
-  - [CarlitaFront](#carlitafront)
+- [CarlitaFront](#carlitafront)
-  - [Carlita](#carlita)
+- [Carlita](#carlita)
-  - [CarltonBack](#carltonback)
+- [CarltonBack](#carltonback)
-  - [CarltonFront](#carltonfront)
+- [CarltonFront](#carltonfront)
-  - [Carlton](#carlton)
+- [Carlton](#carlton)
-  - [CathrinBack](#cathrinback)
+- [CathrinBack](#cathrinback)
-  - [CathrinFront](#cathrinfront)
+- [CathrinFront](#cathrinfront)
-  - [Cathrin](#cathrin)
+- [Cathrin](#cathrin)
-  - [CharlieBack](#charlieback)
+- [CharlieBack](#charlieback)
-  - [CharlieFront](#charliefront)
+- [CharlieFront](#charliefront)
-  - [Charlie](#charlie)
+- [Charlie](#charlie)
-  - [CorneliusBack](#corneliusback)
+- [CorneliusBack](#corneliusback)
-  - [CorneliusFront](#corneliusfront)
+- [CorneliusFront](#corneliusfront)
-  - [Cornelius](#cornelius)
+- [Cornelius](#cornelius)
-  - [DianaBack](#dianaback)
+- [DianaBack](#dianaback)
-  - [DianaFront](#dianafront)
+- [DianaFront](#dianafront)
-  - [Diana](#diana)
+- [Diana](#diana)
-  - [FlorenceFront](#florencefront)
+- [FlorenceFront](#florencefront)
-  - [Florence](#florence)
+- [Florence](#florence)
-  - [FlorentFront](#florentfront)
+- [FlorentFront](#florentfront)
-  - [Florent](#florent)
+- [Florent](#florent)
-  - [GozerBack](#gozerback)
+- [GozerBack](#gozerback)
-  - [GozerFront](#gozerfront)
+- [GozerFront](#gozerfront)
-  - [Gozer](#gozer)
+- [Gozer](#gozer)
-  - [HiFront](#hifront)
+- [HiFront](#hifront)
-  - [Hi](#hi)
+- [Hi](#hi)
-  - [HolmesFront](#holmesfront)
+- [HolmesFront](#holmesfront)
-  - [Holmes](#holmes)
+- [Holmes](#holmes)
-  - [HortensiaFront](#hortensiafront)
+- [HortensiaFront](#hortensiafront)
-  - [Hortensia](#hortensia)
+- [Hortensia](#hortensia)
-  - [HueyBack](#hueyback)
+- [HueyBack](#hueyback)
-  - [HueyFront](#hueyfront)
+- [HueyFront](#hueyfront)
-  - [Huey](#huey)
+- [Huey](#huey)
-  - [HugoBack](#hugoback)
+- [HugoBack](#hugoback)
-  - [HugoFront](#hugofront)
+- [HugoFront](#hugofront)
-  - [Hugo](#hugo)
+- [Hugo](#hugo)
-  - [JaneBack](#janeback)
+- [JaneBack](#janeback)
-  - [JaneFront](#janefront)
+- [JaneFront](#janefront)
-  - [Jane](#jane)
+- [Jane](#jane)
-  - [LucyFront](#lucyfront)
+- [LucyFront](#lucyfront)
-  - [Lucy](#lucy)
+- [Lucy](#lucy)
-  - [LuminaBack](#luminaback)
+- [LuminaBack](#luminaback)
-  - [LuminaFront](#luminafront)
+- [LuminaFront](#luminafront)
-  - [Lumina](#lumina)
+- [Lumina](#lumina)
-  - [LumiraBack](#lumiraback)
+- [LumiraBack](#lumiraback)
-  - [LumiraFront](#lumirafront)
+- [LumiraFront](#lumirafront)
-  - [Lumira](#lumira)
+- [Lumira](#lumira)
-  - [LunetiusFront](#lunetiusfront)
+- [LunetiusFront](#lunetiusfront)
-  - [Lunetius](#lunetius)
+- [Lunetius](#lunetius)
-  - [NobleBack](#nobleback)
+- [NobleBack](#nobleback)
-  - [NobleFront](#noblefront)
+- [NobleFront](#noblefront)
-  - [Noble](#noble)
+- [Noble](#noble)
-  - [SimonBack](#simonback)
+- [SimonBack](#simonback)
-  - [SimonFront](#simonfront)
+- [SimonFront](#simonfront)
-  - [Simon](#simon)
+- [Simon](#simon)
-  - [TeaganBack](#teaganback)
+- [TeaganBack](#teaganback)
-  - [TeaganFront](#teaganfront)
+- [TeaganFront](#teaganfront)
-  - [Teagan](#teagan)
+- [Teagan](#teagan)
-  - [TristanBack](#tristanback)
+- [TristanBack](#tristanback)
-  - [TristanFront](#tristanfront)
+- [TristanFront](#tristanfront)
-  - [Tristan](#tristan)
+- [Tristan](#tristan)
-  - [UmaBack](#umaback)
+- [UmaBack](#umaback)
-  - [UmaFront](#umafront)
+- [UmaFront](#umafront)
-  - [Uma](#uma)
+- [Uma](#uma)
-  - [UmbraBack](#umbraback)
+- [UmbraBack](#umbraback)
-  - [UmbraFront](#umbrafront)
+- [UmbraFront](#umbrafront)
-  - [Umbra](#umbra)
+- [Umbra](#umbra)
-  - [WahidBack](#wahidback)
+- [WahidBack](#wahidback)
-  - [WahidFront](#wahidfront)
+- [WahidFront](#wahidfront)
-  - [Wahid](#wahid)
+- [Wahid](#wahid)
 
+### Aaron
 
-
-## Aaron
 <ComponentDocs docs={jsdoc.jsdocAaron} example={AaronExample} />
 
-## AaronBack
+### AaronBack
+
 <ComponentDocs docs={jsdoc.jsdocAaronBack} example={AaronBackExample} />
 
-## AaronFront
+### AaronFront
+
 <ComponentDocs docs={jsdoc.jsdocAaronFront} example={AaronFrontExample} />
 
-## Albert
+### Albert
+
 <ComponentDocs docs={jsdoc.jsdocAlbert} example={AlbertExample} />
 
-## AlbertFront
+### AlbertFront
+
 <ComponentDocs docs={jsdoc.jsdocAlbertFront} example={AlbertFrontExample} />
 
-## Bee
+### Bee
+
 <ComponentDocs docs={jsdoc.jsdocBee} example={BeeExample} />
 
-## BeeFront
+### BeeFront
+
 <ComponentDocs docs={jsdoc.jsdocBeeFront} example={BeeFrontExample} />
 
-## Bella
+### Bella
+
 <ComponentDocs docs={jsdoc.jsdocBella} example={BellaExample} />
 
-## BellaBack
+### BellaBack
+
 <ComponentDocs docs={jsdoc.jsdocBellaBack} example={BellaBackExample} />
 
-## BellaFront
+### BellaFront
+
 <ComponentDocs docs={jsdoc.jsdocBellaFront} example={BellaFrontExample} />
 
-## Benjamin
+### Benjamin
+
 <ComponentDocs docs={jsdoc.jsdocBenjamin} example={BenjaminExample} />
 
-## BenjaminFront
+### BenjaminFront
+
 <ComponentDocs docs={jsdoc.jsdocBenjaminFront} example={BenjaminFrontExample} />
 
-## Bent
+### Bent
+
 <ComponentDocs docs={jsdoc.jsdocBent} example={BentExample} />
 
-## BentBack
+### BentBack
+
 <ComponentDocs docs={jsdoc.jsdocBentBack} example={BentBackExample} />
 
-## BentFront
+### BentFront
+
 <ComponentDocs docs={jsdoc.jsdocBentFront} example={BentFrontExample} />
 
-## Bibi
+### Bibi
+
 <ComponentDocs docs={jsdoc.jsdocBibi} example={BibiExample} />
 
-## BibiBack
+### BibiBack
+
 <ComponentDocs docs={jsdoc.jsdocBibiBack} example={BibiBackExample} />
 
-## BibiFront
+### BibiFront
+
 <ComponentDocs docs={jsdoc.jsdocBibiFront} example={BibiFrontExample} />
 
-## Bob
+### Bob
+
 <ComponentDocs docs={jsdoc.jsdocBob} example={BobExample} />
 
-## BobBack
+### BobBack
+
 <ComponentDocs docs={jsdoc.jsdocBobBack} example={BobBackExample} />
 
-## BobFront
+### BobFront
+
 <ComponentDocs docs={jsdoc.jsdocBobFront} example={BobFrontExample} />
 
-## Breanna
+### Breanna
+
 <ComponentDocs docs={jsdoc.jsdocBreanna} example={BreannaExample} />
 
-## BreannaBack
+### BreannaBack
+
 <ComponentDocs docs={jsdoc.jsdocBreannaBack} example={BreannaBackExample} />
 
-## BreannaFront
+### BreannaFront
+
 <ComponentDocs docs={jsdoc.jsdocBreannaFront} example={BreannaFrontExample} />
 
-## Brian
+### Brian
+
 <ComponentDocs docs={jsdoc.jsdocBrian} example={BrianExample} />
 
-## BrianBack
+### BrianBack
+
 <ComponentDocs docs={jsdoc.jsdocBrianBack} example={BrianBackExample} />
 
-## BrianFront
+### BrianFront
+
 <ComponentDocs docs={jsdoc.jsdocBrianFront} example={BrianFrontExample} />
 
-## Bruce
+### Bruce
+
 <ComponentDocs docs={jsdoc.jsdocBruce} example={BruceExample} />
 
-## BruceBack
+### BruceBack
+
 <ComponentDocs docs={jsdoc.jsdocBruceBack} example={BruceBackExample} />
 
-## BruceFront
+### BruceFront
+
 <ComponentDocs docs={jsdoc.jsdocBruceFront} example={BruceFrontExample} />
 
-## Carlita
+### Carlita
+
 <ComponentDocs docs={jsdoc.jsdocCarlita} example={CarlitaExample} />
 
-## CarlitaBack
+### CarlitaBack
+
 <ComponentDocs docs={jsdoc.jsdocCarlitaBack} example={CarlitaBackExample} />
 
-## CarlitaFront
+### CarlitaFront
+
 <ComponentDocs docs={jsdoc.jsdocCarlitaFront} example={CarlitaFrontExample} />
 
-## Carlton
+### Carlton
+
 <ComponentDocs docs={jsdoc.jsdocCarlton} example={CarltonExample} />
 
-## CarltonBack
+### CarltonBack
+
 <ComponentDocs docs={jsdoc.jsdocCarltonBack} example={CarltonBackExample} />
 
-## CarltonFront
+### CarltonFront
+
 <ComponentDocs docs={jsdoc.jsdocCarltonFront} example={CarltonFrontExample} />
 
-## Cathrin
+### Cathrin
+
 <ComponentDocs docs={jsdoc.jsdocCathrin} example={CathrinExample} />
 
-## CathrinBack
+### CathrinBack
+
 <ComponentDocs docs={jsdoc.jsdocCathrinBack} example={CathrinBackExample} />
 
-## CathrinFront
+### CathrinFront
+
 <ComponentDocs docs={jsdoc.jsdocCathrinFront} example={CathrinFrontExample} />
 
-## Charlie
+### Charlie
+
 <ComponentDocs docs={jsdoc.jsdocCharlie} example={CharlieExample} />
 
-## CharlieBack
+### CharlieBack
+
 <ComponentDocs docs={jsdoc.jsdocCharlieBack} example={CharlieBackExample} />
 
-## CharlieFront
+### CharlieFront
+
 <ComponentDocs docs={jsdoc.jsdocCharlieFront} example={CharlieFrontExample} />
 
-## Cornelius
+### Cornelius
+
 <ComponentDocs docs={jsdoc.jsdocCornelius} example={CorneliusExample} />
 
-## CorneliusBack
+### CorneliusBack
+
 <ComponentDocs docs={jsdoc.jsdocCorneliusBack} example={CorneliusBackExample} />
 
-## CorneliusFront
+### CorneliusFront
+
 <ComponentDocs docs={jsdoc.jsdocCorneliusFront} example={CorneliusFrontExample} />
 
-## Diana
+### Diana
+
 <ComponentDocs docs={jsdoc.jsdocDiana} example={DianaExample} />
 
-## DianaBack
+### DianaBack
+
 <ComponentDocs docs={jsdoc.jsdocDianaBack} example={DianaBackExample} />
 
-## DianaFront
+### DianaFront
+
 <ComponentDocs docs={jsdoc.jsdocDianaFront} example={DianaFrontExample} />
 
-## Florence
+### Florence
+
 <ComponentDocs docs={jsdoc.jsdocFlorence} example={FlorenceExample} />
 
-## FlorenceFront
+### FlorenceFront
+
 <ComponentDocs docs={jsdoc.jsdocFlorenceFront} example={FlorenceFrontExample} />
 
-## Florent
+### Florent
+
 <ComponentDocs docs={jsdoc.jsdocFlorent} example={FlorentExample} />
 
-## FlorentFront
+### FlorentFront
+
 <ComponentDocs docs={jsdoc.jsdocFlorentFront} example={FlorentFrontExample} />
 
-## Gozer
+### Gozer
+
 <ComponentDocs docs={jsdoc.jsdocGozer} example={GozerExample} />
 
-## GozerBack
+### GozerBack
+
 <ComponentDocs docs={jsdoc.jsdocGozerBack} example={GozerBackExample} />
 
-## GozerFront
+### GozerFront
+
 <ComponentDocs docs={jsdoc.jsdocGozerFront} example={GozerFrontExample} />
 
-## Hi
+### Hi
+
 <ComponentDocs docs={jsdoc.jsdocHi} example={HiExample} />
 
-## HiFront
+### HiFront
+
 <ComponentDocs docs={jsdoc.jsdocHiFront} example={HiFrontExample} />
 
-## Holmes
+### Holmes
+
 <ComponentDocs docs={jsdoc.jsdocHolmes} example={HolmesExample} />
 
-## HolmesFront
+### HolmesFront
+
 <ComponentDocs docs={jsdoc.jsdocHolmesFront} example={HolmesFrontExample} />
 
-## Hortensia
+### Hortensia
+
 <ComponentDocs docs={jsdoc.jsdocHortensia} example={HortensiaExample} />
 
-## HortensiaFront
+### HortensiaFront
+
 <ComponentDocs docs={jsdoc.jsdocHortensiaFront} example={HortensiaFrontExample} />
 
-## Huey
+### Huey
+
 <ComponentDocs docs={jsdoc.jsdocHuey} example={HueyExample} />
 
-## HueyBack
+### HueyBack
+
 <ComponentDocs docs={jsdoc.jsdocHueyBack} example={HueyBackExample} />
 
-## HueyFront
+### HueyFront
+
 <ComponentDocs docs={jsdoc.jsdocHueyFront} example={HueyFrontExample} />
 
-## Hugo
+### Hugo
+
 <ComponentDocs docs={jsdoc.jsdocHugo} example={HugoExample} />
 
-## HugoBack
+### HugoBack
+
 <ComponentDocs docs={jsdoc.jsdocHugoBack} example={HugoBackExample} />
 
-## HugoFront
+### HugoFront
+
 <ComponentDocs docs={jsdoc.jsdocHugoFront} example={HugoFrontExample} />
 
-## Jane
+### Jane
+
 <ComponentDocs docs={jsdoc.jsdocJane} example={JaneExample} />
 
-## JaneBack
+### JaneBack
+
 <ComponentDocs docs={jsdoc.jsdocJaneBack} example={JaneBackExample} />
 
-## JaneFront
+### JaneFront
+
 <ComponentDocs docs={jsdoc.jsdocJaneFront} example={JaneFrontExample} />
 
-## Lucy
+### Lucy
+
 <ComponentDocs docs={jsdoc.jsdocLucy} example={LucyExample} />
 
-## LucyFront
+### LucyFront
+
 <ComponentDocs docs={jsdoc.jsdocLucyFront} example={LucyFrontExample} />
 
-## Lumina
+### Lumina
+
 <ComponentDocs docs={jsdoc.jsdocLumina} example={LuminaExample} />
 
-## LuminaBack
+### LuminaBack
+
 <ComponentDocs docs={jsdoc.jsdocLuminaBack} example={LuminaBackExample} />
 
-## LuminaFront
+### LuminaFront
+
 <ComponentDocs docs={jsdoc.jsdocLuminaFront} example={LuminaFrontExample} />
 
-## Lumira
+### Lumira
+
 <ComponentDocs docs={jsdoc.jsdocLumira} example={LumiraExample} />
 
-## LumiraBack
+### LumiraBack
+
 <ComponentDocs docs={jsdoc.jsdocLumiraBack} example={LumiraBackExample} />
 
-## LumiraFront
+### LumiraFront
+
 <ComponentDocs docs={jsdoc.jsdocLumiraFront} example={LumiraFrontExample} />
 
-## Lunetius
+### Lunetius
+
 <ComponentDocs docs={jsdoc.jsdocLunetius} example={LunetiusExample} />
 
-## LunetiusFront
+### LunetiusFront
+
 <ComponentDocs docs={jsdoc.jsdocLunetiusFront} example={LunetiusFrontExample} />
 
-## Noble
+### Noble
+
 <ComponentDocs docs={jsdoc.jsdocNoble} example={NobleExample} />
 
-## NobleBack
+### NobleBack
+
 <ComponentDocs docs={jsdoc.jsdocNobleBack} example={NobleBackExample} />
 
-## NobleFront
+### NobleFront
+
 <ComponentDocs docs={jsdoc.jsdocNobleFront} example={NobleFrontExample} />
 
-## Simon
+### Simon
+
 <ComponentDocs docs={jsdoc.jsdocSimon} example={SimonExample} />
 
-## SimonBack
+### SimonBack
+
 <ComponentDocs docs={jsdoc.jsdocSimonBack} example={SimonBackExample} />
 
-## SimonFront
+### SimonFront
+
 <ComponentDocs docs={jsdoc.jsdocSimonFront} example={SimonFrontExample} />
 
-## Teagan
+### Teagan
+
 <ComponentDocs docs={jsdoc.jsdocTeagan} example={TeaganExample} />
 
-## TeaganBack
+### TeaganBack
+
 <ComponentDocs docs={jsdoc.jsdocTeaganBack} example={TeaganBackExample} />
 
-## TeaganFront
+### TeaganFront
+
 <ComponentDocs docs={jsdoc.jsdocTeaganFront} example={TeaganFrontExample} />
 
-## Tristan
+### Tristan
+
 <ComponentDocs docs={jsdoc.jsdocTristan} example={TristanExample} />
 
-## TristanBack
+### TristanBack
+
 <ComponentDocs docs={jsdoc.jsdocTristanBack} example={TristanBackExample} />
 
-## TristanFront
+### TristanFront
+
 <ComponentDocs docs={jsdoc.jsdocTristanFront} example={TristanFrontExample} />
 
-## Uma
+### Uma
+
 <ComponentDocs docs={jsdoc.jsdocUma} example={UmaExample} />
 
-## UmaBack
+### UmaBack
+
 <ComponentDocs docs={jsdoc.jsdocUmaBack} example={UmaBackExample} />
 
-## UmaFront
+### UmaFront
+
 <ComponentDocs docs={jsdoc.jsdocUmaFront} example={UmaFrontExample} />
 
-## Umbra
+### Umbra
+
 <ComponentDocs docs={jsdoc.jsdocUmbra} example={UmbraExample} />
 
-## UmbraBack
+### UmbraBack
+
 <ComponentDocs docs={jsdoc.jsdocUmbraBack} example={UmbraBackExample} />
 
-## UmbraFront
+### UmbraFront
+
 <ComponentDocs docs={jsdoc.jsdocUmbraFront} example={UmbraFrontExample} />
 
-## Wahid
+### Wahid
+
 <ComponentDocs docs={jsdoc.jsdocWahid} example={WahidExample} />
 
-## WahidBack
+### WahidBack
+
 <ComponentDocs docs={jsdoc.jsdocWahidBack} example={WahidBackExample} />
 
-## WahidFront
+### WahidFront
+
 <ComponentDocs docs={jsdoc.jsdocWahidFront} example={WahidFrontExample} />
 
+## Constants
+
+This component family also exports the following helper objects:
+
+- `lineDrawings`: An object where the key is the design name and the value the full LineDrawing component
+- `lineDrawingsBack`: An object where the key is the design name and the value the back LineDrawing component
+- `lineDrawingsFront`: An object where the key is the design name and the value the front LineDrawing component
+
+### lineDrawings
+
+<ConstantDocs docs={cdoc.jsdoclineDrawings} />
+
+### lineDrawingsBack
+
+<ConstantDocs docs={cdoc.jsdoclineDrawingsBack} />
+
+### lineDrawingsFront
+
+<ConstantDocs docs={cdoc.jsdoclineDrawingsFront} />
+
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/link/readme.mdx

@@ -5,21 +5,23 @@ title: Link
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.link.mjs'
-import {
+import { AnchorLinkExample, CardLinkExample, LinkExample, SuccessLinkExample } from './_examples.js'
-  AnchorLinkExample,
-  CardLinkExample,
-  LinkExample,
-  SuccessLinkExample,
-} from './_examples.js'
-
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 :::tip Styling and link behaviour
+
 ##### Styling
+
 Due to the CSS reset used by Tailwind, one cannot assume links will be styled like you expect them to.
 Use a component from this For this and other reasons, Link components exist.
+
 ##### Link behaviour
+
 Withing a single-page application (SPA) --- like Docusaurus or NextJS and so on --- there is often a
 `Link` component provided by the framework that provides client-side routing so that clicking a link
 does not completely reload the page/application.
@@ -27,7 +29,7 @@ does not completely reload the page/application.
 You can pass such a component in some of FreeSewing components to use it for links rather than a traditional `<a>` tag.
 :::
 
-The __Link__ component family provides the following components:
+The **Link** component family provides the following components:
 
 - [AnchorLink](#anchorlink)
 - [CardLink](#cardlink)
@@ -35,15 +37,19 @@ The __Link__ component family provides the following components:
 - [SuccessLink](#successlink)
 
 ## AnchorLink
+
 <ComponentDocs docs={jsdoc.jsdocAnchorLink} example={AnchorLinkExample} />
 
 ## CardLink
+
 <ComponentDocs docs={jsdoc.jsdocCardLink} example={CardLinkExample} />
 
 ## Link
+
 <ComponentDocs docs={jsdoc.jsdocLink} example={LinkExample} />
 
 ## SuccessLink
+
 <ComponentDocs docs={jsdoc.jsdocSuccessLink} example={SuccessLinkExample} />
 
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/logo/readme.mdx

@@ -1,19 +1,23 @@
 ---
 title: Logo
 ---
+
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.logo.mjs'
 import { FreeSewingLogoExample } from './_examples.js'
 
-
 <DocusaurusDoc>
 
-The __Logo__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Logo** component family provides the following components:
 
 - [FreeSewingLogo](#freesewinglogo)
 
-## FreeSewingLogo
+### FreeSewingLogo
 
 :::tip Understanding the colors of the logo
 The logo will always be filled with `currentColor` which is a specific keyword
@@ -30,7 +34,7 @@ color, so it will be invisible.
 You can also set an explicit stroke color with the `stroke` prop, or control
 `currentColor` by setting the `className` prop.
 :::
+
 <ComponentDocs docs={jsdoc.jsdocFreeSewingLogo} example={FreeSewingLogoExample} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/markdown/readme.mdx

@@ -6,12 +6,22 @@ import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 
 <DocusaurusDoc>
 
+- [Components](#components)
+
+## Components
+
 The **Markdown** component family provides the following components:
 
-- [Markdown](#markdown): A re-export of [react-markdown][rm]
+- [Markdown](#markdown)
+
+### Markdown
+
+A re-export of [react-markdown][rm]
 
 :::tip
+
 #### Not FreeSewing code
+
 This component family only contains re-exports of code by other maintainers.\
 Since they are a dependency, we provide them as part of the <code>@freesewing/react</code> package for convenience.
 

sites/dev/docs/reference/packages/react/components/mini/readme.mdx

@@ -5,16 +5,15 @@ title: Mini
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.mini.mjs'
-import {
+import { MiniNoteExample, MiniTipExample, MiniWarningExample } from './_examples.js'
-  MiniNoteExample,
-  MiniTipExample,
-  MiniWarningExample,
-} from './_examples.js'
-
 
 <DocusaurusDoc>
 
-The __Mini__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Mini** component family provides the following components:
 
 - [MiniNote](#mininote)
 - [MiniTip](#minitip)
@@ -26,15 +25,16 @@ These components are typically used when a
 space.
 :::
 
+### MiniNote
 
-## MiniNote
 <ComponentDocs docs={jsdoc.jsdocMiniNote} example={MiniNoteExample} />
 
-## MiniTip
+### MiniTip
+
 <ComponentDocs docs={jsdoc.jsdocMiniTip} example={MiniTipExample} />
 
-## MiniWarning
+### MiniWarning
+
 <ComponentDocs docs={jsdoc.jsdocMiniWarning} example={MiniWarningExample} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/modal/readme.mdx

@@ -7,15 +7,18 @@ import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.modal.mjs'
 import { ModalWrapperExample } from './_examples.js'
 
-
 <DocusaurusDoc>
 
-The __Modal component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The \_\_Modal component family provides the following components:
 
 - [ModalWrapper](#modalwrapper)
 
-## ModalWrapper
+### ModalWrapper
+
 <ComponentDocs docs={jsdoc.jsdocModalWrapper} example={ModalWrapperExample} />
 
-
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx

@@ -9,16 +9,21 @@ import { NewsletterSignup, NewsletterUnsubscribe } from '@freesewing/react/compo
 
 <DocusaurusDoc>
 
-The __Newsletter__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Newsletter** component family provides the following components:
 
 - [NewsletterSignup](#newslettersignup)
 - [NewsletterUnsubscribe](#newsletterunsubscribe)
 
-## NewsletterSignup
+### NewsletterSignup
+
 <ComponentDocs docs={jsdoc.jsdocNewsletterSignup} example={NewsletterSignup} />
 
-## NewsletterUnsubscribe
+### NewsletterUnsubscribe
+
 <ComponentDocs docs={jsdoc.jsdocNewsletterUnsubscribe} example={NewsletterUnsubscribe} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/null/readme.mdx

@@ -2,7 +2,6 @@
 title: 'Null'
 ---
 
-
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.null.mjs'
@@ -10,12 +9,16 @@ import { Null } from '@freesewing/react/components/Null'
 
 <DocusaurusDoc>
 
-The __Null__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Null** component family provides the following components:
 
 - [Null](#null)
 
-## Null
+### Null
+
 <ComponentDocs docs={jsdoc.jsdocNull} example={Null} />
 
 </DocusaurusDoc>
-

sites/dev/docs/reference/packages/react/components/number/readme.mdx

@@ -1,19 +1,24 @@
 ---
 title: Number
 ---
+
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.number.mjs'
 import { NumberCircleExample } from './_examples.js'
 
-
 <DocusaurusDoc>
 
-The __Number__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Number** component family provides the following components:
 
 - [NumberCircle](#numbercircle)
 
-## NumberCircle
+### NumberCircle
+
 <ComponentDocs docs={jsdoc.jsdocNumberCircle} example={NumberCircleExample} />
 
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/patrons/readme.mdx

@@ -1,31 +1,39 @@
 ---
 title: Patrons
 ---
+
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
 import * as jsdoc from '@site/prebuild/jsdoc/components.patrons.mjs'
 import { Joost, Plea, PleaseSubscribe, Subscribe } from '@freesewing/react/components/Patrons'
 
-
 <DocusaurusDoc>
 
-The __Patrons__ component family provides the following components:
+- [Components](#components)
+
+## Components
+
+The **Patrons** component family provides the following components:
 
 - [Joost](#joost)
 - [Plea](#plea)
 - [PleaseSubscribe](#pleasesubscribe)
 - [Subscribe](#subscribe)
 
-## Joost
+### Joost
+
 <ComponentDocs docs={jsdoc.jsdocJoost} example={Joost} />
 
-## Plea
+### Plea
+
 <ComponentDocs docs={jsdoc.jsdocPlea} example={Plea} />
 
-## PleaseSubscribe
+### PleaseSubscribe
+
 <ComponentDocs docs={jsdoc.jsdocPleaseSubscribe} example={PleaseSubscribe} />
 
-## Subscribe
+### Subscribe
+
 <ComponentDocs docs={jsdoc.jsdocSubscribe} example={Subscribe} />
 
 </DocusaurusDoc>

sites/dev/docs/reference/packages/react/components/pattern/_examples.js

@@ -0,0 +1,26 @@
+import React from 'react'
+//import * as all from '@freesewing/react/components/Pattern'
+import { MiniNote } from '@freesewing/react/components/Mini'
+
+/*
+ * Use this to generate the docs content
+export const Test = () => {
+  const output = []
+  // list
+  output.push(...Object.keys(all).sort().map(c => `- [${c}](${c.toLowerCase()})`))
+
+  // docs
+  output.push(...Object.keys(all).sort().map(c => `
+## ${c}
+<ComponentDocs docs={jsdoc.jsdoc${c}} example={Example} />`))
+
+  return <pre>{output.join("\n")}</pre>
+}
+ */
+
+export const Example = () => (
+  <MiniNote>
+    Components in the Pattern family are tightly coupled with FreeSewing pattern structure.
+    Stand-alone examples are not provided as they are not very relevant.
+  </MiniNote>
+)

sites/dev/docs/reference/packages/react/components/pattern/readme.mdx

@@ -2,6 +2,126 @@
 title: Pattern
 ---
 
-:::note
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+import { ComponentDocs } from '@site/src/components/component-docs.js'
-:::
+import { FunctionDocs } from '@site/src/components/function-docs.js'
+import { ConstantDocs } from '@site/src/components/constant-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.pattern.mjs'
+import * as fndoc from '@site/prebuild/jsdoc/functions.pattern.mjs'
+import * as cdoc from '@site/prebuild/jsdoc/constants.pattern.mjs'
+import { Example } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+- [Constants](#constants)
+- [Functions](#functions)
+
+## Components
+
+The **Pattern** component family provides the following components:
+
+- [Circle](circle)
+- [Defs](defs)
+- [Grid](grid)
+- [Group](group)
+- [Part](part)
+- [Path](path)
+- [Pattern](pattern)
+- [Point](point)
+- [Snippet](snippet)
+- [Stack](stack)
+- [Svg](svg)
+- [Text](text)
+- [TextOnPath](textonpath)
+
+## Components
+
+### Circle
+
+<ComponentDocs docs={jsdoc.jsdocCircle} example={Example} />
+
+### Defs
+
+<ComponentDocs docs={jsdoc.jsdocDefs} example={Example} />
+
+### Grid
+
+<ComponentDocs docs={jsdoc.jsdocGrid} example={Example} />
+
+### Group
+
+<ComponentDocs docs={jsdoc.jsdocGroup} example={Example} />
+
+### Part
+
+<ComponentDocs docs={jsdoc.jsdocPart} example={Example} />
+
+### Path
+
+<ComponentDocs docs={jsdoc.jsdocPath} example={Example} />
+
+### Pattern
+
+<ComponentDocs docs={jsdoc.jsdocPattern} example={Example} />
+
+### Point
+
+<ComponentDocs docs={jsdoc.jsdocPoint} example={Example} />
+
+### Snippet
+
+<ComponentDocs docs={jsdoc.jsdocSnippet} example={Example} />
+
+### Stack
+
+<ComponentDocs docs={jsdoc.jsdocStack} example={Example} />
+
+### Svg
+
+<ComponentDocs docs={jsdoc.jsdocSvg} example={Example} />
+
+### Text
+
+<ComponentDocs docs={jsdoc.jsdocText} example={Example} />
+
+### TextOnPath
+
+<ComponentDocs docs={jsdoc.jsdocTextOnPath} example={Example} />
+
+## Constants
+
+The **Pattern** family exports the following constants:
+
+- [defaultComponents](defaultcomponents)
+
+### defaultComponents
+
+<ConstantDocs docs={cdoc.jsdocdefaultComponents} />
+
+## Functions
+
+The **Pattern** family exports the following functions:
+
+- [getId](getid)
+- [getProps](getprops)
+- [translateStrings](translatestrings)
+- [withinPartBounds](withinpartbounds)
+
+### getId
+
+<FunctionDocs docs={fndoc.jsdocgetId} />
+
+### getProps
+
+<FunctionDocs docs={fndoc.jsdocgetProps} />
+
+### translateStrings
+
+<FunctionDocs docs={fndoc.jsdoctranslateStrings} />
+
+### withinPartBounds
+
+<FunctionDocs docs={fndoc.jsdocwithinPartBounds} />
+
+</DocusaurusDoc>

sites/dev/scripts/prebuild.mjs

@@ -13,16 +13,22 @@ for (const file of components) {
 async function processJsdocFile(file) {
   const all = {
     components: {},
+    functions: {},
+    constants: {},
   }
   const data = await readJsonFile([...cdir, path.basename(file)])
   const family = path.basename(file.slice(0, -5))
   all.components[family] = []
   for (const entry of data) {
     // Is it a component?
-    const yes = entry.tags
+    const isComponent = entry.tags
       ? entry.tags.filter((tag) => tag.title === 'component').length > 0
       : false
-    if (yes)
+    // Is it a plain function?
+    const isFunction = entry.access === 'public' && Array.isArray(entry.returns) ? true : false
+    // Is it a constant?
+    const isConstant = !isFunction && entry.access === 'public' ? true : false
+    if (isComponent)
       all.components[family].push({
         family,
         name: entry.name,
@@ -33,6 +39,29 @@ async function processJsdocFile(file) {
         params: entry.params,
         return: entry.returns,
       })
+    else if (isFunction) {
+      if (typeof all.functions[family] === 'undefined') all.functions[family] = []
+      all.functions[family].push({
+        family,
+        name: entry.name,
+        file: relativePath(entry.meta.filename, entry.meta.path),
+        line: entry.meta.lineno,
+        importAs: `import { ${entry.name} } from "${importPath(entry.meta.path)}"`,
+        desc: entry.description,
+        params: entry.params,
+        return: entry.returns,
+      })
+    } else if (isConstant) {
+      if (typeof all.constants[family] === 'undefined') all.constants[family] = []
+      all.constants[family].push({
+        family,
+        name: entry.name,
+        file: relativePath(entry.meta.filename, entry.meta.path),
+        line: entry.meta.lineno,
+        importAs: `import { ${entry.name} } from "${importPath(entry.meta.path)}"`,
+        desc: entry.description,
+      })
+    }
   }
 
   return all
@@ -45,6 +74,22 @@ async function writeJsdocFiles(data) {
     )
     await writeFile(['prebuild', 'jsdoc', `components.${family}.mjs`], code)
   }
+  if (data.functions) {
+    for (const [family, d] of Object.entries(data.functions)) {
+      const code = d.map(
+        (entry) => `export const jsdoc${entry.name} = ${JSON.stringify(entry)}` + '\n'
+      )
+      await writeFile(['prebuild', 'jsdoc', `functions.${family}.mjs`], code)
+    }
+  }
+  if (data.constants) {
+    for (const [family, d] of Object.entries(data.constants)) {
+      const code = d.map(
+        (entry) => `export const jsdoc${entry.name} = ${JSON.stringify(entry)}` + '\n'
+      )
+      await writeFile(['prebuild', 'jsdoc', `constants.${family}.mjs`], code)
+    }
+  }
 }
 
 function importPath(folder) {

sites/dev/src/components/constant-docs.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Highlight } from '@freesewing/react/components/Highlight'
+import { Tabs, Tab } from '@freesewing/react/components/Tab'
+import { MiniNote } from '@freesewing/react/components/Mini'
+
+export const ConstantDocs = ({ docs }) => {
+  if (!docs) return <MiniNote>No docs passed in</MiniNote>
+  return (
+    <>
+      <p>{docs.desc}</p>
+      <Tabs tabs="Import, Source">
+        <Tab>
+          <p>
+            You can import the <code>{docs.name}</code> constant from the <b>{docs.family}</b>{' '}
+            family in the <code>@freesewing/react</code> package:
+          </p>
+          <Highlight language="js">{docs.importAs}</Highlight>
+        </Tab>
+        <Tab>
+          <p>
+            The <code>{docs.name}</code> function is defined{' '}
+            <a
+              href={`https://codeberg.org/freesewing/freesewing/src/branch/develop/${docs.file}#L${docs.line}`}
+            >
+              on <b>line {docs.line}</b> in <b>{docs.file}</b>
+            </a>
+            .
+          </p>
+        </Tab>
+      </Tabs>
+    </>
+  )
+}

sites/dev/src/components/function-docs.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import { Highlight } from '@freesewing/react/components/Highlight'
+import { Tabs, Tab } from '@freesewing/react/components/Tab'
+import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'
+import { IconButton } from '@freesewing/react/components/Button'
+import { MiniNote } from '@freesewing/react/components/Mini'
+
+export const FunctionDocs = ({ docs }) => {
+  if (!docs) return <MiniNote>No docs passed in</MiniNote>
+  console.log(docs)
+  return (
+    <>
+      <p>{docs.desc}</p>
+      <Tabs tabs="Import, Return type & Parameters, Source">
+        <Tab>
+          <p>
+            You can import the <code>{docs.name}</code> function from the <b>{docs.family}</b>{' '}
+            family in the <code>@freesewing/react</code> package:
+          </p>
+          <Highlight language="js">{docs.importAs}</Highlight>
+        </Tab>
+        <Tab>
+          {docs.params ? (
+            <p>
+              {' '}
+              The <code>{docs.name}</code> function returns type{' '}
+              <code>{docs.return.map((r) => r.type.names.join()).join('|')}</code> and takes the
+              following parameters:
+            </p>
+          ) : (
+            <MiniNote>This function does not take any parameters</MiniNote>
+          )}
+          {docs.params ? <ParamsTable docs={docs} /> : null}
+        </Tab>
+        <Tab>
+          <p>
+            The <code>{docs.name}</code> function is defined{' '}
+            <a
+              href={`https://codeberg.org/freesewing/freesewing/src/branch/develop/${docs.file}#L${docs.line}`}
+            >
+              on <b>line {docs.line}</b> in <b>{docs.file}</b>
+            </a>
+            .
+          </p>
+        </Tab>
+      </Tabs>
+    </>
+  )
+}
+
+const ParamsTable = ({ docs }) => (
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Description</th>
+        <th>Optional</th>
+        <th>Default Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {(docs.params || []).map((param, i) => (
+        <tr key={i}>
+          <td>{i + 1}</td>
+          <td>{param.name}</td>
+          <td>{param.type.names}</td>
+          <td>{param.description}</td>
+          <td>{param.optional ? 'yes' : 'no'}</td>
+          <td>
+            <code>
+              <DefaultParamValue value={param.defaultvalue} />
+            </code>
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+)
+
+const DefaultParamValue = ({ value }) => {
+  if (value === true) return 'true'
+  if (value === false) return 'false'
+  if (value === null) return 'null'
+  if (typeof value === 'undefined') return 'undefined'
+
+  return value
+}