[react] feat: Added docs for components/LineDrawing

packages/react/components/LineDrawing/aaron.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Aaron
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Aaron = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-2 -15 152 152" {...{ stroke, className }}>
@@ -24,9 +26,11 @@ export const Aaron = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Aaron
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const AaronFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-23 0 119 119" {...{ className }}>
@@ -37,9 +41,11 @@ export const AaronFront = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Aaron
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const AaronBack = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="51 0 119 119" {...{ className }}>
@@ -50,7 +56,7 @@ export const AaronBack = ({ className, stroke = 1 }) => (
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/albert.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Albert
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Albert = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-10 -2 146 146" {...{ className }}>
@@ -24,9 +26,11 @@ export const Albert = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Albert
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const AlbertFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-41 -2 145 145" {...{ className }}>
@@ -37,9 +41,11 @@ export const AlbertFront = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Albert
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const AlbertBack = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="74 0 74 119" {...props}>
@@ -50,7 +56,7 @@ export const AlbertBack = ({ className, stroke = 1 }) => (
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/bee.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.4
 /**
  * A linedrawing component for Bee
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Bee = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-20 0 120 120" {...{ stroke, className }}>
@@ -21,14 +23,20 @@ export const Bee = ({ className, stroke = 1 }) => (
 )
 
 /**
- * Front is the same
+ * A linedrawing component for the front of Bee
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BeeFront = Bee
 
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/bella.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Bella
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Bella = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="2 -30 155 155" {...{ stroke, className }}>
@@ -24,9 +26,11 @@ export const Bella = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Bella
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BellaFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-4 2 89 86" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const BellaFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Bella
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BellaBack = ({
   className = 'tw:w-full', // CSS classes to apply
@@ -54,7 +64,7 @@ export const BellaBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/benjamin.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.2
 /**
  * A linedrawing component for Benjamin
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Benjamin = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -44 138 138" {...{ className, stroke }}>
@@ -20,15 +22,21 @@ export const Benjamin = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * Front is the same
+ * A linedrawing component for the front of Benjamin
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BenjaminFront = Benjamin
 
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="folds"

packages/react/components/LineDrawing/bent.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.7
 /**
  * A linedrawing component for Bent
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Bent = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -70 210 210" {...{ stroke }}>
@@ -24,9 +26,11 @@ export const Bent = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Bent
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BentFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -1 103 103" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const BentFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Bent
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BentBack = ({
   className = 'tw:w-full', // CSS classes to apply
@@ -54,7 +64,7 @@ export const BentBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/bibi.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Bibi
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Bibi = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="2 -34 167 167" {...{ className }}>
@@ -24,9 +26,11 @@ export const Bibi = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Bibi
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BibiFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 85 90" {...{ className }}>
@@ -34,8 +38,14 @@ export const BibiFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Bibi
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BibiBack = ({
   className = 'tw:w-full', // CSS classes to apply
@@ -54,7 +64,7 @@ export const BibiBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/bob.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.15
 /**
  * A linedrawing component for Bob
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Bob = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-1 -26 138 138" {...{ className }}>
@@ -24,9 +26,11 @@ export const Bob = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Bob
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BobFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-10 1 87 87" {...{ className }}>
@@ -34,8 +38,14 @@ export const BobFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Bob
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BobBack = ({
   className = 'tw:w-full', // CSS classes to apply
@@ -54,7 +64,7 @@ export const BobBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/breanna.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.3
 /**
  * A linedrawing component for Breanna
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Breanna = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-5 0 106 106" {...{ className, stroke }}>
@@ -24,11 +26,13 @@ export const Breanna = ({ className, stroke = 1 }) => (
 )
 
 /**
- * A linedrawing component for Breanna
+ * A linedrawing component for the front of Breanna
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BreannaFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -15 92 92" {...{ className }}>
@@ -36,8 +40,14 @@ export const BreannaFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Breanna
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BreannaBack = ({
   className = 'tw:w-full', // CSS classes to apply
@@ -56,7 +66,7 @@ export const BreannaBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/brian.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Brian
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Brian = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -40 189 189" {...{ className }}>
@@ -24,9 +26,11 @@ export const Brian = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Brian
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BrianFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 93 93" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const BrianFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Brian
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BrianBack = ({
   className = 'tw:w-full', // CSS classes to apply
@@ -54,7 +64,7 @@ export const BrianBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/bruce.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Bruce
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Bruce = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-27 0 155 155" {...{ className, stroke }}>
@@ -26,9 +28,11 @@ export const Bruce = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Bruce
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BruceFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -10 101 101" {...{ className }}>
@@ -36,8 +40,14 @@ export const BruceFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Bruce
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const BruceBack = ({
   className = 'tw:w-full', // CSS classes to apply
@@ -56,7 +66,7 @@ export const BruceBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/carlita.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Carlita
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Carlita = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 194 175" {...{ className }}>
@@ -24,9 +26,11 @@ export const Carlita = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Carlita
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const CarlitaFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-35 4 168 168" {...{ className }}>
@@ -34,8 +38,14 @@ export const CarlitaFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Carlita
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const CarlitaBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const CarlitaBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/carlton.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Carlton
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Carlton = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 194 175" {...{ className, stroke }}>
@@ -24,9 +26,11 @@ export const Carlton = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Carlton
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const CarltonFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-35 4 168 168" {...{ className }}>
@@ -34,8 +38,14 @@ export const CarltonFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Carlton
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const CarltonBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const CarltonBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/charlie.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.8
 /**
  * A linedrawing component for Charlie
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Charlie = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 214 265" {...{ className }}>
@@ -24,9 +26,11 @@ export const Charlie = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Charlie
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const CharlieFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-70 0 265 265" {...{ className }}>
@@ -34,8 +38,14 @@ export const CharlieFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Charlie
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const CharlieBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const CharlieBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/cornelius.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.3
 /**
  * A linedrawing component for Cornelius
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Cornelius = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 320 218" {...{ className, stroke }}>
@@ -24,9 +26,11 @@ export const Cornelius = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Cornelius
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const CorneliusFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-30 0 215 215" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const CorneliusFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Cornelius
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const CorneliusBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const CorneliusBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/diana.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1
 /**
  * A linedrawing component for Diana
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Diana = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 282 111" {...{ className }}>
@@ -24,9 +26,11 @@ export const Diana = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front Diana
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const DianaFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -10 141 141" {...{ className }}>
@@ -34,8 +38,14 @@ export const DianaFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back Diana
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const DianaBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const DianaBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/florence.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.3
 /**
  * A linedrawing component for Florence
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Florence = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-1 -10 245 245" {...{ className }}>
@@ -20,13 +22,21 @@ export const Florence = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-// Front is the same
+/**
+ * A linedrawing component for the front of Florence
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
+ */
 export const FlorenceFront = Florence
 
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/florent.mjs

@@ -8,11 +8,13 @@ import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 const strokeScale = 1.3
 
 /**
- * A linedrawing component for Florence
+ * A linedrawing component for Florent
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Florent = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -30 236 236" {...{ className, stroke }}>
@@ -20,13 +22,21 @@ export const Florent = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-// Front is the same
+/**
+ * A linedrawing component for the front of Florent
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
+ */
 export const FlorentFront = Florent
 
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/gozer.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.3
 /**
  * A linedrawing component for Gozer
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Gozer = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 186 178" {...{ className }}>
@@ -24,9 +26,11 @@ export const Gozer = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Gozer
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const GozerFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-40 0 178 178" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const GozerFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Gozer
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const GozerBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const GozerBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="folds"

packages/react/components/LineDrawing/hi.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.3
 /**
  * A linedrawing component for Hi
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Hi = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -40 228 228" {...{ className }}>
@@ -20,13 +22,21 @@ export const Hi = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-// Front is the same
+/**
+ * A linedrawing component for the front of Hi
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
+ */
 export const HiFront = Hi
 
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="folds"

packages/react/components/LineDrawing/holmes.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.3
 /**
  * A linedrawing component for Holmes
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Holmes = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -30 260 260" {...{ className }}>
@@ -20,13 +22,21 @@ export const Holmes = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-// Front is the same
+/**
+ * A linedrawing component for the front of Holmes
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
+ */
 export const HolmesFront = Holmes
 
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/hortensia.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.7
 /**
  * A linedrawing component for Hortensia
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Hortensia = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-2 0 129 129" {...{ className }}>
@@ -20,7 +22,15 @@ export const Hortensia = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-// Front is the same
+/**
+ * A linedrawing component for the front of Hortensia
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
+ */
 export const HortensiaFront = Hortensia
 
 /*

packages/react/components/LineDrawing/huey.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.7
 /**
  * A linedrawing component for Huey
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Huey = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 334 218" {...{ className }}>
@@ -24,9 +26,11 @@ export const Huey = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for front of Huey
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const HueyFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-20 0 216 216" {...{ className }}>
@@ -54,7 +58,7 @@ export const HueyBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/hugo.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.7
 /**
  * A linedrawing component for Hugo
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Hugo = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 334 334" {...{ className, stroke }}>
@@ -24,9 +26,11 @@ export const Hugo = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Hugo
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const HugoFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-27 0 218 218" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const HugoFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Hugo
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const HugoBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const HugoBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/jane.mjs

@@ -8,11 +8,13 @@ import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
 const strokeScale = 0.5
 
 /**
- * A linedrawing component for Aaron
+ * A linedrawing component for Jane
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Jane = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 1052.0441 2409.9082" {...{ stroke, className }}>
@@ -22,11 +24,13 @@ export const Jane = ({ className, stroke = 1 }) => (
 )
 
 /**
- * A linedrawing component for the front of Aaron
+ * A linedrawing component for the front of Jane
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const JaneFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 1052.0441 1204.9541" {...{ className }}>
@@ -35,11 +39,13 @@ export const JaneFront = ({ className, stroke = 1 }) => (
 )
 
 /**
- * A linedrawing component for the front of Aaron
+ * A linedrawing component for the back of Jane
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const JaneBack = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 1052.0441 1204.9541" {...{ className }}>
@@ -50,7 +56,7 @@ export const JaneBack = ({ className, stroke = 1 }) => (
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="outline"

packages/react/components/LineDrawing/lucy.mjs

@@ -8,11 +8,13 @@ import { LineDrawingWrapper, regular } from './shared.mjs'
 const strokeScale = 0.9
 
 /**
- * A linedrawing component for Hugo
+ * A linedrawing component for Lucy
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Lucy = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -30 202 202" {...{ className }}>
@@ -20,13 +22,21 @@ export const Lucy = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-// Front is the same
+/**
+ * A linedrawing component for the front of Lucy
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
+ */
 export const LucyFront = Lucy
 
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="outline"

packages/react/components/LineDrawing/lumina.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.7
 /**
  * A linedrawing component for Lumina
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Lumina = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 187 117" {...{ className, stroke }}>
@@ -24,9 +26,11 @@ export const Lumina = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Lumina
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const LuminaFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-20 0 127 127" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const LuminaFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Lumina
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const LuminaBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const LuminaBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/lumira.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.2
 /**
  * A linedrawing component for Lumira
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Lumira = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 187 220" {...{ className, stroke }}>
@@ -24,9 +26,11 @@ export const Lumira = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Lumira
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const LumiraFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-60 0 220 220" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const LumiraFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Lumira
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const LumiraBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const LumiraBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/lunetius.mjs

@@ -10,9 +10,11 @@ const strokeScale = 1.5
 /**
  * A linedrawing component for Lunetius
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Lunetius = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-60 0 294 294" {...{ className }}>
@@ -20,13 +22,21 @@ export const Lunetius = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-// Front is the same
+/**
+ * A linedrawing component for the front of Lunetius
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
+ */
 export const LunetiusFront = Lunetius
 
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/missing.mjs

@@ -4,9 +4,11 @@ import { LineDrawingWrapper, regular } from './shared.mjs'
 /**
  * A linedrawing component for designs that do not (yet) have their own
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const MissingLinedrawing = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 100 100" {...{ className }}>

packages/react/components/LineDrawing/noble.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.4
 /**
  * A linedrawing component for Noble
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Noble = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 152 83" {...{ className, stroke }}>
@@ -24,9 +26,11 @@ export const Noble = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Noble
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const NobleFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-5 0 83 83" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const NobleFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Noble
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const NobleBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const NobleBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/simon.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.15
 /**
  * A linedrawing component for Simon
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Simon = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 157 121" {...{ className, stroke }}>
@@ -24,9 +26,11 @@ export const Simon = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Simon
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const SimonFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-20 0 122 122" {...{ className, stroke }}>
@@ -34,8 +38,14 @@ export const SimonFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Simon
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const SimonBack = ({
   className = 'w-64', // CSS classes to apply

packages/react/components/LineDrawing/teagan.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Teagan
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Teagan = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 170 90" {...{ className }}>
@@ -24,9 +26,11 @@ export const Teagan = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Teagan
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const TeaganFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-2 0 90 90" {...{ className }}>
@@ -34,8 +38,14 @@ export const TeaganFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Teagan
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const TeaganBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const TeaganBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/tristan.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Tristan
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Tristan = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 152 102" {...{ className }}>
@@ -24,9 +26,11 @@ export const Tristan = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Tristan
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const TristanFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-15 0 102 102" {...{ className }}>
@@ -34,8 +38,14 @@ export const TristanFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Tristan
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const TristanBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const TristanBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="folds"

packages/react/components/LineDrawing/uma.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Uma
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Uma = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
@@ -24,9 +26,11 @@ export const Uma = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Uma
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const UmaFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -15 105 105" {...{ className }}>
@@ -34,8 +38,14 @@ export const UmaFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Uma
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const UmaBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const UmaBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/umbra.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Umbra
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Umbra = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
@@ -24,9 +26,11 @@ export const Umbra = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Umbra
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const UmbraFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 -15 105 105" {...{ className }}>
@@ -34,8 +38,14 @@ export const UmbraFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
-/*
+/**
- * React component for the back
+ * A linedrawing component for the back of Umbra
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const UmbraBack = ({
   className = 'w-64', // CSS classes to apply
@@ -54,7 +64,7 @@ export const UmbraBack = ({
 /*
  * SVG elements for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     <path
       key="stitches"

packages/react/components/LineDrawing/wahid.mjs

@@ -10,9 +10,11 @@ const strokeScale = 0.5
 /**
  * A linedrawing component for Wahid
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const Wahid = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="0 0 162 126" {...{ className }}>
@@ -24,9 +26,11 @@ export const Wahid = ({ className, stroke = 1 }) => (
 /**
  * A linedrawing component for the front of Wahid
  *
- * @param {object} props - All React props
+ * @component
+ * @param {object} props - All component props
  * @param {string} props.className - Any CSS classes to apply
  * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
  */
 export const WahidFront = ({ className, stroke = 1 }) => (
   <LineDrawingWrapper viewBox="-20 0 126 126" {...{ className }}>
@@ -34,6 +38,15 @@ export const WahidFront = ({ className, stroke = 1 }) => (
   </LineDrawingWrapper>
 )
 
+/**
+ * A linedrawing component for the back of Wahid
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ * @returns {JSX.Element}
+ */
 export const WahidBack = ({
   className = 'w-64', // CSS classes to apply
   stroke = 1, // Stroke width to use
@@ -68,7 +81,7 @@ const defs = (
 /*
  * React component for the front
  */
-export const Front = ({ stroke }) => (
+const Front = ({ stroke }) => (
   <>
     {defs}
     <path

packages/react/mkdocs.sh

@@ -18,3 +18,4 @@ jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/co
 jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json
 jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json
 jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/components/layout.json
+jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/react/components/linedrawing.json

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

@@ -0,0 +1,166 @@
+import React from 'react'
+import {
+  lineDrawings,
+  lineDrawingsBack,
+  lineDrawingsFront,
+} from '@freesewing/react/components/LineDrawing'
+import { capitalize } from '@freesewing/utils'
+
+/*
+ * Use this to auto-generate content in this file
+export const Generate = () => {
+  const output = []
+  // Imports (for readme.mdx)
+  output.push(
+    `import {`,
+    ...Object.keys(lineDrawings).map(d => `  ${capitalize(d)}Example,`),
+    ...Object.keys(lineDrawingsFront).map(d => `  ${capitalize(d)}FrontExample,`),
+    ...Object.keys(lineDrawingsBack).map(d => `  ${capitalize(d)}BackExample,`),
+    `} from './_examples.js'`,
+  )
+
+  // List (for readme.mdx)
+  output.push(
+    `\n\n`,
+    ...[
+      ...Object.keys(lineDrawings).map(d => `  - [${capitalize(d)}](#${d})`),
+      ...Object.keys(lineDrawingsFront).map(d => `  - [${capitalize(d)}Front](#${d}front)`),
+      ...Object.keys(lineDrawingsBack).map(d => `  - [${capitalize(d)}Back](#${d}back)`),
+    ].sort()
+  )
+
+  // Docs (for readme.mdx)
+  output.push(
+    `\n\n`,
+    ...[
+      ...Object.keys(lineDrawings).map(d => `## ${capitalize(d)}\n<ComponentDocs docs={jsdoc.jsdoc${capitalize(d)}} example={${capitalize(d)}Example} />\n`),
+      ...Object.keys(lineDrawingsFront).map(d => `## ${capitalize(d)}Front\n<ComponentDocs docs={jsdoc.jsdoc${capitalize(d)}Front} example={${capitalize(d)}FrontExample} />\n`),
+      ...Object.keys(lineDrawingsBack).map(d => `## ${capitalize(d)}Back\n<ComponentDocs docs={jsdoc.jsdoc${capitalize(d)}Back} example={${capitalize(d)}BackExample} />\n`),
+    ].sort()
+  )
+
+  // Exports (for _examples.js)
+  output.push(
+    [
+      ...Object.keys(lineDrawings).map(d => `export const ${capitalize(d)}Example = () => <LineDrawingExample design="${d}" />`),
+      ...Object.keys(lineDrawingsFront).map(d => `export const ${capitalize(d)}FrontExample = () => <LineDrawingExample design="${d}" side="front" />`),
+      ...Object.keys(lineDrawingsBack).map(d => `export const ${capitalize(d)}BackExample = () => <LineDrawingExample design="${d}" side="back" />`),
+    ].sort().join("\n")
+  )
+
+  return <pre>{output.join("\n")}</pre>
+}
+ */
+
+const NotFound = () => <p>No such linedrawing</p>
+
+const LineDrawingExample = ({ design, side=false }) => {
+  let Component = NotFound
+  if (side === 'back' && lineDrawingsBack[design]) Component = lineDrawingsBack[design]
+  else if (side === 'front' && lineDrawingsFront[design]) Component = lineDrawingsFront[design]
+  else if (lineDrawings[design]) Component = lineDrawings[design]
+
+  return <Component {...{ side, design }} />
+}
+
+export const AaronBackExample = () => <LineDrawingExample design="aaron" side="back" />
+export const AaronExample = () => <LineDrawingExample design="aaron" />
+export const AaronFrontExample = () => <LineDrawingExample design="aaron" side="front" />
+export const AlbertExample = () => <LineDrawingExample design="albert" />
+export const AlbertFrontExample = () => <LineDrawingExample design="albert" side="front" />
+export const BeeExample = () => <LineDrawingExample design="bee" />
+export const BeeFrontExample = () => <LineDrawingExample design="bee" side="front" />
+export const BellaBackExample = () => <LineDrawingExample design="bella" side="back" />
+export const BellaExample = () => <LineDrawingExample design="bella" />
+export const BellaFrontExample = () => <LineDrawingExample design="bella" side="front" />
+export const BenjaminExample = () => <LineDrawingExample design="benjamin" />
+export const BenjaminFrontExample = () => <LineDrawingExample design="benjamin" side="front" />
+export const BentBackExample = () => <LineDrawingExample design="bent" side="back" />
+export const BentExample = () => <LineDrawingExample design="bent" />
+export const BentFrontExample = () => <LineDrawingExample design="bent" side="front" />
+export const BibiBackExample = () => <LineDrawingExample design="bibi" side="back" />
+export const BibiExample = () => <LineDrawingExample design="bibi" />
+export const BibiFrontExample = () => <LineDrawingExample design="bibi" side="front" />
+export const BobBackExample = () => <LineDrawingExample design="bob" side="back" />
+export const BobExample = () => <LineDrawingExample design="bob" />
+export const BobFrontExample = () => <LineDrawingExample design="bob" side="front" />
+export const BreannaBackExample = () => <LineDrawingExample design="breanna" side="back" />
+export const BreannaExample = () => <LineDrawingExample design="breanna" />
+export const BreannaFrontExample = () => <LineDrawingExample design="breanna" side="front" />
+export const BrianBackExample = () => <LineDrawingExample design="brian" side="back" />
+export const BrianExample = () => <LineDrawingExample design="brian" />
+export const BrianFrontExample = () => <LineDrawingExample design="brian" side="front" />
+export const BruceBackExample = () => <LineDrawingExample design="bruce" side="back" />
+export const BruceExample = () => <LineDrawingExample design="bruce" />
+export const BruceFrontExample = () => <LineDrawingExample design="bruce" side="front" />
+export const CarlitaBackExample = () => <LineDrawingExample design="carlita" side="back" />
+export const CarlitaExample = () => <LineDrawingExample design="carlita" />
+export const CarlitaFrontExample = () => <LineDrawingExample design="carlita" side="front" />
+export const CarltonBackExample = () => <LineDrawingExample design="carlton" side="back" />
+export const CarltonExample = () => <LineDrawingExample design="carlton" />
+export const CarltonFrontExample = () => <LineDrawingExample design="carlton" side="front" />
+export const CathrinBackExample = () => <LineDrawingExample design="cathrin" side="back" />
+export const CathrinExample = () => <LineDrawingExample design="cathrin" />
+export const CathrinFrontExample = () => <LineDrawingExample design="cathrin" side="front" />
+export const CharlieBackExample = () => <LineDrawingExample design="charlie" side="back" />
+export const CharlieExample = () => <LineDrawingExample design="charlie" />
+export const CharlieFrontExample = () => <LineDrawingExample design="charlie" side="front" />
+export const CorneliusBackExample = () => <LineDrawingExample design="cornelius" side="back" />
+export const CorneliusExample = () => <LineDrawingExample design="cornelius" />
+export const CorneliusFrontExample = () => <LineDrawingExample design="cornelius" side="front" />
+export const DianaBackExample = () => <LineDrawingExample design="diana" side="back" />
+export const DianaExample = () => <LineDrawingExample design="diana" />
+export const DianaFrontExample = () => <LineDrawingExample design="diana" side="front" />
+export const FlorenceExample = () => <LineDrawingExample design="florence" />
+export const FlorenceFrontExample = () => <LineDrawingExample design="florence" side="front" />
+export const FlorentExample = () => <LineDrawingExample design="florent" />
+export const FlorentFrontExample = () => <LineDrawingExample design="florent" side="front" />
+export const GozerBackExample = () => <LineDrawingExample design="gozer" side="back" />
+export const GozerExample = () => <LineDrawingExample design="gozer" />
+export const GozerFrontExample = () => <LineDrawingExample design="gozer" side="front" />
+export const HiExample = () => <LineDrawingExample design="hi" />
+export const HiFrontExample = () => <LineDrawingExample design="hi" side="front" />
+export const HolmesExample = () => <LineDrawingExample design="holmes" />
+export const HolmesFrontExample = () => <LineDrawingExample design="holmes" side="front" />
+export const HortensiaExample = () => <LineDrawingExample design="hortensia" />
+export const HortensiaFrontExample = () => <LineDrawingExample design="hortensia" side="front" />
+export const HueyBackExample = () => <LineDrawingExample design="huey" side="back" />
+export const HueyExample = () => <LineDrawingExample design="huey" />
+export const HueyFrontExample = () => <LineDrawingExample design="huey" side="front" />
+export const HugoBackExample = () => <LineDrawingExample design="hugo" side="back" />
+export const HugoExample = () => <LineDrawingExample design="hugo" />
+export const HugoFrontExample = () => <LineDrawingExample design="hugo" side="front" />
+export const JaneBackExample = () => <LineDrawingExample design="jane" side="back" />
+export const JaneExample = () => <LineDrawingExample design="jane" />
+export const JaneFrontExample = () => <LineDrawingExample design="jane" side="front" />
+export const LucyExample = () => <LineDrawingExample design="lucy" />
+export const LucyFrontExample = () => <LineDrawingExample design="lucy" side="front" />
+export const LuminaBackExample = () => <LineDrawingExample design="lumina" side="back" />
+export const LuminaExample = () => <LineDrawingExample design="lumina" />
+export const LuminaFrontExample = () => <LineDrawingExample design="lumina" side="front" />
+export const LumiraBackExample = () => <LineDrawingExample design="lumira" side="back" />
+export const LumiraExample = () => <LineDrawingExample design="lumira" />
+export const LumiraFrontExample = () => <LineDrawingExample design="lumira" side="front" />
+export const LunetiusExample = () => <LineDrawingExample design="lunetius" />
+export const LunetiusFrontExample = () => <LineDrawingExample design="lunetius" side="front" />
+export const NobleBackExample = () => <LineDrawingExample design="noble" side="back" />
+export const NobleExample = () => <LineDrawingExample design="noble" />
+export const NobleFrontExample = () => <LineDrawingExample design="noble" side="front" />
+export const SimonBackExample = () => <LineDrawingExample design="simon" side="back" />
+export const SimonExample = () => <LineDrawingExample design="simon" />
+export const SimonFrontExample = () => <LineDrawingExample design="simon" side="front" />
+export const TeaganBackExample = () => <LineDrawingExample design="teagan" side="back" />
+export const TeaganExample = () => <LineDrawingExample design="teagan" />
+export const TeaganFrontExample = () => <LineDrawingExample design="teagan" side="front" />
+export const TristanBackExample = () => <LineDrawingExample design="tristan" side="back" />
+export const TristanExample = () => <LineDrawingExample design="tristan" />
+export const TristanFrontExample = () => <LineDrawingExample design="tristan" side="front" />
+export const UmaBackExample = () => <LineDrawingExample design="uma" side="back" />
+export const UmaExample = () => <LineDrawingExample design="uma" />
+export const UmaFrontExample = () => <LineDrawingExample design="uma" side="front" />
+export const UmbraBackExample = () => <LineDrawingExample design="umbra" side="back" />
+export const UmbraExample = () => <LineDrawingExample design="umbra" />
+export const UmbraFrontExample = () => <LineDrawingExample design="umbra" side="front" />
+export const WahidBackExample = () => <LineDrawingExample design="wahid" side="back" />
+export const WahidExample = () => <LineDrawingExample design="wahid" />
+export const WahidFrontExample = () => <LineDrawingExample design="wahid" side="front" />

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

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