docs: fix details component + other styling fixes (#5217)

* docs: fix details component

* general styling fixes

www/packages/docs-ui/src/components/Input/Text/index.tsx

@@ -3,12 +3,17 @@ import clsx from "clsx"
 
 export type InputTextProps = {
   className?: string
+  addGroupStyling?: boolean
 } & React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 >
 
-export const InputText = (props: InputTextProps) => {
+export const InputText = ({
+  addGroupStyling = false,
+  className,
+  ...props
+}: InputTextProps) => {
   return (
     <input
       {...props}
@@ -17,6 +22,7 @@ export const InputText = (props: InputTextProps) => {
         "border-medusa-border-base rounded-docs_sm border border-solid",
         "px-docs_0.75 py-[9px]",
         "hover:bg-medusa-bg-field-hover",
+        addGroupStyling && "group-hover:bg-medusa-bg-field-hover",
         "focus:border-medusa-border-interactive",
         "active:border-medusa-border-interactive",
         "disabled:bg-medusa-bg-disabled",
@@ -24,7 +30,7 @@ export const InputText = (props: InputTextProps) => {
         "placeholder:text-medusa-fg-muted",
         "disabled:placeholder:text-medusa-fg-disabled",
         "text-compact-medium font-base",
-        props.className
+        className
       )}
     />
   )