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

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

@@ -1,30 +1,31 @@
 import { animated } from '@react-spring/web'
-import styled from 'styled-components'
 
-import { Svg } from '../../primitives'
+import styles from './robotcoordinatespace.module.css'
 
-import type { ComponentProps } from 'react'
+import type { ComponentType, ReactNode, SVGProps } from 'react'
 
-interface RobotCoordinateSpaceProps extends ComponentProps<typeof Svg> {
+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/robotcoordinatespace.module.css

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

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/useConditionalConfirm.ts

@@ -42,6 +42,10 @@ export interface UseConditionalConfirmResult<T extends any[]> {
   cancel: () => unknown
 }
 
+/**
+ * Provides conditional confirmation logic, allowing certain actions to be blocked
+ * until explicitly confirmed.
+ */
 export const useConditionalConfirm = <T extends any[]>(
   handleContinue: (...args: T) => any,
   shouldBlock: boolean
@@ -52,11 +56,17 @@ export const useConditionalConfirm = <T extends any[]>(
     if (shouldBlock && !pendingConfirm) {
       setPendingArgs(confirmArgs)
     } else {
-      // call handleContinue with pending args if we have them
-      const handleContinueArgs =
-        pendingArgs !== null ? pendingArgs : confirmArgs
-      handleContinue(...handleContinueArgs)
-      setPendingArgs(null)
+      const handleContinueArgs = pendingArgs ?? confirmArgs
+      const result = handleContinue(...handleContinueArgs)
+
+      // Check if result is a promise
+      if (result != null && typeof result.then === 'function') {
+        result.finally(() => {
+          setPendingArgs(null)
+        })
+      } else {
+        setPendingArgs(null)
+      }
     }
   }
 

package/src/icons/Icon.tsx

@@ -1,21 +1,20 @@
-import cx from 'classnames'
-import { css, keyframes } from 'styled-components'
+import clsx from 'clsx'
 
-import { Svg } from '../primitives'
+import { withStyleProps } from '../hocs/withStyleProps'
 import { ICON_DATA_BY_NAME } from './icon-data'
+import styles from './icon.module.css'
 
-import type { ReactNode } from 'react'
-import type { SvgProps } from '../primitives'
+import type { ReactNode, SVGProps } from 'react'
 
 export type IconName = keyof typeof ICON_DATA_BY_NAME
 
-export interface IconProps extends SvgProps {
+export interface IconProps extends SVGProps<SVGSVGElement> {
   /** name constant of the icon to display */
   name: IconName
-  /** classes to apply */
-  className?: string
   /** spin the icon with a CSS animation */
   spin?: boolean
+  /** override default size */
+  size?: string | number
   /** x attribute as a number or string (for nesting inside another SVG) */
   x?: number | string
   /** y attribute as a number or string (for nesting inside another SVG) */
@@ -28,22 +27,8 @@ export interface IconProps extends SvgProps {
   style?: Record<string, string | number>
   /** optional children */
   children?: ReactNode
-  id?: string
 }
 
-const spinAnimation = keyframes`
-  100% {
-    transform: rotate(360deg);
-  }
-`
-
-const spinStyle = css`
-  &.spin {
-    animation: ${spinAnimation} 0.8s steps(8) infinite;
-    transform-origin: center;
-  }
-`
-
 /**
  * Inline SVG icon component
  *
@@ -52,9 +37,22 @@ const spinStyle = css`
  * import type { IconName } from '@opentrons/components'
  * ```
  */
-export function Icon(props: IconProps): JSX.Element | null {
-  const { name, children, className, spin, id, ...svgProps } = props
+function IconComponent(props: IconProps): JSX.Element | null {
+  const {
+    name,
+    className,
+    spin,
+    size,
+    height: rawHeight,
+    width: rawWidth,
+    color,
+    transform,
+    opacity,
+    ...svgProps
+  } = props
 
+  const height = size ?? rawHeight
+  const width = size ?? rawWidth
   if (!(name in ICON_DATA_BY_NAME)) {
     console.error(`"${name}" is not a valid Icon name`)
     return null
@@ -62,18 +60,29 @@ export function Icon(props: IconProps): JSX.Element | null {
 
   const { viewBox, path } = ICON_DATA_BY_NAME[name]
 
+  const style = Object.fromEntries(
+    Object.entries({
+      color,
+      height,
+      width,
+      transform,
+      //  filter undefined props
+    }).filter(([_, value]) => value != null)
+  )
+
   return (
-    <Svg
+    <svg
       aria-hidden="true"
       fill="currentColor"
       viewBox={viewBox}
-      className={cx(className, { spin })}
-      css={spinStyle}
+      className={clsx(className, { [styles.spin]: spin })}
+      style={{ ...style }}
       {...svgProps}
-      id={id}
     >
       <path aria-roledescription={name} fillRule="evenodd" d={path} />
       {props.children}
-    </Svg>
+    </svg>
   )
 }
+
+export const Icon = withStyleProps(IconComponent)

package/src/icons/ModuleIcon.tsx

@@ -8,10 +8,10 @@ import {
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 
+import { withStyleProps } from '../hocs/withStyleProps'
 import { Icon } from './Icon'
 
 import type { ModuleType } from '@opentrons/shared-data'
-import type { StyleProps } from '../primitives/types'
 
 export type ModuleIconName =
   | 'ot-magnet-v2'
@@ -34,11 +34,11 @@ export const MODULE_ICON_NAME_BY_TYPE: {
   [FLEX_STACKER_MODULE_TYPE]: 'ot-flex-stacker',
 }
 
-interface ModuleIconProps extends StyleProps {
+interface ModuleIconProps {
   moduleType: ModuleType
 }
 
-export function ModuleIcon(props: ModuleIconProps): JSX.Element {
+function ModuleIconComponent(props: ModuleIconProps): JSX.Element {
   const { moduleType, ...styleProps } = props
   const iconName = MODULE_ICON_NAME_BY_TYPE[moduleType]
 
@@ -50,3 +50,5 @@ export function ModuleIcon(props: ModuleIconProps): JSX.Element {
     />
   )
 }
+
+export const ModuleIcon = withStyleProps(ModuleIconComponent)

package/src/icons/icon-data.ts

@@ -8,6 +8,11 @@ export const ICON_DATA_BY_NAME: Record<
       'M15.3125 13.125V5.25H13.125V13.125H5.25V15.3125H13.125V23.1875H15.3125V15.3125H23.1875V13.125H15.3125Z',
     viewBox: '0 0 28 28',
   },
+  'add-circle': {
+    path:
+      'M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM21 21V12H27V21H36V27H27V36H21V27H12V21H21Z',
+    viewBox: '0 0 48 48',
+  },
   alert: {
     path: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
     viewBox: '0 0 24 24',
@@ -210,6 +215,11 @@ export const ICON_DATA_BY_NAME: Record<
       'M14.1673 10L13.2923 9.125L17.3757 5L13.2923 0.875L14.1673 0L19.1673 5L14.1673 10ZM5.83398 10L0.833984 5L5.83398 0L6.70898 0.875L2.62565 5L6.70898 9.125L5.83398 10ZM6.66732 5.72917C6.47287 5.72917 6.30273 5.65625 6.1569 5.51042C6.01107 5.36458 5.93815 5.19444 5.93815 5C5.93815 4.80556 6.01107 4.63542 6.1569 4.48958C6.30273 4.34375 6.47287 4.27083 6.66732 4.27083C6.86176 4.27083 7.0319 4.34375 7.17773 4.48958C7.32357 4.63542 7.39648 4.80556 7.39648 5C7.39648 5.19444 7.32357 5.36458 7.17773 5.51042C7.0319 5.65625 6.86176 5.72917 6.66732 5.72917ZM10.0007 5.72917C9.80621 5.72917 9.63607 5.65625 9.49023 5.51042C9.3444 5.36458 9.27148 5.19444 9.27148 5C9.27148 4.80556 9.3444 4.63542 9.49023 4.48958C9.63607 4.34375 9.80621 4.27083 10.0007 4.27083C10.1951 4.27083 10.3652 4.34375 10.5111 4.48958C10.6569 4.63542 10.7298 4.80556 10.7298 5C10.7298 5.19444 10.6569 5.36458 10.5111 5.51042C10.3652 5.65625 10.1951 5.72917 10.0007 5.72917ZM13.334 5.72917C13.1395 5.72917 12.9694 5.65625 12.8236 5.51042C12.6777 5.36458 12.6048 5.19444 12.6048 5C12.6048 4.80556 12.6777 4.63542 12.8236 4.48958C12.9694 4.34375 13.1395 4.27083 13.334 4.27083C13.5284 4.27083 13.6986 4.34375 13.8444 4.48958C13.9902 4.63542 14.0632 4.80556 14.0632 5C14.0632 5.19444 13.9902 5.36458 13.8444 5.51042C13.6986 5.65625 13.5284 5.72917 13.334 5.72917Z',
     viewBox: '0 0 20 10',
   },
+  export: {
+    viewBox: '0 0 20 20',
+    path:
+      'M15.5417 10.8333H5.41667V9.16667H15.5417L14.25 7.875L15.4167 6.66667L18.75 10L15.4167 13.3333L14.25 12.125L15.5417 10.8333ZM11.25 7.5V4.16667H2.91667V15.8333H11.25V12.5H12.9167V15.8333C12.9167 16.2917 12.7535 16.684 12.4271 17.0104C12.1007 17.3368 11.7083 17.5 11.25 17.5H2.91667C2.45833 17.5 2.06597 17.3368 1.73958 17.0104C1.41319 16.684 1.25 16.2917 1.25 15.8333V4.16667C1.25 3.70833 1.41319 3.31597 1.73958 2.98958C2.06597 2.66319 2.45833 2.5 2.91667 2.5H11.25C11.7083 2.5 12.1007 2.66319 12.4271 2.98958C12.7535 3.31597 12.9167 3.70833 12.9167 4.16667V7.5H11.25Z',
+  },
   eye: {
     path:
       'M24 32C26.3667 32 28.375 31.175 30.025 29.525C31.675 27.875 32.5 25.8667 32.5 23.5C32.5 21.1333 31.675 19.125 30.025 17.475C28.375 15.825 26.3667 15 24 15C21.6333 15 19.625 15.825 17.975 17.475C16.325 19.125 15.5 21.1333 15.5 23.5C15.5 25.8667 16.325 27.875 17.975 29.525C19.625 31.175 21.6333 32 24 32ZM24 29.1C22.4333 29.1 21.1083 28.5583 20.025 27.475C18.9417 26.3917 18.4 25.0667 18.4 23.5C18.4 21.9333 18.9417 20.6083 20.025 19.525C21.1083 18.4417 22.4333 17.9 24 17.9C25.5667 17.9 26.8917 18.4417 27.975 19.525C29.0583 20.6083 29.6 21.9333 29.6 23.5C29.6 25.0667 29.0583 26.3917 27.975 27.475C26.8917 28.5583 25.5667 29.1 24 29.1ZM24 38.5C19.1333 38.5 14.7333 37.1167 10.8 34.35C6.86667 31.5833 3.93333 27.9667 2 23.5C3.93333 19.0333 6.86667 15.4167 10.8 12.65C14.7333 9.88333 19.1333 8.5 24 8.5C28.8667 8.5 33.2667 9.88333 37.2 12.65C41.1333 15.4167 44.0667 19.0333 46 23.5C44.0667 27.9667 41.1333 31.5833 37.2 34.35C33.2667 37.1167 28.8667 38.5 24 38.5ZM24 35.5C28.0333 35.5 31.7417 34.4083 35.125 32.225C38.5083 30.0417 41.0833 27.1333 42.85 23.5C41.0833 19.8667 38.5083 16.9583 35.125 14.775C31.7417 12.5917 28.0333 11.5 24 11.5C19.9667 11.5 16.2583 12.5917 12.875 14.775C9.49167 16.9583 6.9 19.8667 5.1 23.5C6.9 27.1333 9.49167 30.0417 12.875 32.225C16.2583 34.4083 19.9667 35.5 24 35.5Z',
@@ -443,8 +453,8 @@ export const ICON_DATA_BY_NAME: Record<
   },
   'ot-flex-stacker': {
     path:
-      'M14.3 8.75789H1.7C1.3134 8.75789 1 9.05951 1 9.43158V10.7789C1 11.151 1.3134 11.4526 1.7 11.4526H14.3C14.6866 11.4526 15 11.151 15 10.7789V9.43158C15 9.05951 14.6866 8.75789 14.3 8.75789ZM14.3 12.8H1.7C1.3134 12.8 1 13.1016 1 13.4737V14.8211C1 15.1931 1.3134 15.4947 1.7 15.4947H14.3C14.6866 15.4947 15 15.1931 15 14.8211V13.4737C15 13.1016 14.6866 12.8 14.3 12.8ZM8.0875 7.32632L11.2375 3.78947C11.325 3.70526 11.2375 3.62105 11.15 3.62105H4.7625C4.675 3.62105 4.5875 3.78947 4.675 3.78947L7.825 7.32632H8.0875ZM9.05 0H6.8625V5.55789H9.05V0Z',
-    viewBox: '0 0 16 16',
+      'M13.2998 13.0527C13.6864 13.0527 14 13.3545 14 13.7266V15.0742C13.9996 15.446 13.6862 15.748 13.2998 15.748H0.700195C0.313847 15.748 0.000406328 15.446 0 15.0742V13.7266C2.89174e-05 13.3545 0.313614 13.0527 0.700195 13.0527H13.2998ZM13.2998 9.01074C13.6864 9.01074 14 9.3125 14 9.68457V11.0322C13.9995 11.4039 13.6861 11.7051 13.2998 11.7051H0.700195C0.313886 11.7051 0.000469951 11.4039 0 11.0322V9.68457C0 9.3125 0.313596 9.01074 0.700195 9.01074H13.2998ZM8.0498 3.87402H10.1504C10.2377 3.87428 10.3245 3.95794 10.2373 4.04199L7.08789 7.5791H6.8252L3.6748 4.04199C3.58763 4.04174 3.67526 3.87402 3.7627 3.87402H5.8623V0.25293H8.0498V3.87402Z',
+    viewBox: '0 0 14 16',
   },
   'ot-heater-shaker': {
     path:
@@ -636,6 +646,11 @@ export const ICON_DATA_BY_NAME: Record<
       'M6 11.9325V4.06752C6 3.6436 6.49443 3.41202 6.82009 3.68341L11.5391 7.61589C11.7789 7.81579 11.7789 8.18421 11.5391 8.38411L6.82009 12.3166C6.49443 12.588 6 12.3564 6 11.9325Z',
     viewBox: '0 0 16 16',
   },
+  'paper-clip': {
+    path:
+      'M13.6285 0.571881C14.631 0.366889 15.7813 0.567501 16.8661 1.60287C17.925 2.61359 18.2194 3.61427 18.1005 4.49366C17.9856 5.3437 17.4948 6.00222 17.1397 6.38056L17.1301 6.39082L7.58533 15.3938L7.58316 15.3958L7.58099 15.3978C6.57189 16.3257 5.6847 16.5258 4.98887 16.3952C4.65608 16.3327 4.40035 16.1999 4.22772 16.0828C4.14114 16.024 4.07388 15.9682 4.02635 15.9249C4.00254 15.9033 3.98345 15.8845 3.96916 15.8699C3.96201 15.8626 3.95602 15.8563 3.95123 15.8511L3.95119 15.8511C3.94661 15.8463 3.94094 15.8403 3.93432 15.8332C3.92111 15.8188 3.90404 15.7997 3.88422 15.7758C3.84466 15.7282 3.79344 15.6612 3.73969 15.5765C3.63289 15.4082 3.51117 15.1622 3.45732 14.8541C3.34373 14.2042 3.55116 13.397 4.4988 12.5767L4.55524 12.5274C5.8055 11.4279 11.1288 6.26922 13.7049 3.7891L13.7225 3.77288C13.9086 3.61099 14.1971 3.6152 14.3779 3.78631C14.5646 3.96295 14.5659 4.25056 14.3808 4.42873L13.8621 4.92859C11.1621 7.53142 6.38993 12.1496 5.1959 13.1994L5.13831 13.2497C4.39332 13.8946 4.34372 14.4041 4.39624 14.7046C4.42544 14.8717 4.49254 15.0092 4.55383 15.1058C4.58412 15.1535 4.61173 15.1892 4.63001 15.2112C4.63909 15.2221 4.64569 15.2295 4.64891 15.233C4.64932 15.2334 4.64968 15.2338 4.64997 15.2341L4.65829 15.2423L4.66489 15.2498C4.66496 15.2499 4.66504 15.25 4.66511 15.25C4.66766 15.2526 4.67372 15.2588 4.68326 15.2674C4.70248 15.2849 4.73478 15.3121 4.77923 15.3422C4.86865 15.4029 5.00104 15.4715 5.17253 15.5037C5.48497 15.5623 6.07015 15.5246 6.91824 14.7456L16.4392 5.76514C16.732 5.45088 17.0774 4.9624 17.1565 4.37743C17.2324 3.81614 17.0741 3.08626 16.193 2.24528C15.3377 1.42895 14.5163 1.31951 13.828 1.46027C13.1036 1.60841 12.4764 2.04703 12.105 2.39819L12.1047 2.39857C10.4698 3.94099 8.11634 6.25209 6.16909 8.18007C5.196 9.14353 4.32526 10.0104 3.69781 10.6364C3.3841 10.9494 3.13123 11.2022 2.9568 11.3767C2.8696 11.4639 2.80201 11.5316 2.75623 11.5774C2.73335 11.6004 2.71588 11.6178 2.70418 11.6295C2.69832 11.6354 2.6939 11.6398 2.69094 11.6428C2.68947 11.6443 2.68836 11.6454 2.68762 11.6461C2.68725 11.6465 2.68696 11.6468 2.68678 11.647C2.68669 11.6471 2.68665 11.6472 2.6866 11.6472L2.34182 11.334L2.68651 11.6472L2.67319 11.6606L2.6588 11.6729L2.65876 11.6728C2.6587 11.6729 2.65866 11.673 2.65858 11.6731C2.65762 11.6739 2.65577 11.6755 2.65309 11.6778C2.64775 11.6825 2.63907 11.6902 2.62738 11.7008C2.60397 11.722 2.56861 11.7547 2.52384 11.7982C2.43418 11.8851 2.30753 12.0144 2.16449 12.1793C1.87667 12.5113 1.53133 12.9775 1.28276 13.5261C1.03455 14.0739 0.889933 14.6875 0.977764 15.3269C1.06468 15.9596 1.38438 16.6569 2.13425 17.3726C3.32437 18.5086 4.56119 18.725 5.67548 18.5258C6.81529 18.3221 7.8603 17.6745 8.58582 17.0247L18.1794 7.40821L18.1967 7.39169C18.3793 7.22624 18.6679 7.22488 18.8523 7.39249C19.0426 7.5655 19.05 7.85304 18.8687 8.03473L9.2565 17.67L9.24707 17.6784C8.43889 18.4048 7.23164 19.172 5.85068 19.4188C4.43968 19.671 2.88193 19.3711 1.46115 18.0151C0.579206 17.1733 0.150996 16.2968 0.033972 15.445C-0.0821326 14.5999 0.11326 13.8182 0.409037 13.1655C0.704436 12.5135 1.10704 11.9739 1.43118 11.6001C1.59412 11.4121 1.7395 11.2636 1.84533 11.1609C1.8983 11.1095 1.94155 11.0695 1.97233 11.0416C1.98757 11.0278 1.99974 11.017 2.00858 11.0092C2.01046 11.0073 2.01259 11.0053 2.01491 11.0029C2.02668 10.9911 2.0442 10.9736 2.06715 10.9506C2.11305 10.9047 2.18077 10.8368 2.26811 10.7495C2.4428 10.5747 2.69598 10.3217 3.01001 10.0084C3.63806 9.38174 4.50963 8.51398 5.48376 7.54949C7.43096 5.62156 9.7916 3.30339 11.4355 1.75243C11.8801 1.33209 12.6625 0.769445 13.6285 0.571881ZM4.64882 15.233C4.6486 15.2327 4.64837 15.2325 4.64811 15.2323L4.64771 15.2319L4.64882 15.233Z',
+    viewBox: '0 0 20 20',
+  },
   plus: {
     path: 'M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z',
     viewBox: '0 0 24 24',
@@ -715,6 +730,15 @@ export const ICON_DATA_BY_NAME: Record<
       'M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z',
     viewBox: '0 0 24 24',
   },
+  'skip-backward': {
+    path:
+      'M6.65039 8L18.1504 16L18.1504 0L6.65039 8Z M0.65039 0L0.65039 16L3.65039 16L3.65039 0L0.65039 0Z',
+    viewBox: '0 0 19 16',
+  },
+  'skip-forward': {
+    path: 'M12.3496 8L0.849609 16V0L12.3496 8ZM15.3496 0V16H18.3496V0H15.3496Z',
+    viewBox: '0 0 19 16',
+  },
   sleep: {
     path:
       'M21.8333 36.6668C19.5 36.6668 17.3125 36.2224 15.2708 35.3335C13.2292 34.4446 11.4514 33.2432 9.9375 31.7293C8.42361 30.2154 7.22222 28.4377 6.33333 26.396C5.44444 24.3543 5 22.1668 5 19.8335C5 15.7779 6.29167 12.2016 8.875 9.10433C11.4583 6.00711 14.75 4.0835 18.75 3.3335C18.25 6.05572 18.4028 8.72933 19.2083 11.3543C20.0139 13.9793 21.4028 16.2779 23.375 18.2502C25.3472 20.2224 27.6458 21.6182 30.2708 22.4377C32.8958 23.2571 35.5833 23.4168 38.3333 22.9168C37.6111 26.9168 35.6944 30.2085 32.5833 32.7918C29.4722 35.3752 25.8889 36.6668 21.8333 36.6668ZM21.8333 34.1668C24.6111 34.1668 27.1389 33.3752 29.4167 31.7918C31.6944 30.2085 33.5278 28.1946 34.9167 25.7502C32.4167 25.5279 30.0139 24.9516 27.7083 24.021C25.4028 23.0904 23.375 21.7502 21.625 20.0002C19.8472 18.2502 18.5 16.2293 17.5833 13.9377C16.6667 11.646 16.0972 9.26405 15.875 6.79183C13.4306 8.12516 11.4236 9.93766 9.85417 12.2293C8.28472 14.521 7.5 17.0557 7.5 19.8335C7.5 23.8057 8.89583 27.1877 11.6875 29.9793C14.4792 32.771 17.8611 34.1668 21.8333 34.1668Z',

package/src/icons/icon.module.css

@@ -0,0 +1,10 @@
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 0.8s steps(8) infinite;
+  transform-origin: center;
+}

package/src/index.module.css

@@ -3,6 +3,7 @@
 @import './styles/colors.module.css';
 @import './styles/typography.module.css';
 @import './styles/borders.module.css';
+@import './styles/global.css';
 
 :global(*) {
   box-sizing: border-box;

package/src/instrument/InstrumentDiagram.tsx

@@ -43,8 +43,6 @@ export function InstrumentDiagram(props: InstrumentDiagramProps): JSX.Element {
   return (
     <Flex
       className={className}
-      transform={mount === 'right' ? 'scaleX(-1)' : ''}
-      filter={mount === 'right' ? 'FlipH' : ''}
       {...styleProps}
       alignItems={ALIGN_CENTER}
       justifyContent={JUSTIFY_CENTER}

package/src/instrument/PipetteSelect.module.css

@@ -1,14 +1,14 @@
 .pipette_volume_class {
-  cursor: default;
   min-width: 3.5rem;
+  cursor: default;
 }
 
 .pipette_channels {
-  cursor: default;
   min-width: 7rem;
+  cursor: default;
 }
 
 .pipette_category {
-  cursor: default;
   min-width: 2.5rem;
+  cursor: default;
 }

package/src/instrument/index.ts

@@ -1,3 +1 @@
 export * from './InstrumentDiagram'
-export * from './InstrumentGroup'
-export * from './InstrumentInfo'

package/src/legacy-hardware-sim/LabwareNameOverlay.module.css

@@ -2,19 +2,19 @@
 
 .name_overlay {
   width: 100%;
-  font-size: 0.5rem;
-  color: var(--c-font-light);
-  background-color: color-mod(var(--c-black) alpha(0.75));
   padding: 0.25rem;
   border-radius: 0 0 0.5rem 0.5rem;
+  background-color: color-mod(var(--c-black) alpha(0.75));
+  color: var(--c-font-light);
+  font-size: 0.5rem;
 }
 
 .display_name {
-  font-weight: var(--fw-semibold);
   color: var(--c-font-light);
+  font-weight: var(--fw-semibold);
   overflow-wrap: break-word;
 }
 
 .deck_slot:active {
   cursor: grabbing;
-}
+}

package/src/legacy-hardware-sim/ModuleItem.module.css

@@ -1,20 +1,20 @@
 @import '@opentrons/components/styles';
 
 .module {
-  color: var(--c-black);
-  background-color: var(--c-black);
-  opacity: 0.9;
-  border-radius: 6px;
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
+  border-radius: 6px;
+  background-color: var(--c-black);
+  color: var(--c-black);
+  opacity: 0.9;
 }
 
 .module_review_icon {
-  color: var(--c-white);
-  margin: 0 0.25rem 0 0;
-  height: 12px;
   width: 12px;
+  height: 12px;
+  margin: 0 0.25rem 0 0;
+  color: var(--c-white);
 }
 
 .module_review_icon_missing {
@@ -26,13 +26,13 @@
 }
 
 .module_review_text {
+  margin-bottom: 0.75rem;
+  color: var(--c-white);
   fill: currentColor;
   font-size: 0.55rem;
   font-weight: var(--fw-semibold);
-  color: var(--c-white);
   text-transform: capitalize;
   white-space: pre;
-  margin-bottom: 0.75rem;
 }
 
 .module_name_overlay {
@@ -43,21 +43,21 @@
 .module_connect_info_wrapper {
   display: flex;
   flex-direction: row;
-  font-size: 0.5rem;
   color: var(--c-white);
+  font-size: 0.5rem;
 }
 
 .module_port_text {
-  fill: currentColor;
   color: var(--c-white);
+  fill: currentColor;
   font-size: 0.65rem;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
 }
 
 .module_port_text_na {
-  fill: currentColor;
   color: var(--c-med-gray);
+  fill: currentColor;
   font-size: 0.65rem;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
@@ -66,24 +66,24 @@
 .module_wrapper {
   display: flex;
   width: 100%;
-  padding: 1.15rem;
-  justify-content: center;
   flex-direction: column;
   align-items: flex-end;
+  justify-content: center;
+  padding: 1.15rem;
 }
 
 .flipped_module_wrapper {
   display: flex;
   width: 100%;
-  padding: 1.15rem;
-  justify-content: center;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: center;
+  padding: 1.15rem;
 }
 
 .module_name_text {
-  fill: currentColor;
   color: var(--c-white);
+  fill: currentColor;
   font-size: 0.5rem;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
@@ -95,4 +95,4 @@
 
 .right_icon {
   margin: 0 0 0 1rem;
-}
+}

package/src/legacy-hardware-sim/index.ts

@@ -1,2 +1 @@
 export * from './LabwareNameOverlay'
-export * from './ModuleItem' // legacy App module rendering

package/src/lists/index.ts

@@ -1,3 +1,2 @@
 // list and list item components
 export * from './SidePanelGroup'
-export * from './TitledList'