@latte-macchiat-io/latte-vanilla-components 0.0.425 → 0.0.427

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.425",
+  "version": "0.0.427",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/ConsentCookie/export.tsx

@@ -1,2 +1 @@
 export { ConsentCookie, type ConsentCookieProps } from './';
-export { type ConsentCookieVariants } from './styles.css';

package/src/components/ConsentCookie/index.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 
 import { getCookie, setCookie } from './cookie';
-import { consentActions, consentContent, type ConsentCookieVariants, consentRecipe } from './styles.css';
+import { consentActions, consentContent, consentOverlay } from './styles.css';
 import { cn } from '../../utils/styleOverride';
 
 import { Button } from '../Button';
@@ -15,7 +15,7 @@ declare const window: Window &
     gtag: any;
   };
 
-export interface ConsentCookieProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, NonNullable<ConsentCookieVariants> {
+export interface ConsentCookieProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
   cookieName?: string;
   cookieExpirationDays?: number;
   onAccept?: () => void;
@@ -30,7 +30,6 @@ export interface ConsentCookieProps extends Omit<React.HTMLAttributes<HTMLDivEle
 }
 
 export const ConsentCookie = ({
-  variant,
   onAccept,
   onReject,
   children,
@@ -89,11 +88,11 @@ export const ConsentCookie = ({
   if (!showConsent) return null;
 
   return (
-    <div className={cn(consentRecipe({ variant }), className)} role="dialog" aria-modal="true" aria-labelledby="consent-title">
+    <div className={cn(consentOverlay, className)} role="dialog" aria-modal="true" aria-labelledby="consent-title">
       <div className={consentContent}>
         {children}
         <div className={consentActions}>
-          <Button size="sm" onClick={handleReject}>
+          <Button size="sm" variant="secondary" onClick={handleReject}>
             {translations?.actions.reject || 'Reject'}
           </Button>
           <Button variant="primary" size="sm" onClick={handleAccept}>

package/src/components/ConsentCookie/styles.css.ts

@@ -1,5 +1,4 @@
 import { keyframes, style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
@@ -20,7 +19,7 @@ const slideUp = keyframes({
   },
 });
 
-const consentOverlay = style(
+export const consentOverlay = style(
   {
     top: 0,
     left: 0,
@@ -94,88 +93,3 @@ export const consentActions = style(
   },
   'consent-actions'
 );
-
-export const consentRecipe = recipe(
-  {
-    base: consentOverlay,
-
-    variants: {
-      // position: {
-      //   'bottom-right': {},
-      //   'bottom-left': {
-      //     // selectors: {
-      //     //   '& > div': {
-      //     //     left: themeContract.space.md,
-      //     //     right: 'auto',
-      //     //   },
-      //     // },
-      //   },
-      //   'bottom-center': {
-      //     // selectors: {
-      //     //   '& > div': {
-      //     //     left: '50%',
-      //     //     right: 'auto',
-      //     //     transform: 'translateX(-50%)',
-      //     //   },
-      //     // },
-      //   },
-      //   'top-right': {
-      //     // selectors: {
-      //     //   '& > div': {
-      //     //     top: themeContract.space.md,
-      //     //     bottom: 'auto',
-      //     //   },
-      //     // },
-      //   },
-      //   'top-left': {
-      //     // selectors: {
-      //     //   '& > div': {
-      //     //     top: themeContract.space.md,
-      //     //     bottom: 'auto',
-      //     //     left: themeContract.space.md,
-      //     //     right: 'auto',
-      //     //   },
-      //     // },
-      //   },
-      //   'top-center': {
-      //     // selectors: {
-      //     //   '& > div': {
-      //     //     top: themeContract.space.md,
-      //     //     bottom: 'auto',
-      //     //     left: '50%',
-      //     //     right: 'auto',
-      //     //     transform: 'translateX(-50%)',
-      //     //   },
-      //     // },
-      //   },
-      // },
-      variant: {
-        modal: {},
-        banner: {
-          '::before': {
-            display: 'none',
-          },
-
-          // selectors: {
-          //   '& > div': {
-          //     position: 'static',
-          //     width: '100%',
-          //     maxWidth: 'none',
-          //     borderRadius: 0,
-          //     bottom: 'auto',
-          //     right: 'auto',
-          //   },
-          // },
-        },
-      },
-    },
-
-    defaultVariants: {
-      // position: 'bottom-right',
-      variant: 'modal',
-    },
-  },
-  'consent'
-);
-
-export type ConsentCookieVariants = RecipeVariants<typeof consentRecipe>;