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

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)}._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}
+._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)}._1slxfz52{margin:0 auto;display:inline-block;vertical-align:middle}._1slxfz52 path{fill:var(--_1slxfz51);transition:color .5s ease}._1slxfz53{0: _;1: 1;2: s;3: l;4: x;5: f;6: z;7: 5;8: 2}._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}[object Object] > div{flex:0 0 calc(100% / var(--displayItem));transition:transform .3s ease-in-out}[object Object] button{position:absolute;top:50%;transform:translateY(-50%);cursor:pointer}[object Object] > div + div{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}._177g97f1{font-size:1.2em;padding-bottom:var(--_177g97f0)}._177g97f1 span{font-size:2.5em;line-height:1em}._177g97f3{display:flex;flex-direction:column}@media screen and (min-width: 768px){._177g97f2{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)}}.xr8l1e2{top:0;left:0;z-index:40;width:100vw;display:flex;height:100vh;position:fixed;overflow:hidden;text-align:center;align-items:center;flex-direction:column;transform-origin:0% 0%;justify-content:center;gap:var(--overlayGap, 20px);bottom:var(--xr8l1e0);transform:var(--xr8l1e1);transition:transform .5s cubic-bezier(.77,.2,.05,1)}@media (min-width: 640px){.xr8l1e2{gap:var(--overlayGap0, 20px)}}@media (min-width: 768px){.xr8l1e2{gap:var(--overlayGap1, 30px)}}@media (min-width: 1024px){.xr8l1e2{gap:var(--overlayGap2, 40px)}}._1c0ak731{border:0;width:25px;height:12px;z-index:60;margin-left:0;cursor:pointer;position:relative}._1c0ak732{height:2px;width:25px;margin-bottom:8px;display:block;position:relative;transform-origin:center center;transition:all .5s ease-in-out}._1c0ak732[data-open=true]:nth-of-type(1){transform:rotate(45deg) translate(4px,3px)}._1c0ak732[data-open=true]:nth-of-type(2){transform:rotate(-45deg) translate(4px,-3px)}@media screen and (min-width: 1024px){._1c0ak731{display:var(--_1c0ak730)}}._15wg1hu1{z-index:30;width:100%;display:flex;align-items:center;justify-content:space-between;position:var(--_15wg1hu0);background-color:var(--header-bg, white)}._15wg1hu1 a{transition:all .5s ease-in-out}._15wg1hu1 a:hover{opacity:.5}._15wg1hu2{0: _;1: 1;2: 5;3: w;4: g;5: 1;6: h;7: u;8: 1}._15wg1hu3{height:60px}@media (min-width: 640px){._15wg1hu3{height:80px}}@media (min-width: 768px){._15wg1hu3{height:100px}}@media (min-width: 1024px){._15wg1hu3{height:120px}}.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}.mx2tfy9{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:flex-start;gap:var(--mx2tfy0);justify-content:space-between;text-align:var(--mx2tfy1)}.mx2tfy9>*{min-width:100%;position:relative}.mx2tfy9>* :empty{margin-top:calc(-1 * var(--gap) / 2)}@media screen and (min-width: 768px){mx2tfy9{flex-direction:var(--mx2tfy4);align-items:var(--mx2tfy3);justify-content:var(--mx2tfy2)}mx2tfy9>*:nth-of-type(1){flex:var(--column0);min-width:auto;max-width:var(--column0)}mx2tfy9>*:nth-of-type(2){flex:var(--column1);min-width:auto;max-width:var(--column1)}mx2tfy9>*:nth-of-type(3){flex:var(--column2);min-width:auto;max-width:var(--column2)}mx2tfy9>*:nth-of-type(4){flex:var(--column3);min-width:auto;max-width:var(--column3)}}@media screen and (min-width: 1024px){mx2tfy9{gap:calc(var(--gap) * 2)}}.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}.dvq5w83{width:100%;max-width:var(--dvq5w80);background-color:var(--dvq5w82);padding:var(--dvq5w81);position:relative}.dvq5w84{0: d;1: v;2: q;3: 5;4: w;5: 8;6: 3}@media (min-width: 768px){.dvq5w83{padding:var(--formPadding)}}._223sdz4{display:flex;flex-direction:column;gap:var(--_223sdz0);padding:var(--_223sdz1);font-size:var(--_223sdz2);justify-content:var(--_223sdz3)}._223sdz5{0: _;1: 2;2: 2;3: 3;4: s;5: d;6: z;7: 4}.k6gj0i8{width:100%;font-size:inherit;line-height:1.5em;font-family:var(--k6gj0i0);color:var(--k6gj0i1);border:var(--k6gj0i2);border-radius:var(--k6gj0i3);background-color:var(--k6gj0i4);padding:var(--k6gj0i5)}.k6gj0i8:focus{outline:var(--k6gj0i2)}.k6gj0i8::placeholder{color:var(--k6gj0i6);opacity:var(--k6gj0i7)}.k6gj0i9{0: k;1: 6;2: g;3: j;4: 0;5: i;6: 8}.l5ei128::placeholder{color:var(--l5ei126);opacity:var(--l5ei127)}.l5ei129{0: l;1: 5;2: e;3: i;4: 1;5: 2;6: 8}._1s956dc4{width:100%;text-align:left;font-family:var(--_1s956dc0);color:var(--_1s956dc1);font-weight:var(--_1s956dc2);padding-bottom:var(--_1s956dc3)}._1s956dc5{0: _;1: 1;2: s;3: 9;4: 5;5: 6;6: d;7: c;8: 4}._1e95ziv1 span{display:block;font-size:.875rem;margin-top:.25rem;color:var(--_1e95ziv0)}._1e95ziv2{0: _;1: 1;2: e;3: 9;4: 5;5: z;6: i;7: v;8: 1}.pewdww9:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;opacity:var(--pewdww1);background-color:var(--pewdww2);-webkit-backdrop-filter:blur(var(--pewdww0)px);backdrop-filter:blur(var(--pewdww0)px);z-index:100}.pewdww9>div{position:fixed;right:15px;bottom:15px;z-index:20;width:var(--pewdww3);border-radius:var(--pewdww5);border:var(--pewdww6);background-color:var(--pewdww4);display:flex;flex-direction:column;padding-top:var(--pewdww8)}.pewdww9>div>div{display:flex;flex-direction:row;gap:var(--pewdww7);justify-content:flex-end}

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

@@ -1,2 +1,3 @@
 export { Carousel } from '.';
 export type { CarouselProps } from '.';
+export { styles as CarouselStyles } from './styles.css';

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

@@ -1,12 +1,12 @@
-import { default as React, CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { WithClassName } from '../../types/withClassName';
 import { Theme } from '../../types/theme';
 export type CarouselProps = {
     data: ReactNode[];
     theme?: Theme;
     displayItem?: number;
     isFullWidth?: boolean;
-    styles?: CSSProperties;
     displayNavButtons?: boolean;
     displayNavBullets?: boolean;
 };
-export declare const Carousel: ({ data, styles, displayItem, theme, isFullWidth, displayNavBullets, displayNavButtons, }: CarouselProps) => React.JSX.Element;
+export declare const Carousel: ({ data, theme, displayItem, isFullWidth, displayNavBullets, displayNavButtons, className, }: CarouselProps & WithClassName) => import("react").JSX.Element;

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

@@ -1,49 +1,12 @@
-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 carousselBulletStyle: string;
-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 {};
+export declare const vars: {
+    gap: `var(--${string})`;
+    displayItem: `var(--${string})`;
+    isFullWidth: `var(--${string})`;
+};
+export declare const styles: {
+    gap: `var(--${string})`;
+    display: string;
+    flexWrap: string;
+    overflow: string;
+    width: `var(--${string})`;
+};

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

@@ -1,3 +1,4 @@
 export { Columns } from '.';
 export type { ColumnsProps } from '.';
 export { Align as ColumnsAlign } from './types';
+export { styles as ColumnsStyles } from './styles.css';

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

@@ -1,13 +1,12 @@
-import { CSSProperties } from 'react';
-import { Align } from './types';
+import { WithClassName } from '../../types/withClassName';
 import { Theme } from '../../types/theme';
+import { Align } from './types';
 export type ColumnsProps = {
-    align?: Align;
-    theme?: Theme;
     columns: number[];
+    theme?: Theme;
+    align?: Align;
     isCentered?: boolean;
     isInverted?: boolean;
-    styles?: CSSProperties;
     children: React.ReactNode;
 };
-export declare const Columns: ({ columns, children, styles, align, isCentered, isInverted, theme, }: ColumnsProps) => React.ReactElement;
+export declare const Columns: ({ columns, children, align, isCentered, isInverted, theme, className, }: ColumnsProps & WithClassName) => import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ columns, children, styles, align, isCentered, isInverted, theme, }: import('.').ColumnsProps) => React.ReactElement;
+    component: ({ columns, children, align, isCentered, isInverted, theme, className, }: import('.').ColumnsProps & import('../../types/withClassName').WithClassName) => import("react").JSX.Element;
     parameters: {
         layout: string;
     };

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

@@ -0,0 +1,12 @@
+export declare const vars: {
+    columnsGap: `var(--${string})`;
+    columnsTextAlign: `var(--${string})`;
+    columnsJustifyContent: `var(--${string})`;
+    isCentered: `var(--${string})`;
+    isInverted: `var(--${string})`;
+    column0: `var(--${string})`;
+    column1: `var(--${string})`;
+    column2: `var(--${string})`;
+    column3: `var(--${string})`;
+};
+export declare const styles: string;

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

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

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

@@ -1,8 +1,7 @@
-import { CSSProperties } from 'react';
+import { WithClassName } from '../../types/withClassName';
 import { Theme } from '../../types/theme';
 export type ConsentCookieProps = {
     theme?: Theme;
-    styles?: CSSProperties;
     children?: React.ReactNode;
     cookieName?: string;
     cookieExpirationDays?: number;
@@ -13,4 +12,4 @@ export type ConsentCookieProps = {
         };
     };
 };
-export declare const ConsentCookie: ({ styles, children, theme, cookieName, translations, cookieExpirationDays, }: ConsentCookieProps) => import("react").JSX.Element | null;
+export declare const ConsentCookie: ({ children, theme, cookieName, translations, cookieExpirationDays, className, }: ConsentCookieProps & WithClassName) => import("react").JSX.Element | null;

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

@@ -0,0 +1,12 @@
+export declare const vars: {
+    overlayBlur: `var(--${string})`;
+    overlayOpacity: `var(--${string})`;
+    overlayBackgroundColor: `var(--${string})`;
+    width: `var(--${string})`;
+    backgroundColor: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+    borders: `var(--${string})`;
+    actionsGap: `var(--${string})`;
+    actionsPaddingTop: `var(--${string})`;
+};
+export declare const styles: string;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { WithClassName } from '../../../types/withClassName';
 import { Theme } from '../../../types/theme';
 import { Align } from './types';
 export type RowProps = {
@@ -6,7 +6,6 @@ export type RowProps = {
     theme?: Theme;
     isMessage?: boolean;
     isActions?: boolean;
-    styles?: CSSProperties;
     children: React.ReactNode;
 };
-export declare const Row: ({ children, theme, styles, isActions, isMessage, align }: RowProps) => import("react").JSX.Element;
+export declare const Row: ({ children, theme, className, align, isMessage, isActions, }: RowProps & WithClassName) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+export declare const vars: {
+    rowGap: `var(--${string})`;
+    rowPadding: `var(--${string})`;
+    rowFontSize: `var(--${string})`;
+    rowJustifyContent: `var(--${string})`;
+};
+export declare const rowStyle: string;
+export declare const styles: string;

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

@@ -1,3 +1,4 @@
 export { TextFieldInput } from '.';
 export type { TextFieldInputProps } from '.';
 export { Type as InputType } from './types';
+export { styles as InputStyles } from './styles.css';

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

@@ -1,4 +1,4 @@
-import { default as React, CSSProperties } from 'react';
+import { WithClassName } from '../../../../types/withClassName';
 import { Theme } from '../../../../types/theme';
 import { Type } from './types';
 export type TextFieldInputProps = {
@@ -9,11 +9,10 @@ export type TextFieldInputProps = {
     disabled?: boolean;
     required?: boolean;
     placeholder?: string;
-    styles?: CSSProperties;
     onChange?: (e: {
         target: {
             value: string | undefined;
         };
     }) => void | undefined;
 };
-export declare const TextFieldInput: ({ name, value, styles, type, disabled, placeholder, theme, onChange, }: TextFieldInputProps) => React.JSX.Element;
+export declare const TextFieldInput: ({ name, value, type, disabled, placeholder, theme, onChange, className, }: TextFieldInputProps & WithClassName) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+export declare const vars: {
+    font: `var(--${string})`;
+    color: `var(--${string})`;
+    border: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+    backgroundColor: `var(--${string})`;
+    padding: `var(--${string})`;
+    placeholderColor: `var(--${string})`;
+    placeholderOpacity: `var(--${string})`;
+};
+export declare const inputFieldStyle: string;
+export declare const styles: string;

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

@@ -1,2 +1,3 @@
 export { TextFieldLabel } from '.';
 export type { TextFieldLabelProps } from '.';
+export { styles as TextFieldLabelStyles } from './styles.css';

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

@@ -1,9 +1,9 @@
-import { default as React } from 'react';
+import { WithClassName } from '../../../../types/withClassName';
 import { Theme } from '../../../../types/theme';
 export type TextFieldLabelProps = {
     name: string;
-    theme?: Theme;
     label: string;
+    theme?: Theme;
     required?: boolean;
 };
-export declare const TextFieldLabel: ({ name, label, required, theme }: TextFieldLabelProps) => React.JSX.Element;
+export declare const TextFieldLabel: ({ name, label, required, theme, className, }: TextFieldLabelProps & WithClassName) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+export declare const vars: {
+    font: `var(--${string})`;
+    color: `var(--${string})`;
+    fontWeight: `var(--${string})`;
+    paddingBottom: `var(--${string})`;
+};
+export declare const textFieldLabelStyle: string;
+export declare const styles: string;

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

@@ -1,3 +1,4 @@
 export { TextFieldTextarea } from '.';
 export type { TextFieldTextareaProps } from '.';
 export { Type as TextareaType } from './types';
+export { styles as TextareaStyles } from './styles.css';

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

@@ -1,4 +1,4 @@
-import { default as React, CSSProperties } from 'react';
+import { WithClassName } from '../../../../types/withClassName';
 import { Theme } from '../../../../types/theme';
 export type TextFieldTextareaProps = {
     name: string;
@@ -7,11 +7,10 @@ export type TextFieldTextareaProps = {
     theme?: Theme;
     disabled?: boolean;
     placeholder?: string;
-    styles?: CSSProperties;
     onChange?: (e: {
         target: {
             value: string | undefined;
         };
     }) => void | undefined;
 };
-export declare const TextFieldTextarea: ({ name, value, rows, disabled, styles, placeholder, onChange, theme, }: TextFieldTextareaProps) => React.JSX.Element;
+export declare const TextFieldTextarea: ({ name, value, rows, disabled, placeholder, onChange, theme, className, }: TextFieldTextareaProps & WithClassName) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+export declare const vars: {
+    font: `var(--${string})`;
+    color: `var(--${string})`;
+    border: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+    padding: `var(--${string})`;
+    backgroundColor: `var(--${string})`;
+    placeholderColor: `var(--${string})`;
+    placeholderOpacity: `var(--${string})`;
+};
+export declare const textareaFieldStyle: string;
+export declare const styles: string;

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

@@ -1,2 +1,3 @@
 export { TextField } from '.';
 export type { TextFieldProps } from '.';
+export { styles as FormStyles } from './styles.css';

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

@@ -1,7 +1,7 @@
-import { default as React, CSSProperties } from 'react';
+import { WithClassName } from '../../../types/withClassName';
+import { Theme } from '../../../types/theme';
 import { Type as InputType } from './Input/types';
 import { Type as TextAreaType } from './Textarea/types';
-import { Theme } from '../../../types/theme';
 export type TextFieldProps = {
     name: string;
     theme?: Theme;
@@ -11,7 +11,6 @@ export type TextFieldProps = {
     disabled?: boolean;
     required?: boolean;
     placeholder?: string;
-    styles?: CSSProperties;
     errors?: string | string[];
     type?: InputType | TextAreaType;
     onChange?: (e: {
@@ -20,4 +19,4 @@ export type TextFieldProps = {
         };
     }) => void | undefined;
 };
-export declare const TextField: ({ name, label, value, styles, rows, required, disabled, placeholder, errors, theme, onChange, type, }: TextFieldProps) => React.JSX.Element;
+export declare const TextField: ({ name, label, value, rows, required, disabled, placeholder, errors, theme, onChange, type, className, }: TextFieldProps & WithClassName) => import("react").JSX.Element;

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

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

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

@@ -1,2 +1,3 @@
 export { Form } from '.';
 export type { FormProps } from '.';
+export { styles as FormStyles } from './styles.css';

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

@@ -1,9 +1,8 @@
-import { CSSProperties } from 'react';
+import { WithClassName } from '../../types/withClassName';
 import { Theme } from '../../types/theme';
 export type FormProps = {
     theme?: Theme;
-    styles?: CSSProperties;
     children: React.ReactNode;
     action: ((formData: FormData) => void | Promise<void>) | string;
 };
-export declare const Form: ({ action, children, styles, theme }: FormProps) => import("react").JSX.Element;
+export declare const Form: ({ action, children, theme, className }: FormProps & WithClassName) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+export declare const vars: {
+    formWidth: `var(--${string})`;
+    formPadding: `var(--${string})`;
+    formBackgroundColor: `var(--${string})`;
+};
+export declare const formStyle: string;
+export declare const styles: string;

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

@@ -1,8 +1,9 @@
+import { WithClassName } from '../../../types/withClassName';
 import { Theme } from '../../../types/theme';
 export interface HeaderOverlayProps {
     theme: Theme;
     isOpen: boolean;
     children: React.ReactNode;
 }
-declare const HeaderOverlay: ({ isOpen, theme, children }: HeaderOverlayProps) => import("react").JSX.Element;
+declare const HeaderOverlay: ({ theme, isOpen, children, className, }: HeaderOverlayProps & WithClassName) => import("react").JSX.Element;
 export default HeaderOverlay;

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

@@ -0,0 +1,5 @@
+export declare const vars: {
+    overlayBottom: `var(--${string})`;
+    overlayTransform: `var(--${string})`;
+};
+export declare const headerOverlayStyle: string;

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

@@ -1,9 +1,9 @@
+import { WithClassName } from '../../../types/withClassName';
 import { Theme } from '../../../types/theme';
-interface IToggleNavProps {
-    theme: Theme;
+export type ToggleNavProps = {
+    theme?: Theme;
     isNavOpen: boolean;
     onToggleNav: () => void;
     displayOnDesktop: boolean;
-}
-declare const ToggleNav: ({ onToggleNav, theme, isNavOpen, displayOnDesktop }: IToggleNavProps) => import("react").JSX.Element;
-export default ToggleNav;
+};
+export declare const ToggleNav: ({ theme, isNavOpen, onToggleNav, displayOnDesktop, className, }: ToggleNavProps & WithClassName) => import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const vars: {
+    displayOnDesktop: `var(--${string})`;
+};
+export declare const toggleNavStyle: string;
+export declare const toggleNavBarStyle: string;

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

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

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

@@ -1,12 +1,11 @@
-import { CSSProperties } from 'react';
+import { WithClassName } from '../../types/withClassName';
 import { Theme } from '../../types/theme';
 export type HeaderProps = {
     theme?: Theme;
     isFixed?: boolean;
-    styles?: CSSProperties;
     children: React.ReactNode;
     hideToggleNav?: boolean;
     childrenOverlay: React.ReactNode;
     displayToggleNavOnDesktop?: boolean;
 };
-export declare const Header: ({ children, styles, isFixed, childrenOverlay, theme, hideToggleNav, displayToggleNavOnDesktop, }: HeaderProps) => import("react").JSX.Element;
+export declare const Header: ({ children, isFixed, childrenOverlay, theme, hideToggleNav, displayToggleNavOnDesktop, className, }: HeaderProps & WithClassName) => import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+export declare const vars: {
+    isFixed: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const headerStyle: string;
+export declare const headerPlaceholderStyle: string;

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

@@ -1,2 +1,3 @@
 export { Icon } from '.';
 export type { IconProps } from '.';
+export { styles as IconStyles } from './styles.css';

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { WithClassName } from '../../types/withClassName';
 import { Theme } from '../../types/theme';
 export type IconProps = {
     theme?: Theme;
@@ -7,6 +7,5 @@ export type IconProps = {
     size?: number;
     color?: string;
     viewBox?: string;
-    styles?: CSSProperties;
 };
-export declare const Icon: ({ icon, size, styles, iconPath, color, theme, viewBox, }: IconProps) => import("react").JSX.Element;
+export declare const Icon: ({ icon, size, iconPath, color, theme, viewBox, className, }: IconProps & WithClassName) => import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ icon, size, styles, iconPath, color, theme, viewBox, }: import('.').IconProps) => import("react").JSX.Element;
+    component: ({ icon, size, iconPath, color, theme, viewBox, className, }: import('.').IconProps & import('../../types/withClassName').WithClassName) => import("react").JSX.Element;
     parameters: {
         layout: string;
     };

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

@@ -0,0 +1,7 @@
+export declare const vars: {
+    iconSize: `var(--${string})`;
+    iconColor: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const iconStyle: string;
+export declare const iconPathStyle: string;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.134",
+  "version": "0.0.136",
   "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 {};