Remove styled-component

[dtrucs]

No description provided.

[mabhub]

I'd leave a ListWithSteps component written like:

const ListWithSteps = ({ className = '', ...props }) => (
  <div
    className={cn(
      className,
      'content-WYSIWYG',
      '[&>ol]:my-2 desktop:[&>ol]:my-4 [&>ol]:ml-3',
      '[&>ol]:border-l-3 [&>ol]:border-primary3',
      '[&>ol>li]:relative [&>ol>li]:pl-12 [&>ol>li]:-ml-4 [&>ol>li]:mt-4 first:[&>ol>li]:mt-0 desktop:[&>ol>li]:mt-10 [&>ol>li]:[counter-increment:steps]',
      'before:[&>ol>li]:absolute before:[&>ol>li]:left-0 before:[&>ol>li]:top-1/2 before:[&>ol>li]:-translate-y-1/2',
      'before:[&>ol>li]:mr-4 desktop:before:[&>ol>li]:mr-6',
      'before:[&>ol>li]:content-[counter(steps)] before:[&>ol>li]:rounded-full before:[&>ol>li]:size-7',
      'before:[&>ol>li]:flex before:[&>ol>li]:items-center before:[&>ol>li]:justify-center',
      'before:[&>ol>li]:text-sm before:[&>ol>li]:text-white before:[&>ol>li]:bg-redMarker',
      'before:[&>ol>li]:shadow-md',
    )}
    {...props}
  />
);

then:

<ListWithSteps>{parse(descriptionHtml)}</ListWithSteps>

[mabhub]

As HtmlText is used multiple times, i would have leave it, but simply re-authored like:

const HtmlText = ({ className = '', ...props }) => (
  <div
    className={cn(className, 'content-WYSIWYG')}
    {...props}
  />
);