.x2e2 / .kbt32x

[realjokele]

Hi,

what is the reason for CSS classes like .x2e2 and .kbt32x? These classes don't seem to make sense and I wonder if I could delete them.

I've found these classes e.g. in the fields component:

const fieldGroupPrefixStyles = tv({
  base: [
    'group-invalid:border-danger group-invalid:focus-within:ring-danger/20 flex items-center group-disabled:bg-secondary group-disabled:opacity-50',
    '[&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:place-items-center [&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm',
    '[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm',
    '[&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isPfx>.kbt32x]:ml-0.5 [&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isSfx>.kbt32x]:mr-0.5',
  ],
})

Thanks :-)

[irsyadadl]

These are old classes I created to mark the children. Please don't delete them unless you're sure they have no effect. And if right now I need to target a child, I'll use data attribute like the dialog component.

[realjokele]

Ah! I see. I've just looked at the dialog component. This makes sense now.

Thanks!

[realjokele]

I've just found this in the textfield component. I've completely overlooked it...

        {isLoading && indicatorPlace === 'prefix' ? (
          <IconLoader className="isPfx animate-spin" />
        ) : prefix ? (
          <span className="atrs isPfx x2e2">{prefix}</span>
        ) : null}

Yep, got it!