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

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.135",
   "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/Carousel/styles.d.ts

@@ -1,52 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledCarousel {
-    styles: CSSProperties;
-    isFullWidth: boolean;
-    theme: Theme;
-}
-export declare const StyledCarousel: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledCarousel, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledCarouselContent: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-interface IStyledCarouselContentList {
-    gap: number;
-    left: number;
-    width: number;
-}
-export declare const StyledCarouselContentList: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledCarouselContentList, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledCarouselContentListItem: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledCarouselNav: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-interface IStyledCarouselNavButton {
-    isDisabled: boolean;
-}
-export declare const StyledCarouselNavButton: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledCarouselNavButton, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const StyledCarouselBullet: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-interface IStyledCarouselBulletItem {
-    theme: Theme;
-    isActive: boolean;
-}
-export declare const StyledCarouselBulletItem: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledCarouselBulletItem, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

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

@@ -1,16 +0,0 @@
-import { CSSProperties } from 'react';
-import { Align } from './types';
-import { Theme } from '../../types/theme';
-interface IStyledColumns {
-    align: Align;
-    theme: Theme;
-    columns: number[];
-    isCentered: boolean;
-    isInverted: boolean;
-    styles: CSSProperties;
-}
-export declare const StyledColumns: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledColumns, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

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

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

package/dist/types/components/Form/Row/styles.d.ts

@@ -1,15 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../../types/theme';
-import { Align } from './types';
-interface IStyledFormRow {
-    align: Align;
-    theme: Theme;
-    isActions: boolean;
-    isMessage: boolean;
-    styles: CSSProperties;
-}
-export declare const StyledFormRow: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledFormRow, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/dist/types/components/Form/TextField/Input/styles.d.ts

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

package/dist/types/components/Form/TextField/Label/styles.d.ts

@@ -1,9 +0,0 @@
-import { Theme } from '../../../../types/theme';
-interface IStyledTextFieldLabel {
-    theme: Theme;
-}
-export declare const StyledTextFieldLabel: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledTextFieldLabel, import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export {};

package/dist/types/components/Form/TextField/Textarea/styles.d.ts

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

package/dist/types/components/Form/TextField/styles.d.ts

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

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

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

package/dist/types/components/Header/HeaderOverlay/styles.d.ts

@@ -1,10 +0,0 @@
-import { Theme } from '../../../types/theme';
-interface IStyledOverlay {
-    theme: Theme;
-    isOpen: boolean;
-}
-export declare const StyledOverlay: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledOverlay, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/dist/types/components/Header/ToggleNav/styles.d.ts

@@ -1,17 +0,0 @@
-import { Theme } from '../../../types/theme';
-interface IStyledToggleNav {
-    displayOnDesktop: boolean;
-}
-export declare const StyledToggleNav: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledToggleNav, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-interface IStyledToggleNavBar {
-    isNavOpen: boolean;
-    theme: Theme;
-}
-export declare const StyledToggleNavBar: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledToggleNavBar, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export {};

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

@@ -1,19 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledHeader {
-    theme: Theme;
-    isFixed: boolean;
-    styles: CSSProperties;
-}
-export declare const StyledHeader: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledHeader, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-interface IStyledHeaderPlaceholder {
-    theme: Theme;
-}
-export declare const StyledHeaderPlaceholder: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledHeaderPlaceholder, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

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

@@ -1,16 +0,0 @@
-import { CSSProperties } from 'react';
-interface IStyledIcon {
-    styles: CSSProperties;
-}
-export declare const StyledIcon: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledIcon, import('react').SVGProps<SVGSVGElement>, {}>;
-interface IStyledIconPath {
-    fill: string;
-}
-export declare const StyledIconPath: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledIconPath, import('react').SVGProps<SVGPathElement>, {}>;
-export {};

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 {};