Fix ghost button styles

* fix copy button, ghost button styles

---

<details open="true"><summary>Generated summary (powered by <a href="https://app.graphite.dev">Graphite</a>)</summary>

> ## TL;DR
> This pull request introduces a new collapsible section in the navigation for "uma.me Invitations", updates the LanguageSwitcherClient component to handle React elements in its copy to clipboard button, and modifies the Button component to support a "ghost" style.
>
> ## What changed
> 1. A new collapsible section for "uma.me Invitations" has been added to the navigation in `Nav.tsx`.
> 2. The `LanguageSwitcherClient.tsx` has been updated to handle React elements in addition to strings. This includes a new function `getCodeContent` that converts a React element into a concatenated string of all its children.
> 3. The `Button.tsx` component has been updated to support a "ghost" style. This includes changes to the background color, padding, and positioning of the button icon.
>
> ## How to test
> 1. Navigate to the `Nav.tsx` file and verify that the new collapsible section for "uma.me Invitations" is present.
> 2. Navigate to the `LanguageSwitcherClient.tsx` file and verify that the `getCodeContent` function is present and correctly converts a React element into a concatenated string of all its children.
> 3. Navigate to the `Button.tsx` file and verify that the "ghost" style changes have been implemented correctly.
>
> ## Why make this change
> 1. The new collapsible section in the navigation will allow users to easily access "uma.me Invitations".
> 2. The updates to the `LanguageSwitcherClient.tsx` will ensure that the component can handle both strings and React elements, improving its versatility.
> 3. The "ghost" style changes to the `Button.tsx` component will provide a new button style that can be used throughout the application.
</details>

GitOrigin-RevId: 0298a7f71de4cc0a85d7f10dbcead87db4062649

* Update from public js-sdk main branch (#6536)

Update public `js` sources with the latest code from the [public
repository](https://github.com/lightsparkdev/js-sdk) main branch.

This typically happens when new versions of the SDK are released and
version updates need to be synced. The PR should be merged as soon as
possible to avoid updates to webdev overwriting the changes in the
js-sdk develop branch.

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Corey Martin <[email protected]>
Co-authored-by: Lightspark Eng <[email protected]>
GitOrigin-RevId: 2d3e341434d366bf47457204e1c8411ec894724e

---------

Co-authored-by: Brian Siao Tick Chong <[email protected]>
Co-authored-by: lightspark-ci-js-sdk[bot] <134011073+lightspark-ci-js-sdk[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Corey Martin <[email protected]>
Co-authored-by: Lightspark Eng <[email protected]>

packages/ui/components/Button.tsx

@@ -44,12 +44,14 @@ type PrimaryProps = {
   primary: boolean;
   theme: Theme;
   blue: boolean;
+  ghost?: boolean | undefined;
 };
 
 type PaddingProps = {
   size: ButtonSize;
   iconWidth?: number;
   text?: string | undefined;
+  ghost?: boolean | undefined;
 };
 
 type BorderProps = {
@@ -75,7 +77,11 @@ function getBackgroundColor({
   theme,
   primary,
   blue,
+  ghost,
 }: PrimaryProps) {
+  if (ghost) {
+    return "none";
+  }
   if (backgroundColor) {
     return backgroundColor;
   }
@@ -88,7 +94,11 @@ function getBackgroundColor({
   return themeOr(colors.white, theme.c1Neutral)({ theme });
 }
 
-function getPadding({ iconWidth, size, text }: PaddingProps) {
+function getPadding({ iconWidth, size, text, ghost }: PaddingProps) {
+  if (ghost) {
+    return "0";
+  }
+
   const paddingForText = text ? 6 : 0;
   return size === "lg"
     ? `14px ${hPaddingPx}px 14px ${
@@ -151,13 +161,13 @@ export function Button<RoutesType extends string>({
   let currentIcon = null;
   if (loading) {
     currentIcon = (
-      <ButtonIcon>
+      <ButtonIcon ghost={ghost}>
         <Loading size={iconSize} center={false} />
       </ButtonIcon>
     );
   } else if (icon) {
     currentIcon = (
-      <ButtonIcon>
+      <ButtonIcon ghost={ghost}>
         <Icon name={icon} width={iconSize} />
       </ButtonIcon>
     );
@@ -280,6 +290,7 @@ const buttonStyle = ({
       theme,
       primary,
       blue,
+      ghost,
     })};
     border: ${getBorder({ ghost })};
     border-color: ${getInnerBorderColor({
@@ -289,14 +300,18 @@ const buttonStyle = ({
       blue,
     })};
     border-radius: 32px;
-    padding: ${getPadding({ size, iconWidth, text })};
+    padding: ${getPadding({ size, iconWidth, text, ghost })};
     color: ${getTextColor({ color, theme, primary, blue })};
   }
 `;
 
-const ButtonIcon = styled.div`
+interface ButtonIconProps {
+  ghost?: boolean | undefined;
+}
+
+const ButtonIcon = styled.div<ButtonIconProps>`
   position: absolute;
-  left: ${hPaddingPx}px;
+  ${(props) => (props.ghost ? "" : `left: ${hPaddingPx}px;`)}
 `;
 
 export const StyledButton = styled(UnstyledButton)<StyledButtonProps>`