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

package/lib/organisms/CommandText/useCommandTextString/utils/commandText/getTemperatureCommandText.d.ts

@@ -1,4 +1,4 @@
-import type { TemperatureModuleAwaitTemperatureCreateCommand, TemperatureModuleSetTargetTemperatureCreateCommand, TCSetTargetBlockTemperatureCreateCommand, TCSetTargetLidTemperatureCreateCommand, HeaterShakerSetTargetTemperatureCreateCommand, RunTimeCommand } from '@opentrons/shared-data';
+import type { HeaterShakerSetTargetTemperatureCreateCommand, RunTimeCommand, TCSetTargetBlockTemperatureCreateCommand, TCSetTargetLidTemperatureCreateCommand, TemperatureModuleAwaitTemperatureCreateCommand, TemperatureModuleSetTargetTemperatureCreateCommand } from '@opentrons/shared-data';
 import type { HandlesCommands } from '../types';
 export type TemperatureCreateCommand = TemperatureModuleSetTargetTemperatureCreateCommand | TemperatureModuleAwaitTemperatureCreateCommand | TCSetTargetBlockTemperatureCreateCommand | TCSetTargetLidTemperatureCreateCommand | HeaterShakerSetTargetTemperatureCreateCommand;
 declare const T_KEYS_BY_COMMAND_TYPE: {

package/lib/organisms/CommandText/useCommandTextString/utils/commandText/index.d.ts

@@ -24,3 +24,5 @@ export * from './getPipettingCommandText';
 export * from './getLiquidProbeCommandText';
 export * from './getRailLightsCommandText';
 export * from './getAbsorbanceReaderCommandText';
+export * from './getFlexStackerCommandText';
+export * from './getRobotCommandText';

package/lib/organisms/CommandText/useCommandTextString/utils/getAddressableAreaDisplayName.d.ts

@@ -1,3 +1,3 @@
-import type { RunTimeCommand } from '@opentrons/shared-data';
 import type { TFunction } from 'i18next';
+import type { RunTimeCommand } from '@opentrons/shared-data';
 export declare function getAddressableAreaDisplayName(commands: RunTimeCommand[] | undefined, commandId: string, t: TFunction): string;

package/lib/organisms/CommandText/useCommandTextString/utils/getFinalLabwareLocation.d.ts

@@ -1,4 +1,4 @@
-import type { LabwareLocation, RunTimeCommand, LabwareLocationSequence } from '@opentrons/shared-data';
+import type { LabwareLocation, LabwareLocationSequence, RunTimeCommand } from '@opentrons/shared-data';
 /**
  * given a list of commands and a labwareId, calculate the resulting location
  * of the corresponding labware after all given commands are executed

package/lib/organisms/CommandText/useCommandTextString/utils/getLabwareDisplayLocation.d.ts

@@ -1,6 +1,6 @@
 import type { TFunction } from 'i18next';
-import type { LocationFullParams, LocationSlotOnlyParams } from './getLabwareLocation';
 import type { LabwareLocation, LabwareLocationSequence } from '@opentrons/shared-data';
+import type { LocationFullParams, LocationSlotOnlyParams } from './getLabwareLocation';
 export interface DisplayLocationSlotOnlyParams extends Omit<LocationSlotOnlyParams, 'location'> {
     t: TFunction;
     isOnDevice?: boolean;

package/lib/organisms/CommandText/useCommandTextString/utils/getLabwareLocation.d.ts

@@ -1,4 +1,4 @@
-import type { LabwareDefinition2, LabwareLocation, ModuleModel, RobotType, LabwareLocationSequence } from '@opentrons/shared-data';
+import type { LabwareDefinition2, LabwareLocation, LabwareLocationSequence, ModuleModel, RobotType } from '@opentrons/shared-data';
 import type { LoadedLabwares, LoadedModules } from './types';
 export interface LocationResult {
     slotName: string;

package/lib/organisms/DeckLabelSet/index.d.ts

@@ -7,6 +7,7 @@ interface DeckLabelSetProps {
     width: number;
     height: number;
     invert?: boolean;
+    showModuleIcon?: boolean;
 }
 export declare const DeckLabelSet: import("react").ForwardRefExoticComponent<DeckLabelSetProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/organisms/FixtureOption/__tests__/FixtureOption.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/organisms/FixtureOption/index.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEventHandler } from 'react';
+interface FixtureOptionProps {
+    onClickHandler: MouseEventHandler;
+    optionName: string;
+    buttonText: string;
+    isOnDevice: boolean;
+}
+export declare function FixtureOption(props: FixtureOptionProps): JSX.Element;
+export declare const FixtureButtonODD: import("styled-components").StyledComponent<"button", any, import("../../primitives").StyleProps, any>;
+export {};

package/lib/organisms/ProtocolTimelineScrubber/utils.d.ts

@@ -1,6 +1,6 @@
-import type { WellFill } from '../../hardware-sim';
 import type { CompletedProtocolAnalysis, LabwareDefinition2, ProtocolAnalysisOutput, RunTimeCommand } from '@opentrons/shared-data';
 import type { LabwareEntities, LocationLiquidState, SingleLabwareLiquidState, TimelineFrame } from '@opentrons/step-generation';
+import type { WellFill } from '../../hardware-sim';
 import type { CommandTextData } from './types';
 export interface WellContents {
     groupIds: string[];

package/lib/organisms/index.d.ts

@@ -2,3 +2,4 @@ export * from './DeckLabelSet';
 export * from './Toolbox';
 export * from './ProtocolTimelineScrubber';
 export * from './CommandText';
+export * from './FixtureOption';

package/lib/primitives/ForeignObject.d.ts

@@ -1,4 +1,4 @@
-import type { StyleProps, PrimitiveComponent } from './types';
+import type { PrimitiveComponent, StyleProps } from './types';
 export interface ForeignObjectProps extends StyleProps {
     /** attach a width attribute to the <svg> element */
     svgWidth?: string | number;

package/lib/primitives/Link.d.ts

@@ -1,4 +1,4 @@
-import type { StyleProps, PrimitiveComponent } from './types';
+import type { PrimitiveComponent, StyleProps } from './types';
 export interface LinkProps extends StyleProps {
     /** render link with target="_blank" */
     external?: boolean;

package/lib/primitives/Svg.d.ts

@@ -1,4 +1,4 @@
-import type { StyleProps, PrimitiveComponent } from './types';
+import type { PrimitiveComponent, StyleProps } from './types';
 export interface SvgProps extends StyleProps {
     /** attach a width attribute to the <svg> element */
     svgWidth?: string | number;

package/lib/primitives/style-props.d.ts

@@ -1,7 +1,7 @@
-import type * as Types from './types';
 import type { CSSObject } from 'styled-components';
+import type * as Types from './types';
 type Text = string | number;
-export declare const STYLE_PROPS: ("left" | "right" | "filter" | "overflow" | "overflowX" | "overflowY" | "cursor" | "transformOrigin" | "bottom" | "top" | "color" | "backgroundColor" | "opacity" | "fontSize" | "fontWeight" | "fontStyle" | "lineHeight" | "textAlign" | "textTransform" | "textDecoration" | "margin" | "marginX" | "marginY" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderRadius" | "borderWidth" | "borderColor" | "boxShadow" | "flex" | "alignItems" | "alignSelf" | "justifyContent" | "flexDirection" | "flexWrap" | "whiteSpace" | "columnGap" | "gridGap" | "gridTemplateAreas" | "gridTemplateRows" | "gridTemplateColumns" | "gridArea" | "gridRow" | "gridColumn" | "display" | "size" | "width" | "minWidth" | "maxWidth" | "height" | "minHeight" | "maxHeight" | "wordSpacing" | "overflowWrap" | "position" | "zIndex" | "transform" | "textOverflow" | "flexGrow" | "gap" | "transition")[];
+export declare const STYLE_PROPS: ("overflow" | "overflowX" | "overflowY" | "cursor" | "transformOrigin" | "bottom" | "left" | "right" | "top" | "color" | "backgroundColor" | "opacity" | "fontSize" | "fontWeight" | "fontStyle" | "lineHeight" | "textAlign" | "textTransform" | "textDecoration" | "margin" | "marginX" | "marginY" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderRadius" | "borderWidth" | "borderColor" | "boxShadow" | "flex" | "alignItems" | "alignSelf" | "justifyContent" | "flexDirection" | "flexWrap" | "whiteSpace" | "columnGap" | "gridGap" | "gridTemplateAreas" | "gridTemplateRows" | "gridTemplateColumns" | "gridArea" | "gridRow" | "gridColumn" | "display" | "size" | "width" | "minWidth" | "maxWidth" | "height" | "minHeight" | "maxHeight" | "wordSpacing" | "overflowWrap" | "position" | "zIndex" | "transform" | "filter" | "textOverflow" | "flexGrow" | "gap" | "transition")[];
 export declare const styleProps: (props: Types.StyleProps) => CSSObject;
 export declare const isntStyleProp: (prop: string | Text) => boolean;
 export {};

package/lib/primitives/types.d.ts

@@ -1,5 +1,5 @@
+import type { CSSProperties, StyledComponent } from 'styled-components';
 import type { ComponentType } from 'react';
-import type { StyledComponent, CSSProperties } from 'styled-components';
 export interface ColorProps {
     color?: string;
     backgroundColor?: string;

package/lib/testing/utils/renderWithProviders.d.ts

@@ -1,7 +1,7 @@
 import { I18nextProvider } from 'react-i18next';
-import type { ComponentProps, ReactElement } from 'react';
-import type { RenderResult, RenderOptions } from '@testing-library/react';
+import type { RenderOptions, RenderResult } from '@testing-library/react';
 import type { Store } from 'redux';
+import type { ComponentProps, ReactElement } from 'react';
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
     initialState?: State;
     i18nInstance: ComponentProps<typeof I18nextProvider>['i18n'];

package/lib/tooltips/LegacyTooltip.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode, RefCallback } from 'react';
-import type { Placement } from './types';
 import type { StyleProps } from '../primitives';
+import type { Placement } from './types';
 export interface LegacyTooltipProps extends StyleProps {
     /** Whether or not the tooltip should be rendered */
     visible: boolean;

package/lib/tooltips/types.d.ts

@@ -1,6 +1,6 @@
+import type { Instance, Modifier, Options } from '@popperjs/core/lib/types';
 import type { CSSProperties, RefCallback } from 'react';
-import type { Instance, Options, Modifier } from '@popperjs/core/lib/types';
-import type { UseHoverOptions, HoverHandlers } from '../interaction-enhancers';
+import type { HoverHandlers, UseHoverOptions } from '../interaction-enhancers';
 export type Placement = Options['placement'];
 export type Strategy = Options['strategy'];
 export type PopperInstance = Instance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.7-alpha.0",
+  "version": "0.1.7-alpha.1",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
@@ -22,8 +22,7 @@
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.7-alpha.0",
-    "@opentrons/step-generation": "link:../step-generation",
+    "@opentrons/shared-data": "0.1.7-alpha.1",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",

package/src/Components.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Helix/AboutHelix" />
+
+# About Helix
+
+Helix is a design system for building user interfaces for Opentrons.
+Currently, it is used by the Desktop app, Touchscreen app, Protocol Designer, and Opentrons AI client.
+
+Figma: <a href="https://www.figma.com/design/1ot18My22DALIcjdLl5LJh/Helix-Design-System?node-id=302-1785&m=dev" target="_blank">Helix Design System</a>
+
+Contents will be added soon.

package/src/__tests__/utils.test.ts

@@ -1,4 +1,5 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
+
 import { truncateString } from '../utils'
 
 describe('truncateString', () => {

package/src/alerts/AlertItem.stories.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { AlertItem } from './AlertItem'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/AlertItem',

package/src/alerts/AlertItem.tsx

@@ -1,6 +1,7 @@
 import cx from 'classnames'
-import { Icon } from '../icons'
+
 import { IconButton } from '../buttons'
+import { Icon } from '../icons'
 import styles from './alerts.module.css'
 
 import type { ReactNode } from 'react'

package/src/assets/localization/en/protocol_command_text.json

@@ -32,12 +32,18 @@
   "drop_tip_in_place": "Dropping tip in place",
   "dropping_tip_in_trash": "Dropping tip in {{trash}}",
   "engaging_magnetic_module": "Engaging Magnetic Module",
+  "extension_mount": "extension mount",
+  "extension_z": "extension Z",
+  "extension_jaw": "extension jaw",
   "fixed_trash": "Fixed Trash",
   "get_next_tip": "Calculating position of the next available tip",
   "home_gantry": "Homing all gantry, pipette, and plunger axes",
   "in_location": "in {{location}}",
   "latching_hs_latch": "Latching labware on Heater-Shaker",
   "left": "Left",
+  "left_mount": "left mount",
+  "left_plunger": "left plunger",
+  "left_z": "left Z",
   "load_labware_to_display_location": "Load {{labware}} {{display_location}}",
   "load_liquid_class": "Loading {{liquidClassDisplayName}} Liquid Class",
   "load_liquids_info_protocol_setup": "Load {{liquid}} into {{labware}}",
@@ -69,6 +75,14 @@
   "reloading_labware": "Reloading {{labware}}",
   "return_tip": "Returning tip to {{well_name}} of {{labware}} in {{labware_location}}",
   "right": "Right",
+  "right_mount": "right mount",
+  "right_plunger": "right plunger",
+  "right_z": "right Z",
+  "robot_close_gripper_jaw": "Closing robot gripper jaw",
+  "robot_move_to": "Moving {{mount}} to (X: {{x}}, Y: {{y}}, Z: {{z}})",
+  "robot_move_axes_relative": "Moving robot by {{displacement}}",
+  "robot_move_axes_to": "Moving robot to {{position}}",
+  "robot_open_gripper_jaw": "Opening robot gripper jaw",
   "row_layout": "row layout",
   "save_position": "Saving position",
   "set_and_await_hs_shake": "Setting Heater-Shaker to shake at {{rpm}} rpm and waiting until reached",

package/src/atoms/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { Checkbox } from './index'
 
-import type { StoryObj, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Helix/Atoms/Checkbox',

package/src/atoms/Checkbox/__tests__/Checkbox.test.tsx

@@ -1,8 +1,10 @@
-import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
+
 import { Checkbox } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/Checkbox/index.tsx

@@ -1,7 +1,8 @@
 import { css } from 'styled-components'
-import { COLORS, BORDERS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
   CURSOR_AUTO,

package/src/atoms/CheckboxField/CheckboxField.stories.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
+
 import { CheckboxField as CheckboxFieldComponent } from './index'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 export default {
-  title: 'Library/Atoms/Checkbox Field',
+  title: 'Helix/Atoms/Checkbox Field',
   component: CheckboxFieldComponent,
 } as Meta
 

package/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx

@@ -1,11 +1,13 @@
-import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
+import { CheckboxField } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
-import { CheckboxField } from '..'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 
@@ -42,15 +44,11 @@ describe('CheckboxField', () => {
     // INNER_STYLE_NO_VALUE
     expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
+    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
+    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
 
     // INPUT_STYLE
     expect(checkBoxInput).toHaveStyle(`position: absolute`)
@@ -64,13 +62,11 @@ describe('CheckboxField', () => {
     expect(checkBoxInput).toHaveAttribute('tabindex', '0')
 
     // LABEL_TEXT_STYLE
+    expect(checkBoxFieldBox).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
     expect(checkBoxFieldBox).toHaveStyle(
-      `font-size: ${String(TYPOGRAPHY.fontSizeP)}`
+      `font-weight: ${TYPOGRAPHY.fontWeightRegular}`
     )
-    expect(checkBoxFieldBox).toHaveStyle(
-      `font-weight: ${String(TYPOGRAPHY.fontWeightRegular)}`
-    )
-    expect(checkBoxFieldBox).toHaveStyle(`color: ${String(COLORS.black90)}`)
+    expect(checkBoxFieldBox).toHaveStyle(`color: ${COLORS.black90}`)
     expect(checkBoxFieldBox).toHaveStyle(`flex: 0 0 auto`)
     expect(checkBoxFieldBox).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing8}`
@@ -83,15 +79,11 @@ describe('CheckboxField', () => {
     const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
     expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue50)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.blue50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
+    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
+    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
   })
 
   it('renders label with correct style - value undefined', () => {
@@ -100,15 +92,11 @@ describe('CheckboxField', () => {
     const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
     expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
+    expect(checkBoxIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius2}`)
+    expect(checkBoxIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`)
+    expect(checkBoxIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
   })
 
   it('renders label with correct style - disabled true', () => {
@@ -126,9 +114,7 @@ describe('CheckboxField', () => {
     const checkBoxInput = screen.getByRole('checkbox', {
       name: 'checkMockCheckboxField',
     })
-    const checkBoxFieldBox = screen.getByText('checkMockCheckboxField')
     expect(checkBoxInput).toHaveAttribute('tabindex', '1')
-    expect(checkBoxFieldBox).toHaveAttribute('tabindex', '1')
   })
 
   it('calls mock function when clicking checkboxfield', () => {

package/src/atoms/CheckboxField/index.tsx

@@ -1,15 +1,17 @@
 import { css } from 'styled-components'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS, BORDERS } from '../../helix-design-system'
-import { Flex, Box } from '../../primitives'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
+import { Box, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
   CURSOR_AUTO,
   CURSOR_POINTER,
   JUSTIFY_CENTER,
 } from '../../styles'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react'
 
 export interface CheckboxFieldProps {
@@ -31,6 +33,58 @@ export interface CheckboxFieldProps {
   isIndeterminate?: boolean
 }
 
+export function CheckboxField(props: CheckboxFieldProps): JSX.Element {
+  const {
+    onChange,
+    value,
+    name,
+    label,
+    disabled,
+    tabIndex = 0,
+    isIndeterminate,
+  } = props
+  const indeterminate = isIndeterminate ?? false ? 'true' : undefined
+
+  return (
+    <label css={OUTER_STYLE(value ?? false)}>
+      {props.isIndeterminate ?? false ? (
+        <Flex
+          alignItems={ALIGN_CENTER}
+          justifyContent={JUSTIFY_CENTER}
+          borderRadius={BORDERS.borderRadius2}
+          backgroundColor={COLORS.grey30}
+          size="1.25rem"
+        >
+          <Box
+            height="1.5px"
+            width="0.375rem"
+            backgroundColor={COLORS.grey50}
+          />
+        </Flex>
+      ) : (
+        <Icon
+          css={value ?? false ? INNER_STYLE_VALUE : INNER_STYLE_NO_VALUE}
+          name={value ?? false ? 'ot-checkbox' : 'checkbox-blank-outline'}
+          width="100%"
+          data-testid="CheckboxField_icon"
+        />
+      )}
+      <input
+        css={INPUT_STYLE}
+        type="checkbox"
+        name={name}
+        checked={(value ?? false) || false}
+        disabled={disabled}
+        onChange={onChange}
+        tabIndex={tabIndex}
+        /* @ts-expect-error */
+        indeterminate={indeterminate}
+      />
+      <Box css={LABEL_TEXT_STYLE}>{label}</Box>
+    </label>
+  )
+}
+
 const INPUT_STYLE = css`
   position: absolute;
   overflow: hidden;
@@ -41,7 +95,8 @@ const INPUT_STYLE = css`
   padding: 0;
   border: 0;
 `
-const OUTER_STYLE = css`
+
+const OUTER_STYLE = (value?: boolean): FlattenSimpleInterpolation => css`
   font-size: var(--fs-body-1); /* from legacy --font-form-default */
   font-weight: var(--fw-regular); /* from legacy --font-form-default */
   color: var(--c-font-dark); /* from legacy --font-form-default */
@@ -49,6 +104,27 @@ const OUTER_STYLE = css`
   display: flex;
   align-items: ${ALIGN_CENTER};
   line-height: 1;
+
+  &:has(input[type='checkbox']:focus-visible) {
+    [data-testid='CheckboxField_icon'] {
+      color: ${value === true ? COLORS.blue50 : COLORS.grey55};
+      outline: 2px solid ${COLORS.blue50};
+      outline-offset: 0.25rem;
+    }
+  }
+`
+
+const LABEL_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  font-weight: ${TYPOGRAPHY.fontWeightRegular};
+  line-height: ${TYPOGRAPHY.lineHeight20};
+  color: ${COLORS.black90};
+  flex: 0 0 auto;
+  padding: ${SPACING.spacing8} ${SPACING.spacing8};
+
+  &:empty {
+    padding: 0;
+  }
 `
 
 const INNER_STYLE_VALUE = css`
@@ -72,6 +148,7 @@ const INNER_STYLE_VALUE = css`
   &:focus {
     box-shadow: 0 0 0 3px ${COLORS.blue50};
   }
+
   &:disabled {
     color: ${COLORS.blue60};
   }
@@ -104,69 +181,3 @@ const INNER_STYLE_NO_VALUE = css`
     cursor: ${CURSOR_AUTO};
   }
 `
-
-const LABEL_TEXT_STYLE = css`
-  font-size: ${TYPOGRAPHY.fontSizeP};
-  font-weight: ${TYPOGRAPHY.fontWeightRegular};
-  color: ${COLORS.black90};
-  flex: 0 0 auto;
-  padding: ${SPACING.spacing8} ${SPACING.spacing8};
-
-  &:empty {
-    padding: 0;
-  }
-`
-
-export function CheckboxField(props: CheckboxFieldProps): JSX.Element {
-  const {
-    onChange,
-    value,
-    name,
-    label,
-    disabled,
-    tabIndex = 0,
-    isIndeterminate,
-  } = props
-  const indeterminate = isIndeterminate ?? false ? 'true' : undefined
-
-  return (
-    <label css={OUTER_STYLE}>
-      {props.isIndeterminate ?? false ? (
-        <Flex
-          alignItems={ALIGN_CENTER}
-          justifyContent={JUSTIFY_CENTER}
-          borderRadius={BORDERS.borderRadius2}
-          backgroundColor={COLORS.grey30}
-          size="1.25rem"
-        >
-          <Box
-            height="1.5px"
-            width="0.375rem"
-            backgroundColor={COLORS.grey50}
-          />
-        </Flex>
-      ) : (
-        <Icon
-          css={value ?? false ? INNER_STYLE_VALUE : INNER_STYLE_NO_VALUE}
-          name={value ?? false ? 'ot-checkbox' : 'checkbox-blank-outline'}
-          width="100%"
-          data-testid="CheckboxField_icon"
-        />
-      )}
-      <input
-        css={INPUT_STYLE}
-        type="checkbox"
-        name={name}
-        checked={(value ?? false) || false}
-        disabled={disabled}
-        onChange={onChange}
-        tabIndex={tabIndex}
-        /* @ts-expect-error */
-        indeterminate={indeterminate}
-      />
-      <Box css={LABEL_TEXT_STYLE} tabIndex={tabIndex}>
-        {label}
-      </Box>
-    </label>
-  )
-}

package/src/atoms/Chip/Chip.stories.tsx

@@ -1,7 +1,8 @@
-import { Flex, STYLE_PROPS } from '../../primitives'
+import { Chip as ChipComponent } from '.'
 import { COLORS } from '../../helix-design-system'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { Chip as ChipComponent } from '.'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ChipComponent> = {