@atom-learning/components 11.5.0 → 12.0.0-beta.1

package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts

@@ -1,19 +1,20 @@
 import * as React from 'react';
-declare const StyledDismiss: import("../../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
-    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+declare const StyledDismiss: import("../../..").PolymorphicComponent<({ ref, children, tone, inverse, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<Omit<{
+    colorRole?: ("accent" | "inverse" | "neutral" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inverse" | "neutral">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "colorRole" | "isRounded" | "size">, "colorRole">, "as" | "children" | "hasTooltip" | "href" | "inverse" | "label" | "reloadDocument" | "tone" | "tooltipSide"> & {
+    tone?: "danger" | "neutral" | "success" | "warning";
+    inverse?: boolean;
     as?: React.ElementType;
     children: React.ReactNode;
     href?: string;
     label: string;
     reloadDocument?: boolean;
 } & Omit<import("../../..").OptionalTooltipWrapperProps, "label">) => React.JSX.Element, {
-    emphasis?: ("bold" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold">>) | undefined;
     containerSize?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
 }>;
 type BannerSlimDismissProps = Omit<React.ComponentProps<typeof StyledDismiss>, 'children' | 'onClick' | 'href'>;

package/dist/components/banner/banner-slim/BannerSlimDismiss.js

@@ -9,20 +9,18 @@ import { Close } from "@atom-learning/icons";
 //#region src/components/banner/banner-slim/BannerSlimDismiss.tsx
 var StyledDismiss = styled(ActionIcon, {
 	base: [],
-	variants: {
-		emphasis: { bold: ["text-white!"] },
-		containerSize: {
-			sm: [
-				"absolute",
-				"right-4",
-				"top-4"
-			],
-			md: ["static"]
-		}
-	}
+	variants: { containerSize: {
+		sm: [
+			"absolute",
+			"right-4",
+			"top-4"
+		],
+		md: ["static"]
+	} }
 }, { enableResponsiveVariants: true });
 var BannerSlimDismiss = ({ label = "dismiss", ...rest }) => {
 	const { size, setHasDismiss, emphasis } = useBannerContext();
+	const isBold = emphasis === "bold";
 	React$1.useEffect(() => {
 		setHasDismiss(true);
 		return () => {
@@ -36,9 +34,9 @@ var BannerSlimDismiss = ({ label = "dismiss", ...rest }) => {
 			size: "md",
 			hasTooltip: false,
 			isRounded: true,
-			theme: "neutral",
+			tone: isBold ? void 0 : "neutral",
+			inverse: isBold,
 			containerSize: size,
-			emphasis,
 			...rest,
 			children: /* @__PURE__ */ jsx(Icon, { is: Close })
 		})

package/dist/components/banner/banner-slim/BannerSlimDismiss.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimDismiss.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../Banner.context'\n\nconst StyledDismiss = styled(\n  ActionIcon,\n  {\n    base: [],\n    variants: {\n      emphasis: {\n        bold: ['text-white!']\n      },\n      containerSize: {\n        sm: ['absolute', 'right-4', 'top-4'],\n        md: ['static']\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\ntype BannerSlimDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerSlimDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: BannerSlimDismissProps) => {\n  const { size, setHasDismiss, emphasis } = useBannerContext()\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size=\"md\"\n        hasTooltip={false}\n        isRounded\n        theme=\"neutral\"\n        containerSize={size}\n        emphasis={emphasis as BannerSlimDismissProps['emphasis']}\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerSlimDismiss.displayName = 'BannerSlimDismiss'\n"],"mappings":";;;;;;;;;AASA,IAAM,gBAAgB,OACpB,YACA;CACE,MAAM,CAAC;CACP,UAAU;EACR,UAAU,EACR,MAAM,CAAC,aAAa,EACtB;EACA,eAAe;GACb,IAAI;IAAC;IAAY;IAAW;GAAO;GACnC,IAAI,CAAC,QAAQ;EACf;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAOA,IAAa,qBAAqB,EAChC,QAAQ,WACR,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,eAAe,aAAa,iBAAiB;CAE3D,QAAM,gBAAgB;EACpB,cAAc,IAAI;EAClB,aAAa;GACX,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,OAAO,SAAR;EAAgB,SAAA;YACd,oBAAC,eAAD;GACS;GACP,MAAK;GACL,YAAY;GACZ,WAAA;GACA,OAAM;GACN,eAAe;GACL;GACV,GAAI;aAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACL,CAAA;CACD,CAAA;AAEpB;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"BannerSlimDismiss.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../Banner.context'\n\nconst StyledDismiss = styled(\n  ActionIcon,\n  {\n    base: [],\n    variants: {\n      containerSize: {\n        sm: ['absolute', 'right-4', 'top-4'],\n        md: ['static']\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\ntype BannerSlimDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerSlimDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: BannerSlimDismissProps) => {\n  const { size, setHasDismiss, emphasis } = useBannerContext()\n  const isBold = emphasis === 'bold'\n\n  React.useEffect(() => {\n    setHasDismiss(true)\n    return () => {\n      setHasDismiss(false)\n    }\n  }, [setHasDismiss])\n\n  return (\n    <Banner.Dismiss asChild>\n      <StyledDismiss\n        label={label}\n        size=\"md\"\n        hasTooltip={false}\n        isRounded\n        tone={isBold ? undefined : 'neutral'}\n        inverse={isBold}\n        containerSize={size}\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerSlimDismiss.displayName = 'BannerSlimDismiss'\n"],"mappings":";;;;;;;;;AASA,IAAM,gBAAgB,OACpB,YACA;CACE,MAAM,CAAC;CACP,UAAU,EACR,eAAe;EACb,IAAI;GAAC;GAAY;GAAW;EAAO;EACnC,IAAI,CAAC,QAAQ;CACf,EACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAOA,IAAa,qBAAqB,EAChC,QAAQ,WACR,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,eAAe,aAAa,iBAAiB;CAC3D,MAAM,SAAS,aAAa;CAE5B,QAAM,gBAAgB;EACpB,cAAc,IAAI;EAClB,aAAa;GACX,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,OAAO,SAAR;EAAgB,SAAA;YACd,oBAAC,eAAD;GACS;GACP,MAAK;GACL,YAAY;GACZ,WAAA;GACA,MAAM,SAAS,KAAA,IAAY;GAC3B,SAAS;GACT,eAAe;GACf,GAAI;aAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACL,CAAA;CACD,CAAA;AAEpB;AAEA,kBAAkB,cAAc"}

package/dist/components/banner/banner-slim/BannerSlimText.js

@@ -5,8 +5,13 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/banner-slim/BannerSlimText.tsx
 var StyledText = styled(Text, {
-	base: ["text-(--banner-heading-color)"],
+	base: [],
 	variants: {
+		emphasis: {
+			bold: ["text-on-accent-emphasis"],
+			subtle: ["text-default"],
+			minimal: ["text-default"]
+		},
 		containerSize: {
 			sm: [],
 			md: []
@@ -20,10 +25,11 @@ var StyledText = styled(Text, {
 	}]
 }, { enableResponsiveVariants: true });
 var BannerSlimText = (props) => {
-	const { size, hasDismiss } = useBannerContext();
+	const { size, emphasis, hasDismiss } = useBannerContext();
 	return /* @__PURE__ */ jsx(StyledText, {
 		size: "md",
 		weight: "bold",
+		emphasis,
 		containerSize: size,
 		hasDismiss,
 		noCapsize: true,

package/dist/components/banner/banner-slim/BannerSlimText.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimText.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../Banner.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['text-(--banner-heading-color)'],\n    variants: {\n      containerSize: {\n        sm: [],\n        md: []\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimText = (\n  props: React.ComponentPropsWithoutRef<typeof Text>\n) => {\n  const { size, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size=\"md\"\n      weight=\"bold\"\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      noCapsize\n      {...props}\n    />\n  )\n}\n\nBannerSlimText.displayName = 'BannerSlimText'\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC,+BAA+B;CACtC,UAAU;EACR,eAAe;GACb,IAAI,CAAC;GACL,IAAI,CAAC;EACP;EACA,YAAY,EACV,MAAM,CAAC,EACT;CACF;CACA,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,OAAO;CACjB,CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAa,kBACX,UACG;CACH,MAAM,EAAE,MAAM,eAAe,iBAAiB;CAE9C,OACE,oBAAC,YAAD;EACE,MAAK;EACL,QAAO;EACP,eAAe;EACH;EACZ,WAAA;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"BannerSlimText.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../Banner.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: [],\n    variants: {\n      emphasis: {\n        bold: ['text-on-accent-emphasis'],\n        subtle: ['text-default'],\n        minimal: ['text-default']\n      },\n      containerSize: {\n        sm: [],\n        md: []\n      },\n      hasDismiss: {\n        true: []\n      }\n    },\n    compoundVariants: [\n      {\n        containerSize: 'sm',\n        hasDismiss: true,\n        class: ['mr-10']\n      }\n    ]\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimText = (\n  props: React.ComponentPropsWithoutRef<typeof Text>\n) => {\n  const { size, emphasis, hasDismiss } = useBannerContext()\n\n  return (\n    <StyledText\n      size=\"md\"\n      weight=\"bold\"\n      emphasis={emphasis}\n      containerSize={size}\n      hasDismiss={hasDismiss}\n      noCapsize\n      {...props}\n    />\n  )\n}\n\nBannerSlimText.displayName = 'BannerSlimText'\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC;CACP,UAAU;EACR,UAAU;GACR,MAAM,CAAC,yBAAyB;GAChC,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,cAAc;EAC1B;EACA,eAAe;GACb,IAAI,CAAC;GACL,IAAI,CAAC;EACP;EACA,YAAY,EACV,MAAM,CAAC,EACT;CACF;CACA,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,OAAO;CACjB,CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAa,kBACX,UACG;CACH,MAAM,EAAE,MAAM,UAAU,eAAe,iBAAiB;CAExD,OACE,oBAAC,YAAD;EACE,MAAK;EACL,QAAO;EACG;EACV,eAAe;EACH;EACZ,WAAA;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/button/Button.d.ts

@@ -1,14 +1,18 @@
 import * as React from 'react';
+import type { TColorAccent } from '../../experiments/theme/Theme';
 import { type PolymorphicComponent } from '../../styled';
 import type { Override } from '../../utilities/types';
 export declare const StyledButton: PolymorphicComponent<"button", {
-    theme?: ("danger" | "neutral" | "primary" | "secondary" | "success" | "warning" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "secondary" | "success" | "warning">>) | undefined;
     appearance?: ("outline" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "solid">>) | undefined;
+    inverse?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     size?: ("lg" | "md" | "sm" | "xl" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl">>) | undefined;
     isLoading?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     fullWidth?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 }>;
+type ButtonTone = Extract<TColorAccent, 'success' | 'warning' | 'danger'>;
 type ButtonCustomProps = {
+    /** Unset inherits the accent from the nearest <Theme> or palette. */
+    tone?: ButtonTone;
     children: React.ReactNode;
     href?: string;
     isLoading?: boolean;

package/dist/components/button/Button.js

@@ -28,65 +28,34 @@ var StyledButton = styled("button", {
 		"disabled:opacity-30"
 	],
 	variants: {
-		theme: {
-			primary: [
-				"[--base:var(--color-primary-800)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1000)]"
-			],
-			secondary: [
-				"[--base:var(--color-primary-1000)]",
-				"[--interact:var(--color-primary-1100)]",
-				"[--active:var(--color-primary-1200)]"
-			],
-			success: [
-				"[--base:var(--color-success)]",
-				"[--interact:var(--color-success-mid)]",
-				"[--active:var(--color-success-dark)]"
-			],
-			warning: [
-				"[--base:var(--color-warning)]",
-				"[--interact:var(--color-warning-mid)]",
-				"[--active:var(--color-warning-dark)]",
-				"[--text:var(--color-grey-800)]"
-			],
-			danger: [
-				"[--base:var(--color-danger)]",
-				"[--interact:var(--color-danger-mid)]",
-				"[--active:var(--color-danger-dark)]"
-			],
-			neutral: [
-				"[--base:white]",
-				"[--interact:rgba(255,255,255,0.9)]",
-				"[--active:rgba(255,255,255,0.75)]",
-				"[--text:var(--color-primary-800)]"
-			]
-		},
 		appearance: {
 			solid: [
-				"bg-(--base)",
-				"text-(--text,white)",
+				"bg-accent-solid",
+				"text-on-accent",
 				"disabled:opacity-30",
 				"disabled:cursor-not-allowed",
-				"not-disabled:hover:bg-(--interact)",
-				"not-disabled:hover:text-(--text,white)",
-				"not-disabled:focus:bg-(--interact)",
-				"not-disabled:focus:text-(--text,white)",
-				"not-disabled:active:bg-(--active)"
+				"not-disabled:hover:bg-accent-solid-hover",
+				"not-disabled:focus:bg-accent-solid-hover",
+				"not-disabled:active:bg-accent-solid-active"
 			],
 			outline: [
 				"border",
 				"border-current",
-				"text-(--base)",
+				"text-accent",
 				"disabled:opacity-30",
 				"disabled:cursor-not-allowed",
 				"not-disabled:hover:no-underline",
-				"not-disabled:hover:text-(--interact)",
+				"not-disabled:hover:text-accent-hover",
 				"not-disabled:focus:no-underline",
-				"not-disabled:focus:text-(--interact)",
-				"not-disabled:active:text-(--active)"
+				"not-disabled:focus:text-accent-hover",
+				"not-disabled:active:text-accent-active"
 			]
 		},
+		inverse: { true: [
+			"focus-visible:outline-2",
+			"focus-visible:outline-offset-2",
+			"focus-visible:outline-focus-inverse"
+		] },
 		size: {
 			sm: [
 				"text-sm",
@@ -131,10 +100,33 @@ var StyledButton = styled("button", {
 			false: ["w-max"]
 		}
 	},
+	compoundVariants: [{
+		appearance: "solid",
+		inverse: true,
+		class: [
+			"bg-(--text-color-on-accent-emphasis)",
+			"text-(--background-color-accent-emphasis)",
+			"not-disabled:hover:bg-(--text-color-on-accent-emphasis)",
+			"not-disabled:focus:bg-(--text-color-on-accent-emphasis)",
+			"not-disabled:active:bg-(--text-color-on-accent-emphasis)",
+			"not-disabled:hover:opacity-90",
+			"not-disabled:active:opacity-75"
+		]
+	}, {
+		appearance: "outline",
+		inverse: true,
+		class: [
+			"text-on-accent-emphasis",
+			"not-disabled:hover:text-on-accent-emphasis",
+			"not-disabled:focus:text-on-accent-emphasis",
+			"not-disabled:active:text-on-accent-emphasis",
+			"not-disabled:hover:opacity-90",
+			"not-disabled:active:opacity-75"
+		]
+	}],
 	defaultVariants: {
 		appearance: "solid",
-		size: "md",
-		theme: "primary"
+		size: "md"
 	}
 }, { enableResponsiveVariants: true });
 // @__PURE__ keeps this tree-shakable for consumers importing only
@@ -157,7 +149,7 @@ var WithLoader = ({ size, children }) => /* @__PURE__ */ jsxs(Fragment, { childr
 	size,
 	children
 })] });
-var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, reloadDocument, ...rest }) => {
+var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, reloadDocument, tone, ...rest }) => {
 	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
 	return /* @__PURE__ */ jsx(StyledButton, {
 		as: as || routerLinkProps.as || (href ? "a" : void 0),
@@ -168,6 +160,7 @@ var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled,
 		isLoading,
 		type: !href ? "button" : void 0,
 		disabled,
+		"data-color-accent": tone,
 		...rest,
 		...getExternalAnchorProps(href),
 		ref,

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 { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\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      // On isLoading the children swap (label → Loader) underneath an active\n      // touch; iOS WKWebView's touch-selection heuristic then paints the OS\n      // selection highlight over the loading dots. Desktop UA stylesheets give\n      // <button> user-select:none implicitly, WKWebView does not — so assert it\n      // (harmless on a button, covers every state, not just loading). See #892.\n      'select-none',\n      '[-webkit-touch-callout:none]',\n      '[-webkit-tap-highlight-color:transparent]',\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    enableResponsiveVariants: true\n  }\n)\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// StyledButton from this module.\nconst LoaderContentsWrapper = /* @__PURE__ */ 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    enableResponsiveVariants: 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 ButtonCustomProps = {\n  children: React.ReactNode\n  href?: string\n  isLoading?: boolean\n  reloadDocument?: boolean\n}\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  ButtonCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledButton's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledButtonOwnProps =\n  typeof StyledButton extends PolymorphicComponent<\n    infer _Element extends React.ElementType,\n    infer OwnProps\n  >\n    ? OwnProps\n    : never\n\ntype ButtonOwnProps = Override<StyledButtonOwnProps, ButtonCustomProps>\n\nexport const Button = (({\n  ref,\n  children,\n  as,\n  href,\n  isLoading = false,\n  onClick,\n  disabled,\n  reloadDocument,\n  ...rest\n}: ButtonProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  return (\n    <StyledButton\n      as={as || routerLinkProps.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}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n}) as PolymorphicComponent<'button', ButtonOwnProps>\n"],"mappings":";;;;;;;AAQA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW,EACT,MAAM;GAAC;GAAsB;GAAc;EAAqB,EAClE;EACA,WAAW;GACT,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;CACT;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;;AAIA,IAAM,wBAAwC,uBAC5C,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;CAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,cAAc,EAClB,MACA,eAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,WAAY,CAAA,GAC9B,oBAAC,uBAAD;CAA6B;CAAO;AAAgC,CAAA,CACpE,EAAA,CAAA;AA2BJ,IAAa,WAAW,EACtB,KACA,UACA,IACA,MACA,YAAY,OACZ,SACA,UACA,gBACA,GAAG,WACc;CACjB,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,cAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,OAAO,MAAM,KAAA;EAC9C,GAAK,CAAC,YAAY,CAAC,aAAa;GAAE;GAAM;EAAQ;EACrC;EACX,MAAM,CAAC,OAAO,WAAW,KAAA;EACf;EACV,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;YAEJ,YACC,oBAAC,YAAD;GAAY,MAAM,KAAK;GAAO;EAAqB,CAAA,IAEnD;CAEU,CAAA;AAElB"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TColorAccent } from '../../experiments/theme/Theme'\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\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      // On isLoading the children swap (label → Loader) underneath an active\n      // touch; iOS WKWebView's touch-selection heuristic then paints the OS\n      // selection highlight over the loading dots. Desktop UA stylesheets give\n      // <button> user-select:none implicitly, WKWebView does not — so assert it\n      // (harmless on a button, covers every state, not just loading). See #892.\n      'select-none',\n      '[-webkit-touch-callout:none]',\n      '[-webkit-tap-highlight-color:transparent]',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      appearance: {\n        solid: [\n          'bg-accent-solid',\n          'text-on-accent',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:bg-accent-solid-hover',\n          'not-disabled:focus:bg-accent-solid-hover',\n          'not-disabled:active:bg-accent-solid-active'\n        ],\n        outline: [\n          'border',\n          'border-current',\n          'text-accent',\n          'disabled:opacity-30',\n          'disabled:cursor-not-allowed',\n          'not-disabled:hover:no-underline',\n          'not-disabled:hover:text-accent-hover',\n          'not-disabled:focus:no-underline',\n          'not-disabled:focus:text-accent-hover',\n          'not-disabled:active:text-accent-active'\n        ]\n      },\n      // For buttons on an emphasis fill (banners, toasts): use the fill's own\n      // colours, so it adapts to whichever accent sits behind. The focus ring\n      // uses the fill's text colour, as a primary ring can match the fill.\n      inverse: {\n        true: [\n          'focus-visible:outline-2',\n          'focus-visible:outline-offset-2',\n          'focus-visible:outline-focus-inverse'\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    compoundVariants: [\n      {\n        appearance: 'solid',\n        inverse: true,\n        class: [\n          'bg-(--text-color-on-accent-emphasis)',\n          'text-(--background-color-accent-emphasis)',\n          'not-disabled:hover:bg-(--text-color-on-accent-emphasis)',\n          'not-disabled:focus:bg-(--text-color-on-accent-emphasis)',\n          'not-disabled:active:bg-(--text-color-on-accent-emphasis)',\n          'not-disabled:hover:opacity-90',\n          'not-disabled:active:opacity-75'\n        ]\n      },\n      {\n        appearance: 'outline',\n        inverse: true,\n        class: [\n          'text-on-accent-emphasis',\n          'not-disabled:hover:text-on-accent-emphasis',\n          'not-disabled:focus:text-on-accent-emphasis',\n          'not-disabled:active:text-on-accent-emphasis',\n          'not-disabled:hover:opacity-90',\n          'not-disabled:active:opacity-75'\n        ]\n      }\n    ],\n    defaultVariants: {\n      appearance: 'solid',\n      size: 'md'\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// StyledButton from this module.\nconst LoaderContentsWrapper = /* @__PURE__ */ 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    enableResponsiveVariants: 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\n// Intent, not hue: each tone resolves to a fixed status scale\ntype ButtonTone = Extract<TColorAccent, 'success' | 'warning' | 'danger'>\n\ntype ButtonCustomProps = {\n  /** Unset inherits the accent from the nearest <Theme> or palette. */\n  tone?: ButtonTone\n  children: React.ReactNode\n  href?: string\n  isLoading?: boolean\n  reloadDocument?: boolean\n}\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  ButtonCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledButton's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledButtonOwnProps =\n  typeof StyledButton extends PolymorphicComponent<\n    infer _Element extends React.ElementType,\n    infer OwnProps\n  >\n    ? OwnProps\n    : never\n\ntype ButtonOwnProps = Override<StyledButtonOwnProps, ButtonCustomProps>\n\nexport const Button = (({\n  ref,\n  children,\n  as,\n  href,\n  isLoading = false,\n  onClick,\n  disabled,\n  reloadDocument,\n  tone,\n  ...rest\n}: ButtonProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  return (\n    <StyledButton\n      as={as || routerLinkProps.as || (href ? 'a' : undefined)}\n      {...(!disabled && !isLoading && { href, onClick })}\n      isLoading={isLoading}\n      type={!href ? 'button' : undefined}\n      disabled={disabled}\n      data-color-accent={tone}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref}\n    >\n      {isLoading ? (\n        <WithLoader size={rest.size}>{children}</WithLoader>\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n}) as PolymorphicComponent<'button', ButtonOwnProps>\n"],"mappings":";;;;;;;AASA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EAIA,SAAS,EACP,MAAM;GACJ;GACA;GACA;EACF,EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW,EACT,MAAM;GAAC;GAAsB;GAAc;EAAqB,EAClE;EACA,WAAW;GACT,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,SAAS;EACT,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,GACA;EACE,YAAY;EACZ,SAAS;EACT,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;CACF,CACF;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;CACR;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;;AAIA,IAAM,wBAAwC,uBAC5C,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;CAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,cAAc,EAClB,MACA,eAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,WAAY,CAAA,GAC9B,oBAAC,uBAAD;CAA6B;CAAO;AAAgC,CAAA,CACpE,EAAA,CAAA;AAgCJ,IAAa,WAAW,EACtB,KACA,UACA,IACA,MACA,YAAY,OACZ,SACA,UACA,gBACA,MACA,GAAG,WACc;CACjB,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,cAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,OAAO,MAAM,KAAA;EAC9C,GAAK,CAAC,YAAY,CAAC,aAAa;GAAE;GAAM;EAAQ;EACrC;EACX,MAAM,CAAC,OAAO,WAAW,KAAA;EACf;EACV,qBAAmB;EACnB,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;YAEJ,YACC,oBAAC,YAAD;GAAY,MAAM,KAAK;GAAO;EAAqB,CAAA,IAEnD;CAEU,CAAA;AAElB"}

package/dist/components/calendar/Calendar.js

@@ -12,17 +12,12 @@ import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
 import { useDayzed } from "dayzed";
 //#region src/components/calendar/Calendar.tsx
 var StyledButton = styled(Button, {
-	base: [
-		"text-grey-1000",
-		"p-3",
-		"w-16"
-	],
+	base: ["p-3", "w-16"],
 	variants: { selected: { false: [
-		"disabled:bg-white!",
+		"border-0!",
 		"font-normal",
-		"hover:bg-grey-200!",
-		"hover:text-grey-1000!",
-		"text-grey-1000!"
+		"hover:bg-hover!",
+		"text-default!"
 	] } }
 });
 var offsetWeekdayNames = (weekdayNames, firstDayOfWeek) => {
@@ -63,7 +58,7 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
 				className: "absolute top-0 -right-1 flex",
 				children: [/* @__PURE__ */ jsx(ActionIcon, {
 					label: labels[showYears ? "previousYear" : "previous"],
-					theme: "neutral",
+					tone: "neutral",
 					size: "md",
 					...!showYears && getBackProps({ calendars }),
 					...showYears && { onClick: () => setCurrentYear(currentYear - 16) },
@@ -71,7 +66,7 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
 					children: /* @__PURE__ */ jsx(Icon, { is: ChevronLeft })
 				}), /* @__PURE__ */ jsx(ActionIcon, {
 					label: labels[showYears ? "nextYear" : "next"],
-					theme: "neutral",
+					tone: "neutral",
 					size: "md",
 					...!showYears && getForwardProps({ calendars }),
 					...showYears && { onClick: () => setCurrentYear(currentYear + 16) },
@@ -85,7 +80,7 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
 					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",
+						appearance: isCurrentYear ? "solid" : "outline",
 						onClick: () => handleSetYear(year),
 						selected: isCurrentYear,
 						children: year
@@ -96,9 +91,9 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
 				/* @__PURE__ */ jsx("div", {
 					className: "mb-4 flex h-10 items-center",
 					children: /* @__PURE__ */ jsxs(Button, {
-						theme: "neutral",
+						appearance: "outline",
 						onClick: () => setShowYears(true),
-						className: "text-grey-1000 px-0",
+						className: "text-default border-0 px-0",
 						children: [
 							monthNames[month],
 							" ",

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 { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\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, ...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: dateProp,\n  minDate,\n  maxDate,\n  setYear,\n  ...rest\n}: CalendarProps) => {\n  // `new Date()` as a default parameter runs on every render (impure render,\n  // and a server/client hydration divergence near midnight) — capture the\n  // fallback once instead.\n  const [fallbackDate] = React.useState(() => new Date())\n  const date = dateProp ?? fallbackDate\n\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    // Copy before setFullYear — mutating the `date` prop in place changes the\n    // caller's object.\n    const newDate = new Date(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    ...rest\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            // Out-of-range slots render as empty placeholders in a fixed 16-cell\n            // grid; several share the same `0` value, so the slot index is their\n            // only stable identity.\n            // eslint-disable-next-line react/no-array-index-key\n            if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n            return (\n              <StyledButton\n                key={year}\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 { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n  base: ['p-3', 'w-16'],\n  variants: {\n    selected: {\n      false: ['border-0!', 'font-normal', 'hover:bg-hover!', 'text-default!']\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, ...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: dateProp,\n  minDate,\n  maxDate,\n  setYear,\n  ...rest\n}: CalendarProps) => {\n  // `new Date()` as a default parameter runs on every render (impure render,\n  // and a server/client hydration divergence near midnight) — capture the\n  // fallback once instead.\n  const [fallbackDate] = React.useState(() => new Date())\n  const date = dateProp ?? fallbackDate\n\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    // Copy before setFullYear — mutating the `date` prop in place changes the\n    // caller's object.\n    const newDate = new Date(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    ...rest\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          tone=\"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          tone=\"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            // Out-of-range slots render as empty placeholders in a fixed 16-cell\n            // grid; several share the same `0` value, so the slot index is their\n            // only stable identity.\n            // eslint-disable-next-line react/no-array-index-key\n            if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n            return (\n              <StyledButton\n                key={year}\n                appearance={isCurrentYear ? 'solid' : 'outline'}\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                appearance=\"outline\"\n                onClick={() => setShowYears(true)}\n                className=\"text-default border-0 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.js

@@ -5,7 +5,7 @@ var Day = styled("button", {
 		"bg-transparent",
 		"border-none",
 		"rounded-full",
-		"text-grey-900",
+		"text-default",
 		"cursor-pointer",
 		"font-body",
 		"text-sm",
@@ -13,24 +13,24 @@ var Day = styled("button", {
 		"p-0",
 		"transition-all",
 		"duration-75",
-		"hover:bg-grey-200",
-		"active:bg-primary-800",
-		"active:text-white",
-		"focus:outline-2",
-		"focus:outline-offset-2",
-		"focus:outline-primary-800",
-		"focus:outline-solid",
-		"disabled:cursor-default",
+		"hover:bg-hover",
+		"active:bg-accent-solid",
+		"active:text-on-accent",
+		"focus-visible:outline-2",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-focus",
+		"focus-visible:outline-solid",
+		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
 	variants: {
 		isSelected: { true: [
-			"bg-primary-800",
-			"hover:bg-primary-800",
-			"text-white"
+			"bg-accent-solid",
+			"hover:bg-accent-solid",
+			"text-on-accent"
 		] },
-		isToday: { true: ["bg-grey-200"] },
-		isOutsideMonth: { true: ["text-grey-600"] }
+		isToday: { true: ["bg-hover"] },
+		isOutsideMonth: { true: ["text-subtlest"] }
 	}
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Day.js","names":[],"sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const Day = styled('button', {\n  base: [\n    'bg-transparent',\n    'border-none',\n    'rounded-full',\n    'text-grey-900',\n    'cursor-pointer',\n    'font-body',\n    'text-sm',\n    'size-8',\n    'p-0',\n    'transition-all',\n    'duration-75',\n    'hover:bg-grey-200',\n    'active:bg-primary-800',\n    'active:text-white',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'disabled:cursor-default',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-800', 'hover:bg-primary-800', 'text-white']\n    },\n    isToday: {\n      true: ['bg-grey-200']\n    },\n    isOutsideMonth: {\n      true: ['text-grey-600']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,MAAM,OAAO,UAAU;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY,EACV,MAAM;GAAC;GAAkB;GAAwB;EAAY,EAC/D;EACA,SAAS,EACP,MAAM,CAAC,aAAa,EACtB;EACA,gBAAgB,EACd,MAAM,CAAC,eAAe,EACxB;CACF;AACF,CAAC"}
+{"version":3,"file":"Day.js","names":[],"sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const Day = styled('button', {\n  base: [\n    'bg-transparent',\n    'border-none',\n    'rounded-full',\n    'text-default',\n    'cursor-pointer',\n    'font-body',\n    'text-sm',\n    'size-8',\n    'p-0',\n    'transition-all',\n    'duration-75',\n    'hover:bg-hover',\n    'active:bg-accent-solid',\n    'active:text-on-accent',\n    'focus-visible:outline-2',\n    'focus-visible:outline-offset-2',\n    'focus-visible:outline-focus',\n    'focus-visible:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isSelected: {\n      true: ['bg-accent-solid', 'hover:bg-accent-solid', 'text-on-accent']\n    },\n    isToday: {\n      true: ['bg-hover']\n    },\n    isOutsideMonth: {\n      true: ['text-subtlest']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,MAAM,OAAO,UAAU;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY,EACV,MAAM;GAAC;GAAmB;GAAyB;EAAgB,EACrE;EACA,SAAS,EACP,MAAM,CAAC,UAAU,EACnB;EACA,gBAAgB,EACd,MAAM,CAAC,eAAe,EACxB;CACF;AACF,CAAC"}

package/dist/components/carousel/CarouselArrows.js

@@ -7,7 +7,7 @@ import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
 //#region src/components/carousel/CarouselArrows.tsx
 var ArrowButton = /* @__PURE__ */ styled("button", { base: [
 	"items-center",
-	"text-primary-800",
+	"text-accent",
 	"cursor-pointer",
 	"flex",
 	"justify-center",
@@ -17,9 +17,9 @@ var ArrowButton = /* @__PURE__ */ styled("button", { base: [
 	"transition-colors",
 	"duration-150",
 	"ease-in-out",
-	"hover:text-primary-900",
-	"active:text-primary-1000",
-	"disabled:text-grey-200",
+	"hover:text-accent-hover",
+	"active:text-accent-active",
+	"disabled:opacity-30",
 	"disabled:cursor-not-allowed"
 ] });
 var CarouselArrowPrevious = (props) => {

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 { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useCarousel } from './Carousel'\n\nconst ArrowButton = /* @__PURE__ */ 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":";;;;;;;AAOA,IAAM,cAA8B,uBAAO,UAAU,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,yBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,YAAY;CAElD,OACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;CACb,CAAA;AAEjB;AAEA,IAAa,qBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,YAAY;CAElD,OACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;CACd,CAAA;AAEjB"}
+{"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 { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useCarousel } from './Carousel'\n\nconst ArrowButton = /* @__PURE__ */ styled('button', {\n  base: [\n    'items-center',\n    'text-accent',\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-accent-hover',\n    'active:text-accent-active',\n    'disabled:opacity-30',\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":";;;;;;;AAOA,IAAM,cAA8B,uBAAO,UAAU,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,yBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,YAAY;CAElD,OACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;CACb,CAAA;AAEjB;AAEA,IAAa,qBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,YAAY;CAElD,OACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;CACd,CAAA;AAEjB"}

package/dist/components/carousel/CarouselPagination.js

@@ -5,18 +5,22 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/carousel/CarouselPagination.tsx
 var Dot = styled("button", { base: [
-	"bg-grey-600",
+	"bg-neutral-solid",
 	"cursor-pointer",
 	"duration-100",
 	"ease-in",
-	"focus:bg-primary-900",
-	"hover:bg-primary-900",
+	"focus:bg-accent-solid-hover",
+	"focus-visible:outline-2",
+	"focus-visible:outline-offset-2",
+	"focus-visible:outline-solid",
+	"focus-visible:outline-focus",
+	"hover:bg-accent-solid-hover",
 	"mx-1",
 	"p-1",
 	"rounded-full",
 	"size-3",
 	"transition-all",
-	"disabled:bg-primary-800",
+	"disabled:bg-accent-solid",
 	"disabled:cursor-default"
 ] });
 var CarouselPagination = ({ className, ...rest }) => {

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 { styled, cn } from '../../styled'\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":";;;;;;AAKA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,YAAY;CAE7D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,OAAO,IAAI,GAAG,MAAM,CAAC;CAEnE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,SAAS;EAAG,GAAI;YAC1D,KAAK,KAAK,UACT,oBAAC,KAAD;GAEE,MAAK;GACL,eAAe,SAAS,KAAK;GAC7B,UAAU,UAAU;GACpB,cAAW;EACZ,GALM,KAKN,CACF;CACE,CAAA;AAET"}
+{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCarousel } from './Carousel'\n\nconst Dot = styled('button', {\n  base: [\n    'bg-neutral-solid',\n    'cursor-pointer',\n    'duration-100',\n    'ease-in',\n    'focus:bg-accent-solid-hover',\n    'focus-visible:outline-2',\n    'focus-visible:outline-offset-2',\n    'focus-visible:outline-solid',\n    'focus-visible:outline-focus',\n    'hover:bg-accent-solid-hover',\n    'mx-1',\n    'p-1',\n    'rounded-full',\n    'size-3',\n    'transition-all',\n    'disabled:bg-accent-solid',\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":";;;;;;AAKA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,YAAY;CAE7D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,OAAO,IAAI,GAAG,MAAM,CAAC;CAEnE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,SAAS;EAAG,GAAI;YAC1D,KAAK,KAAK,UACT,oBAAC,KAAD;GAEE,MAAK;GACL,eAAe,SAAS,KAAK;GAC7B,UAAU,UAAU;GACpB,cAAW;EACZ,GALM,KAKN,CACF;CACE,CAAA;AAET"}