diff --git a/packages/react/components/Pattern/index.mjs b/packages/react/components/Pattern/index.mjs
index 675248d6e9d..e445cf58e62 100644
--- a/packages/react/components/Pattern/index.mjs
+++ b/packages/react/components/Pattern/index.mjs
@@ -1,7 +1,4 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// eslint-disable-next-line no-unused-vars
 import React, { forwardRef } from 'react'
-// Components that can be swizzled
 import { Svg as DefaultSvg } from './svg.mjs'
 import { Defs as DefaultDefs } from './defs.mjs'
 import { Group as DefaultGroup } from './group.mjs'
@@ -13,11 +10,12 @@ import { Path as DefaultPath } from './path.mjs'
 import { Grid as DefaultGrid } from './grid.mjs'
 import { Text as DefaultText, TextOnPath as DefaultTextOnPath } from './text.mjs'
 import { Circle as DefaultCircle } from './circle.mjs'
+import { getId, getProps, withinPartBounds, translateStrings } from './utils.mjs'
 
 /*
- * Allow people to swizzle these components
+ * Allow people to override these components
  */
-export const defaultPatternComponents = {
+const defaultComponents = {
   Svg: DefaultSvg,
   Defs: DefaultDefs,
   Group: DefaultGroup,
@@ -32,59 +30,71 @@ export const defaultPatternComponents = {
   Circle: DefaultCircle,
 }
 
-export const Pattern = forwardRef(
-  (
-    {
-      renderProps = false,
-      t = (string) => string,
-      components = {},
-      children = false,
-      className = 'freesewing pattern',
-    },
-    ref
-  ) => {
-    if (!renderProps) return null
+/*
+ * The pattern component
+ * FIXME: document props
+ */
+const Pattern = forwardRef((props, ref) => {
+  if (!props.renderProps) return null
 
-    // Merge default and swizzled components
-    components = {
-      ...defaultPatternComponents,
-      ...components,
-    }
+  // Destructure props
+  const {
+    renderProps = false,
+    t = (string) => string,
+    children = false,
+    className = 'freesewing pattern',
+    components = {},
+  } = props
 
-    const { Svg, Defs, Stack, Group } = components
-
-    const optionalProps = {}
-    if (className) optionalProps.className = className
-
-    return (
-      <Svg
-        viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
-        embed={renderProps.settings.embed}
-        {...renderProps}
-        {...optionalProps}
-        ref={ref}
-      >
-        <Defs {...renderProps} />
-        <style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
-          renderProps.svg.style
-        }`}</style>
-        <Group>
-          {children
-            ? children
-            : Object.keys(renderProps.stacks).map((stackName) => (
-                <Stack
-                  key={stackName}
-                  stackName={stackName}
-                  stack={renderProps.stacks[stackName]}
-                  settings={renderProps.settings}
-                  components={components}
-                  t={t}
-                />
-              ))}
-        </Group>
-      </Svg>
-    )
+  // Merge default and swizzled components
+  const mergedComponents = {
+    ...defaultComponents,
+    ...components,
   }
-)
 
-Pattern.displayName = 'Pattern'
+  const { Svg, Defs, Stack, Group } = mergedComponents
+
+  const optionalProps = {}
+  if (className) optionalProps.className = className
+
+  return (
+    <Svg
+      viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
+      embed={renderProps.settings.embed}
+      {...renderProps}
+      {...optionalProps}
+      ref={ref}
+    >
+      <Defs {...renderProps} />
+      <style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
+        renderProps.svg.style
+      }`}</style>
+      <Group>
+        {children
+          ? children
+          : Object.keys(renderProps.stacks).map((stackName) => (
+              <Stack
+                key={stackName}
+                stackName={stackName}
+                stack={renderProps.stacks[stackName]}
+                settings={renderProps.settings}
+                components={mergedComponents}
+                t={t}
+              />
+            ))}
+      </Group>
+    </Svg>
+  )
+})
+
+export {
+  // utils
+  getId,
+  getProps,
+  withinPartBounds,
+  translateStrings,
+  // default components
+  defaultComponents,
+  // The Pattern component itself
+  Pattern,
+}
diff --git a/packages/react/components/Pattern/utils.mjs b/packages/react/components/Pattern/utils.mjs
index fde6a025584..06ec4459141 100644
--- a/packages/react/components/Pattern/utils.mjs
+++ b/packages/react/components/Pattern/utils.mjs
@@ -1,5 +1,3 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// eslint-disable-next-line no-unused-vars
 import React from 'react'
 
 export const getProps = (obj) => {
diff --git a/packages/react/components/Xray/index.mjs b/packages/react/components/Xray/index.mjs
index a4f73b11791..318eb44525e 100644
--- a/packages/react/components/Xray/index.mjs
+++ b/packages/react/components/Xray/index.mjs
@@ -1,72 +1,66 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// eslint-disable-next-line no-unused-vars
 import React, { forwardRef } from 'react'
-import { defaultPatternComponents } from '../pattern/index.mjs'
-// Components that can be swizzled
+import { defaultComponents as patternComponents } from '@freesewing/react/components/Pattern'
 import { PointXray } from './point.mjs'
 import { PathXray } from './path.mjs'
+
 /*
- * Allow people to swizzle these components
+ * Allow people to override these components
  */
-export const defaultPatternXrayComponents = {
-  ...defaultPatternComponents,
+const defaultComponents = {
   Point: PointXray,
   Path: PathXray,
 }
 
-export const PatternXray = forwardRef(
-  (
-    {
-      renderProps = false,
-      t = (string) => string,
-      components = {},
-      children = false,
-      className = 'freesewing pattern',
-    },
-    ref
-  ) => {
-    if (!renderProps) return null
+export const Xray = forwardRef((props, ref) => {
+  if (!props.renderProps) return null
 
-    // Merge default and swizzled components
-    components = {
-      ...defaultPatternXrayComponents,
-      ...components,
-    }
+  // desctructure props
+  const {
+    renderProps = false,
+    t = (string) => string,
+    children = false,
+    className = 'freesewing pattern',
+    components = {},
+  } = props
 
-    const { Svg, Defs, Stack, Group } = components
-
-    const optionalProps = {}
-    if (className) optionalProps.className = className
-
-    return (
-      <Svg
-        viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
-        embed={renderProps.settings.embed}
-        {...renderProps}
-        {...optionalProps}
-        ref={ref}
-      >
-        <Defs {...renderProps} />
-        <style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
-          renderProps.svg.style
-        }`}</style>
-        <Group>
-          {children
-            ? children
-            : Object.keys(renderProps.stacks).map((stackName) => (
-                <Stack
-                  key={stackName}
-                  stackName={stackName}
-                  stack={renderProps.stacks[stackName]}
-                  settings={renderProps.settings}
-                  components={components}
-                  t={t}
-                />
-              ))}
-        </Group>
-      </Svg>
-    )
+  // Merge pattern, default, and custom components
+  const mergedComponents = {
+    ...patternComponents,
+    ...defaultComponents,
+    ...components,
   }
-)
 
-PatternXray.displayName = 'PatternXray'
+  const { Svg, Defs, Stack, Group } = mergedComponents
+
+  const optionalProps = {}
+  if (className) optionalProps.className = className
+
+  return (
+    <Svg
+      viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
+      embed={renderProps.settings.embed}
+      {...renderProps}
+      {...optionalProps}
+      ref={ref}
+    >
+      <Defs {...renderProps} />
+      <style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
+        renderProps.svg.style
+      }`}</style>
+      <Group>
+        {children
+          ? children
+          : Object.keys(renderProps.stacks).map((stackName) => (
+              <Stack
+                key={stackName}
+                stackName={stackName}
+                stack={renderProps.stacks[stackName]}
+                settings={renderProps.settings}
+                components={mergedComponents}
+                t={t}
+              />
+            ))}
+      </Group>
+    </Svg>
+  )
+})
diff --git a/packages/react/components/Xray/path.mjs b/packages/react/components/Xray/path.mjs
index 69193310fab..449426019b0 100644
--- a/packages/react/components/Xray/path.mjs
+++ b/packages/react/components/Xray/path.mjs
@@ -1,8 +1,8 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
 import React from 'react'
-// Components
-import { Path } from '../pattern/path.mjs'
-import { getProps } from '../pattern/utils.mjs'
+import {
+  getProps,
+  defaultComponents as patternComponents,
+} from '@freesewing/react/components/Pattern'
 
 const coords = (point) => `${point.x},${point.y}`
 
@@ -10,7 +10,7 @@ const Cp = ({ at }) => (
   <circle cx={at.x} cy={at.y} r={0.75} className="stroke-md opacity-50  text-warning" />
 )
 
-const Xray = ({ path }) => {
+export const Xray = ({ path, components }) => {
   const output = []
   let prev
   let i = 0
@@ -38,9 +38,18 @@ const Xray = ({ path }) => {
   return output
 }
 
-export const PathXray = ({ stackName, pathName, part, path, settings, components, t }) => (
-  <>
-    <Xray path={path} />
-    <Path {...{ stackName, pathName, path, part, settings, components, t }} />
-  </>
-)
+export const PathXray = ({ stackName, pathName, part, path, settings, components, t }) => {
+  /*
+   * We use the Path component from Pattern here
+   * If we would extract Path from the components passed down,
+   * we'd create a recursion loop as the Path we call below
+   * would be this very PathXray component.
+   */
+  const { Path } = patternComponents
+  return (
+    <g>
+      <Xray path={path} />
+      <Path {...{ stackName, pathName, path, part, settings, components, t }} />
+    </g>
+  )
+}
diff --git a/packages/react/components/Xray/point.mjs b/packages/react/components/Xray/point.mjs
index 4d92370c99f..3e601cf4261 100644
--- a/packages/react/components/Xray/point.mjs
+++ b/packages/react/components/Xray/point.mjs
@@ -1,12 +1,20 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
 import React from 'react'
-// Components
-import { Point } from '../pattern/point.mjs'
-import { withinPartBounds } from '../pattern/utils.mjs'
+import {
+  withinPartBounds,
+  defaultComponents as patternComponents,
+} from '@freesewing/react/components/Pattern'
 
 export const PointXray = ({ stackName, pointName, part, point, settings, components, t }) => {
   // Don't include parts outside the part bounding box
   if (!withinPartBounds(point, part)) return null
+
+  /*
+   * We use the Point component from Pattern here
+   * If we would extract Point from the components passed down,
+   * we'd create a recursion loop as the Point we call below
+   * would be this very PointXray component.
+   */
+  const { Point } = patternComponents
   return (
     <>
       <Point {...{ stackName, pointName, part, point, settings, components, t }} />