@latte-macchiat-io/latte-vanilla-components 0.0.133 → 0.0.134

package/dist/latte-vanilla-components.css

@@ -1 +1 @@
-._1h0tdm5e{position:relative;display:inline-block;color:var(--_1h0tdm50);border:var(--_1h0tdm52);cursor:var(--_1h0tdm51);min-width:var(--_1h0tdm53);font-weight:var(--_1h0tdm54);transition:var(--_1h0tdm55);padding-top:var(--_1h0tdm56);padding-left:var(--_1h0tdm57);padding-right:var(--_1h0tdm58);padding-bottom:var(--_1h0tdm59);pointer-event:var(--_1h0tdm5a);border-radius:var(--_1h0tdm5b);letter-spacing:var(--_1h0tdm5c);background-color:var(--_1h0tdm5d)}._1h0tdm5e:hover{opacity:.5}._1v7zi9y5{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;gap:var(--_1v7zi9y0);align-items:var(--_1v7zi9y1);padding-top:var(--_1v7zi9y2);padding-bottom:var(--_1v7zi9y3);justify-content:var(--_1v7zi9y4)}._18hbdtx1{position:relative;width:100%;height:100%;max-height:var(--_18hbdtx0)}._18hbdtx2{0: _;1: 1;2: 8;3: h;4: b;5: d;6: t;7: x;8: 1}._18hbdtx3{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0}._18hbdtx3 img{width:100%;height:100%;object-fit:cover}._18hbdtx4{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer}._18hbdtx5{position:absolute;right:50px;bottom:10px;cursor:pointer}._18hbdtx6{position:absolute;top:15px;right:15px;cursor:pointer}._18hbdtx7{position:absolute;right:15px;bottom:15px;cursor:pointer}._29n9il2{height:0;width:100vw;overflow:hidden;position:relative;padding-bottom:56.25%;left:var(--_29n9il0);right:var(--_29n9il1)}._29n9il3{0: _;1: 2;2: 9;3: n;4: 9;5: i;6: l;7: 2}._1wp326d2{display:flex;background-color:var(--_1wp326d1);flex:1 1 auto;min-height:45vh;text-align:center;align-items:center;flex-direction:column;justify-content:center}@media screen and (min-width: 768px){._1wp326d2{min-height:var(--_1wp326d0)}}.fl7h886{z-index:20;display:flex;font-size:.8em;align-items:center;flex-direction:column;justify-content:space-between;gap:var(--fl7h880);background-color:var(--fl7h881);padding-top:var(--fl7h882);padding-bottom:var(--fl7h883);padding-left:var(--fl7h884);padding-right:var(--fl7h885)}.fl7h886 a{transition:all .5s ease-in-out}.fl7h886 a:hover{opacity:.5}.fl7h887{0: f;1: l;2: 7;3: h;4: 8;5: 8;6: 6}.jqc4y0a{width:100%;display:flex;align-items:center;position:relative;flex-direction:column;animation:background .5s ease-in-out;color:var(--jqc4y02);z-index:var(--jqc4y01);min-height:var(--jqc4y07);padding-top:var(--jqc4y03);padding-left:var(--jqc4y04);padding-right:var(--jqc4y05);padding-bottom:var(--jqc4y06);background:var(--jqc4y09);justify-content:var(--jqc4y08)}.jqc4y0b{gap:15px;width:100%;display:flex;flex-direction:column;max-width:var(--max-width);text-align:var(--jqc4y00);align-items:var(--jqc4y00)}.g7q46n1{display:flex;flex-direction:row;margin-left:0;margin-right:0;gap:var(--g7q46n0)}.g7q46n2{display:flex;flex-direction:row}.g7q46n2 a{padding:10px}.g7q46n2 a svg path{transition:all .5s ease-in-out}.g7q46n2 a:hover svg path{opacity:.5}.g7q46n3{0: g;1: 7;2: q;3: 4;4: 6;5: n;6: 1}.vehv9e1{display:flex;flex-direction:row;gap:var(--vehv9e0)}.vehv9e2{0: v;1: e;2: h;3: v;4: 9;5: e;6: 1}
+._1h0tdm5e{position:relative;display:inline-block;color:var(--_1h0tdm50);border:var(--_1h0tdm52);cursor:var(--_1h0tdm51);min-width:var(--_1h0tdm53);font-weight:var(--_1h0tdm54);transition:var(--_1h0tdm55);padding-top:var(--_1h0tdm56);padding-left:var(--_1h0tdm57);padding-right:var(--_1h0tdm58);padding-bottom:var(--_1h0tdm59);pointer-event:var(--_1h0tdm5a);border-radius:var(--_1h0tdm5b);letter-spacing:var(--_1h0tdm5c);background-color:var(--_1h0tdm5d)}._1h0tdm5e:hover{opacity:.5}._1v7zi9y5{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;gap:var(--_1v7zi9y0);align-items:var(--_1v7zi9y1);padding-top:var(--_1v7zi9y2);padding-bottom:var(--_1v7zi9y3);justify-content:var(--_1v7zi9y4)}._18bqyaqe{z-index:100;position:fixed;width:100%;height:100%}._18bqyaqe:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;opacity:var(--_18bqyaq0);background-color:var(--_18bqyaq1);-webkit-backdrop-filter:blur(var(--_18bqyaq2));backdrop-filter:blur(var(--_18bqyaq2))}._18bqyaqf{0: _;1: 1;2: 8;3: b;4: q;5: y;6: a;7: q;8: e}._18bqyaqg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;display:flex;flex-direction:column;text-align:var(--_18bqyaqa);width:var(--_18bqyaq3);max-width:var(--_18bqyaq8);max-height:var(--_18bqyaq9);padding-top:var(--_18bqyaq4);padding-bottom:var(--_18bqyaq5);padding-left:var(--_18bqyaq6);padding-right:var(--_18bqyaq7);background-color:var(--_18bqyaqb);border-radius:var(--_18bqyaqc);border:var(--_18bqyaqd)}._18bqyaqh{position:absolute;top:15px;right:15px;z-index:20;border:0;background-color:transparent;cursor:pointer;transition:all .5s ease-in-out}._18bqyaqh:hover{transform:scale(1.2)}._18hbdtx1{position:relative;width:100%;height:100%;max-height:var(--_18hbdtx0)}._18hbdtx2{0: _;1: 1;2: 8;3: h;4: b;5: d;6: t;7: x;8: 1}._18hbdtx3{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0}._18hbdtx3 img{width:100%;height:100%;object-fit:cover}._18hbdtx4{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer}._18hbdtx5{position:absolute;right:50px;bottom:10px;cursor:pointer}._18hbdtx6{position:absolute;top:15px;right:15px;cursor:pointer}._18hbdtx7{position:absolute;right:15px;bottom:15px;cursor:pointer}._13pkfbg1 img{width:100%;height:auto;max-width:var(--_13pkfbg0)}._13pkfbg2{0: _;1: 1;2: 3;3: p;4: k;5: f;6: b;7: g;8: 1}._177g97f1{display:flex;flex-direction:column}._177g97f2{font-size:1.2em;padding-bottom:var(--_177g97f0)}._177g97f2 span{font-size:2.5em;line-height:1em}._177g97f4{0: _;1: 1;2: 7;3: 7;4: g;5: 9;6: 7;7: f;8: 1}@media screen and (min-width: 768px){._177g97f3{padding-bottom:30px}}._29n9il2{height:0;width:100vw;overflow:hidden;position:relative;padding-bottom:56.25%;left:var(--_29n9il0);right:var(--_29n9il1)}._29n9il3{0: _;1: 2;2: 9;3: n;4: 9;5: i;6: l;7: 2}._9kkynw1{margin-left:auto;margin-right:auto;position:relative;width:var(--_9kkynw0)}._9kkynw2{right:30px;top:50%;position:absolute;transform:translateY(-50%)}._9kkynw3{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:15px 30px}._9kkynw3:focus{outline:none}._9kkynw4{0: _;1: 9;2: k;3: k;4: y;5: n;6: w;7: 1}._1wp326d2{display:flex;background-color:var(--_1wp326d1);flex:1 1 auto;min-height:45vh;text-align:center;align-items:center;flex-direction:column;justify-content:center}@media screen and (min-width: 768px){._1wp326d2{min-height:var(--_1wp326d0)}}.fl7h886{z-index:20;display:flex;font-size:.8em;align-items:center;flex-direction:column;justify-content:space-between;gap:var(--fl7h880);background-color:var(--fl7h881);padding-top:var(--fl7h882);padding-bottom:var(--fl7h883);padding-left:var(--fl7h884);padding-right:var(--fl7h885)}.fl7h886 a{transition:all .5s ease-in-out}.fl7h886 a:hover{opacity:.5}.fl7h887{0: f;1: l;2: 7;3: h;4: 8;5: 8;6: 6}.jqc4y0a{width:100%;display:flex;align-items:center;position:relative;flex-direction:column;animation:background .5s ease-in-out;color:var(--jqc4y02);z-index:var(--jqc4y01);min-height:var(--jqc4y07);padding-top:var(--jqc4y03);padding-left:var(--jqc4y04);padding-right:var(--jqc4y05);padding-bottom:var(--jqc4y06);background:var(--jqc4y09);justify-content:var(--jqc4y08)}.jqc4y0b{gap:15px;width:100%;display:flex;flex-direction:column;max-width:var(--max-width);text-align:var(--jqc4y00);align-items:var(--jqc4y00)}._1h6zt341{display:flex;flex-direction:column;gap:var(--_1h6zt340)}._1h6zt342{0: _;1: 1;2: h;3: 6;4: z;5: t;6: 3;7: 4;8: 1}.g7q46n1{display:flex;flex-direction:row;margin-left:0;margin-right:0;gap:var(--g7q46n0)}.g7q46n2{display:flex;flex-direction:row}.g7q46n2 a{padding:10px}.g7q46n2 a svg path{transition:all .5s ease-in-out}.g7q46n2 a:hover svg path{opacity:.5}.g7q46n3{0: g;1: 7;2: q;3: 4;4: 6;5: n;6: 1}.vehv9e1{display:flex;flex-direction:row;gap:var(--vehv9e0)}.vehv9e2{0: v;1: e;2: h;3: v;4: 9;5: e;6: 1}

package/dist/types/components/KeyNumber/export.d.ts

@@ -1,2 +1,3 @@
 export { KeyNumber } from '.';
 export type { KeyNumberProps } from '.';
+export { styles as KeyNumberStyles } from './styles.css';

package/dist/types/components/KeyNumber/index.d.ts

@@ -1,10 +1,9 @@
-import { CSSProperties } from 'react';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
 export type KeyNumberProps = {
     label: string;
     theme?: Theme;
     suffix: string;
     keyNumber: number;
-    styles?: CSSProperties;
 };
-export declare const KeyNumber: ({ label, suffix, keyNumber, styles, theme }: KeyNumberProps) => React.ReactElement;
+export declare const KeyNumber: ({ label, suffix, keyNumber, className, theme, }: KeyNumberProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/KeyNumber/styles.css.d.ts

@@ -0,0 +1,7 @@
+export declare const vars: {
+    keyNumberPaddingBottom: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const keyNumbersListItemNumberStyle: string;
+export declare const keyNumbersListItemNumberResponsive: string;
+export declare const keyNumberFinalStyle: string;

package/dist/types/components/LanguageSwitcher/export.d.ts

@@ -1,2 +1,3 @@
 export { LanguageSwitcher } from '.';
 export type { LanguageSwitcherProps } from '.';
+export { styles as LanguageSwitcherStyles } from './styles.css';

package/dist/types/components/LanguageSwitcher/index.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
 export type LanguageSwitcherProps = {
     theme?: Theme;
     locales: string[];
@@ -7,10 +7,9 @@ export type LanguageSwitcherProps = {
     translations: {
         [locale: string]: string;
     };
-    styles?: CSSProperties;
     handleChange: (event: {
         target: HTMLSelectElement;
     }) => void;
 };
-export declare const LanguageSwitcher: ({ currentLocale, handleChange, locales, styles, theme, translations, }: LanguageSwitcherProps) => import("react").JSX.Element;
+export declare const LanguageSwitcher: ({ currentLocale, handleChange, locales, theme, className, translations, }: LanguageSwitcherProps & WithClassName) => import("react").JSX.Element;
 export default LanguageSwitcher;

package/dist/types/components/LanguageSwitcher/styles.css.d.ts

@@ -0,0 +1,7 @@
+export declare const vars: {
+    languageSwitcherWidth: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const languageSwitcherIconStyle: string;
+export declare const languageSwitcherSelectStyle: string;
+export declare const languageSwitcherFinalStyle: string;

package/dist/types/components/Logo/export.d.ts

@@ -1,2 +1,3 @@
 export { Logo } from '.';
 export type { LogoProps } from '.';
+export { styles as LogoStyles } from './styles.css';

package/dist/types/components/Logo/index.d.ts

@@ -1,8 +1,7 @@
-import { CSSProperties } from 'react';
+import { WithClassName } from '../../types/withClassName';
 import { Theme } from '../../types/theme';
 export type LogoProps = {
     theme?: Theme;
-    styles?: CSSProperties;
     children: React.ReactNode;
 };
-export declare const Logo: ({ children, styles, theme }: LogoProps) => import("react").JSX.Element;
+export declare const Logo: ({ children, theme, className }: LogoProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Logo/styles.css.d.ts

@@ -0,0 +1,5 @@
+export declare const vars: {
+    imgMaxWidth: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const logoStyle: string;

package/dist/types/components/Modal/export.d.ts

@@ -1,2 +1,3 @@
 export { Modal } from '.';
 export type { ModalProps } from '.';
+export { styles as ModalStyles } from './styles.css';

package/dist/types/components/Modal/index.d.ts

@@ -1,11 +1,10 @@
-import { CSSProperties } from 'react';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
 import { Align } from './types';
 export type ModalProps = {
     theme?: Theme;
     align?: Align;
-    styles?: CSSProperties;
     onModalHide?: () => void;
     children: React.ReactNode;
 };
-export declare const Modal: ({ children, styles, align, theme, onModalHide, }: ModalProps) => React.ReactElement;
+export declare const Modal: ({ children, align, theme, onModalHide, className, }: ModalProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Modal/styles.css.d.ts

@@ -0,0 +1,20 @@
+export declare const vars: {
+    overlayOpacity: `var(--${string})`;
+    overlayBackgroundColor: `var(--${string})`;
+    overlayBlur: `var(--${string})`;
+    modalWidth: `var(--${string})`;
+    modalPaddingTop: `var(--${string})`;
+    modalPaddingBottom: `var(--${string})`;
+    modalPaddingLeft: `var(--${string})`;
+    modalPaddingRight: `var(--${string})`;
+    modalMaxWidth: `var(--${string})`;
+    modalMaxHeight: `var(--${string})`;
+    modalContentTextAlign: `var(--${string})`;
+    modalContentBackgroundColor: `var(--${string})`;
+    modalContentBorderRadius: `var(--${string})`;
+    modalContentBorders: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const modalStyle: string;
+export declare const modalContentStyle: string;
+export declare const modalCloseButtonStyle: string;

package/dist/types/components/Nav/export.d.ts

@@ -1,2 +1,3 @@
 export { Nav } from '.';
 export type { NavProps } from '.';
+export { styles as NavStyles } from './styles.css';

package/dist/types/components/Nav/index.d.ts

@@ -1,8 +1,7 @@
-import { CSSProperties } from 'react';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
 export type NavProps = {
     theme?: Theme;
-    styles?: CSSProperties;
     children: React.ReactNode;
 };
-export declare const Nav: ({ children, styles, theme }: NavProps) => import("react").JSX.Element;
+export declare const Nav: ({ children, theme, className }: NavProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Nav/styles.css.d.ts

@@ -0,0 +1,5 @@
+export declare const vars: {
+    navGap: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const navStyle: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.133",
+  "version": "0.0.134",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/dist/types/components/KeyNumber/styles.d.ts

@@ -1,13 +0,0 @@
-import { CSSProperties } from 'react';
-interface IStyledKeyNumber {
-    styles: CSSProperties;
-}
-export declare const StyledKeyNumber: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledKeyNumber, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledKeyNumbersListItemNumber: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/dist/types/components/LanguageSwitcher/styles.d.ts

@@ -1,22 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledLanguageSwitcher {
-    theme: Theme;
-    styles: CSSProperties;
-}
-export declare const StyledLanguageSwitcher: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledLanguageSwitcher, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledLanguageSwitcherIcon: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-interface IStyledLanguageSwitcherSelect {
-    theme: Theme;
-}
-export declare const StyledLanguageSwitcherSelect: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledLanguageSwitcherSelect, import('react').DetailedHTMLProps<import('react').SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, {}>;
-export {};

package/dist/types/components/Logo/styles.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledLogo {
-    theme: Theme;
-    styles: CSSProperties;
-}
-export declare const StyledLogo: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledLogo, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/dist/types/components/Modal/styles.d.ts

@@ -1,24 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-import { Align } from './types';
-interface IStyledModal {
-    theme: Theme;
-    styles: CSSProperties;
-}
-export declare const StyledModal: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledModal, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-interface IStyledModalContent {
-    theme: Theme;
-    align: Align;
-}
-export declare const StyledModalContent: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledModalContent, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledModalCloseButton: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export {};

package/dist/types/components/Nav/styles.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledNavLegal {
-    theme: Theme;
-    styles: CSSProperties;
-}
-export declare const StyledNavLegal: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledNavLegal, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};