@atom-learning/components 7.0.0 → 8.0.1

package/dist/components/button/Button.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
 import { Loader } from "../loader/Loader.js";
 import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button/Button.tsx
 var StyledButton = styled("button", {
 	base: [
@@ -143,8 +144,11 @@ var LoaderContentsWrapper = styled("span", {
 	} },
 	defaultVariants: { size: "md" }
 }, { enabledResponsiveVariants: true });
-var WithLoader = ({ size, children }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Loader, { className: "absolute" }), /* @__PURE__ */ React$1.createElement(LoaderContentsWrapper, { size }, children));
-var Button = React$1.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledButton, {
+var WithLoader = ({ size, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader, { className: "absolute" }), /* @__PURE__ */ jsx(LoaderContentsWrapper, {
+	size,
+	children
+})] });
+var Button = React$1.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, ...rest }, ref) => /* @__PURE__ */ jsx(StyledButton, {
 	as: as || (href ? "a" : void 0),
 	...!disabled && !isLoading && {
 		href,
@@ -155,8 +159,12 @@ var Button = React$1.forwardRef(({ children, as, href, isLoading = false, onClic
 	disabled,
 	...rest,
 	...getExternalAnchorProps(href),
-	ref
-}, isLoading ? /* @__PURE__ */ React$1.createElement(WithLoader, { size: rest.size }, children) : children));
+	ref,
+	children: isLoading ? /* @__PURE__ */ jsx(WithLoader, {
+		size: rest.size,
+		children
+	}) : children
+}));
 Button.displayName = "Button";
 //#endregion
 export { Button, StyledButton };

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader/Loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'bg-[unset]',\n      'rounded-md',\n      'cursor-pointer',\n      'flex',\n      'font-body',\n      'font-semibold',\n      'justify-center',\n      'no-underline',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'whitespace-nowrap',\n      'w-max',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        secondary: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]',\n          '[--text:var(--color-grey-800)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        neutral: [\n          '[--base:white]',\n          '[--interact:rgba(255,255,255,0.9)]',\n          '[--active:rgba(255,255,255,0.75)]',\n          '[--text:var(--color-primary-800)]'\n        ]\n      },\n      appearance: {\n        solid: [\n          'bg-(--base)',\n          'text-(--text,white)',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:bg-(--interact)',\n          'not-disabled:hover:text-(--text,white)',\n          'not-disabled:focus:bg-(--interact)',\n          'not-disabled:focus:text-(--text,white)',\n          'not-disabled:active:bg-(--active)'\n        ],\n        outline: [\n          'border',\n          'border-current',\n          'text-(--base)',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:no-underline',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:no-underline',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ]\n      },\n      size: {\n        sm: [\n          'text-sm',\n          'leading-[1.53]',\n          'h-8',\n          'px-4',\n          'gap-2',\n          '[&_svg]:size-4'\n        ],\n        md: [\n          'text-md',\n          'leading-normal',\n          'h-10',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-5'\n        ],\n        lg: [\n          'text-lg',\n          'leading-normal',\n          'h-12',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-[22px]'\n        ],\n        xl: [\n          'text-lg',\n          'leading-normal',\n          'h-16',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-[22px]'\n        ]\n      },\n      isLoading: {\n        true: ['cursor-not-allowed opacity-60 pointer-events-none']\n      },\n      fullWidth: {\n        true: ['w-full'],\n        false: ['w-max']\n      }\n    },\n    defaultVariants: {\n      appearance: 'solid',\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst LoaderContentsWrapper = styled(\n  'span',\n  {\n    base: ['items-center', 'flex', 'justify-center', 'invisible'],\n    variants: {\n      size: {\n        sm: ['gap-2'],\n        md: ['gap-3'],\n        lg: ['gap-3'],\n        xl: ['gap-3']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst WithLoader = ({\n  size,\n  children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n  <>\n    <Loader className=\"absolute\" />\n    <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n  </>\n)\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    children: React.ReactNode\n    href?: string\n    isLoading?: boolean\n  } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    { children, as, href, isLoading = false, onClick, disabled, ...rest },\n    ref\n  ) => (\n    <StyledButton\n      as={as || (href ? 'a' : undefined)}\n      {...(!disabled && !isLoading && { href, onClick })}\n      isLoading={isLoading}\n      type={!href ? 'button' : undefined}\n      disabled={disabled}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref as any}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n)\n\nButton.displayName = 'Button'\n"],"mappings":";;;;;AAQA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACD;GACD,WAAW;IACT;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,oDAAoD,EAC5D;EACD,WAAW;GACT,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACD,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;EACR;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,wBAAwB,OAC5B,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;EAAY;CAC7D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,cAAc,EAClB,MACA,eAEA,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,EAC/B,wBAAA,cAAC,uBAAD,EAA6B,MAAwC,EAAjC,SAAiC,CACpE;AAYL,IAAa,SAAS,QAAM,YAExB,EAAE,UAAU,IAAI,MAAM,YAAY,OAAO,SAAS,UAAU,GAAG,QAC/D,QAEA,wBAAA,cAAC,cAAD;CACE,IAAI,OAAO,OAAO,MAAM,KAAA;CACxB,GAAK,CAAC,YAAY,CAAC,aAAa;EAAE;EAAM;EAAS;CACtC;CACX,MAAM,CAAC,OAAO,WAAW,KAAA;CACf;CACV,GAAI;CACJ,GAAI,uBAAuB,KAAK;CAC3B;CAOQ,EALZ,YACC,wBAAA,cAAC,YAAD,EAAY,MAAM,KAAK,MAA6B,EAAtB,SAAsB,GAEpD,SAEW,CAElB;AAED,OAAO,cAAc"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader/Loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'bg-[unset]',\n      'rounded-md',\n      'cursor-pointer',\n      'flex',\n      'font-body',\n      'font-semibold',\n      'justify-center',\n      'no-underline',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'whitespace-nowrap',\n      'w-max',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        secondary: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]',\n          '[--text:var(--color-grey-800)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        neutral: [\n          '[--base:white]',\n          '[--interact:rgba(255,255,255,0.9)]',\n          '[--active:rgba(255,255,255,0.75)]',\n          '[--text:var(--color-primary-800)]'\n        ]\n      },\n      appearance: {\n        solid: [\n          'bg-(--base)',\n          'text-(--text,white)',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:bg-(--interact)',\n          'not-disabled:hover:text-(--text,white)',\n          'not-disabled:focus:bg-(--interact)',\n          'not-disabled:focus:text-(--text,white)',\n          'not-disabled:active:bg-(--active)'\n        ],\n        outline: [\n          'border',\n          'border-current',\n          'text-(--base)',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:no-underline',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:no-underline',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ]\n      },\n      size: {\n        sm: [\n          'text-sm',\n          'leading-[1.53]',\n          'h-8',\n          'px-4',\n          'gap-2',\n          '[&_svg]:size-4'\n        ],\n        md: [\n          'text-md',\n          'leading-normal',\n          'h-10',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-5'\n        ],\n        lg: [\n          'text-lg',\n          'leading-normal',\n          'h-12',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-[22px]'\n        ],\n        xl: [\n          'text-lg',\n          'leading-normal',\n          'h-16',\n          'px-8',\n          'gap-3',\n          '[&_svg]:size-[22px]'\n        ]\n      },\n      isLoading: {\n        true: ['cursor-not-allowed opacity-60 pointer-events-none']\n      },\n      fullWidth: {\n        true: ['w-full'],\n        false: ['w-max']\n      }\n    },\n    defaultVariants: {\n      appearance: 'solid',\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst LoaderContentsWrapper = styled(\n  'span',\n  {\n    base: ['items-center', 'flex', 'justify-center', 'invisible'],\n    variants: {\n      size: {\n        sm: ['gap-2'],\n        md: ['gap-3'],\n        lg: ['gap-3'],\n        xl: ['gap-3']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst WithLoader = ({\n  size,\n  children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n  <>\n    <Loader className=\"absolute\" />\n    <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n  </>\n)\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    children: React.ReactNode\n    href?: string\n    isLoading?: boolean\n  } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    { children, as, href, isLoading = false, onClick, disabled, ...rest },\n    ref\n  ) => (\n    <StyledButton\n      as={as || (href ? 'a' : undefined)}\n      {...(!disabled && !isLoading && { href, onClick })}\n      isLoading={isLoading}\n      type={!href ? 'button' : undefined}\n      disabled={disabled}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref as any}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n)\n\nButton.displayName = 'Button'\n"],"mappings":";;;;;;AAQA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACD;GACD,WAAW;IACT;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,oDAAoD,EAC5D;EACD,WAAW;GACT,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACD,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;EACR;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,wBAAwB,OAC5B,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;EAAY;CAC7D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,cAAc,EAClB,MACA,eAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,EAC/B,oBAAC,uBAAD;CAA6B;CAAO;CAAiC,CAAA,CACpE,EAAA,CAAA;AAYL,IAAa,SAAS,QAAM,YAExB,EAAE,UAAU,IAAI,MAAM,YAAY,OAAO,SAAS,UAAU,GAAG,QAC/D,QAEA,oBAAC,cAAD;CACE,IAAI,OAAO,OAAO,MAAM,KAAA;CACxB,GAAK,CAAC,YAAY,CAAC,aAAa;EAAE;EAAM;EAAS;CACtC;CACX,MAAM,CAAC,OAAO,WAAW,KAAA;CACf;CACV,GAAI;CACJ,GAAI,uBAAuB,KAAK;CAC3B;WAEJ,YACC,oBAAC,YAAD;EAAY,MAAM,KAAK;EAAO;EAAsB,CAAA,GAEpD;CAEW,CAAA,CAElB;AAED,OAAO,cAAc"}

package/dist/components/calendar/Calendar.d.ts

@@ -12,8 +12,8 @@ export type CalendarTranslationProps = {
     };
 };
 type CalendarProps = DayzedInterface & CalendarTranslationProps & {
-    refDateToday?: React.RefObject<HTMLButtonElement>;
-    refDateSelected?: React.RefObject<HTMLButtonElement>;
+    refDateToday?: React.RefObject<HTMLButtonElement | null>;
+    refDateSelected?: React.RefObject<HTMLButtonElement | null>;
     setYear: (date: Date) => Promise<void>;
     className?: string;
 };

package/dist/components/calendar/Calendar.js

@@ -6,6 +6,7 @@ import { Text } from "../text/Text.js";
 import { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from "./constants.js";
 import { Day } from "./Day.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
 import { useDayzed } from "dayzed";
 //#region src/components/calendar/Calendar.tsx
@@ -52,56 +53,86 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
 		...remainingProps
 	});
 	if (!calendars.length) return null;
-	return /* @__PURE__ */ React$1.createElement("div", { className: cn("relative", "w-fit", "-mt-1", className) }, /* @__PURE__ */ React$1.createElement("div", { className: "absolute top-0 -right-1 flex" }, /* @__PURE__ */ React$1.createElement(ActionIcon, {
-		label: labels[showYears ? "previousYear" : "previous"],
-		theme: "neutral",
-		size: "md",
-		...!showYears && getBackProps({ calendars }),
-		...showYears && { onClick: () => setCurrentYear(currentYear - 16) },
-		disabled: showYears && isAtMinYear
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronLeft })), /* @__PURE__ */ React$1.createElement(ActionIcon, {
-		label: labels[showYears ? "nextYear" : "next"],
-		theme: "neutral",
-		size: "md",
-		...!showYears && getForwardProps({ calendars }),
-		...showYears && { onClick: () => setCurrentYear(currentYear + 16) },
-		disabled: showYears && isAtMaxYear
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronRight }))), showYears && /* @__PURE__ */ React$1.createElement("div", { className: "grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]" }, yearList.map((year, i) => {
-		const isCurrentYear = year === date.getFullYear();
-		if (!year) return /* @__PURE__ */ React$1.createElement("div", {
-			key: i,
-			className: "h-10 w-16"
-		});
-		return /* @__PURE__ */ React$1.createElement(StyledButton, {
-			key: `${year}${i}`,
-			theme: isCurrentYear ? "primary" : "neutral",
-			onClick: () => handleSetYear(year),
-			selected: isCurrentYear
-		}, year);
-	})), !showYears && calendars.map(({ month, year, weeks }) => /* @__PURE__ */ React$1.createElement("div", { key: `${month}${year}` }, /* @__PURE__ */ React$1.createElement("div", { className: "mb-4 flex h-10 items-center" }, /* @__PURE__ */ React$1.createElement(Button, {
-		theme: "neutral",
-		onClick: () => setShowYears(true),
-		className: "text-grey-1000 px-0"
-	}, monthNames[month], " ", year)), /* @__PURE__ */ React$1.createElement("div", { className: "mb-3 grid grid-cols-7 gap-x-2 gap-y-1" }, offsetWeekdayNames(weekdayNames, firstDayOfWeek).map((weekday) => /* @__PURE__ */ React$1.createElement(Text, {
-		as: "span",
-		size: "sm",
-		weight: "bold",
-		key: `${month}${year}${weekday}`,
-		className: "text-center"
-	}, weekday))), /* @__PURE__ */ React$1.createElement("div", { className: "grid grid-cols-7 gap-x-2 gap-y-1" }, weeks.map((week, weekIndex) => week.map((dateObj, index) => {
-		const key = `${month}${year}${weekIndex}${index}`;
-		if (!dateObj) return /* @__PURE__ */ React$1.createElement("div", { key });
-		const { date, selected, today, prevMonth, nextMonth } = dateObj;
-		return /* @__PURE__ */ React$1.createElement(Day, {
-			isOutsideMonth: prevMonth || nextMonth,
-			isSelected: selected,
-			isToday: today,
-			key,
-			ref: selected ? refDateSelected : today ? refDateToday : null,
-			...getDateProps({ dateObj }),
-			type: "button"
-		}, date.getDate());
-	}))))));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", "w-fit", "-mt-1", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "absolute top-0 -right-1 flex",
+				children: [/* @__PURE__ */ jsx(ActionIcon, {
+					label: labels[showYears ? "previousYear" : "previous"],
+					theme: "neutral",
+					size: "md",
+					...!showYears && getBackProps({ calendars }),
+					...showYears && { onClick: () => setCurrentYear(currentYear - 16) },
+					disabled: showYears && isAtMinYear,
+					children: /* @__PURE__ */ jsx(Icon, { is: ChevronLeft })
+				}), /* @__PURE__ */ jsx(ActionIcon, {
+					label: labels[showYears ? "nextYear" : "next"],
+					theme: "neutral",
+					size: "md",
+					...!showYears && getForwardProps({ calendars }),
+					...showYears && { onClick: () => setCurrentYear(currentYear + 16) },
+					disabled: showYears && isAtMaxYear,
+					children: /* @__PURE__ */ jsx(Icon, { is: ChevronRight })
+				})]
+			}),
+			showYears && /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]",
+				children: yearList.map((year, i) => {
+					const isCurrentYear = year === date.getFullYear();
+					if (!year) return /* @__PURE__ */ jsx("div", { className: "h-10 w-16" }, i);
+					return /* @__PURE__ */ jsx(StyledButton, {
+						theme: isCurrentYear ? "primary" : "neutral",
+						onClick: () => handleSetYear(year),
+						selected: isCurrentYear,
+						children: year
+					}, `${year}${i}`);
+				})
+			}),
+			!showYears && calendars.map(({ month, year, weeks }) => /* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-4 flex h-10 items-center",
+					children: /* @__PURE__ */ jsxs(Button, {
+						theme: "neutral",
+						onClick: () => setShowYears(true),
+						className: "text-grey-1000 px-0",
+						children: [
+							monthNames[month],
+							" ",
+							year
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-3 grid grid-cols-7 gap-x-2 gap-y-1",
+					children: offsetWeekdayNames(weekdayNames, firstDayOfWeek).map((weekday) => /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: "sm",
+						weight: "bold",
+						className: "text-center",
+						children: weekday
+					}, `${month}${year}${weekday}`))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-7 gap-x-2 gap-y-1",
+					children: weeks.map((week, weekIndex) => week.map((dateObj, index) => {
+						const key = `${month}${year}${weekIndex}${index}`;
+						if (!dateObj) return /* @__PURE__ */ jsx("div", {}, key);
+						const { date, selected, today, prevMonth, nextMonth } = dateObj;
+						return /* @__PURE__ */ jsx(Day, {
+							isOutsideMonth: prevMonth || nextMonth,
+							isSelected: selected,
+							isToday: today,
+							ref: selected ? refDateSelected : today ? refDateToday : null,
+							...getDateProps({ dateObj }),
+							type: "button",
+							children: date.getDate()
+						}, key);
+					}))
+				})
+			] }, `${month}${year}`))
+		]
+	});
 };
 Calendar.displayName = "Calendar";
 //#endregion

package/dist/components/calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Button } from '~/components/button/Button'\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n  base: ['text-grey-1000', 'p-3', 'w-16'],\n  variants: {\n    selected: {\n      false: [\n        'disabled:bg-white!',\n        'font-normal',\n        'hover:bg-grey-200!',\n        'hover:text-grey-1000!',\n        'text-grey-1000!'\n      ]\n    }\n  }\n})\n\nexport type CalendarTranslationProps = {\n  monthNames?: string[]\n  weekdayNames?: string[]\n  labels?: {\n    open: string\n    next: string\n    previous: string\n    nextYear: string\n    previousYear: string\n  }\n}\n\ntype CalendarProps = DayzedInterface &\n  CalendarTranslationProps & {\n    refDateToday?: React.RefObject<HTMLButtonElement>\n    refDateSelected?: React.RefObject<HTMLButtonElement>\n    setYear: (date: Date) => Promise<void>\n    className?: string\n  }\n\nconst offsetWeekdayNames = (\n  weekdayNames: string[],\n  firstDayOfWeek: number\n): string[] => {\n  const start = weekdayNames.slice(0, firstDayOfWeek)\n  const end = weekdayNames.slice(firstDayOfWeek)\n  return end.concat(start)\n}\n\nexport const Calendar = ({\n  className,\n  refDateSelected,\n  refDateToday,\n  firstDayOfWeek = 0,\n  monthNames = monthNamesShort,\n  weekdayNames = weekdayNamesShort,\n  labels = DEFAULT_LABELS,\n  date = new Date(),\n  minDate,\n  maxDate,\n  setYear,\n  ...remainingProps\n}: CalendarProps) => {\n  const [showYears, setShowYears] = React.useState<boolean>(false)\n  const [currentYear, setCurrentYear] = React.useState<number>(\n    date?.getFullYear()\n  )\n\n  const handleSetYear = (year: number): void => {\n    const newDate = date\n    newDate.setFullYear(year)\n    setYear(newDate)\n    setShowYears(false)\n  }\n\n  const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n  const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n  const yearList = Array.from({ length: 16 }, (_, i) => {\n    const year = currentYear - i\n    if (\n      (maxDate && year > maxDate.getFullYear()) ||\n      (minDate && year < minDate.getFullYear())\n    )\n      return 0\n    return year\n  })\n\n  const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n    firstDayOfWeek,\n    showOutsideDays: true,\n    date,\n    minDate,\n    maxDate,\n    ...remainingProps\n  })\n\n  if (!calendars.length) return null\n\n  return (\n    <div className={cn('relative', 'w-fit', '-mt-1', className)}>\n      <div className=\"absolute top-0 -right-1 flex\">\n        <ActionIcon\n          label={labels[showYears ? 'previousYear' : 'previous']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getBackProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear - 16)\n          })}\n          disabled={showYears && isAtMinYear}\n        >\n          <Icon is={ChevronLeft} />\n        </ActionIcon>\n        <ActionIcon\n          label={labels[showYears ? 'nextYear' : 'next']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getForwardProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear + 16)\n          })}\n          disabled={showYears && isAtMaxYear}\n        >\n          <Icon is={ChevronRight} />\n        </ActionIcon>\n      </div>\n      {showYears && (\n        <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n          {yearList.map((year, i) => {\n            const isCurrentYear = year === date.getFullYear()\n            if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n            return (\n              <StyledButton\n                key={`${year}${i}`}\n                theme={isCurrentYear ? 'primary' : 'neutral'}\n                onClick={() => handleSetYear(year)}\n                selected={isCurrentYear}\n              >\n                {year}\n              </StyledButton>\n            )\n          })}\n        </div>\n      )}\n      {!showYears &&\n        calendars.map(({ month, year, weeks }) => (\n          <div key={`${month}${year}`}>\n            <div className=\"mb-4 flex h-10 items-center\">\n              <Button\n                theme=\"neutral\"\n                onClick={() => setShowYears(true)}\n                className=\"text-grey-1000 px-0\"\n              >\n                {monthNames[month]} {year}\n              </Button>\n            </div>\n            <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n              {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n                (weekday) => (\n                  <Text\n                    as=\"span\"\n                    size=\"sm\"\n                    weight=\"bold\"\n                    key={`${month}${year}${weekday}`}\n                    className=\"text-center\"\n                  >\n                    {weekday}\n                  </Text>\n                )\n              )}\n            </div>\n            <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n              {weeks.map((week, weekIndex) =>\n                week.map((dateObj, index) => {\n                  const key = `${month}${year}${weekIndex}${index}`\n\n                  if (!dateObj) return <div key={key} />\n\n                  const { date, selected, today, prevMonth, nextMonth } =\n                    dateObj\n\n                  return (\n                    <Day\n                      isOutsideMonth={prevMonth || nextMonth}\n                      isSelected={selected}\n                      isToday={today}\n                      key={key}\n                      ref={\n                        selected ? refDateSelected : today ? refDateToday : null\n                      }\n                      {...getDateProps({ dateObj })}\n                      type=\"button\"\n                    >\n                      {date.getDate()}\n                    </Day>\n                  )\n                })\n              )}\n            </div>\n          </div>\n        ))}\n    </div>\n  )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Button } from '~/components/button/Button'\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n  base: ['text-grey-1000', 'p-3', 'w-16'],\n  variants: {\n    selected: {\n      false: [\n        'disabled:bg-white!',\n        'font-normal',\n        'hover:bg-grey-200!',\n        'hover:text-grey-1000!',\n        'text-grey-1000!'\n      ]\n    }\n  }\n})\n\nexport type CalendarTranslationProps = {\n  monthNames?: string[]\n  weekdayNames?: string[]\n  labels?: {\n    open: string\n    next: string\n    previous: string\n    nextYear: string\n    previousYear: string\n  }\n}\n\ntype CalendarProps = DayzedInterface &\n  CalendarTranslationProps & {\n    refDateToday?: React.RefObject<HTMLButtonElement | null>\n    refDateSelected?: React.RefObject<HTMLButtonElement | null>\n    setYear: (date: Date) => Promise<void>\n    className?: string\n  }\n\nconst offsetWeekdayNames = (\n  weekdayNames: string[],\n  firstDayOfWeek: number\n): string[] => {\n  const start = weekdayNames.slice(0, firstDayOfWeek)\n  const end = weekdayNames.slice(firstDayOfWeek)\n  return end.concat(start)\n}\n\nexport const Calendar = ({\n  className,\n  refDateSelected,\n  refDateToday,\n  firstDayOfWeek = 0,\n  monthNames = monthNamesShort,\n  weekdayNames = weekdayNamesShort,\n  labels = DEFAULT_LABELS,\n  date = new Date(),\n  minDate,\n  maxDate,\n  setYear,\n  ...remainingProps\n}: CalendarProps) => {\n  const [showYears, setShowYears] = React.useState<boolean>(false)\n  const [currentYear, setCurrentYear] = React.useState<number>(\n    date?.getFullYear()\n  )\n\n  const handleSetYear = (year: number): void => {\n    const newDate = date\n    newDate.setFullYear(year)\n    setYear(newDate)\n    setShowYears(false)\n  }\n\n  const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n  const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n  const yearList = Array.from({ length: 16 }, (_, i) => {\n    const year = currentYear - i\n    if (\n      (maxDate && year > maxDate.getFullYear()) ||\n      (minDate && year < minDate.getFullYear())\n    )\n      return 0\n    return year\n  })\n\n  const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n    firstDayOfWeek,\n    showOutsideDays: true,\n    date,\n    minDate,\n    maxDate,\n    ...remainingProps\n  })\n\n  if (!calendars.length) return null\n\n  return (\n    <div className={cn('relative', 'w-fit', '-mt-1', className)}>\n      <div className=\"absolute top-0 -right-1 flex\">\n        <ActionIcon\n          label={labels[showYears ? 'previousYear' : 'previous']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getBackProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear - 16)\n          })}\n          disabled={showYears && isAtMinYear}\n        >\n          <Icon is={ChevronLeft} />\n        </ActionIcon>\n        <ActionIcon\n          label={labels[showYears ? 'nextYear' : 'next']}\n          theme=\"neutral\"\n          size=\"md\"\n          {...(!showYears && getForwardProps({ calendars }))}\n          {...(showYears && {\n            onClick: () => setCurrentYear(currentYear + 16)\n          })}\n          disabled={showYears && isAtMaxYear}\n        >\n          <Icon is={ChevronRight} />\n        </ActionIcon>\n      </div>\n      {showYears && (\n        <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n          {yearList.map((year, i) => {\n            const isCurrentYear = year === date.getFullYear()\n            if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n            return (\n              <StyledButton\n                key={`${year}${i}`}\n                theme={isCurrentYear ? 'primary' : 'neutral'}\n                onClick={() => handleSetYear(year)}\n                selected={isCurrentYear}\n              >\n                {year}\n              </StyledButton>\n            )\n          })}\n        </div>\n      )}\n      {!showYears &&\n        calendars.map(({ month, year, weeks }) => (\n          <div key={`${month}${year}`}>\n            <div className=\"mb-4 flex h-10 items-center\">\n              <Button\n                theme=\"neutral\"\n                onClick={() => setShowYears(true)}\n                className=\"text-grey-1000 px-0\"\n              >\n                {monthNames[month]} {year}\n              </Button>\n            </div>\n            <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n              {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n                (weekday) => (\n                  <Text\n                    as=\"span\"\n                    size=\"sm\"\n                    weight=\"bold\"\n                    key={`${month}${year}${weekday}`}\n                    className=\"text-center\"\n                  >\n                    {weekday}\n                  </Text>\n                )\n              )}\n            </div>\n            <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n              {weeks.map((week, weekIndex) =>\n                week.map((dateObj, index) => {\n                  const key = `${month}${year}${weekIndex}${index}`\n\n                  if (!dateObj) return <div key={key} />\n\n                  const { date, selected, today, prevMonth, nextMonth } =\n                    dateObj\n\n                  return (\n                    <Day\n                      isOutsideMonth={prevMonth || nextMonth}\n                      isSelected={selected}\n                      isToday={today}\n                      key={key}\n                      ref={\n                        selected ? refDateSelected : today ? refDateToday : null\n                      }\n                      {...getDateProps({ dateObj })}\n                      type=\"button\"\n                    >\n                      {date.getDate()}\n                    </Day>\n                  )\n                })\n              )}\n            </div>\n          </div>\n        ))}\n    </div>\n  )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":"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"}

package/dist/components/calendar/Day.d.ts

@@ -1,6 +1,4 @@
-export declare const Day: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "isSelected" | "isToday" | "isOutsideMonth"> & {
+export declare const Day: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "isSelected" | "isToday" | "isOutsideMonth"> & {
     isSelected?: boolean | undefined;
     isToday?: boolean | undefined;
     isOutsideMonth?: boolean | undefined;

package/dist/components/carousel/Carousel.d.ts

@@ -24,14 +24,10 @@ export declare const Carousel: {
     ({ children, currentSlide, ...props }: React.PropsWithChildren<CarouselProps & React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;
     displayName: string;
 } & {
-    ArrowNext: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, never> & {
+    ArrowNext: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & {
         as?: React.ElementType;
     }>>) => React.JSX.Element;
-    ArrowPrevious: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, never> & {
+    ArrowPrevious: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & {
         as?: React.ElementType;
     }>>) => React.JSX.Element;
     Pagination: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;

package/dist/components/carousel/Carousel.js

@@ -4,6 +4,7 @@ import { CarouselPagination } from "./CarouselPagination.js";
 import { CarouselSlider } from "./CarouselSlider.js";
 import { CarouselSlide } from "./CarouselSlide.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import useEmblaCarousel from "embla-carousel-react";
 //#region src/components/carousel/Carousel.tsx
 var CarouselContext = React$1.createContext(null);
@@ -74,10 +75,14 @@ var CarouselComponent = ({ children, currentSlide = 0, ...props }) => {
 		scrollTo
 	]);
 	const { className, ...rest } = props;
-	return /* @__PURE__ */ React$1.createElement("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: cn("relative", "w-full", className),
-		...rest
-	}, /* @__PURE__ */ React$1.createElement(CarouselContext.Provider, { value: contextValue }, children));
+		...rest,
+		children: /* @__PURE__ */ jsx(CarouselContext.Provider, {
+			value: contextValue,
+			children
+		})
+	});
 };
 var useCarousel = () => {
 	const context = React$1.useContext(CarouselContext);

package/dist/components/carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import useEmblaCarousel from 'embla-carousel-react'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype EmblaApi = ReturnType<typeof useEmblaCarousel>[1]\n\ntype CarouselContextValue = {\n  emblaRef: React.RefCallback<HTMLDivElement>\n  emblaApi: EmblaApi\n  selectedIndex: number\n  scrollSnaps: number[]\n  canScrollPrev: boolean\n  canScrollNext: boolean\n  scrollPrev: () => void\n  scrollNext: () => void\n  scrollTo: (index: number) => void\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null)\n\ntype CarouselProps = {\n  currentSlide?: number\n}\n\nexport const CarouselComponent = ({\n  children,\n  currentSlide = 0,\n  ...props\n}: React.PropsWithChildren<\n  CarouselProps & React.HTMLAttributes<HTMLDivElement>\n>) => {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    startIndex: currentSlide,\n    align: 'center'\n  })\n\n  const [selectedIndex, setSelectedIndex] = React.useState(currentSlide)\n  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const scrollPrev = React.useCallback(() => {\n    emblaApi?.scrollPrev()\n  }, [emblaApi])\n\n  const scrollNext = React.useCallback(() => {\n    emblaApi?.scrollNext()\n  }, [emblaApi])\n\n  const scrollTo = React.useCallback(\n    (index: number) => {\n      emblaApi?.scrollTo(index)\n    },\n    [emblaApi]\n  )\n\n  const onSelect = React.useCallback(() => {\n    if (!emblaApi) return\n    setSelectedIndex(emblaApi.selectedScrollSnap())\n    setCanScrollPrev(emblaApi.canScrollPrev())\n    setCanScrollNext(emblaApi.canScrollNext())\n  }, [emblaApi])\n\n  const onInit = React.useCallback(() => {\n    if (!emblaApi) return\n    setScrollSnaps(emblaApi.scrollSnapList())\n  }, [emblaApi])\n\n  React.useEffect(() => {\n    if (!emblaApi) return\n\n    onInit()\n    onSelect()\n\n    emblaApi.on('reInit', onInit)\n    emblaApi.on('reInit', onSelect)\n    emblaApi.on('select', onSelect)\n\n    return () => {\n      emblaApi.off('reInit', onInit)\n      emblaApi.off('reInit', onSelect)\n      emblaApi.off('select', onSelect)\n    }\n  }, [emblaApi, onInit, onSelect])\n\n  const contextValue = React.useMemo<CarouselContextValue>(\n    () => ({\n      emblaRef,\n      emblaApi,\n      selectedIndex,\n      scrollSnaps,\n      canScrollPrev,\n      canScrollNext,\n      scrollPrev,\n      scrollNext,\n      scrollTo\n    }),\n    [\n      emblaRef,\n      emblaApi,\n      selectedIndex,\n      scrollSnaps,\n      canScrollPrev,\n      canScrollNext,\n      scrollPrev,\n      scrollNext,\n      scrollTo\n    ]\n  )\n\n  const { className, ...rest } = props\n\n  return (\n    <div className={cn('relative', 'w-full', className)} {...rest}>\n      <CarouselContext.Provider value={contextValue}>\n        {children}\n      </CarouselContext.Provider>\n    </div>\n  )\n}\n\nexport const useCarousel = () => {\n  const context = React.useContext(CarouselContext)\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel')\n  }\n\n  return {\n    ...context,\n    // Alias for backward compatibility\n    currentSlide: context.selectedIndex\n  }\n}\n\nexport const Carousel = Object.assign(CarouselComponent, {\n  ArrowNext: CarouselArrowNext,\n  ArrowPrevious: CarouselArrowPrevious,\n  Pagination: CarouselPagination,\n  Slide: CarouselSlide,\n  Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"mappings":";;;;;;;;AAwBA,IAAM,kBAAkB,QAAM,cAA2C,KAAK;AAM9E,IAAa,qBAAqB,EAChC,UACA,eAAe,GACf,GAAG,YAGC;CACJ,MAAM,CAAC,UAAU,YAAY,iBAAiB;EAC5C,YAAY;EACZ,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,aAAa;CACtE,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,EAAE,CAAC;CAClE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAE/D,MAAM,aAAa,QAAM,kBAAkB;AACzC,YAAU,YAAY;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,aAAa,QAAM,kBAAkB;AACzC,YAAU,YAAY;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,QAAM,aACpB,UAAkB;AACjB,YAAU,SAAS,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAM,WAAW,QAAM,kBAAkB;AACvC,MAAI,CAAC,SAAU;AACf,mBAAiB,SAAS,oBAAoB,CAAC;AAC/C,mBAAiB,SAAS,eAAe,CAAC;AAC1C,mBAAiB,SAAS,eAAe,CAAC;IACzC,CAAC,SAAS,CAAC;CAEd,MAAM,SAAS,QAAM,kBAAkB;AACrC,MAAI,CAAC,SAAU;AACf,iBAAe,SAAS,gBAAgB,CAAC;IACxC,CAAC,SAAS,CAAC;AAEd,SAAM,gBAAgB;AACpB,MAAI,CAAC,SAAU;AAEf,UAAQ;AACR,YAAU;AAEV,WAAS,GAAG,UAAU,OAAO;AAC7B,WAAS,GAAG,UAAU,SAAS;AAC/B,WAAS,GAAG,UAAU,SAAS;AAE/B,eAAa;AACX,YAAS,IAAI,UAAU,OAAO;AAC9B,YAAS,IAAI,UAAU,SAAS;AAChC,YAAS,IAAI,UAAU,SAAS;;IAEjC;EAAC;EAAU;EAAQ;EAAS,CAAC;CAEhC,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;AAE/B,QACE,wBAAA,cAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,UAAU;EAAE,GAAI;EAInD,EAHJ,wBAAA,cAAC,gBAAgB,UAAjB,EAA0B,OAAO,cAEN,EADxB,SACwB,CACvB;;AAIV,IAAa,oBAAoB;CAC/B,MAAM,UAAU,QAAM,WAAW,gBAAgB;AACjD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,6CAA6C;AAG/D,QAAO;EACL,GAAG;EAEH,cAAc,QAAQ;EACvB;;AAGH,IAAa,WAAW,OAAO,OAAO,mBAAmB;CACvD,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;CACT,CAAC;AAEF,kBAAkB,cAAc"}
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import useEmblaCarousel from 'embla-carousel-react'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype EmblaApi = ReturnType<typeof useEmblaCarousel>[1]\n\ntype CarouselContextValue = {\n  emblaRef: React.RefCallback<HTMLDivElement>\n  emblaApi: EmblaApi\n  selectedIndex: number\n  scrollSnaps: number[]\n  canScrollPrev: boolean\n  canScrollNext: boolean\n  scrollPrev: () => void\n  scrollNext: () => void\n  scrollTo: (index: number) => void\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null)\n\ntype CarouselProps = {\n  currentSlide?: number\n}\n\nexport const CarouselComponent = ({\n  children,\n  currentSlide = 0,\n  ...props\n}: React.PropsWithChildren<\n  CarouselProps & React.HTMLAttributes<HTMLDivElement>\n>) => {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    startIndex: currentSlide,\n    align: 'center'\n  })\n\n  const [selectedIndex, setSelectedIndex] = React.useState(currentSlide)\n  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const scrollPrev = React.useCallback(() => {\n    emblaApi?.scrollPrev()\n  }, [emblaApi])\n\n  const scrollNext = React.useCallback(() => {\n    emblaApi?.scrollNext()\n  }, [emblaApi])\n\n  const scrollTo = React.useCallback(\n    (index: number) => {\n      emblaApi?.scrollTo(index)\n    },\n    [emblaApi]\n  )\n\n  const onSelect = React.useCallback(() => {\n    if (!emblaApi) return\n    setSelectedIndex(emblaApi.selectedScrollSnap())\n    setCanScrollPrev(emblaApi.canScrollPrev())\n    setCanScrollNext(emblaApi.canScrollNext())\n  }, [emblaApi])\n\n  const onInit = React.useCallback(() => {\n    if (!emblaApi) return\n    setScrollSnaps(emblaApi.scrollSnapList())\n  }, [emblaApi])\n\n  React.useEffect(() => {\n    if (!emblaApi) return\n\n    onInit()\n    onSelect()\n\n    emblaApi.on('reInit', onInit)\n    emblaApi.on('reInit', onSelect)\n    emblaApi.on('select', onSelect)\n\n    return () => {\n      emblaApi.off('reInit', onInit)\n      emblaApi.off('reInit', onSelect)\n      emblaApi.off('select', onSelect)\n    }\n  }, [emblaApi, onInit, onSelect])\n\n  const contextValue = React.useMemo<CarouselContextValue>(\n    () => ({\n      emblaRef,\n      emblaApi,\n      selectedIndex,\n      scrollSnaps,\n      canScrollPrev,\n      canScrollNext,\n      scrollPrev,\n      scrollNext,\n      scrollTo\n    }),\n    [\n      emblaRef,\n      emblaApi,\n      selectedIndex,\n      scrollSnaps,\n      canScrollPrev,\n      canScrollNext,\n      scrollPrev,\n      scrollNext,\n      scrollTo\n    ]\n  )\n\n  const { className, ...rest } = props\n\n  return (\n    <div className={cn('relative', 'w-full', className)} {...rest}>\n      <CarouselContext.Provider value={contextValue}>\n        {children}\n      </CarouselContext.Provider>\n    </div>\n  )\n}\n\nexport const useCarousel = () => {\n  const context = React.useContext(CarouselContext)\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel')\n  }\n\n  return {\n    ...context,\n    // Alias for backward compatibility\n    currentSlide: context.selectedIndex\n  }\n}\n\nexport const Carousel = Object.assign(CarouselComponent, {\n  ArrowNext: CarouselArrowNext,\n  ArrowPrevious: CarouselArrowPrevious,\n  Pagination: CarouselPagination,\n  Slide: CarouselSlide,\n  Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"mappings":";;;;;;;;;AAwBA,IAAM,kBAAkB,QAAM,cAA2C,KAAK;AAM9E,IAAa,qBAAqB,EAChC,UACA,eAAe,GACf,GAAG,YAGC;CACJ,MAAM,CAAC,UAAU,YAAY,iBAAiB;EAC5C,YAAY;EACZ,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,aAAa;CACtE,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,EAAE,CAAC;CAClE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAE/D,MAAM,aAAa,QAAM,kBAAkB;AACzC,YAAU,YAAY;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,aAAa,QAAM,kBAAkB;AACzC,YAAU,YAAY;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,QAAM,aACpB,UAAkB;AACjB,YAAU,SAAS,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAM,WAAW,QAAM,kBAAkB;AACvC,MAAI,CAAC,SAAU;AACf,mBAAiB,SAAS,oBAAoB,CAAC;AAC/C,mBAAiB,SAAS,eAAe,CAAC;AAC1C,mBAAiB,SAAS,eAAe,CAAC;IACzC,CAAC,SAAS,CAAC;CAEd,MAAM,SAAS,QAAM,kBAAkB;AACrC,MAAI,CAAC,SAAU;AACf,iBAAe,SAAS,gBAAgB,CAAC;IACxC,CAAC,SAAS,CAAC;AAEd,SAAM,gBAAgB;AACpB,MAAI,CAAC,SAAU;AAEf,UAAQ;AACR,YAAU;AAEV,WAAS,GAAG,UAAU,OAAO;AAC7B,WAAS,GAAG,UAAU,SAAS;AAC/B,WAAS,GAAG,UAAU,SAAS;AAE/B,eAAa;AACX,YAAS,IAAI,UAAU,OAAO;AAC9B,YAAS,IAAI,UAAU,SAAS;AAChC,YAAS,IAAI,UAAU,SAAS;;IAEjC;EAAC;EAAU;EAAQ;EAAS,CAAC;CAEhC,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;AAE/B,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,UAAU;EAAE,GAAI;YACvD,oBAAC,gBAAgB,UAAjB;GAA0B,OAAO;GAC9B;GACwB,CAAA;EACvB,CAAA;;AAIV,IAAa,oBAAoB;CAC/B,MAAM,UAAU,QAAM,WAAW,gBAAgB;AACjD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,6CAA6C;AAG/D,QAAO;EACL,GAAG;EAEH,cAAc,QAAQ;EACvB;;AAGH,IAAa,WAAW,OAAO,OAAO,mBAAmB;CACvD,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;CACT,CAAC;AAEF,kBAAkB,cAAc"}

package/dist/components/carousel/CarouselArrows.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const ArrowButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, never> & {
+declare const ArrowButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & {
     as?: React.ElementType;
 }>;
 export declare const CarouselArrowPrevious: (props: React.ComponentProps<typeof ArrowButton>) => React.JSX.Element;

package/dist/components/carousel/CarouselArrows.js

@@ -1,7 +1,8 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { useCarousel } from "./Carousel.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
 //#region src/components/carousel/CarouselArrows.tsx
 var ArrowButton = styled("button", { base: [
@@ -23,23 +24,25 @@ var ArrowButton = styled("button", { base: [
 ] });
 var CarouselArrowPrevious = (props) => {
 	const { scrollPrev, canScrollPrev } = useCarousel();
-	return /* @__PURE__ */ React$1.createElement(ArrowButton, {
+	return /* @__PURE__ */ jsx(ArrowButton, {
 		type: "button",
 		onClick: scrollPrev,
 		disabled: !canScrollPrev,
 		"aria-label": "Previous slide",
-		...props
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronLeft }));
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, { is: ChevronLeft })
+	});
 };
 var CarouselArrowNext = (props) => {
 	const { scrollNext, canScrollNext } = useCarousel();
-	return /* @__PURE__ */ React$1.createElement(ArrowButton, {
+	return /* @__PURE__ */ jsx(ArrowButton, {
 		type: "button",
 		onClick: scrollNext,
 		disabled: !canScrollNext,
 		"aria-label": "Next slide",
-		...props
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronRight }));
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, { is: ChevronRight })
+	});
 };
 //#endregion
 export { CarouselArrowNext, CarouselArrowPrevious };

package/dist/components/carousel/CarouselArrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselArrows.js","names":[],"sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nconst ArrowButton = styled('button', {\n  base: [\n    'items-center',\n    'text-primary-800',\n    'cursor-pointer',\n    'flex',\n    'justify-center',\n    'size-12',\n    'top-1/2',\n    '-translate-y-1/2',\n    'transition-colors',\n    'duration-150',\n    'ease-in-out',\n    'hover:text-primary-900',\n    'active:text-primary-1000',\n    'disabled:text-grey-200',\n    'disabled:cursor-not-allowed'\n  ]\n})\n\nexport const CarouselArrowPrevious = (\n  props: React.ComponentProps<typeof ArrowButton>\n) => {\n  const { scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <ArrowButton\n      type=\"button\"\n      onClick={scrollPrev}\n      disabled={!canScrollPrev}\n      aria-label=\"Previous slide\"\n      {...props}\n    >\n      <Icon is={ChevronLeft} />\n    </ArrowButton>\n  )\n}\n\nexport const CarouselArrowNext = (\n  props: React.ComponentProps<typeof ArrowButton>\n) => {\n  const { scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <ArrowButton\n      type=\"button\"\n      onClick={scrollNext}\n      disabled={!canScrollNext}\n      aria-label=\"Next slide\"\n      {...props}\n    >\n      <Icon is={ChevronRight} />\n    </ArrowButton>\n  )\n}\n"],"mappings":";;;;;;AAQA,IAAM,cAAc,OAAO,UAAU,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,yBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,wBAAA,cAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;EAGQ,EADZ,wBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACb;;AAIlB,IAAa,qBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,wBAAA,cAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;EAGQ,EADZ,wBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACd"}
+{"version":3,"file":"CarouselArrows.js","names":[],"sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nconst ArrowButton = styled('button', {\n  base: [\n    'items-center',\n    'text-primary-800',\n    'cursor-pointer',\n    'flex',\n    'justify-center',\n    'size-12',\n    'top-1/2',\n    '-translate-y-1/2',\n    'transition-colors',\n    'duration-150',\n    'ease-in-out',\n    'hover:text-primary-900',\n    'active:text-primary-1000',\n    'disabled:text-grey-200',\n    'disabled:cursor-not-allowed'\n  ]\n})\n\nexport const CarouselArrowPrevious = (\n  props: React.ComponentProps<typeof ArrowButton>\n) => {\n  const { scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <ArrowButton\n      type=\"button\"\n      onClick={scrollPrev}\n      disabled={!canScrollPrev}\n      aria-label=\"Previous slide\"\n      {...props}\n    >\n      <Icon is={ChevronLeft} />\n    </ArrowButton>\n  )\n}\n\nexport const CarouselArrowNext = (\n  props: React.ComponentProps<typeof ArrowButton>\n) => {\n  const { scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <ArrowButton\n      type=\"button\"\n      onClick={scrollNext}\n      disabled={!canScrollNext}\n      aria-label=\"Next slide\"\n      {...props}\n    >\n      <Icon is={ChevronRight} />\n    </ArrowButton>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,cAAc,OAAO,UAAU,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,yBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;EACb,CAAA;;AAIlB,IAAa,qBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;EACd,CAAA"}

package/dist/components/carousel/CarouselPagination.js

@@ -1,6 +1,7 @@
 import { cn, styled } from "../../styled.js";
 import { useCarousel } from "./Carousel.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/carousel/CarouselPagination.tsx
 var Dot = styled("button", { base: [
 	"bg-grey-600",
@@ -20,16 +21,16 @@ var Dot = styled("button", { base: [
 var CarouselPagination = ({ className, ...rest }) => {
 	const { scrollSnaps, selectedIndex, scrollTo } = useCarousel();
 	const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i);
-	return /* @__PURE__ */ React$1.createElement("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex", "justify-center", className),
-		...rest
-	}, dots.map((index) => /* @__PURE__ */ React$1.createElement(Dot, {
-		key: index,
-		type: "button",
-		onClick: () => scrollTo(index),
-		disabled: index === selectedIndex,
-		"aria-label": "slide dot"
-	})));
+		...rest,
+		children: dots.map((index) => /* @__PURE__ */ jsx(Dot, {
+			type: "button",
+			onClick: () => scrollTo(index),
+			disabled: index === selectedIndex,
+			"aria-label": "slide dot"
+		}, index))
+	});
 };
 //#endregion
 export { CarouselPagination };

package/dist/components/carousel/CarouselPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn, styled } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nconst Dot = styled('button', {\n  base: [\n    'bg-grey-600',\n    'cursor-pointer',\n    'duration-100',\n    'ease-in',\n    'focus:bg-primary-900',\n    'hover:bg-primary-900',\n    'mx-1',\n    'p-1',\n    'rounded-full',\n    'size-3',\n    'transition-all',\n    'disabled:bg-primary-800',\n    'disabled:cursor-default'\n  ]\n})\n\nexport const CarouselPagination = ({\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n\n  const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i)\n\n  return (\n    <div className={cn('flex', 'justify-center', className)} {...rest}>\n      {dots.map((index) => (\n        <Dot\n          key={index}\n          type=\"button\"\n          onClick={() => scrollTo(index)}\n          disabled={index === selectedIndex}\n          aria-label=\"slide dot\"\n        />\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAMA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,aAAa;CAE9D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,QAAQ,GAAG,GAAG,MAAM,EAAE;AAEpE,QACE,wBAAA,cAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,UAAU;EAAE,GAAI;EAUvD,EATH,KAAK,KAAK,UACT,wBAAA,cAAC,KAAD;EACE,KAAK;EACL,MAAK;EACL,eAAe,SAAS,MAAM;EAC9B,UAAU,UAAU;EACpB,cAAW;EACX,CAAA,CACF,CACE"}
+{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn, styled } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nconst Dot = styled('button', {\n  base: [\n    'bg-grey-600',\n    'cursor-pointer',\n    'duration-100',\n    'ease-in',\n    'focus:bg-primary-900',\n    'hover:bg-primary-900',\n    'mx-1',\n    'p-1',\n    'rounded-full',\n    'size-3',\n    'transition-all',\n    'disabled:bg-primary-800',\n    'disabled:cursor-default'\n  ]\n})\n\nexport const CarouselPagination = ({\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n\n  const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i)\n\n  return (\n    <div className={cn('flex', 'justify-center', className)} {...rest}>\n      {dots.map((index) => (\n        <Dot\n          key={index}\n          type=\"button\"\n          onClick={() => scrollTo(index)}\n          disabled={index === selectedIndex}\n          aria-label=\"slide dot\"\n        />\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,aAAa;CAE9D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,QAAQ,GAAG,GAAG,MAAM,EAAE;AAEpE,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,UAAU;EAAE,GAAI;YAC1D,KAAK,KAAK,UACT,oBAAC,KAAD;GAEE,MAAK;GACL,eAAe,SAAS,MAAM;GAC9B,UAAU,UAAU;GACpB,cAAW;GACX,EALK,MAKL,CACF;EACE,CAAA"}

package/dist/components/carousel/CarouselSlide.js

@@ -2,17 +2,22 @@ import { cn } from "../../styled.js";
 import { CarouselSlideGapContext, toSlideGapClass } from "./CarouselSlider.js";
 import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/carousel/CarouselSlide.tsx
 var CarouselSlide = ({ children, className, index, ...rest }) => {
 	const { selectedIndex } = useCarousel();
 	const gap = React$1.useContext(CarouselSlideGapContext);
 	const isSelected = selectedIndex === index;
-	return /* @__PURE__ */ React$1.createElement("div", {
+	return /* @__PURE__ */ jsx("div", {
 		role: "option",
 		"aria-selected": isSelected,
 		className: cn("min-w-0", "basis-full", "shrink-0", className),
-		...rest
-	}, /* @__PURE__ */ React$1.createElement("div", { className: cn("flex items-center justify-center", toSlideGapClass[gap]) }, children));
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex items-center justify-center", toSlideGapClass[gap]),
+			children
+		})
+	});
 };
 //#endregion
 export { CarouselSlide };

package/dist/components/carousel/CarouselSlide.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useCarousel } from './Carousel'\nimport { CarouselSlideGapContext, toSlideGapClass } from './CarouselSlider'\n\nexport const CarouselSlide = ({\n  children,\n  className,\n  index,\n  ...rest\n}: React.PropsWithChildren<\n  { index: number } & React.HTMLAttributes<HTMLDivElement>\n>) => {\n  const { selectedIndex } = useCarousel()\n  const gap = React.useContext(CarouselSlideGapContext)\n  const isSelected = selectedIndex === index\n\n  return (\n    <div\n      role=\"option\"\n      aria-selected={isSelected}\n      // min-w-0 so basis-full wins over the content's min-content size and\n      // the slide never outgrows the slider viewport\n      className={cn('min-w-0', 'basis-full', 'shrink-0', className)}\n      {...rest}\n    >\n      {/* padding to create the gap between slides; gap=\"none\" for full-bleed */}\n      <div\n        className={cn('flex items-center justify-center', toSlideGapClass[gap])}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAOA,IAAa,iBAAiB,EAC5B,UACA,WACA,OACA,GAAG,WAGC;CACJ,MAAM,EAAE,kBAAkB,aAAa;CACvC,MAAM,MAAM,QAAM,WAAW,wBAAwB;CACrD,MAAM,aAAa,kBAAkB;AAErC,QACE,wBAAA,cAAC,OAAD;EACE,MAAK;EACL,iBAAe;EAGf,WAAW,GAAG,WAAW,cAAc,YAAY,UAAU;EAC7D,GAAI;EAQA,EALJ,wBAAA,cAAC,OAAD,EACE,WAAW,GAAG,oCAAoC,gBAAgB,KAAK,EAGnE,EADH,SACG,CACF"}
+{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useCarousel } from './Carousel'\nimport { CarouselSlideGapContext, toSlideGapClass } from './CarouselSlider'\n\nexport const CarouselSlide = ({\n  children,\n  className,\n  index,\n  ...rest\n}: React.PropsWithChildren<\n  { index: number } & React.HTMLAttributes<HTMLDivElement>\n>) => {\n  const { selectedIndex } = useCarousel()\n  const gap = React.useContext(CarouselSlideGapContext)\n  const isSelected = selectedIndex === index\n\n  return (\n    <div\n      role=\"option\"\n      aria-selected={isSelected}\n      // min-w-0 so basis-full wins over the content's min-content size and\n      // the slide never outgrows the slider viewport\n      className={cn('min-w-0', 'basis-full', 'shrink-0', className)}\n      {...rest}\n    >\n      {/* padding to create the gap between slides; gap=\"none\" for full-bleed */}\n      <div\n        className={cn('flex items-center justify-center', toSlideGapClass[gap])}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAa,iBAAiB,EAC5B,UACA,WACA,OACA,GAAG,WAGC;CACJ,MAAM,EAAE,kBAAkB,aAAa;CACvC,MAAM,MAAM,QAAM,WAAW,wBAAwB;CACrD,MAAM,aAAa,kBAAkB;AAErC,QACE,oBAAC,OAAD;EACE,MAAK;EACL,iBAAe;EAGf,WAAW,GAAG,WAAW,cAAc,YAAY,UAAU;EAC7D,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GAAG,oCAAoC,gBAAgB,KAAK;GAEtE;GACG,CAAA;EACF,CAAA"}

package/dist/components/carousel/CarouselSlider.js

@@ -1,6 +1,7 @@
 import { cn } from "../../styled.js";
 import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/carousel/CarouselSlider.tsx
 var toSlideGapClass = {
 	none: "",
@@ -13,14 +14,21 @@ var toSlideGapClass = {
 var CarouselSlideGapContext = React$1.createContext(3);
 var CarouselSlider = ({ children, className, gap = 3, overflow, tabIndex = 0, ...rest }) => {
 	const { emblaRef } = useCarousel();
-	return /* @__PURE__ */ React$1.createElement("div", {
+	return /* @__PURE__ */ jsx("div", {
 		ref: emblaRef,
 		className: cn("ml-[50%]", "-translate-x-1/2", "cursor-grab", overflow ? "overflow-visible" : "overflow-hidden", className),
 		role: "listbox",
 		"aria-live": "polite",
 		tabIndex,
-		...rest
-	}, /* @__PURE__ */ React$1.createElement("div", { className: "flex" }, /* @__PURE__ */ React$1.createElement(CarouselSlideGapContext.Provider, { value: gap }, children)));
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex",
+			children: /* @__PURE__ */ jsx(CarouselSlideGapContext.Provider, {
+				value: gap,
+				children
+			})
+		})
+	});
 };
 //#endregion
 export { CarouselSlideGapContext, CarouselSlider, toSlideGapClass };

package/dist/components/carousel/CarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nexport type TCarouselSlideGap = 'none' | 0 | 1 | 2 | 3 | 4\n\n// Horizontal padding applied around each slide's content, on the same\n// spacing scale as Flex/ToggleGroup's gap. 'none' renders full-bleed slides.\nexport const toSlideGapClass: Record<TCarouselSlideGap, string> = {\n  none: '',\n  0: 'px-0.5',\n  1: 'px-1',\n  2: 'px-2',\n  3: 'px-3',\n  4: 'px-4'\n}\n\n// Slides read the gap via context so it is configured once on the slider.\nexport const CarouselSlideGapContext = React.createContext<TCarouselSlideGap>(3)\n\ntype CarouselSliderProps = {\n  children?: React.ReactNode\n  className?: string\n  gap?: TCarouselSlideGap\n  overflow?: boolean\n  tabIndex?: number\n}\n\nexport const CarouselSlider = ({\n  children,\n  className,\n  gap = 3,\n  overflow,\n  tabIndex = 0,\n  ...rest\n}: CarouselSliderProps) => {\n  const { emblaRef } = useCarousel()\n\n  return (\n    <div\n      ref={emblaRef}\n      className={cn(\n        'ml-[50%]',\n        '-translate-x-1/2',\n        'cursor-grab',\n        overflow ? 'overflow-visible' : 'overflow-hidden',\n        className\n      )}\n      role=\"listbox\"\n      aria-live=\"polite\"\n      tabIndex={tabIndex}\n      {...rest}\n    >\n      <div className=\"flex\">\n        <CarouselSlideGapContext.Provider value={gap}>\n          {children}\n        </CarouselSlideGapContext.Provider>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;AAUA,IAAa,kBAAqD;CAChE,MAAM;CACN,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAGD,IAAa,0BAA0B,QAAM,cAAiC,EAAE;AAUhF,IAAa,kBAAkB,EAC7B,UACA,WACA,MAAM,GACN,UACA,WAAW,GACX,GAAG,WACsB;CACzB,MAAM,EAAE,aAAa,aAAa;AAElC,QACE,wBAAA,cAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,YACA,oBACA,eACA,WAAW,qBAAqB,mBAChC,UACD;EACD,MAAK;EACL,aAAU;EACA;EACV,GAAI;EAOA,EALJ,wBAAA,cAAC,OAAD,EAAK,WAAU,QAIT,EAHJ,wBAAA,cAAC,wBAAwB,UAAzB,EAAkC,OAAO,KAEN,EADhC,SACgC,CAC/B,CACF"}
+{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nexport type TCarouselSlideGap = 'none' | 0 | 1 | 2 | 3 | 4\n\n// Horizontal padding applied around each slide's content, on the same\n// spacing scale as Flex/ToggleGroup's gap. 'none' renders full-bleed slides.\nexport const toSlideGapClass: Record<TCarouselSlideGap, string> = {\n  none: '',\n  0: 'px-0.5',\n  1: 'px-1',\n  2: 'px-2',\n  3: 'px-3',\n  4: 'px-4'\n}\n\n// Slides read the gap via context so it is configured once on the slider.\nexport const CarouselSlideGapContext = React.createContext<TCarouselSlideGap>(3)\n\ntype CarouselSliderProps = {\n  children?: React.ReactNode\n  className?: string\n  gap?: TCarouselSlideGap\n  overflow?: boolean\n  tabIndex?: number\n}\n\nexport const CarouselSlider = ({\n  children,\n  className,\n  gap = 3,\n  overflow,\n  tabIndex = 0,\n  ...rest\n}: CarouselSliderProps) => {\n  const { emblaRef } = useCarousel()\n\n  return (\n    <div\n      ref={emblaRef}\n      className={cn(\n        'ml-[50%]',\n        '-translate-x-1/2',\n        'cursor-grab',\n        overflow ? 'overflow-visible' : 'overflow-hidden',\n        className\n      )}\n      role=\"listbox\"\n      aria-live=\"polite\"\n      tabIndex={tabIndex}\n      {...rest}\n    >\n      <div className=\"flex\">\n        <CarouselSlideGapContext.Provider value={gap}>\n          {children}\n        </CarouselSlideGapContext.Provider>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,kBAAqD;CAChE,MAAM;CACN,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAGD,IAAa,0BAA0B,QAAM,cAAiC,EAAE;AAUhF,IAAa,kBAAkB,EAC7B,UACA,WACA,MAAM,GACN,UACA,WAAW,GACX,GAAG,WACsB;CACzB,MAAM,EAAE,aAAa,aAAa;AAElC,QACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,YACA,oBACA,eACA,WAAW,qBAAqB,mBAChC,UACD;EACD,MAAK;EACL,aAAU;EACA;EACV,GAAI;YAEJ,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,wBAAwB,UAAzB;IAAkC,OAAO;IACtC;IACgC,CAAA;GAC/B,CAAA;EACF,CAAA"}