fix(clerk-js): Temporarily adding any to the emotion css prop

Otherwise, DTS files will fail to be built using the fix(clerk-js): Introduce and use `~ui` alias In order to be able to switch between /ui and /ui.retheme simply by changing the active tsconfig file.declarations.retheme.json file when `paths` is used. We will revert this change once the components are ready.
clerk · Nov 14, 2023 · 4144f25 · 4144f25
1 parent 5138e30
commit 4144f25
Show file tree

Hide file tree

Showing 22 changed files with 25 additions and 24 deletions.
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Alert.tsx b/packages/clerk-js/src/ui.retheme/primitives/Alert.tsx
@@ -23,7 +23,7 @@ export const Alert = (props: AlertProps): JSX.Element => {
       // @ts-ignore
       justify='start'
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       {props.children}
     </Flex>

diff --git a/packages/clerk-js/src/ui.retheme/primitives/AlertIcon.tsx b/packages/clerk-js/src/ui.retheme/primitives/AlertIcon.tsx
@@ -28,7 +28,7 @@ export const AlertIcon = (props: AlertIconProps): JSX.Element => {
   return (
     <Icon
       {...filterProps(rest)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Badge.tsx b/packages/clerk-js/src/ui.retheme/primitives/Badge.tsx
@@ -53,7 +53,7 @@ export const Badge = (props: BadgeProps) => {
       {...filterProps(props)}
       center
       as='span'
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Box.tsx b/packages/clerk-js/src/ui.retheme/primitives/Box.tsx
@@ -19,7 +19,7 @@ export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   return (
     <As
       {...applyDataStateProps(rest)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx b/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
@@ -142,6 +142,7 @@ type OwnProps = PrimitiveProps<'button'> & {
   isActive?: boolean;
   hoverAsFocus?: boolean;
 };
+
 type ButtonProps = OwnProps & StyleVariants<typeof applyVariants>;
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
@@ -173,7 +174,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       type={undefined}
       onClick={onClick}
       disabled={isDisabled}
-      css={applyVariants(parsedProps)}
+      css={applyVariants(parsedProps) as any}
       ref={ref}
     >
       {isLoading && (
@@ -217,7 +218,7 @@ const SimpleButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, re
       // the default styles of our components
       type={undefined}
       onClick={onClick}
-      css={applyVariants(parsedProps)}
+      css={applyVariants(parsedProps) as any}
       disabled={isDisabled}
       ref={ref}
     >

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Flex.tsx b/packages/clerk-js/src/ui.retheme/primitives/Flex.tsx
@@ -64,7 +64,7 @@ export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) =>
   return (
     <Box
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );

diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormErrorText.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormErrorText.tsx
@@ -39,7 +39,7 @@ export const FormErrorText = forwardRef<HTMLElement, FormErrorTextProps>((props,
       aria-live='polite'
       id={errorMessageId}
       {...rest}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       <Icon
         colorScheme={'danger'}

diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormInfoText.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormInfoText.tsx
@@ -20,7 +20,7 @@ export const FormInfoText = forwardRef<HTMLElement, FormTextProps>((props, ref)
       aria-live='polite'
       id={errorMessageId}
       {...props}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 });
diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormLabel.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormLabel.tsx
@@ -25,7 +25,7 @@ export const FormLabel = (props: FormLabelProps) => {
     <label
       {...applyDataStateProps(rest)}
       htmlFor={htmlForProp ?? id}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       {props.children}
     </label>

diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormSuccessText.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormSuccessText.tsx
@@ -31,7 +31,7 @@ export const FormSuccessText = forwardRef<HTMLElement, FormTextProps>((props, re
       colorScheme='neutral'
       aria-live='polite'
       {...rest}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       <Icon
         colorScheme={'success'}

diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormWarningText.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormWarningText.tsx
@@ -16,7 +16,7 @@ export const FormWarningText = forwardRef<HTMLElement, FormTextProps>((props, re
       colorScheme='neutral'
       aria-live='polite'
       {...rest}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       <Icon
         colorScheme={'warning'}

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Grid.tsx b/packages/clerk-js/src/ui.retheme/primitives/Grid.tsx
@@ -57,7 +57,7 @@ export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) =>
   return (
     <Box
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Heading.tsx b/packages/clerk-js/src/ui.retheme/primitives/Heading.tsx
@@ -29,7 +29,7 @@ export const Heading = (props: HeadingProps) => {
   return (
     <As
       {...filterProps(rest)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Icon.tsx b/packages/clerk-js/src/ui.retheme/primitives/Icon.tsx
@@ -36,7 +36,7 @@ export const Icon = (props: IconProps): JSX.Element => {
     <Icon
       {...filterProps(rest)}
       // @ts-expect-error
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Input.tsx b/packages/clerk-js/src/ui.retheme/primitives/Input.tsx
@@ -65,7 +65,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
       aria-describedby={formControlProps.errorMessageId}
       aria-required={_required}
       aria-disabled={_disabled}
-      css={applyVariants(propsWithoutVariants)}
+      css={applyVariants(propsWithoutVariants) as any}
     />
   );
 });
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Link.tsx b/packages/clerk-js/src/ui.retheme/primitives/Link.tsx
@@ -66,7 +66,7 @@ export const Link = (props: LinkProps): JSX.Element => {
       href={href || ''}
       target={href && isExternal ? '_blank' : undefined}
       rel={href && isExternal ? 'noopener' : undefined}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       {children}
     </a>

diff --git a/packages/clerk-js/src/ui.retheme/primitives/NotificationBadge.tsx b/packages/clerk-js/src/ui.retheme/primitives/NotificationBadge.tsx
@@ -39,7 +39,7 @@ export const NotificationBadge = (props: NotificationBadgeProps) => {
       center
       as='span'
       css={[
-        applyVariants(props),
+        applyVariants(props) as any,
         {
           lineHeight: 0,
         },

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Spinner.tsx b/packages/clerk-js/src/ui.retheme/primitives/Spinner.tsx
@@ -61,7 +61,7 @@ export const Spinner = (props: SpinnerProps) => {
   return (
     <span
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       aria-busy
       aria-live='polite'
     />

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Table.tsx b/packages/clerk-js/src/ui.retheme/primitives/Table.tsx
@@ -59,7 +59,7 @@ export const Table = React.forwardRef<HTMLTableCellElement, TableProps>((props,
     <Box
       as='table'
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Td.tsx b/packages/clerk-js/src/ui.retheme/primitives/Td.tsx
@@ -21,7 +21,7 @@ export const Td = React.forwardRef<HTMLTableCellElement, TdProps>((props, ref) =
     <Box
       as='td'
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Text.tsx b/packages/clerk-js/src/ui.retheme/primitives/Text.tsx
@@ -45,12 +45,12 @@ export type TextProps = PrimitiveProps<'p'> & { isDisabled?: boolean } & StyleVa
     as?: 'p' | 'div' | 'label' | 'code' | 'span' | 'li' | 'a';
   };
 
-export const Text = React.forwardRef<HTMLElement, TextProps>((props, ref): JSX.Element => {
+export const Text = React.forwardRef<HTMLElement, TextProps>((props, ref) => {
   const { as: As = 'p', ...rest } = props;
   return (
     <As
       {...applyDataStateProps(filterProps(rest))}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref as unknown as any}
     />
   );

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Th.tsx b/packages/clerk-js/src/ui.retheme/primitives/Th.tsx
@@ -26,7 +26,7 @@ export const Th = React.forwardRef<HTMLTableCellElement, ThProps>((props, ref) =
     <Box
       as='th'
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );