@cerberus-design/react 0.17.2 → 0.18.1

package/src/components/admonition/admonition.tsx

@@ -1,5 +1,5 @@
 import type { HTMLArkProps } from '@ark-ui/react/factory'
-import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
+import type { AdmonitionVariantProps } from 'styled-system/recipes'
 import type { ReactNode } from 'react'
 import { splitProps } from '../../utils/index'
 import { AdmonitionParts } from './parts'
@@ -45,14 +45,14 @@ export function Admonition(props: AdmonitionProps) {
   return (
     <AdmonitionParts.Root {...styleProps} {...rootProps}>
       <Show
-        when={Boolean(elProps.icon)}
+        when={elProps.icon}
         fallback={<MatchAvatar palette={styleProps.palette} />}
       >
         <AdmonitionParts.Indicator>{elProps.icon}</AdmonitionParts.Indicator>
       </Show>
 
       <AdmonitionParts.Content>
-        <Show when={Boolean(elProps.heading)}>
+        <Show when={elProps.heading}>
           <AdmonitionParts.Heading>{elProps.heading}</AdmonitionParts.Heading>
         </Show>
 

package/src/components/admonition/match-avatar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
+import type { AdmonitionVariantProps } from 'styled-system/recipes'
 import { useRef, type ReactNode } from 'react'
 import { useCerberusContext } from '../../context/cerberus'
 import { Avatar } from '../avatar/avatar'

package/src/components/admonition/primitives.tsx

@@ -1,9 +1,6 @@
 import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  admonition,
-  type AdmonitionVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { admonition, type AdmonitionVariantProps } from 'styled-system/recipes'
 
 /**
  * This module contains the primitives of the Admonition components.

package/src/components/avatar/avatar.tsx

@@ -1,5 +1,5 @@
 import type { AvatarRootProps } from '@ark-ui/react/avatar'
-import type { AvatarVariantProps } from '@cerberus/styled-system/recipes'
+import type { AvatarVariantProps } from 'styled-system/recipes'
 import type { ReactNode } from 'react'
 import { splitProps } from '../../utils'
 import { Show } from '../Show'
@@ -40,7 +40,7 @@ export function Avatar(props: AvatarWithoutImage | AvatarWithImage) {
   return (
     <AvatarParts.Root {...rootProps}>
       <Show
-        when={Boolean(children)}
+        when={children}
         fallback={
           <>
             <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>

package/src/components/avatar/primitives.tsx

@@ -4,11 +4,8 @@ import {
   type AvatarImageProps,
   type AvatarRootProps,
 } from '@ark-ui/react/avatar'
-import {
-  avatar,
-  type AvatarVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { avatar, type AvatarVariantProps } from 'styled-system/recipes'
+import { cx } from 'styled-system/css'
 
 /**
  * This module provides the primitive components for the Avatar component.

package/src/components/button/button.tsx

@@ -7,12 +7,9 @@ import {
   useContext,
   useMemo,
 } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  button,
-  type ButtonVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { Box } from '@cerberus/styled-system/jsx'
+import { cx } from 'styled-system/css'
+import { button, type ButtonVariantProps } from 'styled-system/recipes'
+import { Box } from 'styled-system/jsx'
 import { Show } from '../Show'
 import { Spinner } from '../Spinner'
 

package/src/components/checkbox/checkbox.tsx

@@ -1,5 +1,5 @@
 import type { CheckboxRootProps } from '@ark-ui/react'
-import { type CheckboxVariantProps } from '@cerberus/styled-system/recipes'
+import { type CheckboxVariantProps } from 'styled-system/recipes'
 import { Show } from '../Show'
 import { Text } from '../Text'
 import { CheckboxParts } from './parts'

package/src/components/checkbox/primitives.tsx

@@ -6,11 +6,8 @@ import {
   type CheckboxLabelProps,
   type CheckboxRootProps,
 } from '@ark-ui/react'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  checkbox,
-  type CheckboxVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { checkbox, type CheckboxVariantProps } from 'styled-system/recipes'
 
 /**
  * This module contains the Checkbox primitives.

package/src/components/combobox/combobox.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { ComboboxRootProps } from '@ark-ui/react/combobox'
-import type { ComboboxVariantProps } from '@cerberus/styled-system/recipes'
+import type { ComboboxVariantProps } from 'styled-system/recipes'
 import { useCerberusContext } from '../../context/cerberus'
 import type { SelectCollectionItem } from '../select/select'
 import { type FieldInputProps } from '../field/index'
@@ -33,7 +33,7 @@ export function Combobox(props: ComboboxProps) {
 
   return (
     <ComboboxParts.Root {...rootProps}>
-      <Show when={Boolean(label)}>
+      <Show when={label}>
         <ComboboxParts.Label>{label}</ComboboxParts.Label>
       </Show>
 

package/src/components/combobox/primitives.tsx

@@ -16,11 +16,8 @@ import {
 } from '@ark-ui/react/combobox'
 import { ark } from '@ark-ui/react/factory'
 import type { SelectCollectionItem } from '../select/select'
-import {
-  combobox,
-  type ComboboxVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { combobox, type ComboboxVariantProps } from 'styled-system/recipes'
+import { cx } from 'styled-system/css'
 import type { PropsWithChildren } from 'react'
 
 /**

package/src/components/cta-dialog/provider.tsx

@@ -9,7 +9,7 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { HStack, VStack } from '@cerberus/styled-system/jsx'
+import { HStack, VStack } from 'styled-system/jsx'
 import { useCerberusContext } from '../../context/cerberus'
 import { Show } from '../Show'
 import { For } from '../for'
@@ -115,7 +115,7 @@ export function CTAModal(props: PropsWithChildren<object>) {
                   gradient="charon-light"
                   fallback={
                     <Show
-                      when={Boolean(confirmIcon)}
+                      when={confirmIcon}
                       fallback={<FallbackIcon size={24} />}
                     >
                       {confirmIcon}

package/src/components/cta-dialog/trigger-item.tsx

@@ -1,7 +1,7 @@
-import { css, cx } from '@cerberus/styled-system/css'
+import { css, cx } from 'styled-system/css'
 import { Button, type ButtonProps } from '../button/button'
 import { ark } from '@ark-ui/react/factory'
-import { button } from '@cerberus/styled-system/recipes'
+import { button } from 'styled-system/recipes'
 
 /**
  * This module provides the trigger item for the cta modal.

package/src/components/date-picker/primitives.tsx

@@ -1,19 +1,31 @@
 import {
   DatePicker,
   type DatePickerContentProps,
+  type DatePickerContextProps,
   type DatePickerControlProps,
   type DatePickerInputProps,
   type DatePickerLabelProps,
+  type DatePickerMonthSelectProps,
+  type DatePickerNextTriggerProps,
+  type DatePickerPositionerProps,
+  type DatePickerPrevTriggerProps,
   type DatePickerRangeTextProps,
+  type DatePickerRootProps,
+  type DatePickerTableBodyProps,
   type DatePickerTableCellProps,
   type DatePickerTableCellTriggerProps,
   type DatePickerTableHeaderProps,
+  type DatePickerTableHeadProps,
   type DatePickerTableProps,
+  type DatePickerTableRowProps,
   type DatePickerTriggerProps,
   type DatePickerViewControlProps,
+  type DatePickerViewProps,
+  type DatePickerViewTriggerProps,
+  type DatePickerYearSelectProps,
 } from '@ark-ui/react/date-picker'
-import { cx } from '@cerberus/styled-system/css'
-import { datePicker } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { datePicker } from 'styled-system/recipes'
 
 /**
  * This module contains the DatePicker primitives.
@@ -170,63 +182,99 @@ export function DatePickerTableCellTrigger(
 /**
  * The root component of the DatePicker. This primitive has no Cerberus styles.
  */
-export const DatePickerRoot = DatePicker.Root
+export function DatePickerRoot(props: DatePickerRootProps) {
+  return <DatePicker.Root {...props} />
+}
+
 /**
  * The label component of the DatePicker. This primitive has no Cerberus styles.
  */
-export const DatePickerClearTrigger = DatePicker.ClearTrigger
+export function DatePickerClearTrigger(props: DatePickerTriggerProps) {
+  return <DatePicker.ClearTrigger {...props} />
+}
+
 /**
  * The control component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerPositioner = DatePicker.Positioner
+export function DatePickerPositioner(props: DatePickerPositionerProps) {
+  return <DatePicker.Positioner {...props} />
+}
+
 /**
  * The year select input component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export const DatePickerYearSelect = DatePicker.YearSelect
+export function DatePickerYearSelect(props: DatePickerYearSelectProps) {
+  return <DatePicker.YearSelect {...props} />
+}
+
 /**
  * The month select input component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export const DatePickerMonthSelect = DatePicker.MonthSelect
+export function DatePickerMonthSelect(props: DatePickerMonthSelectProps) {
+  return <DatePicker.MonthSelect {...props} />
+}
+
 /**
  * The day view component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerView = DatePicker.View
+export function DatePickerView(props: DatePickerViewProps) {
+  return <DatePicker.View {...props} />
+}
+
 /**
  * The day context component of the DatePicker. This primitive has no
  * Cerberus styles.
  */
-export const DatePickerContext = DatePicker.Context
+export function DatePickerContext(props: DatePickerContextProps) {
+  return <DatePicker.Context {...props} />
+}
+
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerPrevTrigger = DatePicker.PrevTrigger
+export function DatePickerPrevTrigger(props: DatePickerPrevTriggerProps) {
+  return <DatePicker.PrevTrigger {...props} />
+}
+
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerNextTrigger = DatePicker.NextTrigger
+export function DatePickerNextTrigger(props: DatePickerNextTriggerProps) {
+  return <DatePicker.NextTrigger {...props} />
+}
+
 /**
  * The trigger component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerViewTrigger = DatePicker.ViewTrigger
+export function DatePickerViewTrigger(props: DatePickerViewTriggerProps) {
+  return <DatePicker.ViewTrigger {...props} />
+}
+
 /**
  * The table head component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerTableHead = DatePicker.TableHead
+export function DatePickerTableHead(props: DatePickerTableHeadProps) {
+  return <DatePicker.TableHead {...props} />
+}
 /**
  * The table row component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerTableRow = DatePicker.TableRow
+export function DatePickerTableRow(props: DatePickerTableRowProps) {
+  return <DatePicker.TableRow {...props} />
+}
 /**
  * The table body component of the DatePicker. This primitive has no Cerberus
  * styles.
  */
-export const DatePickerTableBody = DatePicker.TableBody
+export function DatePickerTableBody(props: DatePickerTableBodyProps) {
+  return <DatePicker.TableBody {...props} />
+}

package/src/components/date-picker/view-control-group.tsx

@@ -5,7 +5,7 @@ import { useCerberusContext } from '../../context/cerberus'
 import { IconButton } from '../IconButton'
 import { DatePickerParts } from './parts'
 import { Button } from '../button/button'
-import { css } from '@cerberus/styled-system/css'
+import { css } from 'styled-system/css'
 
 /**
  * This private module contains an abstraction of the DatePickerViewControl

package/src/components/deprecated/FieldMessage.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import type { HTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx } from 'styled-system/css'
 import {
   fieldMessage,
   type FieldMessageVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 import { useFieldContext } from '@ark-ui/react/field'
 
 /**

package/src/components/deprecated/FieldsetLabel.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { label, type LabelVariantProps } from 'styled-system/recipes'
 import type { LabelProps } from './Label'
 
 /**

package/src/components/deprecated/Label.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react'
-import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { label, type LabelVariantProps } from 'styled-system/recipes'
+import { cx } from 'styled-system/css'
 import { FieldLabel } from '../field'
 
 /**

package/src/components/deprecated/Legend.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useFieldContext } from '@ark-ui/react/field'
-import { css, cx } from '@cerberus/styled-system/css'
-import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
-import { hstack } from '@cerberus/styled-system/patterns'
+import { css, cx } from 'styled-system/css'
+import { label, type LabelVariantProps } from 'styled-system/recipes'
+import { hstack } from 'styled-system/patterns'
 import { type HTMLAttributes } from 'react'
 import { Show } from '../Show'
 

package/src/components/deprecated/Modal.tsx

@@ -1,6 +1,6 @@
-import { cx } from '@cerberus/styled-system/css'
-import { modal } from '@cerberus/styled-system/recipes'
-import { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'
+import { cx } from 'styled-system/css'
+import { modal } from 'styled-system/recipes'
+import { type HTMLAttributes, type Ref } from 'react'
 
 /**
  * This module contains the Modal root component for a customizable modal.
@@ -9,19 +9,13 @@ import { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'
 
 // Modal
 
-export type ModalProps = HTMLAttributes<HTMLDialogElement>
-
-function ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {
-  return (
-    <dialog
-      {...props}
-      className={cx(props.className, modal().dialog)}
-      ref={ref}
-    />
-  )
+export type ModalProps = HTMLAttributes<HTMLDialogElement> & {
+  ref?: Ref<HTMLDialogElement>
 }
 
 /**
  * @deprecated use `Dialog` instead
  */
-export const Modal = forwardRef(ModalEl)
+export function Modal(props: ModalProps) {
+  return <dialog {...props} className={cx(props.className, modal().dialog)} />
+}

package/src/components/deprecated/ModalDescription.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { modal } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { modal } from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/deprecated/ModalHeader.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { vstack } from '@cerberus/styled-system/patterns'
+import { cx } from 'styled-system/css'
+import { vstack } from 'styled-system/patterns'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/deprecated/ModalHeading.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { modal } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { modal } from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/deprecated/NavMenuLink.tsx

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, ElementType } from 'react'
-import { css, cx } from '@cerberus/styled-system/css'
+import { css, cx } from 'styled-system/css'
 import { Show } from '../Show'
 
 /**
@@ -19,7 +19,7 @@ export interface NavMenuLinkProps
 /**
  * @deprecated use the {@link Menu} family instead
  */
-export function NavMenuLink(props: NavMenuLinkProps): JSX.Element {
+export function NavMenuLink(props: NavMenuLinkProps) {
   const { as, ...nativeProps } = props
   const hasAs = Boolean(as)
   const AsSub: ElementType = as!

package/src/components/deprecated/NavMenuList.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useMemo, type HTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { vstack } from '@cerberus/styled-system/patterns'
+import { cx } from 'styled-system/css'
+import { vstack } from 'styled-system/patterns'
 import { useNavMenuContext } from '../../context/navMenu'
 import type { Positions } from '../../types'
 import { Show } from '../Show'
@@ -114,7 +114,7 @@ export interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {
  * </NavMenu>
  * ```
  **/
-export function NavMenuList(props: NavMenuListProps): JSX.Element {
+export function NavMenuList(props: NavMenuListProps) {
   const { position, ...nativeProps } = props
   const { menuRef, expanded } = useNavMenuContext()
   const locationStyles = useMemo(

package/src/components/deprecated/NavMenuTrigger.tsx

@@ -6,8 +6,8 @@ import {
   type ElementType,
   type MouseEvent,
 } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { button } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { button } from 'styled-system/recipes'
 import {
   createNavTriggerProps,
   type NavTriggerAriaValues,
@@ -39,7 +39,7 @@ export interface NavMenuTriggerProps
 /**
  * @deprecated use the {@link Menu} family instead
  */
-export function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {
+export function NavMenuTrigger(props: NavMenuTriggerProps) {
   const {
     as,
     palette,

package/src/components/deprecated/Notification.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { cx } from '@cerberus/styled-system/css'
-import { hstack, vstack } from '@cerberus/styled-system/patterns'
+import { cx } from 'styled-system/css'
+import { hstack, vstack } from 'styled-system/patterns'
 import {
   notification,
   type NotificationVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 import {
   useRef,
   type DialogHTMLAttributes,
@@ -50,7 +50,7 @@ export type NotificationProps = NotificationBaseProps & NotificationVariantProps
  */
 export function Notification(props: PropsWithChildren<NotificationProps>) {
   const { children, palette, onClose, ...nativeProps } = props
-  const ref = useRef<HTMLDialogElement>(null)
+  const ref = useRef<HTMLDialogElement | null>(null)
 
   const onKeyDown = trapFocus(ref)
   const styles = notification({ palette })

package/src/components/deprecated/NotificationDescription.tsx

@@ -1,8 +1,8 @@
-import { cx } from '@cerberus/styled-system/css'
+import { cx } from 'styled-system/css'
 import {
   notification,
   type NotificationVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/deprecated/NotificationHeading.tsx

@@ -1,8 +1,8 @@
-import { cx } from '@cerberus/styled-system/css'
+import { cx } from 'styled-system/css'
 import {
   notification,
   type NotificationVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 /**

package/src/components/dialog/close-icon-trigger.tsx

@@ -4,8 +4,8 @@ import { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'
 import { useCerberusContext } from '../../context/cerberus'
 import { IconButton } from '../IconButton'
 import { DialogCloseTrigger } from './primitives'
-import { dialog } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { dialog } from 'styled-system/recipes'
+import { cx } from 'styled-system/css'
 
 /**
  * This module contains the close trigger for the dialog.

package/src/components/dialog/dialog.tsx

@@ -1,5 +1,5 @@
 import type { DialogContentProps } from '@ark-ui/react/dialog'
-import type { DialogVariantProps } from '@cerberus/styled-system/recipes'
+import type { DialogVariantProps } from 'styled-system/recipes'
 import { Portal } from '../Portal'
 import { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'
 

package/src/components/dialog/primitives.tsx

@@ -8,11 +8,8 @@ import {
   type DialogTitleProps,
   type DialogTriggerProps,
 } from '@ark-ui/react/dialog'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  dialog,
-  type DialogVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { dialog, type DialogVariantProps } from 'styled-system/recipes'
 
 /**
  * This module contains the primitives of the Dialog component.

package/src/components/field/field.tsx

@@ -6,7 +6,7 @@ import {
   FieldLabel,
   FieldRoot,
 } from './primitives'
-import { HStack } from '@cerberus/styled-system/jsx'
+import { HStack } from 'styled-system/jsx'
 import { Show } from '../Show'
 
 export interface FieldProps extends FieldRootProps {
@@ -56,16 +56,16 @@ export function Field(props: FieldProps) {
 
   return (
     <FieldRoot {...statusProps} {...rootProps}>
-      <Show when={Boolean(fieldProps.label)}>
+      <Show when={fieldProps.label}>
         <FieldLabel>{fieldProps.label}</FieldLabel>
       </Show>
 
       {fieldProps.children}
 
-      <Show when={Boolean(fieldProps.helperText && !statusProps.invalid)}>
+      <Show when={fieldProps.helperText && !statusProps.invalid}>
         <HStack justifyContent="space-between" w="full">
           <FieldHelperText>{fieldProps.helperText}</FieldHelperText>
-          <Show when={Boolean(fieldProps.secondaryHelperText)}>
+          <Show when={fieldProps.secondaryHelperText}>
             <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>
           </Show>
         </HStack>

package/src/components/field/primitives.tsx

@@ -7,8 +7,8 @@ import {
   type FieldTextareaProps,
 } from '@ark-ui/react/field'
 import type { ReactNode } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { field, type FieldVariantProps } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { field, type FieldVariantProps } from 'styled-system/recipes'
 import { FieldStatusIndicator } from './status-indicator'
 import { FieldStartIndicator } from './start-indicator'
 

package/src/components/field/start-indicator.tsx

@@ -1,5 +1,5 @@
-import { cx } from '@cerberus/styled-system/css'
-import { field } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { field } from 'styled-system/recipes'
 import type { HTMLAttributes } from 'react'
 
 export type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>