From 2ec513709a40a86f930b5f2ab7188c006c2faa1b Mon Sep 17 00:00:00 2001
From: George Desipris <george.desipris.56@gmail.com>
Date: Tue, 4 Jun 2024 13:00:34 +0300
Subject: [PATCH 01/15] feat(clerk-js): Add dev mode notice to components

---
 .changeset/hungry-clouds-return.md            |  5 ++
 .../ui/elements/Card/CardClerkAndPagesTag.tsx | 85 +++++++++++--------
 .../src/ui/elements/Card/CardContent.tsx      | 13 +++
 .../src/ui/elements/DevModeNotice.tsx         | 51 +++++++++++
 packages/clerk-js/src/ui/elements/Navbar.tsx  | 10 ++-
 .../clerk-js/src/ui/elements/PopoverCard.tsx  |  7 +-
 packages/clerk-js/src/ui/elements/index.ts    |  1 +
 7 files changed, 129 insertions(+), 43 deletions(-)
 create mode 100644 .changeset/hungry-clouds-return.md
 create mode 100644 packages/clerk-js/src/ui/elements/DevModeNotice.tsx

diff --git a/.changeset/hungry-clouds-return.md b/.changeset/hungry-clouds-return.md
new file mode 100644
index 00000000000..a1fb265c25f
--- /dev/null
+++ b/.changeset/hungry-clouds-return.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add a dev mode notice to components.
diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index 27eb320e9ee..50627e2cd7d 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -1,52 +1,69 @@
 import React from 'react';
 
 import { useEnvironment } from '../../contexts';
-import { Flex, Icon, Link, Text } from '../../customizables';
+import { Col, Flex, Icon, Link, Text } from '../../customizables';
 import { LogoMark } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
+import { DevModeNotice } from '../DevModeNotice';
 import { Card } from '.';
 
 export const CardClerkAndPagesTag = React.memo(
-  React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Flex> & { withFooterPages?: boolean }>((props, ref) => {
-    const { sx, withFooterPages = false, ...rest } = props;
-    const { branded } = useEnvironment().displayConfig;
+  React.forwardRef<
+    HTMLDivElement,
+    PropsOfComponent<typeof Flex> & { withFooterPages?: boolean; withDevModeNotice?: boolean }
+  >((props, ref) => {
+    const { sx, withFooterPages = false, withDevModeNotice = false, ...rest } = props;
+    const { displayConfig } = useEnvironment();
 
-    if (!(branded || withFooterPages)) {
+    if (!(displayConfig.branded || withFooterPages)) {
       return null;
     }
 
     return (
-      <Flex
-        sx={[
-          t => ({
-            ':has(div:only-child)': {
-              justifyContent: 'center',
-            },
-            justifyContent: 'space-between',
-            width: '100%',
-            padding: `0 ${t.space.$8}`,
-          }),
-          sx,
-        ]}
-        {...rest}
-        ref={ref}
+      <Col
+        sx={t => ({
+          gap: t.space.$2,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
       >
-        {branded && (
-          <Flex
-            gap={1}
-            align='center'
-            justify='center'
-            sx={t => ({ color: t.colors.$colorTextSecondary })}
-          >
-            <>
-              <Text variant='buttonSmall'>Secured by</Text>
-              <LogoMarkIconLink />
-            </>
-          </Flex>
-        )}
+        <Flex
+          sx={[
+            t => ({
+              ':has(div:only-child)': {
+                justifyContent: 'center',
+              },
+              justifyContent: 'space-between',
+              width: '100%',
+              padding: `0 ${t.space.$8}`,
+            }),
+            sx,
+          ]}
+          {...rest}
+          ref={ref}
+        >
+          {displayConfig.branded && (
+            <Flex
+              gap={1}
+              align='center'
+              justify='center'
+              sx={t => ({ color: t.colors.$colorTextSecondary })}
+            >
+              <>
+                <Text variant='buttonSmall'>Secured by</Text>
+                <LogoMarkIconLink />
+              </>
+            </Flex>
+          )}
+
+          {withFooterPages && <Card.FooterLinks />}
+        </Flex>
 
-        {withFooterPages && <Card.FooterLinks />}
-      </Flex>
+        {withDevModeNotice && <DevModeNotice />}
+      </Col>
     );
   }),
 );
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index bb68b89eeb9..a1d8cd37163 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -12,6 +12,7 @@ import {
 import { Close } from '../../icons';
 import { type PropsOfComponent } from '../../styledSystem';
 import { useCardState, useFlowMetadata } from '../contexts';
+import { DevModeNotice, DevModeOverlay } from '../DevModeNotice';
 import { IconButton } from '../IconButton';
 import { useUnsafeModalContext } from '../Modal';
 import { CardAlert } from './CardAlert';
@@ -53,6 +54,8 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       ref={ref}
       {...rest}
     >
+      <DevModeOverlay />
+
       {toggle && (
         <IconButton
           elementDescriptor={descriptors.modalCloseButton}
@@ -79,6 +82,16 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
         <CardAlert variant={'warning'}>{t(localizationKeys('maintenanceMode'))}</CardAlert>
       )}
       {children}
+
+      <DevModeNotice
+        sx={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          textAlign: 'center',
+        }}
+      />
     </Flex>
   );
 });
diff --git a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
new file mode 100644
index 00000000000..f8dd66b451c
--- /dev/null
+++ b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
@@ -0,0 +1,51 @@
+import type { ThemableCssProp } from 'ui/styledSystem';
+
+import { useEnvironment } from '../contexts';
+import { Box, Text } from '../customizables';
+
+export const DevModeOverlay = () => {
+  const { isDevelopmentOrStaging } = useEnvironment();
+
+  if (!isDevelopmentOrStaging()) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={t => ({
+        userSelect: 'none',
+        pointerEvents: 'none',
+        inset: 0,
+        position: 'absolute',
+        background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,
+        maskImage: 'linear-gradient(transparent 60%, black)',
+      })}
+    />
+  );
+};
+
+type DevModeNoticeProps = { sx?: ThemableCssProp };
+export const DevModeNotice = (props: DevModeNoticeProps) => {
+  const { sx } = props;
+  const { isDevelopmentOrStaging } = useEnvironment();
+
+  if (!isDevelopmentOrStaging()) {
+    return null;
+  }
+
+  return (
+    <Text
+      sx={[
+        t => ({
+          color: t.colors.$warning500,
+          fontWeight: t.fontWeights.$semibold,
+          whiteSpace: 'nowrap',
+          padding: t.space.$1x5,
+        }),
+        sx,
+      ]}
+    >
+      Development mode
+    </Text>
+  );
+};
diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index 6e694305bb4..b224ea80b12 100644
--- a/packages/clerk-js/src/ui/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -12,6 +12,7 @@ import { animations, common, mqu } from '../styledSystem';
 import { colors } from '../utils';
 import { Card } from './Card';
 import { withFloatingTree } from './contexts';
+import { DevModeOverlay } from './DevModeNotice';
 import { Popover } from './Popover';
 
 type NavbarContextValue = { isOpen: boolean; open: () => void; close: () => void };
@@ -140,6 +141,7 @@ const NavbarContainer = (
         },
         flex: `0 0 ${t.space.$57}`,
         width: t.sizes.$57,
+        position: 'relative',
         maxWidth: t.space.$57,
         background: common.mergedColorsBackground(
           colors.setAlpha(t.colors.$colorBackground, 1),
@@ -151,6 +153,8 @@ const NavbarContainer = (
         justifyContent: 'space-between',
       })}
     >
+      <DevModeOverlay />
+
       <Col sx={t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}>
         <Col
           sx={t => ({
@@ -172,10 +176,10 @@ const NavbarContainer = (
       </Col>
 
       <Card.ClerkAndPagesTag
-        sx={theme => ({
+        sx={{
           width: 'fit-content',
-          paddingLeft: theme.space.$3,
-        })}
+        }}
+        withDevModeNotice
       />
     </Col>
   );
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index 1ccdf83a74c..5712b68b2f7 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -89,12 +89,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
     >
       {children}
 
-      {shouldShowTagOrLinks && (
-        <Card.ClerkAndPagesTag
-          withFooterPages
-          sx={t => ({ padding: `${t.space.$4} ${t.space.$8}` })}
-        />
-      )}
+      {shouldShowTagOrLinks && <Card.ClerkAndPagesTag withFooterPages />}
     </Col>
   );
 };
diff --git a/packages/clerk-js/src/ui/elements/index.ts b/packages/clerk-js/src/ui/elements/index.ts
index 349d8d6845a..6d86e286eea 100644
--- a/packages/clerk-js/src/ui/elements/index.ts
+++ b/packages/clerk-js/src/ui/elements/index.ts
@@ -55,3 +55,4 @@ export * from './Card';
 export * from './ProfileCard';
 export * from './Gauge';
 export * from './Animated';
+export * from './DevModeNotice';

From 4a2f63b1770cdea0e4a416106620107c78358d92 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 12 Jul 2024 03:18:53 +0300
Subject: [PATCH 02/15] feat(clerk-js): Update Development notice to match
 designs

---
 .../CreateOrganization/CreateOrganizationPage.tsx  |  7 +++++--
 .../src/ui/elements/Card/CardClerkAndPagesTag.tsx  | 14 +++++++++-----
 .../clerk-js/src/ui/elements/Card/CardContent.tsx  | 10 ++++++----
 .../clerk-js/src/ui/elements/DevModeNotice.tsx     |  1 -
 packages/clerk-js/src/ui/elements/PopoverCard.tsx  | 13 +++++++++++--
 5 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
index 4e6b4e6dc39..4d8c1c3f4da 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
@@ -1,6 +1,6 @@
 import { useClerk } from '@clerk/shared/react';
 
-import { useCreateOrganizationContext } from '../../contexts';
+import { useCreateOrganizationContext, useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { Card, useCardState, withCardStateProvider } from '../../elements';
 import { CreateOrganizationForm } from './CreateOrganizationForm';
@@ -10,10 +10,13 @@ export const CreateOrganizationPage = withCardStateProvider(() => {
 
   const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
   const card = useCardState();
+  const { isDevelopmentOrStaging } = useEnvironment();
 
   return (
     <Card.Root sx={t => ({ width: t.sizes.$108 })}>
-      <Card.Content sx={t => ({ padding: `${t.space.$4} ${t.space.$5} ${t.space.$6}` })}>
+      <Card.Content
+        sx={t => ({ padding: `${t.space.$4} ${t.space.$5} ${isDevelopmentOrStaging() ? t.space.$12 : t.space.$6}` })}
+      >
         <Card.Alert>{card.error}</Card.Alert>
         <CreateOrganizationForm
           skipInvitationScreen={skipInvitationScreen}
diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index 50627e2cd7d..54accb2f05b 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -3,19 +3,23 @@ import React from 'react';
 import { useEnvironment } from '../../contexts';
 import { Col, Flex, Icon, Link, Text } from '../../customizables';
 import { LogoMark } from '../../icons';
-import type { PropsOfComponent } from '../../styledSystem';
+import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
 import { DevModeNotice } from '../DevModeNotice';
 import { Card } from '.';
 
 export const CardClerkAndPagesTag = React.memo(
   React.forwardRef<
     HTMLDivElement,
-    PropsOfComponent<typeof Flex> & { withFooterPages?: boolean; withDevModeNotice?: boolean }
+    PropsOfComponent<typeof Flex> & {
+      withFooterPages?: boolean;
+      withDevModeNotice?: boolean;
+      devModeNoticeSx?: ThemableCssProp;
+    }
   >((props, ref) => {
-    const { sx, withFooterPages = false, withDevModeNotice = false, ...rest } = props;
+    const { sx, withFooterPages = false, withDevModeNotice = false, devModeNoticeSx, ...rest } = props;
     const { displayConfig } = useEnvironment();
 
-    if (!(displayConfig.branded || withFooterPages)) {
+    if (!(displayConfig.branded || withFooterPages) && !withDevModeNotice) {
       return null;
     }
 
@@ -62,7 +66,7 @@ export const CardClerkAndPagesTag = React.memo(
           {withFooterPages && <Card.FooterLinks />}
         </Flex>
 
-        {withDevModeNotice && <DevModeNotice />}
+        {withDevModeNotice && <DevModeNotice sx={devModeNoticeSx} />}
       </Col>
     );
   }),
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index a1d8cd37163..49d59b39b9f 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -10,7 +10,7 @@ import {
   useLocalizations,
 } from '../../customizables';
 import { Close } from '../../icons';
-import { type PropsOfComponent } from '../../styledSystem';
+import type { PropsOfComponent } from '../../styledSystem';
 import { useCardState, useFlowMetadata } from '../contexts';
 import { DevModeNotice, DevModeOverlay } from '../DevModeNotice';
 import { IconButton } from '../IconButton';
@@ -25,6 +25,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
   const { maintenanceMode } = useEnvironment();
   const card = useCardState();
   const { t } = useLocalizations();
+  const { isDevelopmentOrStaging } = useEnvironment();
 
   return (
     <Flex
@@ -44,7 +45,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           boxShadow: t.shadows.$cardContentShadow,
           borderRadius: t.radii.$lg,
           position: 'relative',
-          padding: `${t.space.$8} ${t.space.$10}`,
+          padding: `${t.space.$8} ${t.space.$10} ${isDevelopmentOrStaging() ? t.space.$12 : t.space.$8} ${t.space.$10}`,
           justifyContent: 'center',
           alignContent: 'center',
         }),
@@ -84,13 +85,14 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       {children}
 
       <DevModeNotice
-        sx={{
+        sx={t => ({
           position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
           textAlign: 'center',
-        }}
+          padding: t.space.$3,
+        })}
       />
     </Flex>
   );
diff --git a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
index f8dd66b451c..6f429afe95f 100644
--- a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
+++ b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
@@ -39,7 +39,6 @@ export const DevModeNotice = (props: DevModeNoticeProps) => {
         t => ({
           color: t.colors.$warning500,
           fontWeight: t.fontWeights.$semibold,
-          whiteSpace: 'nowrap',
           padding: t.space.$1x5,
         }),
         sx,
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index 5712b68b2f7..4dff7bd72ac 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -5,7 +5,7 @@ import { Col, Flex, Flow, useAppearance } from '../customizables';
 import type { PropsOfComponent } from '../styledSystem';
 import { animations, common } from '../styledSystem';
 import { colors } from '../utils';
-import { Card } from '.';
+import { Card, DevModeOverlay } from '.';
 
 const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Card.Content>>((props, ref) => {
   return (
@@ -87,9 +87,18 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
       ]}
       {...rest}
     >
+      <DevModeOverlay />
       {children}
 
-      {shouldShowTagOrLinks && <Card.ClerkAndPagesTag withFooterPages />}
+      {shouldShowTagOrLinks && (
+        <Card.ClerkAndPagesTag
+          withFooterPages
+          withDevModeNotice
+          devModeNoticeSx={t => ({
+            padding: t.space.$none,
+          })}
+        />
+      )}
     </Col>
   );
 };

From 7682753b663e9049f5647fce4468f25828b2a763 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 18 Jul 2024 23:03:49 +0300
Subject: [PATCH 03/15] chore(clerk-js): Add dev notice to footer

---
 .../ui/elements/Card/CardClerkAndPagesTag.tsx | 69 ++++++++++---------
 .../src/ui/elements/Card/CardContent.tsx      | 14 ----
 .../src/ui/elements/Card/CardFooter.tsx       | 11 ++-
 .../src/ui/elements/DevModeNotice.tsx         |  2 +-
 .../clerk-js/src/ui/elements/PopoverCard.tsx  | 15 ++--
 5 files changed, 52 insertions(+), 59 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index 54accb2f05b..20d52b38fac 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -12,12 +12,12 @@ export const CardClerkAndPagesTag = React.memo(
     HTMLDivElement,
     PropsOfComponent<typeof Flex> & {
       withFooterPages?: boolean;
-      withDevModeNotice?: boolean;
       devModeNoticeSx?: ThemableCssProp;
     }
   >((props, ref) => {
-    const { sx, withFooterPages = false, withDevModeNotice = false, devModeNoticeSx, ...rest } = props;
-    const { displayConfig } = useEnvironment();
+    const { sx, withFooterPages = false, devModeNoticeSx, ...rest } = props;
+    const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
+    const withDevModeNotice = isDevelopmentOrStaging();
 
     if (!(displayConfig.branded || withFooterPages) && !withDevModeNotice) {
       return null;
@@ -26,7 +26,7 @@ export const CardClerkAndPagesTag = React.memo(
     return (
       <Col
         sx={t => ({
-          gap: t.space.$2,
+          gap: displayConfig.branded || withFooterPages ? t.space.$2 : 0,
           marginLeft: 'auto',
           marginRight: 'auto',
           width: '100%',
@@ -34,39 +34,40 @@ export const CardClerkAndPagesTag = React.memo(
           alignItems: 'center',
         })}
       >
-        <Flex
-          sx={[
-            t => ({
-              ':has(div:only-child)': {
-                justifyContent: 'center',
+        {(displayConfig.branded || withFooterPages) && (
+          <Flex
+            sx={[
+              {
+                ':has(div:only-child)': {
+                  justifyContent: 'center',
+                },
+                justifyContent: 'space-between',
+                width: '100%',
               },
-              justifyContent: 'space-between',
-              width: '100%',
-              padding: `0 ${t.space.$8}`,
-            }),
-            sx,
-          ]}
-          {...rest}
-          ref={ref}
-        >
-          {displayConfig.branded && (
-            <Flex
-              gap={1}
-              align='center'
-              justify='center'
-              sx={t => ({ color: t.colors.$colorTextSecondary })}
-            >
-              <>
-                <Text variant='buttonSmall'>Secured by</Text>
-                <LogoMarkIconLink />
-              </>
-            </Flex>
-          )}
+              sx,
+            ]}
+            {...rest}
+            ref={ref}
+          >
+            {displayConfig.branded && (
+              <Flex
+                gap={1}
+                align='center'
+                justify='center'
+                sx={t => ({ color: t.colors.$colorTextSecondary })}
+              >
+                <>
+                  <Text variant='buttonSmall'>Secured by</Text>
+                  <LogoMarkIconLink />
+                </>
+              </Flex>
+            )}
 
-          {withFooterPages && <Card.FooterLinks />}
-        </Flex>
+            {withFooterPages && <Card.FooterLinks />}
+          </Flex>
+        )}
 
-        {withDevModeNotice && <DevModeNotice sx={devModeNoticeSx} />}
+        <DevModeNotice sx={devModeNoticeSx} />
       </Col>
     );
   }),
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index 49d59b39b9f..e2aed4dac9e 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -12,7 +12,6 @@ import {
 import { Close } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
 import { useCardState, useFlowMetadata } from '../contexts';
-import { DevModeNotice, DevModeOverlay } from '../DevModeNotice';
 import { IconButton } from '../IconButton';
 import { useUnsafeModalContext } from '../Modal';
 import { CardAlert } from './CardAlert';
@@ -55,8 +54,6 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       ref={ref}
       {...rest}
     >
-      <DevModeOverlay />
-
       {toggle && (
         <IconButton
           elementDescriptor={descriptors.modalCloseButton}
@@ -83,17 +80,6 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
         <CardAlert variant={'warning'}>{t(localizationKeys('maintenanceMode'))}</CardAlert>
       )}
       {children}
-
-      <DevModeNotice
-        sx={t => ({
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          right: 0,
-          textAlign: 'center',
-          padding: t.space.$3,
-        })}
-      />
     </Flex>
   );
 });
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index 438eb5b5ede..ba0156b1a6b 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -5,6 +5,7 @@ import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../
 import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
 import { common, mqu } from '../../styledSystem';
 import { colors } from '../../utils';
+import { DevModeOverlay } from '../DevModeNotice';
 import { Card } from '.';
 
 type CardFooterProps = PropsOfComponent<typeof Flex> & {
@@ -45,6 +46,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
       elementDescriptor={descriptors.footer}
       sx={[
         t => ({
+          position: 'relative',
           marginTop: `-${t.space.$2}`,
           paddingTop: t.space.$2,
           background: common.mergedColorsBackground(
@@ -62,9 +64,16 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
       {...rest}
       ref={ref}
     >
+      <DevModeOverlay />
+
       {children}
 
-      {showSponsorAndLinks && <Card.ClerkAndPagesTag withFooterPages={!isProfileFooter} />}
+      <Card.ClerkAndPagesTag
+        withFooterPages={showSponsorAndLinks && !isProfileFooter}
+        devModeNoticeSx={t => ({
+          padding: t.space.$none,
+        })}
+      />
     </Flex>
   );
 });
diff --git a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
index 6f429afe95f..bf330f3e9cb 100644
--- a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
+++ b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
@@ -18,7 +18,7 @@ export const DevModeOverlay = () => {
         inset: 0,
         position: 'absolute',
         background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,
-        maskImage: 'linear-gradient(transparent 60%, black)',
+        maskImage: 'linear-gradient(transparent 50%, black)',
       })}
     />
   );
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index 4dff7bd72ac..07a325544f1 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -90,15 +90,12 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
       <DevModeOverlay />
       {children}
 
-      {shouldShowTagOrLinks && (
-        <Card.ClerkAndPagesTag
-          withFooterPages
-          withDevModeNotice
-          devModeNoticeSx={t => ({
-            padding: t.space.$none,
-          })}
-        />
-      )}
+      <Card.ClerkAndPagesTag
+        withFooterPages={!!shouldShowTagOrLinks}
+        devModeNoticeSx={t => ({
+          padding: t.space.$none,
+        })}
+      />
     </Col>
   );
 };

From 23548e9d16405a19ebd282470acc6d53de751bb3 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 19 Jul 2024 08:31:43 +0300
Subject: [PATCH 04/15] fix(clerk-js): Remove missing prop from
 ClerkAndPagesTag

---
 packages/clerk-js/src/ui/elements/Navbar.tsx | 1 -
 packages/clerk-js/webpack.config.js          | 2 +-
 playground/nextjs/pages/_app.tsx             | 2 ++
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index b224ea80b12..94383e5f341 100644
--- a/packages/clerk-js/src/ui/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -179,7 +179,6 @@ const NavbarContainer = (
         sx={{
           width: 'fit-content',
         }}
-        withDevModeNotice
       />
     </Col>
   );
diff --git a/packages/clerk-js/webpack.config.js b/packages/clerk-js/webpack.config.js
index 530824b3496..7711f58a640 100644
--- a/packages/clerk-js/webpack.config.js
+++ b/packages/clerk-js/webpack.config.js
@@ -255,7 +255,7 @@ const devConfig = ({ mode, env }) => {
   const variant = env.variant || variants.clerkBrowser;
   // accept an optional devOrigin environment option to change the origin of the dev server.
   // By default we use https://js.lclclerk.com which is what our local dev proxy looks for.
-  const devUrl = new URL(env.devOrigin || 'https://js.lclclerk.com');
+  const devUrl = new URL(env.devOrigin || 'http://localhost:4000');
 
   const commonForDev = () => {
     return {
diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
index 6bb74d3c773..e2113d64058 100644
--- a/playground/nextjs/pages/_app.tsx
+++ b/playground/nextjs/pages/_app.tsx
@@ -62,6 +62,8 @@ function MyApp({ Component, pageProps }: AppProps) {
         },
         layout: {
           animations,
+          helpPageUrl: 'https://www.google.com',
+          privacyPageUrl: 'https://www.google.com',
         },
       }}
       {...pageProps}

From 1f75627f77f0249ae7a74843b800e3b6e792fbb0 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 19 Jul 2024 08:53:29 +0300
Subject: [PATCH 05/15] chore(repo): Remove changes from playgrounf

---
 playground/nextjs/pages/_app.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
index e2113d64058..6bb74d3c773 100644
--- a/playground/nextjs/pages/_app.tsx
+++ b/playground/nextjs/pages/_app.tsx
@@ -62,8 +62,6 @@ function MyApp({ Component, pageProps }: AppProps) {
         },
         layout: {
           animations,
-          helpPageUrl: 'https://www.google.com',
-          privacyPageUrl: 'https://www.google.com',
         },
       }}
       {...pageProps}

From b2854730ecf657ef409c26bb89dc89486567a3f8 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 19 Jul 2024 08:56:58 +0300
Subject: [PATCH 06/15] chore(repo): Revert change from webpack.config.js

---
 packages/clerk-js/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/webpack.config.js b/packages/clerk-js/webpack.config.js
index 7711f58a640..530824b3496 100644
--- a/packages/clerk-js/webpack.config.js
+++ b/packages/clerk-js/webpack.config.js
@@ -255,7 +255,7 @@ const devConfig = ({ mode, env }) => {
   const variant = env.variant || variants.clerkBrowser;
   // accept an optional devOrigin environment option to change the origin of the dev server.
   // By default we use https://js.lclclerk.com which is what our local dev proxy looks for.
-  const devUrl = new URL(env.devOrigin || 'http://localhost:4000');
+  const devUrl = new URL(env.devOrigin || 'https://js.lclclerk.com');
 
   const commonForDev = () => {
     return {

From cea4ecb4c0cef32d1c92c0474a6795b16b492912 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 25 Jul 2024 18:32:24 +0300
Subject: [PATCH 07/15] fix(clerk-js): Apply Dev mopde notice better for all
 componentns

---
 .../ui/elements/Card/CardClerkAndPagesTag.tsx | 101 ++++++++++--------
 .../src/ui/elements/Card/CardFooter.tsx       |  11 +-
 .../src/ui/elements/DevModeNotice.tsx         |   9 +-
 .../clerk-js/src/ui/elements/PopoverCard.tsx  |   7 +-
 4 files changed, 74 insertions(+), 54 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index 20d52b38fac..fea5f275512 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { useEnvironment } from '../../contexts';
-import { Col, Flex, Icon, Link, Text } from '../../customizables';
+import { Box, Col, Flex, Icon, Link, Text } from '../../customizables';
 import { LogoMark } from '../../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
-import { DevModeNotice } from '../DevModeNotice';
+import { DevModeNotice, DevModeOverlay } from '../DevModeNotice';
 import { Card } from '.';
 
 export const CardClerkAndPagesTag = React.memo(
@@ -13,9 +13,11 @@ export const CardClerkAndPagesTag = React.memo(
     PropsOfComponent<typeof Flex> & {
       withFooterPages?: boolean;
       devModeNoticeSx?: ThemableCssProp;
+      outerSx?: ThemableCssProp;
+      withDevOverlay?: boolean;
     }
   >((props, ref) => {
-    const { sx, withFooterPages = false, devModeNoticeSx, ...rest } = props;
+    const { sx, outerSx, withFooterPages = false, withDevOverlay = false, devModeNoticeSx, ...rest } = props;
     const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
     const withDevModeNotice = isDevelopmentOrStaging();
 
@@ -24,51 +26,62 @@ export const CardClerkAndPagesTag = React.memo(
     }
 
     return (
-      <Col
-        sx={t => ({
-          gap: displayConfig.branded || withFooterPages ? t.space.$2 : 0,
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'center',
-        })}
+      <Box
+        sx={[
+          {
+            width: '100%',
+            position: 'relative',
+          },
+          outerSx,
+        ]}
       >
-        {(displayConfig.branded || withFooterPages) && (
-          <Flex
-            sx={[
-              {
-                ':has(div:only-child)': {
-                  justifyContent: 'center',
+        {withDevOverlay && <DevModeOverlay gradient={0} />}
+        <Col
+          sx={t => ({
+            gap: displayConfig.branded || withFooterPages ? t.space.$2 : 0,
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            width: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+          })}
+        >
+          {(displayConfig.branded || withFooterPages) && (
+            <Flex
+              sx={[
+                {
+                  ':has(div:only-child)': {
+                    justifyContent: 'center',
+                  },
+                  justifyContent: 'space-between',
+                  width: '100%',
                 },
-                justifyContent: 'space-between',
-                width: '100%',
-              },
-              sx,
-            ]}
-            {...rest}
-            ref={ref}
-          >
-            {displayConfig.branded && (
-              <Flex
-                gap={1}
-                align='center'
-                justify='center'
-                sx={t => ({ color: t.colors.$colorTextSecondary })}
-              >
-                <>
-                  <Text variant='buttonSmall'>Secured by</Text>
-                  <LogoMarkIconLink />
-                </>
-              </Flex>
-            )}
+                sx,
+              ]}
+              {...rest}
+              ref={ref}
+            >
+              {displayConfig.branded && (
+                <Flex
+                  gap={1}
+                  align='center'
+                  justify='center'
+                  sx={t => ({ color: t.colors.$colorTextSecondary })}
+                >
+                  <>
+                    <Text variant='buttonSmall'>Secured by</Text>
+                    <LogoMarkIconLink />
+                  </>
+                </Flex>
+              )}
 
-            {withFooterPages && <Card.FooterLinks />}
-          </Flex>
-        )}
+              {withFooterPages && <Card.FooterLinks />}
+            </Flex>
+          )}
 
-        <DevModeNotice sx={devModeNoticeSx} />
-      </Col>
+          <DevModeNotice sx={devModeNoticeSx} />
+        </Col>
+      </Box>
     );
   }),
 );
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index ba0156b1a6b..c457d12528e 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -5,7 +5,6 @@ import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../
 import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
 import { common, mqu } from '../../styledSystem';
 import { colors } from '../../utils';
-import { DevModeOverlay } from '../DevModeNotice';
 import { Card } from '.';
 
 type CardFooterProps = PropsOfComponent<typeof Flex> & {
@@ -13,12 +12,14 @@ type CardFooterProps = PropsOfComponent<typeof Flex> & {
 };
 export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {
   const { children, isProfileFooter = false, sx, ...rest } = props;
-  const { branded } = useEnvironment().displayConfig;
+  const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
+  const { branded } = displayConfig;
+  const withDevModeNotice = isDevelopmentOrStaging();
   const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
   const sponsorOrLinksExist = !!(branded || helpPageUrl || privacyPageUrl || termsPageUrl);
   const showSponsorAndLinks = isProfileFooter ? branded : sponsorOrLinksExist;
 
-  if (!children && !showSponsorAndLinks) {
+  if (!children && !(showSponsorAndLinks || withDevModeNotice)) {
     return null;
   }
 
@@ -46,7 +47,6 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
       elementDescriptor={descriptors.footer}
       sx={[
         t => ({
-          position: 'relative',
           marginTop: `-${t.space.$2}`,
           paddingTop: t.space.$2,
           background: common.mergedColorsBackground(
@@ -64,8 +64,6 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
       {...rest}
       ref={ref}
     >
-      <DevModeOverlay />
-
       {children}
 
       <Card.ClerkAndPagesTag
@@ -73,6 +71,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
         devModeNoticeSx={t => ({
           padding: t.space.$none,
         })}
+        withDevOverlay
       />
     </Flex>
   );
diff --git a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
index bf330f3e9cb..4ccba3bd42b 100644
--- a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
+++ b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
@@ -3,7 +3,12 @@ import type { ThemableCssProp } from 'ui/styledSystem';
 import { useEnvironment } from '../contexts';
 import { Box, Text } from '../customizables';
 
-export const DevModeOverlay = () => {
+type DevModeOverlayProps = {
+  gradient?: number;
+};
+
+export const DevModeOverlay = (props: DevModeOverlayProps) => {
+  const { gradient = 60 } = props;
   const { isDevelopmentOrStaging } = useEnvironment();
 
   if (!isDevelopmentOrStaging()) {
@@ -18,7 +23,7 @@ export const DevModeOverlay = () => {
         inset: 0,
         position: 'absolute',
         background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,
-        maskImage: 'linear-gradient(transparent 50%, black)',
+        maskImage: `linear-gradient(transparent ${gradient}%, black)`,
       })}
     />
   );
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index 07a325544f1..e9650c1a0cf 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -5,7 +5,7 @@ import { Col, Flex, Flow, useAppearance } from '../customizables';
 import type { PropsOfComponent } from '../styledSystem';
 import { animations, common } from '../styledSystem';
 import { colors } from '../utils';
-import { Card, DevModeOverlay } from '.';
+import { Card } from '.';
 
 const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Card.Content>>((props, ref) => {
   return (
@@ -87,14 +87,17 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
       ]}
       {...rest}
     >
-      <DevModeOverlay />
       {children}
 
       <Card.ClerkAndPagesTag
+        outerSx={t => ({
+          padding: `${t.space.$4} ${t.space.$none}`,
+        })}
         withFooterPages={!!shouldShowTagOrLinks}
         devModeNoticeSx={t => ({
           padding: t.space.$none,
         })}
+        withDevOverlay
       />
     </Col>
   );

From 1d55b2992938adbd6c3563ca26fa34be1c4d4842 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Wed, 31 Jul 2024 12:57:49 +0300
Subject: [PATCH 08/15] chore(clerk-js): Added popoverBox descriptor and UI
 fixes for development mode notice

---
 .../clerk-js/src/ui/customizables/elementDescriptors.ts  | 1 +
 .../src/ui/elements/Card/CardClerkAndPagesTag.tsx        | 3 +++
 packages/clerk-js/src/ui/elements/PopoverCard.tsx        | 9 +++++----
 packages/clerk-js/src/ui/polishedAppearance.ts           | 4 ++++
 packages/types/src/appearance.ts                         | 1 +
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 169877dd70b..3a2cb8cc197 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -24,6 +24,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'cardBox',
   'card',
   'footerItem',
+  'popoverBox',
 
   'actionCard',
 
diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index fea5f275512..5975e688c9a 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -31,6 +31,7 @@ export const CardClerkAndPagesTag = React.memo(
           {
             width: '100%',
             position: 'relative',
+            isolation: 'isolate',
           },
           outerSx,
         ]}
@@ -44,6 +45,8 @@ export const CardClerkAndPagesTag = React.memo(
             width: '100%',
             justifyContent: 'center',
             alignItems: 'center',
+            zIndex: 1,
+            position: 'relative',
           })}
         >
           {(displayConfig.branded || withFooterPages) && (
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index e9650c1a0cf..d12a6f5ade9 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
 
 import { useEnvironment } from '../contexts';
-import { Col, Flex, Flow, useAppearance } from '../customizables';
+import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
+import type { ElementDescriptor } from '../customizables/elementDescriptors';
 import type { PropsOfComponent } from '../styledSystem';
 import { animations, common } from '../styledSystem';
 import { colors } from '../utils';
 import { Card } from '.';
 
 const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Card.Content>>((props, ref) => {
+  const { elementDescriptor, ...rest } = props;
   return (
     <Flow.Part part='popover'>
       <Card.Root
-        {...props}
+        elementDescriptor={[descriptors.popoverBox, elementDescriptor as ElementDescriptor]}
+        {...rest}
         ref={ref}
         sx={t => ({
           width: t.sizes.$94,
@@ -70,8 +73,6 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
           ),
           marginTop: `-${t.space.$2}`,
           paddingTop: t.space.$2,
-          borderBottomLeftRadius: 'inherit',
-          borderBottomRightRadius: 'inherit',
           '&:empty': {
             padding: 0,
             marginTop: 0,
diff --git a/packages/clerk-js/src/ui/polishedAppearance.ts b/packages/clerk-js/src/ui/polishedAppearance.ts
index 98f027c8826..fc56872c229 100644
--- a/packages/clerk-js/src/ui/polishedAppearance.ts
+++ b/packages/clerk-js/src/ui/polishedAppearance.ts
@@ -164,6 +164,10 @@ export const polishedAppearance: Appearance = {
         borderWidth: 0,
         boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha100}`,
       },
+      popoverBox: {
+        borderWidth: 0,
+        boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha100}`,
+      },
       card: {
         ...cardContentStyles(theme),
       },
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index d09c12a1e4d..ef1a472abe3 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -143,6 +143,7 @@ export type ElementsConfig = {
   cardBox: WithOptions;
   card: WithOptions;
   actionCard: WithOptions;
+  popoverBox: WithOptions;
 
   logoBox: WithOptions;
   logoImage: WithOptions;

From afb90c554d404f97f8af431729cb4786ee4ad14a Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Wed, 31 Jul 2024 13:05:56 +0300
Subject: [PATCH 09/15] chore(repo): Update changeset

---
 .changeset/hungry-clouds-return.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.changeset/hungry-clouds-return.md b/.changeset/hungry-clouds-return.md
index a1fb265c25f..81897cf8a61 100644
--- a/.changeset/hungry-clouds-return.md
+++ b/.changeset/hungry-clouds-return.md
@@ -1,5 +1,6 @@
 ---
 '@clerk/clerk-js': patch
+"@clerk/types": patch
 ---
 
-Add a dev mode notice to components.
+Add a development mode notice to components and also introducing `popoverBox` descriptor.

From c5eece0b6d2f1b0012827972643cf78a8bfd6a96 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Wed, 31 Jul 2024 13:26:28 +0300
Subject: [PATCH 10/15] chore(repo): Update changeset

---
 .changeset/hungry-clouds-return.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/hungry-clouds-return.md b/.changeset/hungry-clouds-return.md
index 81897cf8a61..4be64337372 100644
--- a/.changeset/hungry-clouds-return.md
+++ b/.changeset/hungry-clouds-return.md
@@ -1,6 +1,6 @@
 ---
-'@clerk/clerk-js': patch
-"@clerk/types": patch
+'@clerk/clerk-js': minor
+"@clerk/types": minor
 ---
 
 Add a development mode notice to components and also introducing `popoverBox` descriptor.

From 79dd3a94489e090d1c63578ec470d0b293584751 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Wed, 31 Jul 2024 15:15:47 +0300
Subject: [PATCH 11/15] Update .changeset/hungry-clouds-return.md

Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>
---
 .changeset/hungry-clouds-return.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/hungry-clouds-return.md b/.changeset/hungry-clouds-return.md
index 4be64337372..baf7131b575 100644
--- a/.changeset/hungry-clouds-return.md
+++ b/.changeset/hungry-clouds-return.md
@@ -3,4 +3,4 @@
 "@clerk/types": minor
 ---
 
-Add a development mode notice to components and also introducing `popoverBox` descriptor.
+Add a development mode notice to components and also introduce `popoverBox` descriptor.

From 101068f3428bfc10186f2e563c0fde1c9f1d6a45 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 1 Aug 2024 17:56:50 +0300
Subject: [PATCH 12/15] feat(clerk-js): Added showDevModeWarning in
 DisplayConfigResource

---
 packages/clerk-js/src/core/resources/DisplayConfig.ts     | 2 ++
 .../CreateOrganization/CreateOrganizationPage.tsx         | 6 ++++--
 .../src/ui/elements/Card/CardClerkAndPagesTag.tsx         | 4 ++--
 packages/clerk-js/src/ui/elements/Card/CardContent.tsx    | 4 ++--
 packages/clerk-js/src/ui/elements/Card/CardFooter.tsx     | 4 ++--
 packages/clerk-js/src/ui/elements/DevModeNotice.tsx       | 8 ++++----
 packages/types/src/displayConfig.ts                       | 2 ++
 7 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/clerk-js/src/core/resources/DisplayConfig.ts b/packages/clerk-js/src/core/resources/DisplayConfig.ts
index 64b5e92de19..102610d8898 100644
--- a/packages/clerk-js/src/core/resources/DisplayConfig.ts
+++ b/packages/clerk-js/src/core/resources/DisplayConfig.ts
@@ -41,6 +41,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
   afterLeaveOrganizationUrl!: string;
   afterCreateOrganizationUrl!: string;
   googleOneTapClientId?: string;
+  showDevModeWarning!: boolean;
 
   public constructor(data: DisplayConfigJSON) {
     super();
@@ -80,6 +81,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
     this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
     this.afterCreateOrganizationUrl = data.after_create_organization_url;
     this.googleOneTapClientId = data.google_one_tap_client_id;
+    this.showDevModeWarning = data.show_devmode_warning;
     return this;
   }
 }
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
index 4d8c1c3f4da..2fe8f3090d1 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
@@ -10,12 +10,14 @@ export const CreateOrganizationPage = withCardStateProvider(() => {
 
   const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
   const card = useCardState();
-  const { isDevelopmentOrStaging } = useEnvironment();
+  const { displayConfig } = useEnvironment();
 
   return (
     <Card.Root sx={t => ({ width: t.sizes.$108 })}>
       <Card.Content
-        sx={t => ({ padding: `${t.space.$4} ${t.space.$5} ${isDevelopmentOrStaging() ? t.space.$12 : t.space.$6}` })}
+        sx={t => ({
+          padding: `${t.space.$4} ${t.space.$5} ${displayConfig.showDevModeWarning ? t.space.$12 : t.space.$6}`,
+        })}
       >
         <Card.Alert>{card.error}</Card.Alert>
         <CreateOrganizationForm
diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index 5975e688c9a..23dd29c57a1 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -18,8 +18,8 @@ export const CardClerkAndPagesTag = React.memo(
     }
   >((props, ref) => {
     const { sx, outerSx, withFooterPages = false, withDevOverlay = false, devModeNoticeSx, ...rest } = props;
-    const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
-    const withDevModeNotice = isDevelopmentOrStaging();
+    const { displayConfig } = useEnvironment();
+    const withDevModeNotice = displayConfig.showDevModeWarning;
 
     if (!(displayConfig.branded || withFooterPages) && !withDevModeNotice) {
       return null;
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index e2aed4dac9e..6a6026d677a 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -24,7 +24,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
   const { maintenanceMode } = useEnvironment();
   const card = useCardState();
   const { t } = useLocalizations();
-  const { isDevelopmentOrStaging } = useEnvironment();
+  const { displayConfig } = useEnvironment();
 
   return (
     <Flex
@@ -44,7 +44,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           boxShadow: t.shadows.$cardContentShadow,
           borderRadius: t.radii.$lg,
           position: 'relative',
-          padding: `${t.space.$8} ${t.space.$10} ${isDevelopmentOrStaging() ? t.space.$12 : t.space.$8} ${t.space.$10}`,
+          padding: `${t.space.$8} ${t.space.$10} ${displayConfig.showDevModeWarning ? t.space.$12 : t.space.$8} ${t.space.$10}`,
           justifyContent: 'center',
           alignContent: 'center',
         }),
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index c457d12528e..4dde95bc36c 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -12,9 +12,9 @@ type CardFooterProps = PropsOfComponent<typeof Flex> & {
 };
 export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {
   const { children, isProfileFooter = false, sx, ...rest } = props;
-  const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
+  const { displayConfig } = useEnvironment();
   const { branded } = displayConfig;
-  const withDevModeNotice = isDevelopmentOrStaging();
+  const withDevModeNotice = displayConfig.showDevModeWarning;
   const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
   const sponsorOrLinksExist = !!(branded || helpPageUrl || privacyPageUrl || termsPageUrl);
   const showSponsorAndLinks = isProfileFooter ? branded : sponsorOrLinksExist;
diff --git a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
index 4ccba3bd42b..97682c6b075 100644
--- a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
+++ b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
@@ -9,9 +9,9 @@ type DevModeOverlayProps = {
 
 export const DevModeOverlay = (props: DevModeOverlayProps) => {
   const { gradient = 60 } = props;
-  const { isDevelopmentOrStaging } = useEnvironment();
+  const { displayConfig } = useEnvironment();
 
-  if (!isDevelopmentOrStaging()) {
+  if (!displayConfig.showDevModeWarning) {
     return null;
   }
 
@@ -32,9 +32,9 @@ export const DevModeOverlay = (props: DevModeOverlayProps) => {
 type DevModeNoticeProps = { sx?: ThemableCssProp };
 export const DevModeNotice = (props: DevModeNoticeProps) => {
   const { sx } = props;
-  const { isDevelopmentOrStaging } = useEnvironment();
+  const { displayConfig } = useEnvironment();
 
-  if (!isDevelopmentOrStaging()) {
+  if (!displayConfig.showDevModeWarning) {
     return null;
   }
 
diff --git a/packages/types/src/displayConfig.ts b/packages/types/src/displayConfig.ts
index ca75c6cfc99..b3de9bca056 100644
--- a/packages/types/src/displayConfig.ts
+++ b/packages/types/src/displayConfig.ts
@@ -35,6 +35,7 @@ export interface DisplayConfigJSON {
   after_leave_organization_url: string;
   after_create_organization_url: string;
   google_one_tap_client_id?: string;
+  show_devmode_warning: boolean;
 }
 
 export interface DisplayConfigResource extends ClerkResource {
@@ -68,4 +69,5 @@ export interface DisplayConfigResource extends ClerkResource {
   afterLeaveOrganizationUrl: string;
   afterCreateOrganizationUrl: string;
   googleOneTapClientId?: string;
+  showDevModeWarning: boolean;
 }

From b2f4635ac12a6a8eefa87e3f246e7b8fdf8b8ad1 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 1 Aug 2024 23:09:49 +0300
Subject: [PATCH 13/15] feat(clerk-js): Added internal useDevMode hook and also
 introduced appearance.layout.unsafe_disableDevelopmentModeWarnings option

---
 .../CreateOrganizationPage.tsx                |  7 ++++---
 .../src/ui/customizables/parseAppearance.ts   |  1 +
 .../ui/elements/Card/CardClerkAndPagesTag.tsx |  5 +++--
 .../src/ui/elements/Card/CardContent.tsx      |  5 +++--
 .../src/ui/elements/Card/CardFooter.tsx       |  5 +++--
 .../src/ui/elements/DevModeNotice.tsx         | 10 +++++-----
 packages/clerk-js/src/ui/hooks/useDevMode.tsx | 19 +++++++++++++++++++
 packages/types/src/appearance.ts              |  7 +++++++
 playground/nextjs/pages/_app.tsx              | 19 +++++++++++++++----
 9 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 packages/clerk-js/src/ui/hooks/useDevMode.tsx

diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
index 2fe8f3090d1..7aedd1560da 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
@@ -1,8 +1,9 @@
 import { useClerk } from '@clerk/shared/react';
 
-import { useCreateOrganizationContext, useEnvironment } from '../../contexts';
+import { useCreateOrganizationContext } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { Card, useCardState, withCardStateProvider } from '../../elements';
+import { useDevMode } from '../../hooks/useDevMode';
 import { CreateOrganizationForm } from './CreateOrganizationForm';
 
 export const CreateOrganizationPage = withCardStateProvider(() => {
@@ -10,13 +11,13 @@ export const CreateOrganizationPage = withCardStateProvider(() => {
 
   const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
   const card = useCardState();
-  const { displayConfig } = useEnvironment();
+  const { showDevModeNotice } = useDevMode();
 
   return (
     <Card.Root sx={t => ({ width: t.sizes.$108 })}>
       <Card.Content
         sx={t => ({
-          padding: `${t.space.$4} ${t.space.$5} ${displayConfig.showDevModeWarning ? t.space.$12 : t.space.$6}`,
+          padding: `${t.space.$4} ${t.space.$5} ${showDevModeNotice ? t.space.$12 : t.space.$6}`,
         })}
       >
         <Card.Alert>{card.error}</Card.Alert>
diff --git a/packages/clerk-js/src/ui/customizables/parseAppearance.ts b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
index 0646e1abcdb..7b0317aa1e9 100644
--- a/packages/clerk-js/src/ui/customizables/parseAppearance.ts
+++ b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
@@ -43,6 +43,7 @@ const defaultLayout: ParsedLayout = {
   termsPageUrl: '',
   shimmer: true,
   animations: true,
+  unsafe_disableDevelopmentModeWarnings: false,
 };
 
 /**
diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index 23dd29c57a1..0ee73cec203 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { useEnvironment } from '../../contexts';
 import { Box, Col, Flex, Icon, Link, Text } from '../../customizables';
+import { useDevMode } from '../../hooks/useDevMode';
 import { LogoMark } from '../../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
 import { DevModeNotice, DevModeOverlay } from '../DevModeNotice';
@@ -19,9 +20,9 @@ export const CardClerkAndPagesTag = React.memo(
   >((props, ref) => {
     const { sx, outerSx, withFooterPages = false, withDevOverlay = false, devModeNoticeSx, ...rest } = props;
     const { displayConfig } = useEnvironment();
-    const withDevModeNotice = displayConfig.showDevModeWarning;
+    const { showDevModeNotice } = useDevMode();
 
-    if (!(displayConfig.branded || withFooterPages) && !withDevModeNotice) {
+    if (!(displayConfig.branded || withFooterPages) && !showDevModeNotice) {
       return null;
     }
 
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index 6a6026d677a..50d27c9147d 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -9,6 +9,7 @@ import {
   localizationKeys,
   useLocalizations,
 } from '../../customizables';
+import { useDevMode } from '../../hooks/useDevMode';
 import { Close } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
 import { useCardState, useFlowMetadata } from '../contexts';
@@ -24,7 +25,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
   const { maintenanceMode } = useEnvironment();
   const card = useCardState();
   const { t } = useLocalizations();
-  const { displayConfig } = useEnvironment();
+  const { showDevModeNotice } = useDevMode();
 
   return (
     <Flex
@@ -44,7 +45,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           boxShadow: t.shadows.$cardContentShadow,
           borderRadius: t.radii.$lg,
           position: 'relative',
-          padding: `${t.space.$8} ${t.space.$10} ${displayConfig.showDevModeWarning ? t.space.$12 : t.space.$8} ${t.space.$10}`,
+          padding: `${t.space.$8} ${t.space.$10} ${showDevModeNotice ? t.space.$12 : t.space.$8} ${t.space.$10}`,
           justifyContent: 'center',
           alignContent: 'center',
         }),
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index 4dde95bc36c..23ceb1cf69a 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { useEnvironment } from '../../contexts';
 import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
+import { useDevMode } from '../../hooks/useDevMode';
 import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
 import { common, mqu } from '../../styledSystem';
 import { colors } from '../../utils';
@@ -14,12 +15,12 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
   const { children, isProfileFooter = false, sx, ...rest } = props;
   const { displayConfig } = useEnvironment();
   const { branded } = displayConfig;
-  const withDevModeNotice = displayConfig.showDevModeWarning;
+  const { showDevModeNotice } = useDevMode();
   const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
   const sponsorOrLinksExist = !!(branded || helpPageUrl || privacyPageUrl || termsPageUrl);
   const showSponsorAndLinks = isProfileFooter ? branded : sponsorOrLinksExist;
 
-  if (!children && !(showSponsorAndLinks || withDevModeNotice)) {
+  if (!children && !(showSponsorAndLinks || showDevModeNotice)) {
     return null;
   }
 
diff --git a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
index 97682c6b075..9e95e1771ad 100644
--- a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
+++ b/packages/clerk-js/src/ui/elements/DevModeNotice.tsx
@@ -1,7 +1,7 @@
 import type { ThemableCssProp } from 'ui/styledSystem';
 
-import { useEnvironment } from '../contexts';
 import { Box, Text } from '../customizables';
+import { useDevMode } from '../hooks/useDevMode';
 
 type DevModeOverlayProps = {
   gradient?: number;
@@ -9,9 +9,9 @@ type DevModeOverlayProps = {
 
 export const DevModeOverlay = (props: DevModeOverlayProps) => {
   const { gradient = 60 } = props;
-  const { displayConfig } = useEnvironment();
+  const { showDevModeNotice } = useDevMode();
 
-  if (!displayConfig.showDevModeWarning) {
+  if (!showDevModeNotice) {
     return null;
   }
 
@@ -32,9 +32,9 @@ export const DevModeOverlay = (props: DevModeOverlayProps) => {
 type DevModeNoticeProps = { sx?: ThemableCssProp };
 export const DevModeNotice = (props: DevModeNoticeProps) => {
   const { sx } = props;
-  const { displayConfig } = useEnvironment();
+  const { showDevModeNotice } = useDevMode();
 
-  if (!displayConfig.showDevModeWarning) {
+  if (!showDevModeNotice) {
     return null;
   }
 
diff --git a/packages/clerk-js/src/ui/hooks/useDevMode.tsx b/packages/clerk-js/src/ui/hooks/useDevMode.tsx
new file mode 100644
index 00000000000..19fb9cddf80
--- /dev/null
+++ b/packages/clerk-js/src/ui/hooks/useDevMode.tsx
@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+
+import { useEnvironment } from '../contexts';
+import { useAppearance } from '../customizables';
+
+export function useDevMode() {
+  const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
+  const isDevelopment = isDevelopmentOrStaging();
+  const { unsafe_disableDevelopmentModeWarnings = false } = useAppearance().parsedLayout;
+  const developmentUiDisabled = isDevelopment && unsafe_disableDevelopmentModeWarnings;
+  const showDevModeNotice = useMemo(
+    () => !developmentUiDisabled && displayConfig.showDevModeWarning,
+    [developmentUiDisabled, displayConfig],
+  );
+
+  return {
+    showDevModeNotice,
+  };
+}
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index ef1a472abe3..03b14920735 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -612,6 +612,13 @@ export type Layout = {
    * @default true
    */
   animations?: boolean;
+
+  /**
+   * This option disables development mode warning.
+   * We don't recommend disabling this unless you want to see a preview of how the components will look in production.
+   * @default false
+   */
+  unsafe_disableDevelopmentModeWarnings?: boolean;
 };
 
 export type SignInTheme = Theme;
diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
index 6bb74d3c773..bb19af04c9b 100644
--- a/playground/nextjs/pages/_app.tsx
+++ b/playground/nextjs/pages/_app.tsx
@@ -22,6 +22,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   const [styleReset, setStyleReset] = useState<boolean>(false);
   const [animations, setAnimations] = useState<boolean>(true);
   const [primaryColor, setPrimaryColor] = useState<string | undefined>(undefined);
+  const [disableDevMode, setDisableDevMode] = useState<boolean>(false);
 
   const onToggleDark = () => {
     if (window.document.body.classList.contains('dark-mode')) {
@@ -37,6 +38,10 @@ function MyApp({ Component, pageProps }: AppProps) {
     setAnimations(s => !s);
   };
 
+  const onToggleDevMode = () => {
+    setDisableDevMode(s => !s);
+  }
+
   const onToggleSmooth = () => {
     if (window.document.body.classList.contains('font-smoothing')) {
       setSelectedSmoothing(false);
@@ -62,6 +67,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         },
         layout: {
           animations,
+          unsafe_disableDevelopmentModeWarnings: disableDevMode,
         },
       }}
       {...pageProps}
@@ -72,6 +78,8 @@ function MyApp({ Component, pageProps }: AppProps) {
         onToggleSmooth={onToggleSmooth}
         onResetStyles={() => setStyleReset(s => !s)}
         onToggleAnimations={onToggleAnimations}
+        devMode={disableDevMode}
+        onToggleDevMode={onToggleDevMode}
         animations={animations}
         styleReset={styleReset}
         smooth={selectedSmoothing}
@@ -88,9 +96,11 @@ type AppBarProps = {
   onToggleSmooth: React.MouseEventHandler<HTMLButtonElement>;
   onResetStyles: React.MouseEventHandler<HTMLButtonElement>;
   onToggleAnimations: React.MouseEventHandler<HTMLButtonElement>;
+  onToggleDevMode: React.MouseEventHandler<HTMLButtonElement>;
   smooth: boolean;
   styleReset: boolean;
   animations: boolean;
+  devMode: boolean;
   onPrimaryColorChange: (primaryColor: string | undefined) => void;
 };
 
@@ -128,11 +138,12 @@ const AppBar = (props: AppBarProps) => {
         <option value='neobrutalism'>neobrutalism</option>
         <option value='shadesOfPurple'>shadesOfPurple</option>
       </select>
-      <button onClick={props.onToggleDark}>toggle dark mode</button>
-      <button onClick={props.onToggleSmooth}>font-smoothing: {props.smooth ? 'On' : 'Off'}</button>
+      <button onClick={props.onToggleDark} type='button'>toggle dark mode</button>
+      <button onClick={props.onToggleSmooth} type='button'>font-smoothing: {props.smooth ? 'On' : 'Off'}</button>
       <div style={{ position: 'fixed', left: '10px', bottom: '10px', display: 'inline-flex', gap: '10px' }}>
-        <button onClick={props.onResetStyles}>simple styles: {props.styleReset ? 'On' : 'Off'}</button>
-        <button onClick={props.onToggleAnimations}>animations: {props.animations ? 'On' : 'Off'}</button>
+        <button onClick={props.onResetStyles} type='button'>simple styles: {props.styleReset ? 'On' : 'Off'}</button>
+        <button onClick={props.onToggleAnimations} type='button'>animations: {props.animations ? 'On' : 'Off'}</button>
+        <button onClick={props.onToggleDevMode} type='button'>dev mode: {props.devMode ? 'On' : 'Off'}</button>
       </div>
       <input
         type='color'

From 741fdbda60180b57394850dfb38188bcabdffbaf Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 2 Aug 2024 12:57:03 +0300
Subject: [PATCH 14/15] chore(clerk-js): Remove wrong padding when dev mode
 warning are enabled

---
 packages/clerk-js/src/ui/elements/Card/CardContent.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index 50d27c9147d..f18454620ae 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -9,7 +9,6 @@ import {
   localizationKeys,
   useLocalizations,
 } from '../../customizables';
-import { useDevMode } from '../../hooks/useDevMode';
 import { Close } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
 import { useCardState, useFlowMetadata } from '../contexts';
@@ -25,7 +24,6 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
   const { maintenanceMode } = useEnvironment();
   const card = useCardState();
   const { t } = useLocalizations();
-  const { showDevModeNotice } = useDevMode();
 
   return (
     <Flex
@@ -45,7 +43,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           boxShadow: t.shadows.$cardContentShadow,
           borderRadius: t.radii.$lg,
           position: 'relative',
-          padding: `${t.space.$8} ${t.space.$10} ${showDevModeNotice ? t.space.$12 : t.space.$8} ${t.space.$10}`,
+          padding: `${t.space.$8} ${t.space.$10}`,
           justifyContent: 'center',
           alignContent: 'center',
         }),

From 109b698bf1236cb28893bba16c21000ddbe3e951 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 2 Aug 2024 16:04:54 +0300
Subject: [PATCH 15/15] chore(repo): Update changeset

---
 .changeset/hungry-clouds-return.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/.changeset/hungry-clouds-return.md b/.changeset/hungry-clouds-return.md
index baf7131b575..e7adc59e287 100644
--- a/.changeset/hungry-clouds-return.md
+++ b/.changeset/hungry-clouds-return.md
@@ -3,4 +3,18 @@
 "@clerk/types": minor
 ---
 
-Add a development mode notice to components and also introduce `popoverBox` descriptor.
+Introducing a development mode warning when in development mode in order to mitigate going to production with development keys.
+
+In case need to deactivate this UI change temporarily to simulate how components will look in production, you can do so by adding the `unsafe_disableDevelopmentModeWarnings` layout appearance prop to `<ClerkProvider>`
+
+Example:
+
+```tsx
+<ClerkProvider
+  appearance={{
+    layout: {
+      unsafe_disableDevelopmentModeWarnings: true,
+    },
+  }}
+/>
+```