move hq from app folder to pages folder, update react lib classNames

packages/react/src/components/inputs/Radio.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { useMemo } from "react";
 import { useFormContext } from "react-hook-form";
 import { getElementId } from "../../lib/element";
@@ -43,7 +42,7 @@ export function Radio(props: FormbricksProps) {
         <Wrapper wrapperClassName={props.wrapperClassName}>
           <Inner innerClassName={props.innerClassName}>
             <input
-              className={clsx("formbricks-input", props.inputClassName)}
+              className={props.inputClassName || "formbricks-input"}
               type="radio"
               id={elemId}
               {...register(props.name, {
@@ -70,7 +69,7 @@ export function Radio(props: FormbricksProps) {
               <Wrapper wrapperClassName={props.wrapperClassName}>
                 <Inner innerClassName={props.innerClassName}>
                   <input
-                    className={clsx("formbricks-input", props.inputClassName)}
+                    className={props.inputClassName || "formbricks-input"}
                     type="radio"
                     id={`${props.name}-${option.value}`}
                     value={option.value}

packages/react/src/components/shared/ButtonComponent.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import React from "react";
 import { SVGComponent } from "../../types";
 
@@ -10,6 +9,8 @@ interface ButtonProps {
   onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
   PrefixIcon?: SVGComponent;
   SuffixIcon?: SVGComponent;
+  prefixIconClassName?: string;
+  suffixIconClassName?: string;
 }
 
 export default function ButtonComponent({
@@ -20,12 +21,14 @@ export default function ButtonComponent({
   SuffixIcon,
   type = "button",
   elemId,
+  prefixIconClassName,
+  suffixIconClassName,
 }: ButtonProps) {
   return (
     <button className={inputClassName || "formbricks-input"} type={type} id={elemId} onClick={onClick}>
-      {PrefixIcon && <PrefixIcon className={clsx("formbricks-prefix-icon")} />}
+      {PrefixIcon && <PrefixIcon className={prefixIconClassName || "formbricks-prefix-icon"} />}
       {label}
-      {SuffixIcon && <SuffixIcon className={clsx("formbricks-suffix-icon")} />}
+      {SuffixIcon && <SuffixIcon className={suffixIconClassName || "formbricks-suffix-icon"} />}
     </button>
   );
 }

packages/react/src/components/shared/Fieldset.tsx

@@ -9,7 +9,7 @@ interface FieldsetProps {
 
 export function Fieldset({ name, fieldsetClassName, children }: FieldsetProps) {
   return (
-    <fieldset className={clsx("formbricks-fieldset", fieldsetClassName)} name={name}>
+    <fieldset className={fieldsetClassName || "formbricks-fieldset"} name={name}>
       {children}
     </fieldset>
   );

packages/react/src/components/shared/Help.tsx

@@ -11,7 +11,7 @@ export function Help({ help, elemId, helpClassName }: HelpProps) {
     return null;
   }
   return (
-    <div className={clsx("formbricks-help", helpClassName)} id={`help-${elemId}`}>
+    <div className={helpClassName || "formbricks-help"} id={`help-${elemId}`}>
       {help}
     </div>
   );

packages/react/src/components/shared/Input.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { useMemo } from "react";
 import { useFormContext } from "react-hook-form";
 import { getElementId } from "../../lib/element";
@@ -41,7 +40,7 @@ export function Input(props: FormbricksProps) {
         <Label label={props.label} elemId={elemId} labelClassName={props.labelClassName} />
         <Inner innerClassName={props.innerClassName}>
           <input
-            className={clsx("formbricks-input", props.inputClassName)}
+            className={props.inputClassName || "formbricks-input"}
             type={props.type.html}
             id={elemId}
             aria-invalid={errors[props.name] ? "true" : "false"}

packages/react/src/components/shared/Messages.tsx

@@ -1,5 +1,4 @@
 import { ErrorMessage } from "@hookform/error-message";
-import clsx from "clsx";
 import { useFormContext } from "react-hook-form";
 
 interface HelpProps {
@@ -19,9 +18,9 @@ export function Messages({ messagesClassName, messageClassName, name }: HelpProp
       render={({ messages }) =>
         messages &&
         Object.entries(messages).map(([type, message]) => (
-          <ul className={clsx("formbricks-messages", messagesClassName)}>
+          <ul className={messagesClassName || "formbricks-messages"}>
             <li
-              className={clsx("formbricks-message", messageClassName)}
+              className={messageClassName || "formbricks-message"}
               id={`${name}-${type}`}
               data-message-type={type}
               role="alert">

packages/react/src/components/shared/Option.tsx

@@ -1,10 +1,8 @@
-import clsx from "clsx";
-
 interface OptionProps {
   optionClassName?: string;
   children: React.ReactNode;
 }
 
 export function Option({ optionClassName, children }: OptionProps) {
-  return <div className={clsx("formbricks-option", optionClassName)}>{children}</div>;
+  return <div className={optionClassName || "formbricks-option"}>{children}</div>;
 }

packages/react/src/components/shared/Options.tsx

@@ -1,10 +1,8 @@
-import clsx from "clsx";
-
 interface OptionsProps {
   optionsClassName?: string;
   children: React.ReactNode;
 }
 
 export function Options({ optionsClassName, children }: OptionsProps) {
-  return <div className={clsx("formbricks-options", optionsClassName)}>{children}</div>;
+  return <div className={optionsClassName || "formbricks-options"}>{children}</div>;
 }

packages/react/src/components/shared/Outer.tsx

@@ -1,5 +1,3 @@
-import clsx from "clsx";
-
 interface OuterProps {
   inputType: string;
   outerClassName?: string;
@@ -8,7 +6,7 @@ interface OuterProps {
 
 export function Outer({ inputType, outerClassName, children }: OuterProps) {
   return (
-    <div className={clsx("formbricks-outer", outerClassName)} data-type={inputType}>
+    <div className={outerClassName || "formbricks-outer"} data-type={inputType}>
       {children}
     </div>
   );

packages/react/src/components/shared/Wrapper.tsx

@@ -1,10 +1,8 @@
-import clsx from "clsx";
-
 interface WrapperProps {
   wrapperClassName?: string;
   children: React.ReactNode;
 }
 
 export function Wrapper({ wrapperClassName, children }: WrapperProps) {
-  return <div className={clsx("formbricks-wrapper", wrapperClassName)}>{children}</div>;
+  return <div className={wrapperClassName || "formbricks-wrapper"}>{children}</div>;
 }