HubSpot prerelease styles

plugins/hubspot/src/App.tsx

@@ -41,15 +41,15 @@ const routes: Route[] = [
                 element: AccountPage,
                 title: "Account",
                 size: {
-                    height: 197,
+                    height: 204,
                 },
             },
             {
                 path: "/chat",
                 element: ChatPage,
-                title: "Chat",
+                title: "Chats",
                 size: {
-                    height: 380,
+                    height: 401,
                 },
             },
             {
@@ -71,14 +71,14 @@ const routes: Route[] = [
                 element: TrackingPage,
                 title: "Tracking",
                 size: {
-                    height: 172,
+                    height: 179,
                 },
                 children: [
                     {
                         path: "/learn-more",
                         element: LearnMoreTrackingPage,
                         size: {
-                            height: 184,
+                            height: 201,
                         },
                     },
                 ],
@@ -89,7 +89,7 @@ const routes: Route[] = [
         path: "/cms",
         element: CMSMenuPage,
         size: {
-            height: 141,
+            height: 320,
         },
         children: [
             {
@@ -103,7 +103,6 @@ const routes: Route[] = [
             {
                 path: "/hubdb",
                 element: HubDBPage,
-                showTopDivider: false,
                 size: {
                     width: 320,
                     height: 305,

plugins/hubspot/src/components/Button.tsx

@@ -1,13 +1,16 @@
 import cx from "classnames"
-import { Spinner } from "./Spinner"
 
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "destructive"
+    variant?: "primary" | "secondary"
     isLoading?: boolean
 }
 
-export const Button = ({ variant = "primary", children, className, isLoading = false, disabled, ...rest }: Props) => (
-    <button className={cx(`framer-button-${variant}`, className)} disabled={isLoading || disabled} {...rest}>
-        {isLoading ? <Spinner inheritColor={variant === "secondary"} className="mx-auto" inline /> : children}
+export const Button = ({ variant = "secondary", children, className, isLoading = false, disabled, ...rest }: Props) => (
+    <button
+        className={cx(variant === "primary" && "framer-button-primary", className)}
+        disabled={isLoading || disabled}
+        {...rest}
+    >
+        {isLoading ? <div className="framer-spinner" /> : children}
     </button>
 )

plugins/hubspot/src/components/CenteredSpinner.tsx

@@ -1,8 +1,7 @@
 import cx from "classnames"
-import { Spinner, type SpinnerProps } from "./Spinner"
 
-export const CenteredSpinner = ({ className, size }: { className?: string; size?: SpinnerProps["size"] }) => (
+export const CenteredSpinner = ({ className }: { className?: string }) => (
     <div className={cx("flex items-center justify-center m-auto", className)}>
-        <Spinner inheritColor inline size={size} />
+        <div className="framer-spinner" />
     </div>
 )

plugins/hubspot/src/components/CheckboxTextField.tsx

@@ -27,13 +27,7 @@ export function CheckboxTextfield({ value, disabled, checked: initialChecked, on
             onClick={toggle}
             role="button"
         >
-            <input
-                type="checkbox"
-                disabled={disabled}
-                checked={checked}
-                onChange={toggle}
-                className="checked:bg-hs-orange! focus:ring-1 focus:ring-hs-orange border-none!"
-            />
+            <input type="checkbox" disabled={disabled} checked={checked} onChange={toggle} />
             <input
                 className="bg-transparent w-full shrink pointer-events-none select-none"
                 type="text"

plugins/hubspot/src/components/HeroSection.tsx

@@ -0,0 +1,15 @@
+import { Logo } from "./Logo"
+
+interface Props {
+    description: string
+}
+
+export const HeroSection = ({ description }: Props) => (
+    <div className="col-lg items-center py-[30px]">
+        <Logo />
+        <div className="col items-center">
+            <h6>Welcome to HubSpot</h6>
+            <p className="text-center text-tertiary max-w-[200px]">{description}</p>
+        </div>
+    </div>
+)