@opentrons/components 0.1.7-alpha.0 → 0.2.0-alpha.0

package/src/hardware-sim/Module/Module.stories.tsx

@@ -1,21 +1,24 @@
 import {
+  ABSORBANCE_READER_V1,
   fixture96Plate,
-  getModuleDef2,
+  FLEX_STACKER_MODULE_V1,
+  getModuleDef,
+  HEATERSHAKER_MODULE_V1,
+  MAGNETIC_BLOCK_V1,
   MAGNETIC_MODULE_V1,
   MAGNETIC_MODULE_V2,
   TEMPERATURE_MODULE_V1,
   TEMPERATURE_MODULE_V2,
   THERMOCYCLER_MODULE_V1,
   THERMOCYCLER_MODULE_V2,
-  HEATERSHAKER_MODULE_V1,
-  MAGNETIC_BLOCK_V1,
 } from '@opentrons/shared-data'
+
 import { LabwareRender } from '../Labware'
 import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
 import { Module as ModuleComponent } from './'
 
-import type { Story, Meta } from '@storybook/react'
-import type { LabwareDefinition2, ModuleModel } from '@opentrons/shared-data'
+import type { Meta, Story } from '@storybook/react'
+import type { LabwareDefinition, ModuleModel } from '@opentrons/shared-data'
 
 const moduleModels: ModuleModel[] = [
   TEMPERATURE_MODULE_V2,
@@ -26,8 +29,23 @@ const moduleModels: ModuleModel[] = [
   MAGNETIC_MODULE_V2,
   HEATERSHAKER_MODULE_V1,
   MAGNETIC_BLOCK_V1,
+  ABSORBANCE_READER_V1,
+  FLEX_STACKER_MODULE_V1,
 ]
 
+const moduleModelOptions = {
+  'Temperature Module V2': TEMPERATURE_MODULE_V2,
+  'Temperature Module V1': TEMPERATURE_MODULE_V1,
+  'Thermocycler Module V1': THERMOCYCLER_MODULE_V1,
+  'Thermocycler Module V2': THERMOCYCLER_MODULE_V2,
+  'Magnetic Module V1': MAGNETIC_MODULE_V1,
+  'Magnetic Module V2': MAGNETIC_MODULE_V2,
+  'Heater-Shaker Module V1': HEATERSHAKER_MODULE_V1,
+  'Magnetic Block V1': MAGNETIC_BLOCK_V1,
+  'Absorbance Reader V1': ABSORBANCE_READER_V1,
+  'Flex Stacker Module V1': FLEX_STACKER_MODULE_V1,
+}
+
 export default {
   title: 'Library/Molecules/Simulation/Module',
 } as Meta
@@ -38,53 +56,66 @@ const Template: Story<{
   hasLabware: boolean
   innerProps: {}
 }> = args => {
+  // Add null check and default to first module model if undefined
+  const moduleModel = args.model || moduleModels[0]
+
   return (
     <RobotCoordinateSpace height="100vh" width="100vw" viewBox="0 -50 200 320">
       <ModuleComponent
-        def={getModuleDef2(args.model)}
+        def={getModuleDef(moduleModel)}
         x={0}
         y={0}
         innerProps={args.innerProps}
         orientation={args.orientation}
+        targetSlotId={null}
+        targetDeckId={null}
+        childrenPositioningMode="offsetToSlot"
       >
         {args.hasLabware ? (
-          <LabwareRender definition={fixture96Plate as LabwareDefinition2} />
+          <LabwareRender
+            definition={fixture96Plate as LabwareDefinition}
+            positioningMode="passThrough"
+          />
         ) : null}
       </ModuleComponent>
     </RobotCoordinateSpace>
   )
 }
+
 export const Module = Template.bind({})
+Module.args = {
+  model: TEMPERATURE_MODULE_V2,
+  orientation: 'left',
+  hasLabware: false,
+  innerProps: {
+    lidMotorState: 'open',
+    blockTargetTemp: 90,
+    targetTemperature: 4,
+    targetTemp: 40,
+  },
+}
+
 Module.argTypes = {
   model: {
     control: {
       type: 'select',
-      options: moduleModels,
     },
-    defaultValue: moduleModels[0],
+    options: moduleModelOptions,
   },
   orientation: {
     control: {
       type: 'select',
-      options: ['left', 'right'],
     },
-    defaultValue: 'left',
+    options: ['left', 'right'],
   },
   hasLabware: {
     control: {
       type: 'boolean',
     },
-    defaultValue: false,
   },
   innerProps: {
     control: {
       type: 'object',
     },
-    defaultValue: {
-      lidMotorState: 'open',
-      blockTargetTemp: 90,
-      targetTemperature: 4,
-      targetTemp: 40,
-    },
   },
 }

package/src/hardware-sim/Module/ModuleTag.tsx

@@ -1,9 +1,9 @@
 import {
-  RobotCoordsForeignDiv,
+  ALIGN_CENTER,
   C_MED_LIGHT_GRAY,
-  SPACING_1,
   JUSTIFY_CENTER,
-  ALIGN_CENTER,
+  RobotCoordsForeignDiv,
+  SPACING_1,
 } from '../../'
 
 import type { ReactNode } from 'react'

package/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN1.tsx

@@ -1,4 +1,5 @@
 import { COLORS } from '../../../helix-design-system'
+
 interface ThermocyclerGEN1Props {
   lidMotorState: 'open' | 'closed'
   ledLightColor: string

package/src/hardware-sim/Module/Thermocycler/index.tsx

@@ -1,11 +1,11 @@
-import { THERMOCYCLER_MODULE_V1, getModuleDef2 } from '@opentrons/shared-data'
+import { getModuleDef, THERMOCYCLER_MODULE_V1 } from '@opentrons/shared-data'
 
+import { BORDERS, COLORS } from '../../../helix-design-system'
 import { C_MED_LIGHT_GRAY } from '../../../styles'
-import { COLORS, BORDERS } from '../../../helix-design-system'
-
 import { RobotCoordsForeignDiv } from '../../Deck'
 import { ThermocyclerGEN1 } from './ThermocyclerGEN1'
 import { ThermocyclerGEN2 } from './ThermocyclerGEN2'
+
 import type { ThermocyclerModuleModel } from '@opentrons/shared-data'
 
 const ROOM_TEMPERATURE_C = 23 // value taken from TC firmware
@@ -17,7 +17,7 @@ export interface ThermocyclerVizProps {
 
 export function Thermocycler(props: ThermocyclerVizProps): JSX.Element {
   const { lidMotorState, blockTargetTemp, model } = props
-  const def = getModuleDef2(model)
+  const def = getModuleDef(model)
   if (lidMotorState === 'unknown') {
     // just a rectangle if we don't know the state of the lid
     return (

package/src/hardware-sim/Module/index.tsx

@@ -1,37 +1,40 @@
 import {
   ABSORBANCE_READER_TYPE,
+  FLEX_STACKER_MODULE_TYPE,
   getModuleType,
   HEATERSHAKER_MODULE_TYPE,
   MAGNETIC_BLOCK_TYPE,
   MAGNETIC_MODULE_TYPE,
-  OT2_STANDARD_DECKID,
+  multiplyMatrices,
   TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
+
 import {
+  ALIGN_CENTER,
   C_DARK_GRAY,
   C_MED_LIGHT_GRAY,
-  SPACING_1,
-  JUSTIFY_CENTER,
+  DIRECTION_COLUMN,
   DISPLAY_FLEX,
   FONT_WEIGHT_SEMIBOLD,
-  DIRECTION_COLUMN,
-  ALIGN_CENTER,
+  JUSTIFY_CENTER,
+  SPACING_1,
 } from '../../styles'
 import { RobotCoordsForeignObject } from '../Deck'
-import { multiplyMatrices } from '../utils'
-import { Thermocycler } from './Thermocycler'
+import { FlexStacker } from './FlexStacker'
 import { HeaterShaker } from './HeaterShaker'
-import { Temperature } from './Temperature'
 import { MagneticBlock } from './MagneticBlock'
 import { MagneticModule } from './MagneticModule'
 import { PlateReader } from './PlateReader'
+import { Temperature } from './Temperature'
+import { Thermocycler } from './Thermocycler'
 
 import type { ComponentProps, ReactNode } from 'react'
 import type {
   ModuleDefinition,
   ThermocyclerModuleModel,
 } from '@opentrons/shared-data'
+import type { FlexDirection } from '../Deck'
 
 export * from './Thermocycler'
 
@@ -48,9 +51,34 @@ interface Props {
     | ComponentProps<typeof Temperature>
     | {}
   statusInfo?: ReactNode // contents of small status rectangle, not displayed if absent
-  children?: ReactNode // contents to be rendered on top of the labware mating surface of the module
-  targetSlotId?: string
-  targetDeckId?: string
+
+  children?: ReactNode
+
+  /**
+   * How child components should be positioned.
+   *
+   * "offsetToSlot" - The SVG origin of a child will be at the labware mating interface of the
+   *   module, which is the front-left (-x, -y) corner of the slot on top of the module.
+   *
+   * todo(mm, 2025-07-21):
+   * 1. Add a "passThrough" mode that disables the "offsetToSlot" behavior,
+   *    to allow child components to replace it with their own SVG transform,
+   *    to support labware schema 3.
+   * 2. Migrate all existing call sites to use "passThrough".
+   * 3. Remove "offsetToSlot".
+   */
+  childrenPositioningMode: 'offsetToSlot'
+
+  /**
+   * Used for applying slot-specific positioning adjustments.
+   * If you're rendering the module on a deck, supply this for correct positioning.
+   */
+  targetSlotId: string | null
+  /**
+   * Used for applying slot-specific positioning adjustments.
+   * If you're rendering the module on a deck, supply this for correct positioning.
+   */
+  targetDeckId: string | null
 }
 
 const statusInfoWrapperProps = {
@@ -58,7 +86,7 @@ const statusInfoWrapperProps = {
   alignItems: ALIGN_CENTER,
 }
 const statusInfoFlexProps = {
-  flexDirection: DIRECTION_COLUMN,
+  flexDirection: DIRECTION_COLUMN as FlexDirection,
   justifyContent: JUSTIFY_CENTER,
   backgroundColor: C_MED_LIGHT_GRAY,
   padding: SPACING_1,
@@ -77,8 +105,9 @@ export const Module = (props: Props): JSX.Element => {
     statusInfo,
     children,
     targetSlotId,
-    targetDeckId = OT2_STANDARD_DECKID,
+    targetDeckId,
   } = props
+
   const moduleType = getModuleType(def.model)
 
   const { x: labwareOffsetX, y: labwareOffsetY } = def.labwareOffset
@@ -107,19 +136,16 @@ export const Module = (props: Props): JSX.Element => {
   let nestedLabwareOffsetY = labwareOffsetY
 
   // additional transforms to apply to vectors in certain deck/slot combinations
-  const transformsForDeckBySlot = def?.slotTransforms?.[targetDeckId]
+  const transformsForDeckBySlot =
+    (targetDeckId != null ? def?.slotTransforms?.[targetDeckId] : null) ?? {}
   const slotTransformsForDeckSlot =
-    targetSlotId != null &&
-    transformsForDeckBySlot != null &&
-    targetSlotId in transformsForDeckBySlot
-      ? transformsForDeckBySlot[targetSlotId]
-      : null
-  const deckSpecificTransforms = slotTransformsForDeckSlot ?? {}
-  if (deckSpecificTransforms?.cornerOffsetFromSlot != null) {
+    (targetSlotId != null ? transformsForDeckBySlot[targetSlotId] : null) ?? {}
+
+  if (slotTransformsForDeckSlot.cornerOffsetFromSlot != null) {
     const [
       [slotTranslateX],
       [slotTranslateY],
-    ] = multiplyMatrices(deckSpecificTransforms.cornerOffsetFromSlot, [
+    ] = multiplyMatrices(slotTransformsForDeckSlot.cornerOffsetFromSlot, [
       [translateX],
       [translateY],
       [translateZ],
@@ -127,11 +153,11 @@ export const Module = (props: Props): JSX.Element => {
     ])
     offsetTransform = `translate(${slotTranslateX}, ${slotTranslateY})`
   }
-  if (deckSpecificTransforms?.labwareOffset != null) {
+  if (slotTransformsForDeckSlot.labwareOffset != null) {
     const [
       [slotLabwareOffsetX],
       [slotLabwareOffsetY],
-    ] = multiplyMatrices(deckSpecificTransforms.labwareOffset, [
+    ] = multiplyMatrices(slotTransformsForDeckSlot.labwareOffset, [
       [labwareOffsetX],
       [labwareOffsetY],
       [1],
@@ -146,7 +172,9 @@ export const Module = (props: Props): JSX.Element => {
   const rotationCenterY = (footprintYDimension ?? yDimension) / 2
 
   const orientationTransform =
-    orientation === 'left' || moduleType === ABSORBANCE_READER_TYPE
+    orientation === 'left' ||
+    moduleType === ABSORBANCE_READER_TYPE ||
+    moduleType === FLEX_STACKER_MODULE_TYPE
       ? 'rotate(0, 0, 0)'
       : `rotate(180, ${rotationCenterX}, ${rotationCenterY})`
 
@@ -206,6 +234,8 @@ export const Module = (props: Props): JSX.Element => {
     )
   } else if (moduleType === ABSORBANCE_READER_TYPE) {
     moduleViz = <PlateReader />
+  } else if (moduleType === FLEX_STACKER_MODULE_TYPE) {
+    moduleViz = <FlexStacker />
   }
   return (
     <g transform={positionTransform} data-test={`Module_${moduleType}`}>

package/src/hardware-sim/Pipette/EightEmanatingNozzles.tsx

@@ -1,4 +1,5 @@
 import { Fragment } from 'react'
+
 import { EmanatingNozzle } from './EmanatingNozzle'
 
 export const EightEmanatingNozzles = (props: {

package/src/hardware-sim/Pipette/EmanatingNozzle.tsx

@@ -1,7 +1,8 @@
 import { Fragment } from 'react'
+
+import { COLORS } from '../../helix-design-system'
 import { C_TRANSPARENT } from '../../styles'
 import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from './constants'
-import { COLORS } from '../../helix-design-system'
 
 export const EmanatingNozzle = (props: {
   cx: number

package/src/hardware-sim/Pipette/PipetteRender.stories.tsx

@@ -1,11 +1,13 @@
 import { Fragment } from 'react'
+
 import { getAllLabwareDefs, getAllPipetteNames } from '@opentrons/shared-data'
-import { LabwareRender } from '../Labware'
+
 import { RobotWorkSpace } from '../Deck'
+import { LabwareRender } from '../Labware'
 import { PipetteRender } from './'
 
-import type { Story, Meta } from '@storybook/react'
-import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+import type { Meta, Story } from '@storybook/react'
+import type { LabwareDefinition, PipetteName } from '@opentrons/shared-data'
 
 const DECK_MAP_VIEWBOX = '0 -140 230 230'
 
@@ -16,7 +18,7 @@ const axygenReservoir90ml = getAllLabwareDefs().axygen1Reservoir90MlV1
 const opentrons6TuberackNest50mlConical = getAllLabwareDefs()
   .opentrons6TuberackNest50MlConicalV1
 
-const labwareDefMap: Record<string, LabwareDefinition2> = {
+const labwareDefMap: Record<string, LabwareDefinition> = {
   [opentrons300UlTiprack.metadata.displayName]: opentrons300UlTiprack,
   [opentrons10UlTiprack.metadata.displayName]: opentrons10UlTiprack,
   [nest12Reservoir15ml.metadata.displayName]: nest12Reservoir15ml,

package/src/hardware-sim/Pipette/PipetteRender.tsx

@@ -1,20 +1,22 @@
 import { getPipetteNameSpecs } from '@opentrons/shared-data'
+
 import { RobotCoordsForeignDiv } from '../Deck/RobotCoordsForeignDiv'
 import {
-  MULTI_CHANNEL_PIPETTE_WIDTH,
-  SINGLE_CHANNEL_PIPETTE_WIDTH,
-  SINGLE_CHANNEL_PIPETTE_HEIGHT,
-  MULTI_CHANNEL_PIPETTE_HEIGHT,
   MULTI_CHANNEL_CENTER_Y_NOZZLE,
+  MULTI_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_PIPETTE_WIDTH,
   MULTI_CHANNEL_Y_OFFSET,
   NINETY_SIX_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_HEIGHT,
+  SINGLE_CHANNEL_PIPETTE_WIDTH,
 } from './constants'
-import { EmanatingNozzle } from './EmanatingNozzle'
 import { EightEmanatingNozzles } from './EightEmanatingNozzles'
-import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+import { EmanatingNozzle } from './EmanatingNozzle'
+
+import type { LabwareDefinition, PipetteName } from '@opentrons/shared-data'
 
 interface PipetteRenderProps {
-  labwareDef: LabwareDefinition2
+  labwareDef: LabwareDefinition
   pipetteName: PipetteName
   usingMetalProbe?: boolean
 }
@@ -61,11 +63,9 @@ export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
       y={y}
       outerProps={{ style: { overflow: 'visible' } }}
       innerDivProps={{
-        style: {
-          width: '100%',
-          height: '100%',
-          overflow: 'visible',
-        },
+        width: '100%',
+        height: '100%',
+        overflow: 'visible',
       }}
     >
       <svg overflow="visible">

package/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
 import { EmanatingNozzle } from '../EmanatingNozzle'
 

package/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx

@@ -1,9 +1,10 @@
-import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import { C_TRANSPARENT } from '../../../styles'
+import { describe, expect, it } from 'vitest'
+
 import { COLORS } from '../../../helix-design-system'
-import { EmanatingNozzle } from '../EmanatingNozzle'
+import { C_TRANSPARENT } from '../../../styles'
 import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from '../constants'
+import { EmanatingNozzle } from '../EmanatingNozzle'
 
 describe('EmanatingNozzle', () => {
   it('should render an small origin circle', () => {

package/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx

@@ -1,26 +1,28 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { fixtureTiprack300ul as _fixtureTiprack300ul } from '@opentrons/shared-data'
+
 import { renderWithProviders } from '../../../testing/utils'
 import { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv'
-import { PipetteRender } from '../PipetteRender'
-import { EmanatingNozzle } from '../EmanatingNozzle'
-import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
 import {
-  SINGLE_CHANNEL_PIPETTE_WIDTH,
-  SINGLE_CHANNEL_PIPETTE_HEIGHT,
-  MULTI_CHANNEL_PIPETTE_WIDTH,
   MULTI_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_HEIGHT,
+  SINGLE_CHANNEL_PIPETTE_WIDTH,
 } from '../constants'
+import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+import { PipetteRender } from '../PipetteRender'
 
 import type { ComponentProps } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 
 vi.mock('../../Deck/RobotCoordsForeignDiv')
 vi.mock('../EmanatingNozzle')
 vi.mock('../EightEmanatingNozzles')
 
-const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition2
+const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition
 
 const render = (props: ComponentProps<typeof PipetteRender>) => {
   return renderWithProviders(<PipetteRender {...props} />)[0]

package/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx

@@ -1,29 +1,31 @@
-import styled from 'styled-components'
 import { animated } from '@react-spring/web'
-import { Svg } from '../../primitives'
 
-import type { ComponentProps } from 'react'
+import styles from './robotcoordinatespace.module.css'
 
-interface RobotCoordinateSpaceProps extends ComponentProps<typeof Svg> {
+import type { ComponentType, ReactNode, SVGProps } from 'react'
+
+interface RobotCoordinateSpaceProps {
   animated?: boolean
+  children?: ReactNode
+  height?: string
+  viewBox?: string
 }
+
+const AnimatedSvg = animated.svg as ComponentType<SVGProps<SVGSVGElement>>
+
 export function RobotCoordinateSpace(
   props: RobotCoordinateSpaceProps
 ): JSX.Element {
-  const { animated = false, children, ...restProps } = props
+  const { animated: isAnimated = false, children, ...restProps } = props
+
   const allPassThroughProps = {
-    transform: 'scale(1, -1)',
+    className: styles.svg,
     ...restProps,
   }
-  return animated ? (
+
+  return isAnimated ? (
     <AnimatedSvg {...allPassThroughProps}>{children}</AnimatedSvg>
   ) : (
-    <Svg {...allPassThroughProps}>{children}</Svg>
+    <svg {...allPassThroughProps}>{children}</svg>
   )
 }
-
-/**
- * These animated components needs to be split out because react-spring and styled-components don't play nice
- * @see https://github.com/pmndrs/react-spring/issues/1515 */
-// @ts-expect-error Type instantiation is excessively deep and possibly infinite
-const AnimatedSvg = styled(animated.svg)<typeof animated.svg>``

package/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx

@@ -1,4 +1,5 @@
 import { useRef } from 'react'
+
 import { Svg } from '../../primitives'
 
 import type { ComponentProps, ReactNode } from 'react'

package/src/hardware-sim/RobotCoordinateSpace/robotcoordinatespace.module.css

@@ -0,0 +1,3 @@
+.svg {
+  transform: scale(1, -1);
+}

package/src/hardware-sim/index.ts

@@ -1,7 +1,5 @@
 export * from './BaseDeck'
 export * from './BaseDeck/__fixtures__'
-export * from './ProtocolDeck'
-export * from './ProtocolDeck/utils'
 export * from './Deck'
 export * from './DeckConfigurator'
 export * from './DeckSlotLocation'

package/src/helix-design-system/colors.ts

@@ -86,13 +86,14 @@ export const transparentBlack80 = `${black90}80`
 /**
  * flex
  */
+export const flex40 = '#aae3fc'
 export const flex55 = '#0297CC'
 export const flex50 = '#00BDFF'
 
 /**
  * extras
  */
-export const transparent = 'transparent'
+export const transparent = '#00000000'
 // opacity hex codes to append to 6-digit color hex codes
 export const opacity20HexCode = '33' // 20% opacity
 export const opacity40HexCode = '66' // 40% opacity

package/src/hocs/withStyleProps.ts

@@ -0,0 +1,53 @@
+import { createElement } from 'react'
+
+import { styleProps } from '../primitives'
+
+import type { ComponentProps, ComponentType } from 'react'
+import type { StyleProps } from '../primitives'
+
+/**
+ * A Higher-Order Component (HOC) that enhances a component by enabling it to
+ * accept `StyleProps`.
+ *
+ * This function wraps a component, processes any provided `StyleProps` into a
+ * React style object, and merges it with the component's existing `style` prop.
+ * Styles from the passed `style` prop will override any generated styles from `StyleProps`
+ * in case of conflict.
+ *
+ * @template T - The type of the React component being wrapped.
+ * @param Component The React component to enhance with `StyleProps`.
+ * @returns A new component that accepts the original component's props plus `StyleProps`.
+ *
+ * @example
+ * ```tsx
+ * <Icon
+ *  name="wifi"
+ *  size="1.25rem"
+ *  color={COLORS.green50}
+ *  style={{ marginLeft: SPACING.spacing8 }}
+ *  />
+ * ```
+ */
+
+export function withStyleProps<T extends ComponentType<any>>(
+  Component: T
+): T & ComponentType<ComponentProps<T> & StyleProps> {
+  const ComponentWithStyleProps = ({
+    style,
+    ...props
+  }: ComponentProps<T> & StyleProps): JSX.Element => {
+    const stylePropsStyles = styleProps(props)
+    const combinedStyles = { ...stylePropsStyles, ...style }
+
+    return createElement(Component, {
+      ...props,
+      style: combinedStyles,
+    })
+  }
+
+  ComponentWithStyleProps.displayName = `withStyleProps(${
+    Component.displayName ?? Component.name
+  })`
+
+  return ComponentWithStyleProps as any
+}

package/src/hooks/__tests__/useDrag.test.ts

@@ -1,6 +1,8 @@
-import { describe, it, expect } from 'vitest'
 import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
 import { useDrag } from '../useDrag'
+
 import type { ElementPosition } from '../useDrag'
 
 const mockPosition: ElementPosition = {

package/src/hooks/__tests__/useLongPress.test.ts

@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
 import { act, renderHook, waitFor } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
 import { useLongPress } from '../useLongPress'
 
 describe('useLongPress', () => {

package/src/hooks/__tests__/useScrolling.test.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { renderHook, act } from '@testing-library/react'
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { useScrolling } from '../useScrolling'
 
 describe('useScrolling', () => {