@max-ts/svelte 1.8.5 → 1.9.1

package/dist/components/Calendar/YearSelect/YearSelect.js

@@ -1,9 +1,8 @@
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Calendar } from "bits-ui";
 import { ChevronDownIcon } from "@lucide/svelte";
-
 //#region src/components/Calendar/YearSelect/YearSelect.svelte
 var root_2 = $.from_html(`<option> </option>`);
 var root_1 = $.from_html(`<select></select> <span aria-hidden="true"> <!></span>`, 1);
@@ -49,14 +48,14 @@ function YearSelect($$anchor, $$props) {
 			ChevronDownIcon($.sibling(text_1), { size: 16 });
 			$.reset(span_1);
 			$.template_effect(($0) => {
-				$.set_class(span_1, 1, $.clsx(__default__.visiblePart));
+				$.set_class(span_1, 1, $.clsx(styles_css_default.visiblePart));
 				$.set_text(text_1, `${$0 ?? ""} `);
 			}, [() => yearItems().find((item) => item.value === $$props.value)?.label || selectedYearItem()?.label || ""]);
 			$.append($$anchor, fragment);
 		};
 		$.component(node, () => Calendar.YearSelect, ($$anchor, CalendarPrimitive_YearSelect) => {
 			CalendarPrimitive_YearSelect($$anchor, $.spread_props({ get class() {
-				return __default__.select;
+				return styles_css_default.select;
 			} }, () => restProps, {
 				get ref() {
 					return ref();
@@ -70,10 +69,9 @@ function YearSelect($$anchor, $$props) {
 		});
 	}
 	$.reset(span);
-	$.template_effect(() => $.set_class(span, 1, $.clsx([__default__.wrapper, $$props.class])));
+	$.template_effect(() => $.set_class(span, 1, $.clsx([styles_css_default.wrapper, $$props.class])));
 	$.append($$anchor, span);
 	$.pop();
 }
-
 //#endregion
-export { YearSelect as default };
+export { YearSelect as default };

package/dist/components/Calendar/YearSelect/styles.css.js

@@ -1,12 +1,46 @@
-import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Calendar/YearSelect/styles.css.ts.vanilla-BMmaovdo.css";
-
+import { endFileScope, setFileScope } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { globalStyle, style } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../../theme.js";
 //#region src/components/Calendar/YearSelect/styles.css.ts
-var __default__ = {
-	wrapper: "styles_wrapper__1q4zm20",
-	select: "styles_select__1q4zm21",
-	visiblePart: "styles_visiblePart__1q4zm22"
+setFileScope("src/components/Calendar/YearSelect/styles.css.ts", "@max-ts/svelte");
+const wrapper = style({
+	position: "relative",
+	display: "flex",
+	borderRadius: theme.radius.medium,
+	border: `1px solid ${theme.colors.border}`,
+	boxShadow: theme.shadow[1],
+	selectors: { "&:has(:focus-visible)": { boxShadow: theme.shadow[3] } }
+}, "wrapper");
+const select = style({
+	position: "absolute",
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+	opacity: 0
+}, "select");
+const visiblePart = style({
+	display: "flex",
+	height: theme.spacing[8],
+	alignItems: "center",
+	gap: theme.spacing[1],
+	borderRadius: theme.radius.medium,
+	paddingLeft: theme.spacing[2],
+	paddingRight: theme.spacing[1],
+	fontSize: theme.fontSize.sm,
+	fontWeight: theme.fontWeight.medium,
+	userSelect: "none"
+}, "visiblePart");
+globalStyle(`${visiblePart} > svg`, {
+	color: theme.colors.text.secondary,
+	width: "0.875rem",
+	height: "0.875rem"
+});
+var styles_css_default = {
+	wrapper,
+	select,
+	visiblePart
 };
-
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Calendar/styles.css.js

@@ -1,12 +1,25 @@
-import "./../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../assets/src/components/Calendar/styles.css.ts.vanilla-CkQD0ryE.css";
-
+import { endFileScope, setFileScope } from "../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { style } from "../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../theme.js";
 //#region src/components/Calendar/styles.css.ts
-var __default__ = {
-	calendar: "styles_calendar__3pvz3c0",
-	gridRow: "styles_gridRow__3pvz3c1",
-	gridRowHead: "styles_gridRowHead__3pvz3c2"
+setFileScope("src/components/Calendar/styles.css.ts", "@max-ts/svelte");
+var styles_css_default = {
+	calendar: style({
+		width: "max-content",
+		backgroundColor: theme.colors.background.paper,
+		padding: theme.spacing[3],
+		vars: { "--cell-size": theme.spacing[8] },
+		selectors: {
+			"[data-slot=card-content] &": { backgroundColor: "transparent" },
+			"[data-slot=popover-content] &": { backgroundColor: "transparent" }
+		}
+	}, "calendar"),
+	gridRow: style({
+		marginTop: theme.spacing[2],
+		width: "100%"
+	}, "gridRow"),
+	gridRowHead: style({ userSelect: "none" }, "gridRowHead")
 };
-
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Card/Action/Action.js

@@ -1,7 +1,6 @@
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-
 //#region src/components/Card/Action/Action.svelte
 var root = $.from_html(`<div><!></div>`);
 function Action($$anchor, $$props) {
@@ -17,7 +16,7 @@ function Action($$anchor, $$props) {
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "card-action",
-		class: [__default__.action, $$props.class],
+		class: [styles_css_default.action, $$props.class],
 		...restProps
 	}));
 	var node = $.child(div);
@@ -27,6 +26,5 @@ function Action($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
-
 //#endregion
-export { Action as default };
+export { Action as default };

package/dist/components/Card/Action/styles.css.js

@@ -1,7 +1,14 @@
-import "./../../../assets/src/components/Card/Action/styles.css.ts.vanilla-BzUjqk_g.css";
-
+import { endFileScope, setFileScope } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { style } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
 //#region src/components/Card/Action/styles.css.ts
-var __default__ = { action: "styles_action__qq59jq0" };
-
+setFileScope("src/components/Card/Action/styles.css.ts", "@max-ts/svelte");
+var styles_css_default = { action: style({
+	gridColumn: 2,
+	gridRowStart: 1,
+	gridRowEnd: "span 2",
+	justifySelf: "end",
+	alignSelf: "start"
+}, "action") };
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Card/Card.js

@@ -1,7 +1,6 @@
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-
 //#region src/components/Card/Card.svelte
 var root = $.from_html(`<div><!></div>`);
 function Card($$anchor, $$props) {
@@ -17,7 +16,7 @@ function Card($$anchor, $$props) {
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "card",
-		class: [__default__.card, $$props.class],
+		class: [styles_css_default.card, $$props.class],
 		...restProps
 	}));
 	var node = $.child(div);
@@ -27,6 +26,5 @@ function Card($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
-
 //#endregion
-export { Card as default };
+export { Card as default };

package/dist/components/Card/Content/Content.js

@@ -1,7 +1,6 @@
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-
 //#region src/components/Card/Content/Content.svelte
 var root = $.from_html(`<div><!></div>`);
 function Content($$anchor, $$props) {
@@ -17,7 +16,7 @@ function Content($$anchor, $$props) {
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "card-content",
-		class: [__default__.content, $$props.class],
+		class: [styles_css_default.content, $$props.class],
 		...restProps
 	}));
 	var node = $.child(div);
@@ -27,6 +26,5 @@ function Content($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
-
 //#endregion
-export { Content as default };
+export { Content as default };

package/dist/components/Card/Content/styles.css.js

@@ -1,8 +1,12 @@
-import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Card/Content/styles.css.ts.vanilla-BDTd_O_q.css";
-
+import { endFileScope, setFileScope } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { style } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../../theme.js";
 //#region src/components/Card/Content/styles.css.ts
-var __default__ = { content: "styles_content__1tzb7690" };
-
+setFileScope("src/components/Card/Content/styles.css.ts", "@max-ts/svelte");
+var styles_css_default = { content: style({
+	paddingLeft: theme.spacing[6],
+	paddingRight: theme.spacing[6]
+}, "content") };
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Card/Description/Description.js

@@ -1,7 +1,6 @@
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-
 //#region src/components/Card/Description/Description.svelte
 var root = $.from_html(`<p><!></p>`);
 function Description($$anchor, $$props) {
@@ -17,7 +16,7 @@ function Description($$anchor, $$props) {
 	var p = root();
 	$.attribute_effect(p, () => ({
 		"data-slot": "card-description",
-		class: [__default__.description, $$props.class],
+		class: [styles_css_default.description, $$props.class],
 		...restProps
 	}));
 	var node = $.child(p);
@@ -27,6 +26,5 @@ function Description($$anchor, $$props) {
 	$.append($$anchor, p);
 	$.pop();
 }
-
 //#endregion
-export { Description as default };
+export { Description as default };

package/dist/components/Card/Description/styles.css.js

@@ -1,8 +1,12 @@
-import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Card/Description/styles.css.ts.vanilla-DkrZCqiD.css";
-
+import { endFileScope, setFileScope } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { style } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../../theme.js";
 //#region src/components/Card/Description/styles.css.ts
-var __default__ = { description: "styles_description__1rwwthy0" };
-
+setFileScope("src/components/Card/Description/styles.css.ts", "@max-ts/svelte");
+var styles_css_default = { description: style({
+	fontSize: theme.fontSize.sm,
+	color: theme.colors.text.secondary
+}, "description") };
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Card/Footer/Footer.js

@@ -1,7 +1,6 @@
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-
 //#region src/components/Card/Footer/Footer.svelte
 var root = $.from_html(`<div><!></div>`);
 function Footer($$anchor, $$props) {
@@ -17,7 +16,7 @@ function Footer($$anchor, $$props) {
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "card-footer",
-		class: [__default__.footer, $$props.class],
+		class: [styles_css_default.footer, $$props.class],
 		...restProps
 	}));
 	var node = $.child(div);
@@ -27,6 +26,5 @@ function Footer($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
-
 //#endregion
-export { Footer as default };
+export { Footer as default };

package/dist/components/Card/Footer/styles.css.js

@@ -1,8 +1,16 @@
-import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Card/Footer/styles.css.ts.vanilla-BsuS8s-a.css";
-
+import { endFileScope, setFileScope } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { globalStyle, style } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../../theme.js";
 //#region src/components/Card/Footer/styles.css.ts
-var __default__ = { footer: "styles_footer__f7en8n0" };
-
+setFileScope("src/components/Card/Footer/styles.css.ts", "@max-ts/svelte");
+const footer = style({
+	display: "flex",
+	alignItems: "center",
+	paddingLeft: theme.spacing[6],
+	paddingRight: theme.spacing[6]
+}, "footer");
+globalStyle(`${footer}[data-slot=card-footer-border]`, { paddingTop: theme.spacing[6] });
+var styles_css_default = { footer };
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Card/Header/Header.js

@@ -1,7 +1,6 @@
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-
 //#region src/components/Card/Header/Header.svelte
 var root = $.from_html(`<div><!></div>`);
 function Header($$anchor, $$props) {
@@ -17,7 +16,7 @@ function Header($$anchor, $$props) {
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "card-header",
-		class: [__default__.header, $$props.class],
+		class: [styles_css_default.header, $$props.class],
 		...restProps
 	}));
 	var node = $.child(div);
@@ -27,6 +26,5 @@ function Header($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
-
 //#endregion
-export { Header as default };
+export { Header as default };

package/dist/components/Card/Header/styles.css.js

@@ -1,8 +1,25 @@
-import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Card/Header/styles.css.ts.vanilla-Ck0IW2si.css";
-
+import { endFileScope, setFileScope } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { globalStyle, style } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../../theme.js";
 //#region src/components/Card/Header/styles.css.ts
-var __default__ = { header: "styles_header__da1tmf0" };
-
+setFileScope("src/components/Card/Header/styles.css.ts", "@max-ts/svelte");
+const header = style({
+	display: "grid",
+	gridAutoRows: "min-content",
+	gridTemplateRows: "auto auto",
+	alignItems: "start",
+	gap: theme.spacing[2],
+	paddingLeft: theme.spacing[6],
+	paddingRight: theme.spacing[6],
+	selectors: { "&[data-slot=card-action]": { gridTemplateColumns: "1fr auto" } }
+}, "header");
+globalStyle(`${header} > [data-slot=card-action]`, {
+	gridColumn: 2,
+	gridRowStart: 1,
+	gridRowEnd: "span 2",
+	justifySelf: "end"
+});
+var styles_css_default = { header };
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Card/Title/Title.js

@@ -1,7 +1,6 @@
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-
 //#region src/components/Card/Title/Title.svelte
 var root = $.from_html(`<div><!></div>`);
 function Title($$anchor, $$props) {
@@ -17,7 +16,7 @@ function Title($$anchor, $$props) {
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "card-title",
-		class: [__default__.title, $$props.class],
+		class: [styles_css_default.title, $$props.class],
 		...restProps
 	}));
 	var node = $.child(div);
@@ -27,6 +26,5 @@ function Title($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
-
 //#endregion
-export { Title as default };
+export { Title as default };

package/dist/components/Card/Title/styles.css.js

@@ -1,8 +1,13 @@
-import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Card/Title/styles.css.ts.vanilla-CrIgH8US.css";
-
+import { endFileScope, setFileScope } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { style } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../../theme.js";
 //#region src/components/Card/Title/styles.css.ts
-var __default__ = { title: "styles_title__1qpikcg0" };
-
+setFileScope("src/components/Card/Title/styles.css.ts", "@max-ts/svelte");
+var styles_css_default = { title: style({
+	lineHeight: theme.lineHeight.none,
+	fontWeight: theme.fontWeight.semibold,
+	fontSize: theme.fontSize.base
+}, "title") };
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Card/index.js

@@ -5,7 +5,6 @@ import Description from "./Description/Description.js";
 import Footer from "./Footer/Footer.js";
 import Header from "./Header/Header.js";
 import Title from "./Title/Title.js";
-
 //#region src/components/Card/index.ts
 const Card = {
 	Root: Card$1,
@@ -16,6 +15,5 @@ const Card = {
 	Footer,
 	Action
 };
-
 //#endregion
-export { Card };
+export { Card };

package/dist/components/Card/styles.css.js

@@ -1,8 +1,19 @@
-import "./../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../assets/src/components/Card/styles.css.ts.vanilla-C1gWeVmb.css";
-
+import { endFileScope, setFileScope } from "../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { style } from "../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../theme.js";
 //#region src/components/Card/styles.css.ts
-var __default__ = { card: "styles_card__1j6rf7o0" };
-
+setFileScope("src/components/Card/styles.css.ts", "@max-ts/svelte");
+var styles_css_default = { card: style({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing[6],
+	borderRadius: theme.radius.large,
+	border: `1px solid ${theme.colors.border}`,
+	padding: `${theme.spacing[6]} 0`,
+	backgroundColor: theme.colors.background.paper,
+	color: theme.colors.text.primary,
+	boxShadow: theme.shadow[2]
+}, "card") };
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };

package/dist/components/Carousel/Arrows/Arrows.js

@@ -1,10 +1,9 @@
 import { getCarouselContext } from "../context.js";
-import __default__ from "./styles.css.js";
+import styles_css_default from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { ArrowLeftIcon } from "@lucide/svelte";
 import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
-
 //#region src/components/Carousel/Arrows/Arrows.svelte
 var root = $.from_html(`<button><span><!></span></button> <button><span><!></span></button>`, 1);
 function Arrows($$anchor, $$props) {
@@ -22,7 +21,7 @@ function Arrows($$anchor, $$props) {
 		type: "button",
 		"data-slot": "carousel-previous",
 		disabled: !ctx.canScrollPrev,
-		class: [__default__.buttonPrev[ctx.orientation], $$props.class],
+		class: [styles_css_default.buttonPrev[ctx.orientation], $$props.class],
 		onclick: ctx.scrollPrev,
 		onkeydown: ctx.handleKeyDown,
 		"aria-label": "Previous slide",
@@ -38,7 +37,7 @@ function Arrows($$anchor, $$props) {
 		"data-slot": "carousel-next",
 		disabled: !ctx.canScrollNext,
 		"aria-disabled": !ctx.canScrollNext,
-		class: [__default__.buttonNext[ctx.orientation], $$props.class],
+		class: [styles_css_default.buttonNext[ctx.orientation], $$props.class],
 		onclick: ctx.scrollNext,
 		onkeydown: ctx.handleKeyDown,
 		"aria-label": "Next slide",
@@ -49,12 +48,11 @@ function Arrows($$anchor, $$props) {
 	$.reset(span_1);
 	$.reset(button_1);
 	$.template_effect(() => {
-		$.set_class(span, 1, $.clsx(__default__.iconWrapper));
-		$.set_class(span_1, 1, $.clsx(__default__.iconWrapper));
+		$.set_class(span, 1, $.clsx(styles_css_default.iconWrapper));
+		$.set_class(span_1, 1, $.clsx(styles_css_default.iconWrapper));
 	});
 	$.append($$anchor, fragment);
 	$.pop();
 }
-
 //#endregion
-export { Arrows as default };
+export { Arrows as default };

package/dist/components/Carousel/Arrows/styles.css.js

@@ -1,18 +1,71 @@
-import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Carousel/Arrows/styles.css.ts.vanilla-CFc3t0Nn.css";
-
+import { endFileScope, setFileScope } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js";
+import { globalStyle, style, styleVariants } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { theme } from "../../../theme.js";
 //#region src/components/Carousel/Arrows/styles.css.ts
-var __default__ = {
-	buttonNext: {
-		horizontal: "styles_buttonNext_horizontal__3ygkf92 styles_buttonBase__3ygkf90",
-		vertical: "styles_buttonNext_vertical__3ygkf93 styles_buttonBase__3ygkf90"
-	},
-	buttonPrev: {
-		horizontal: "styles_buttonPrev_horizontal__3ygkf94 styles_buttonBase__3ygkf90",
-		vertical: "styles_buttonPrev_vertical__3ygkf95 styles_buttonBase__3ygkf90"
-	},
-	iconWrapper: "styles_iconWrapper__3ygkf91"
+setFileScope("src/components/Carousel/Arrows/styles.css.ts", "@max-ts/svelte");
+const buttonBase = style({
+	position: "absolute",
+	backgroundColor: "transparent",
+	border: "none",
+	cursor: "pointer",
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	":disabled": {
+		userSelect: "none",
+		cursor: "default",
+		opacity: .5
+	}
+}, "buttonBase");
+const iconWrapper = style({
+	width: theme.spacing[8],
+	height: theme.spacing[8],
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	backgroundColor: theme.colors.background.paper,
+	borderRadius: "9999px",
+	transition: "transform 0.2s ease",
+	selectors: { [`${buttonBase}:not(:disabled):hover &`]: { transform: "scale(1.1)" } }
+}, "iconWrapper");
+globalStyle(`${iconWrapper} svg`, {
+	width: theme.spacing[5],
+	height: theme.spacing[5]
+});
+const buttonNext = styleVariants({
+	horizontal: [buttonBase, {
+		right: 0,
+		top: 0,
+		width: "clamp(2.5rem, 4vw, 4rem)",
+		height: "100%"
+	}],
+	vertical: [buttonBase, {
+		left: 0,
+		bottom: 0,
+		width: "100%",
+		height: "clamp(2.5rem, 4vw, 4rem)"
+	}]
+}, "buttonNext");
+const buttonPrev = styleVariants({
+	horizontal: [buttonBase, {
+		left: 0,
+		top: 0,
+		width: "clamp(2.5rem, 4vw, 4rem)",
+		height: "100%"
+	}],
+	vertical: [buttonBase, {
+		right: 0,
+		top: 0,
+		width: "100%",
+		height: "clamp(2.5rem, 4vw, 4rem)"
+	}]
+}, "buttonPrev");
+globalStyle(`${buttonNext.vertical} svg, ${buttonPrev.vertical} svg`, { transform: "rotate(90deg)" });
+var styles_css_default = {
+	buttonNext,
+	buttonPrev,
+	iconWrapper
 };
-
+endFileScope();
 //#endregion
-export { __default__ as default };
+export { styles_css_default as default };