@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

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

@@ -1,34 +1,50 @@
-import { styled as e } from "../../../styled.js";
-import { useBannerContext as t } from "../BannerContext.js";
-import { BannerContainer as n } from "../BannerContainer.js";
-import r from "clsx";
-import * as i from "react";
+import { styled } from "../../../styled.js";
+import { useBannerContext } from "../BannerContext.js";
+import { BannerContainer } from "../BannerContainer.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/banner/banner-slim/BannerSlimContainer.tsx
-var a = {
+var toDirection = {
 	sm: "flex-col",
 	md: "flex-row"
-}, o = {
+};
+var toAlign = {
 	sm: "items-start",
 	md: "items-center"
-}, s = {
+};
+var toWrap = {
 	sm: "flex-wrap",
 	md: "flex-nowrap"
-}, c = e(n, {
+};
+var StyledBannerSlimContainer = styled(BannerContainer, {
 	base: ["p-4"],
 	variants: { sizeWorkaround: {
 		sm: [],
 		md: ["px-6"]
 	} }
-}, { enabledResponsiveVariants: !0 }), l = (e) => {
-	let { size: n } = t(), l = i.useMemo(() => typeof n == "string" ? a[n] : "flex-col md:flex-row", [n]), u = i.useMemo(() => typeof n == "string" ? o[n] : "items-start md:items-center", [n]), d = i.useMemo(() => typeof n == "string" ? s[n] : "flex-wrap md:flex-nowrap", [n]);
-	return /* @__PURE__ */ i.createElement(c, {
-		sizeWorkaround: n,
-		className: r(l, u, "gap-4", d, e.className),
-		...e
+}, { enabledResponsiveVariants: true });
+var BannerSlimContainer = (props) => {
+	const { size } = useBannerContext();
+	const direction = React$1.useMemo(() => {
+		if (typeof size === "string") return toDirection[size];
+		return "flex-col md:flex-row";
+	}, [size]);
+	const align = React$1.useMemo(() => {
+		if (typeof size === "string") return toAlign[size];
+		return "items-start md:items-center";
+	}, [size]);
+	const wrap = React$1.useMemo(() => {
+		if (typeof size === "string") return toWrap[size];
+		return "flex-wrap md:flex-nowrap";
+	}, [size]);
+	return /* @__PURE__ */ React$1.createElement(StyledBannerSlimContainer, {
+		sizeWorkaround: size,
+		className: clsx(direction, align, "gap-4", wrap, props.className),
+		...props
 	});
 };
-l.displayName = "BannerSlimContainer";
+BannerSlimContainer.displayName = "BannerSlimContainer";
 //#endregion
-export { l as BannerSlimContainer };
+export { BannerSlimContainer };
 
 //# sourceMappingURL=BannerSlimContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nconst toAlign = {\n  sm: 'items-start',\n  md: 'items-center'\n}\n\nconst toWrap = {\n  sm: 'flex-wrap',\n  md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n  BannerContainer,\n  {\n    base: ['p-4'],\n    variants: {\n      sizeWorkaround: {\n        sm: [],\n        md: ['px-6']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TBannerSlimContainerProps = React.ComponentProps<\n  typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = (\n  props: TBannerSlimContainerProps\n): JSX.Element => {\n  const { size } = useBannerContext()\n\n  const direction = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toDirection[size]\n    }\n    return 'flex-col md:flex-row'\n  }, [size])\n\n  const align = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toAlign[size]\n    }\n    return 'items-start md:items-center'\n  }, [size])\n\n  const wrap = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toWrap[size]\n    }\n    return 'flex-wrap md:flex-nowrap'\n  }, [size])\n\n  return (\n    <StyledBannerSlimContainer\n      sizeWorkaround={size}\n      className={clsx(direction, align, 'gap-4', wrap, props.className)}\n      {...props}\n    />\n  )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;;AAQA,IAAM,IAAc;CAClB,IAAI;CACJ,IAAI;CACL,EAEK,IAAU;CACd,IAAI;CACJ,IAAI;CACL,EAEK,IAAS;CACb,IAAI;CACJ,IAAI;CACL,EAEK,IAA4B,EAChC,GACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU,EACR,gBAAgB;EACd,IAAI,EAAE;EACN,IAAI,CAAC,OAAO;EACb,EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAMY,KACX,MACgB;CAChB,IAAM,EAAE,YAAS,GAAkB,EAE7B,IAAY,EAAM,cAClB,OAAO,KAAS,WACX,EAAY,KAEd,wBACN,CAAC,EAAK,CAAC,EAEJ,IAAQ,EAAM,cACd,OAAO,KAAS,WACX,EAAQ,KAEV,+BACN,CAAC,EAAK,CAAC,EAEJ,IAAO,EAAM,cACb,OAAO,KAAS,WACX,EAAO,KAET,4BACN,CAAC,EAAK,CAAC;AAEV,QACE,kBAAA,cAAC,GAAD;EACE,gBAAgB;EAChB,WAAW,EAAK,GAAW,GAAO,SAAS,GAAM,EAAM,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,EAAoB,cAAc"}
+{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n  sm: 'flex-col',\n  md: 'flex-row'\n}\n\nconst toAlign = {\n  sm: 'items-start',\n  md: 'items-center'\n}\n\nconst toWrap = {\n  sm: 'flex-wrap',\n  md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n  BannerContainer,\n  {\n    base: ['p-4'],\n    variants: {\n      sizeWorkaround: {\n        sm: [],\n        md: ['px-6']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TBannerSlimContainerProps = React.ComponentProps<\n  typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = (\n  props: TBannerSlimContainerProps\n): JSX.Element => {\n  const { size } = useBannerContext()\n\n  const direction = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toDirection[size]\n    }\n    return 'flex-col md:flex-row'\n  }, [size])\n\n  const align = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toAlign[size]\n    }\n    return 'items-start md:items-center'\n  }, [size])\n\n  const wrap = React.useMemo(() => {\n    if (typeof size === 'string') {\n      return toWrap[size]\n    }\n    return 'flex-wrap md:flex-nowrap'\n  }, [size])\n\n  return (\n    <StyledBannerSlimContainer\n      sizeWorkaround={size}\n      className={clsx(direction, align, 'gap-4', wrap, props.className)}\n      {...props}\n    />\n  )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;;AAQA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACL;AAED,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACL;AAED,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;CACL;AAED,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU,EACR,gBAAgB;EACd,IAAI,EAAE;EACN,IAAI,CAAC,OAAO;EACb,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAMD,IAAa,uBACX,UACgB;CAChB,MAAM,EAAE,SAAS,kBAAkB;CAEnC,MAAM,YAAY,QAAM,cAAc;AACpC,MAAI,OAAO,SAAS,SAClB,QAAO,YAAY;AAErB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,QAAM,cAAc;AAChC,MAAI,OAAO,SAAS,SAClB,QAAO,QAAQ;AAEjB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,OAAO,QAAM,cAAc;AAC/B,MAAI,OAAO,SAAS,SAClB,QAAO,OAAO;AAEhB,SAAO;IACN,CAAC,KAAK,CAAC;AAEV,QACE,wBAAA,cAAC,2BAAD;EACE,gBAAgB;EAChB,WAAW,KAAK,WAAW,OAAO,SAAS,MAAM,MAAM,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,oBAAoB,cAAc"}

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

@@ -1,13 +1,13 @@
-import { styled as e } from "../../../styled.js";
+import { styled } from "../../../styled.js";
 //#region src/components/banner/banner-slim/BannerSlimContent.tsx
-var t = e("div", { base: [
+var BannerSlimContent = styled("div", { base: [
 	"w-full",
 	"flex",
 	"items-center",
 	"gap-4"
 ] });
-t.displayName = "BannerSlimContent";
+BannerSlimContent.displayName = "BannerSlimContent";
 //#endregion
-export { t as BannerSlimContent };
+export { BannerSlimContent };
 
 //# sourceMappingURL=BannerSlimContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimContent.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContent.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const BannerSlimContent = styled('div', {\n  base: ['w-full', 'flex', 'items-center', 'gap-4']\n})\n\nBannerSlimContent.displayName = 'BannerSlimContent'\n"],"mappings":";;AAEA,IAAa,IAAoB,EAAO,OAAO,EAC7C,MAAM;CAAC;CAAU;CAAQ;CAAgB;CAAQ,EAClD,CAAC;AAEF,EAAkB,cAAc"}
+{"version":3,"file":"BannerSlimContent.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContent.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const BannerSlimContent = styled('div', {\n  base: ['w-full', 'flex', 'items-center', 'gap-4']\n})\n\nBannerSlimContent.displayName = 'BannerSlimContent'\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO,EAC7C,MAAM;CAAC;CAAU;CAAQ;CAAgB;CAAQ,EAClD,CAAC;AAEF,kBAAkB,cAAc"}

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

@@ -1,12 +1,12 @@
-import { styled as e } from "../../../styled.js";
-import { Icon as t } from "../../icon/Icon.js";
-import { ActionIcon as n } from "../../action-icon/ActionIcon.js";
-import { useBannerContext as r } from "../BannerContext.js";
-import { Banner as i } from "../Banner.js";
-import * as a from "react";
-import { Close as o } from "@atom-learning/icons";
+import { styled } from "../../../styled.js";
+import { Icon } from "../../icon/Icon.js";
+import { ActionIcon } from "../../action-icon/ActionIcon.js";
+import { useBannerContext } from "../BannerContext.js";
+import { Banner } from "../Banner.js";
+import * as React$1 from "react";
+import { Close } from "@atom-learning/icons";
 //#region src/components/banner/banner-slim/BannerSlimDismiss.tsx
-var s = e(n, {
+var StyledDismiss = styled(ActionIcon, {
 	base: [],
 	variants: {
 		emphasis: { bold: ["text-white!"] },
@@ -19,23 +19,28 @@ var s = e(n, {
 			md: ["static"]
 		}
 	}
-}, { enabledResponsiveVariants: !0 }), c = ({ label: e = "dismiss", ...n }) => {
-	let { size: c, setHasDismiss: l, emphasis: u } = r();
-	return a.useEffect(() => (l(!0), () => {
-		l(!1);
-	}), [l]), /* @__PURE__ */ a.createElement(i.Dismiss, { asChild: !0 }, /* @__PURE__ */ a.createElement(s, {
-		label: e,
+}, { enabledResponsiveVariants: true });
+var BannerSlimDismiss = ({ label = "dismiss", ...rest }) => {
+	const { size, setHasDismiss, emphasis } = useBannerContext();
+	React$1.useEffect(() => {
+		setHasDismiss(true);
+		return () => {
+			setHasDismiss(false);
+		};
+	}, [setHasDismiss]);
+	return /* @__PURE__ */ React$1.createElement(Banner.Dismiss, { asChild: true }, /* @__PURE__ */ React$1.createElement(StyledDismiss, {
+		label,
 		size: "md",
-		hasTooltip: !1,
-		isRounded: !0,
+		hasTooltip: false,
+		isRounded: true,
 		theme: "neutral",
-		containerSize: c,
-		emphasis: u,
-		...n
-	}, /* @__PURE__ */ a.createElement(t, { is: o })));
+		containerSize: size,
+		emphasis,
+		...rest
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })));
 };
-c.displayName = "BannerSlimDismiss";
+BannerSlimDismiss.displayName = "BannerSlimDismiss";
 //#endregion
-export { c as BannerSlimDismiss };
+export { BannerSlimDismiss };
 
 //# sourceMappingURL=BannerSlimDismiss.js.map

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'\n\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../BannerContext'\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    enabledResponsiveVariants: true\n  }\n)\n\ntype TBannerSlimDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerSlimDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: TBannerSlimDismissProps): JSX.Element => {\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 TBannerSlimDismissProps['emphasis']}\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerSlimDismiss.displayName = 'BannerSlimDismiss'\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAgB,EACpB,GACA;CACE,MAAM,EAAE;CACR,UAAU;EACR,UAAU,EACR,MAAM,CAAC,cAAc,EACtB;EACD,eAAe;GACb,IAAI;IAAC;IAAY;IAAW;IAAQ;GACpC,IAAI,CAAC,SAAS;GACf;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAOY,KAAqB,EAChC,WAAQ,WACR,GAAG,QACuC;CAC1C,IAAM,EAAE,SAAM,kBAAe,gBAAa,GAAkB;AAS5D,QAPA,EAAM,iBACJ,EAAc,GAAK,QACN;AACX,IAAc,GAAM;KAErB,CAAC,EAAc,CAAC,EAGjB,kBAAA,cAAC,EAAO,SAAR,EAAgB,SAAA,IAaC,EAZf,kBAAA,cAAC,GAAD;EACS;EACP,MAAK;EACL,YAAY;EACZ,WAAA;EACA,OAAM;EACN,eAAe;EACL;EACV,GAAI;EAGU,EADd,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAS,CAAA,CACL,CACD;;AAIrB,EAAkB,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'\n\nimport { ActionIcon } from '../../action-icon/ActionIcon'\nimport { Icon } from '../../icon/Icon'\nimport { Banner } from '../Banner'\nimport { useBannerContext } from '../BannerContext'\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    enabledResponsiveVariants: true\n  }\n)\n\ntype TBannerSlimDismissProps = Omit<\n  React.ComponentProps<typeof StyledDismiss>,\n  'children' | 'onClick' | 'href'\n>\n\nexport const BannerSlimDismiss = ({\n  label = 'dismiss',\n  ...rest\n}: TBannerSlimDismissProps): JSX.Element => {\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 TBannerSlimDismissProps['emphasis']}\n        {...rest}\n      >\n        <Icon is={Close} />\n      </StyledDismiss>\n    </Banner.Dismiss>\n  )\n}\n\nBannerSlimDismiss.displayName = 'BannerSlimDismiss'\n"],"mappings":";;;;;;;;AAUA,IAAM,gBAAgB,OACpB,YACA;CACE,MAAM,EAAE;CACR,UAAU;EACR,UAAU,EACR,MAAM,CAAC,cAAc,EACtB;EACD,eAAe;GACb,IAAI;IAAC;IAAY;IAAW;IAAQ;GACpC,IAAI,CAAC,SAAS;GACf;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAOD,IAAa,qBAAqB,EAChC,QAAQ,WACR,GAAG,WACuC;CAC1C,MAAM,EAAE,MAAM,eAAe,aAAa,kBAAkB;AAE5D,SAAM,gBAAgB;AACpB,gBAAc,KAAK;AACnB,eAAa;AACX,iBAAc,MAAM;;IAErB,CAAC,cAAc,CAAC;AAEnB,QACE,wBAAA,cAAC,OAAO,SAAR,EAAgB,SAAA,MAaC,EAZf,wBAAA,cAAC,eAAD;EACS;EACP,MAAK;EACL,YAAY;EACZ,WAAA;EACA,OAAM;EACN,eAAe;EACL;EACV,GAAI;EAGU,EADd,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACL,CACD;;AAIrB,kBAAkB,cAAc"}

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

@@ -1,9 +1,9 @@
-import { styled as e } from "../../../styled.js";
-import { Image as t } from "../../image/Image.js";
-import { useBannerContext as n } from "../BannerContext.js";
-import * as r from "react";
+import { styled } from "../../../styled.js";
+import { Image } from "../../image/Image.js";
+import { useBannerContext } from "../BannerContext.js";
+import * as React$1 from "react";
 //#region src/components/banner/banner-slim/BannerSlimImage.tsx
-var i = e("div", {
+var Container = styled("div", {
 	base: [
 		"overflow-hidden",
 		"rounded-full",
@@ -14,16 +14,18 @@ var i = e("div", {
 		sm: ["size-10"],
 		md: ["size-12"]
 	} }
-}, { enabledResponsiveVariants: !0 }), a = e(t, { base: [
+}, { enabledResponsiveVariants: true });
+var StyledImage = styled(Image, { base: [
 	"max-w-none",
 	"size-full",
 	"object-cover"
-] }), o = (e) => {
-	let { size: t } = n();
-	return /* @__PURE__ */ r.createElement(i, { size: t }, /* @__PURE__ */ r.createElement(a, e));
+] });
+var BannerSlimImage = (props) => {
+	const { size } = useBannerContext();
+	return /* @__PURE__ */ React$1.createElement(Container, { size }, /* @__PURE__ */ React$1.createElement(StyledImage, props));
 };
-o.displayName = "BannerSlimImage";
+BannerSlimImage.displayName = "BannerSlimImage";
 //#endregion
-export { o as BannerSlimImage };
+export { BannerSlimImage };
 
 //# sourceMappingURL=BannerSlimImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BannerSlimImage.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../../image/Image'\nimport { useBannerContext } from '../BannerContext'\n\nconst Container = styled(\n  'div',\n  {\n    base: ['overflow-hidden', 'rounded-full', 'self-start', 'shrink-0'],\n    variants: {\n      size: {\n        sm: ['size-10'],\n        md: ['size-12']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst StyledImage = styled(Image, {\n  base: ['max-w-none', 'size-full', 'object-cover']\n})\n\nexport const BannerSlimImage = (props: React.ComponentProps<typeof Image>) => {\n  const { size } = useBannerContext()\n\n  return (\n    <Container size={size}>\n      <StyledImage {...props} />\n    </Container>\n  )\n}\n\nBannerSlimImage.displayName = 'BannerSlimImage'\n"],"mappings":";;;;;AAOA,IAAM,IAAY,EAChB,OACA;CACE,MAAM;EAAC;EAAmB;EAAgB;EAAc;EAAW;CACnE,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EAChB,EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAEK,IAAc,EAAO,GAAO,EAChC,MAAM;CAAC;CAAc;CAAa;CAAe,EAClD,CAAC,EAEW,KAAmB,MAA8C;CAC5E,IAAM,EAAE,YAAS,GAAkB;AAEnC,QACE,kBAAA,cAAC,GAAD,EAAiB,SAEL,EADV,kBAAA,cAAC,GAAgB,EAAS,CAChB;;AAIhB,EAAgB,cAAc"}
+{"version":3,"file":"BannerSlimImage.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../../image/Image'\nimport { useBannerContext } from '../BannerContext'\n\nconst Container = styled(\n  'div',\n  {\n    base: ['overflow-hidden', 'rounded-full', 'self-start', 'shrink-0'],\n    variants: {\n      size: {\n        sm: ['size-10'],\n        md: ['size-12']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst StyledImage = styled(Image, {\n  base: ['max-w-none', 'size-full', 'object-cover']\n})\n\nexport const BannerSlimImage = (props: React.ComponentProps<typeof Image>) => {\n  const { size } = useBannerContext()\n\n  return (\n    <Container size={size}>\n      <StyledImage {...props} />\n    </Container>\n  )\n}\n\nBannerSlimImage.displayName = 'BannerSlimImage'\n"],"mappings":";;;;;AAOA,IAAM,YAAY,OAChB,OACA;CACE,MAAM;EAAC;EAAmB;EAAgB;EAAc;EAAW;CACnE,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EAChB,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAa;CAAe,EAClD,CAAC;AAEF,IAAa,mBAAmB,UAA8C;CAC5E,MAAM,EAAE,SAAS,kBAAkB;AAEnC,QACE,wBAAA,cAAC,WAAD,EAAiB,MAEL,EADV,wBAAA,cAAC,aAAgB,MAAS,CAChB;;AAIhB,gBAAgB,cAAc"}

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

@@ -1,9 +1,9 @@
-import { styled as e } from "../../../styled.js";
-import { Text as t } from "../../text/Text.js";
-import { useBannerContext as n } from "../BannerContext.js";
-import * as r from "react";
+import { styled } from "../../../styled.js";
+import { Text } from "../../text/Text.js";
+import { useBannerContext } from "../BannerContext.js";
+import * as React$1 from "react";
 //#region src/components/banner/banner-slim/BannerSlimText.tsx
-var i = e(t, {
+var StyledText = styled(Text, {
 	base: ["text-(--banner-heading-color)"],
 	variants: {
 		containerSize: {
@@ -14,22 +14,23 @@ var i = e(t, {
 	},
 	compoundVariants: [{
 		containerSize: "sm",
-		hasDismiss: !0,
+		hasDismiss: true,
 		class: ["mr-10"]
 	}]
-}, { enabledResponsiveVariants: !0 }), a = (e) => {
-	let { size: t, hasDismiss: a } = n();
-	return /* @__PURE__ */ r.createElement(i, {
+}, { enabledResponsiveVariants: true });
+var BannerSlimText = (props) => {
+	const { size, hasDismiss } = useBannerContext();
+	return /* @__PURE__ */ React$1.createElement(StyledText, {
 		size: "md",
 		weight: "bold",
-		containerSize: t,
-		hasDismiss: a,
-		noCapsize: !0,
-		...e
+		containerSize: size,
+		hasDismiss,
+		noCapsize: true,
+		...props
 	});
 };
-a.displayName = "BannerSlimText";
+BannerSlimText.displayName = "BannerSlimText";
 //#endregion
-export { a as BannerSlimText };
+export { BannerSlimText };
 
 //# sourceMappingURL=BannerSlimText.js.map

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'\n\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../BannerContext'\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    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimText = (props: React.ComponentProps<typeof Text>) => {\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":";;;;;AAOA,IAAM,IAAa,EACjB,GACA;CACE,MAAM,CAAC,gCAAgC;CACvC,UAAU;EACR,eAAe;GACb,IAAI,EAAE;GACN,IAAI,EAAE;GACP;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACF;CACD,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,QAAQ;EACjB,CACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAEY,KAAkB,MAA6C;CAC1E,IAAM,EAAE,SAAM,kBAAe,GAAkB;AAE/C,QACE,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,QAAO;EACP,eAAe;EACH;EACZ,WAAA;EACA,GAAI;EACJ,CAAA;;AAIN,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'\n\nimport { Text } from '../../text/Text'\nimport { useBannerContext } from '../BannerContext'\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    enabledResponsiveVariants: true\n  }\n)\n\nexport const BannerSlimText = (props: React.ComponentProps<typeof Text>) => {\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":";;;;;AAOA,IAAM,aAAa,OACjB,MACA;CACE,MAAM,CAAC,gCAAgC;CACvC,UAAU;EACR,eAAe;GACb,IAAI,EAAE;GACN,IAAI,EAAE;GACP;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACF;CACD,kBAAkB,CAChB;EACE,eAAe;EACf,YAAY;EACZ,OAAO,CAAC,QAAQ;EACjB,CACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAa,kBAAkB,UAA6C;CAC1E,MAAM,EAAE,MAAM,eAAe,kBAAkB;AAE/C,QACE,wBAAA,cAAC,YAAD;EACE,MAAK;EACL,QAAO;EACP,eAAe;EACH;EACZ,WAAA;EACA,GAAI;EACJ,CAAA;;AAIN,eAAe,cAAc"}

package/dist/components/box/Box.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/box/Box.tsx
-var t = e("div", { base: [] });
-t.displayName = "Box";
+var Box = styled("div", { base: [] });
+Box.displayName = "Box";
 //#endregion
-export { t as Box };
+export { Box };
 
 //# sourceMappingURL=Box.js.map

package/dist/components/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/box/Box.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Box = styled('div', {\n  base: []\n})\n\nBox.displayName = 'Box'\n"],"mappings":";;AAEA,IAAa,IAAM,EAAO,OAAO,EAC/B,MAAM,EAAE,EACT,CAAC;AAEF,EAAI,cAAc"}
+{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/box/Box.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Box = styled('div', {\n  base: []\n})\n\nBox.displayName = 'Box'\n"],"mappings":";;AAEA,IAAa,MAAM,OAAO,OAAO,EAC/B,MAAM,EAAE,EACT,CAAC;AAEF,IAAI,cAAc"}

package/dist/components/button/Button.js

@@ -1,9 +1,9 @@
-import { styled as e } from "../../styled.js";
-import { getExternalAnchorProps as t } from "../../utilities/uri/index.js";
-import { Loader as n } from "../loader/Loader.js";
-import * as r from "react";
+import { styled } from "../../styled.js";
+import { getExternalAnchorProps } from "../../utilities/uri/index.js";
+import { Loader } from "../loader/Loader.js";
+import * as React$1 from "react";
 //#region src/components/button/Button.tsx
-var i = e("button", {
+var StyledButton = styled("button", {
 	base: [
 		"items-center",
 		"bg-[unset]",
@@ -127,7 +127,8 @@ var i = e("button", {
 		size: "md",
 		theme: "primary"
 	}
-}, { enabledResponsiveVariants: !0 }), a = e("span", {
+}, { enabledResponsiveVariants: true });
+var LoaderContentsWrapper = styled("span", {
 	base: [
 		"items-center",
 		"flex",
@@ -141,21 +142,23 @@ var i = e("button", {
 		xl: ["gap-3"]
 	} },
 	defaultVariants: { size: "md" }
-}, { enabledResponsiveVariants: !0 }), o = ({ size: e, children: t }) => /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(n, { className: "absolute" }), /* @__PURE__ */ r.createElement(a, { size: e }, t)), s = r.forwardRef(({ children: e, as: n, href: a, isLoading: s = !1, onClick: c, disabled: l, ...u }, d) => /* @__PURE__ */ r.createElement(i, {
-	as: n || (a ? "a" : void 0),
-	...!l && !s && {
-		href: a,
-		onClick: c
+}, { 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, {
+	as: as || (href ? "a" : void 0),
+	...!disabled && !isLoading && {
+		href,
+		onClick
 	},
-	isLoading: s,
-	type: a ? void 0 : "button",
-	disabled: l,
-	...u,
-	...t(a),
-	ref: d
-}, s ? /* @__PURE__ */ r.createElement(o, { size: u.size }, e) : e));
-s.displayName = "Button";
+	isLoading,
+	type: !href ? "button" : void 0,
+	disabled,
+	...rest,
+	...getExternalAnchorProps(href),
+	ref
+}, isLoading ? /* @__PURE__ */ React$1.createElement(WithLoader, { size: rest.size }, children) : children));
+Button.displayName = "Button";
 //#endregion
-export { s as Button, i as StyledButton };
+export { Button, StyledButton };
 
 //# sourceMappingURL=Button.js.map

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,IAAe,EAC1B,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,IAC5B,CACF,EAEK,IAAwB,EAC5B,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,IAC5B,CACF,EAEK,KAAc,EAClB,SACA,kBAEA,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,GAAD,EAAQ,WAAU,YAAa,CAAA,EAC/B,kBAAA,cAAC,GAAD,EAA6B,SAAwC,EAAjC,EAAiC,CACpE,EAYQ,IAAS,EAAM,YAExB,EAAE,aAAU,OAAI,SAAM,eAAY,IAAO,YAAS,aAAU,GAAG,KAC/D,MAEA,kBAAA,cAAC,GAAD;CACE,IAAI,MAAO,IAAO,MAAM,KAAA;CACxB,GAAK,CAAC,KAAY,CAAC,KAAa;EAAE;EAAM;EAAS;CACtC;CACX,MAAO,IAAkB,KAAA,IAAX;CACJ;CACV,GAAI;CACJ,GAAI,EAAuB,EAAK;CAC3B;CAOQ,EALZ,IACC,kBAAA,cAAC,GAAD,EAAY,MAAM,EAAK,MAA6B,EAAtB,EAAsB,GAEpD,EAEW,CAElB;AAED,EAAO,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,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"}

package/dist/components/calendar/Calendar.js

@@ -1,16 +1,16 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { ActionIcon as n } from "../action-icon/ActionIcon.js";
-import { Button as r } from "../button/Button.js";
-import { Text as i } from "../text/Text.js";
-import { DEFAULT_LABELS as a, monthNamesShort as o, weekdayNamesShort as s } from "./constants.js";
-import { Day as c } from "./Day.js";
-import l from "clsx";
-import * as u from "react";
-import { ChevronLeft as d, ChevronRight as f } from "@atom-learning/icons";
-import { useDayzed as p } from "dayzed";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { Button } from "../button/Button.js";
+import { Text } from "../text/Text.js";
+import { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from "./constants.js";
+import { Day } from "./Day.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
+import { useDayzed } from "dayzed";
 //#region src/components/calendar/Calendar.tsx
-var m = e(r, {
+var StyledButton = styled(Button, {
 	base: [
 		"text-grey-1000",
 		"p-3",
@@ -23,76 +23,89 @@ var m = e(r, {
 		"hover:text-grey-1000!",
 		"text-grey-1000!"
 	] } }
-}), h = (e, t) => {
-	let n = e.slice(0, t);
-	return e.slice(t).concat(n);
-}, g = ({ className: e, refDateSelected: g, refDateToday: _, firstDayOfWeek: v = 0, monthNames: y = o, weekdayNames: b = s, labels: x = a, date: S = /* @__PURE__ */ new Date(), minDate: C, maxDate: w, setYear: T, ...E }) => {
-	let [D, O] = u.useState(!1), [k, A] = u.useState(S?.getFullYear()), j = (e) => {
-		let t = S;
-		t.setFullYear(e), T(t), O(!1);
-	}, M = C && k - 16 <= C.getFullYear(), N = w && k >= w.getFullYear(), P = Array.from({ length: 16 }, (e, t) => {
-		let n = k - t;
-		return w && n > w.getFullYear() || C && n < C.getFullYear() ? 0 : n;
-	}), { calendars: F, getBackProps: I, getForwardProps: L, getDateProps: R } = p({
-		firstDayOfWeek: v,
-		showOutsideDays: !0,
-		date: S,
-		minDate: C,
-		maxDate: w,
-		...E
+});
+var offsetWeekdayNames = (weekdayNames, firstDayOfWeek) => {
+	const start = weekdayNames.slice(0, firstDayOfWeek);
+	return weekdayNames.slice(firstDayOfWeek).concat(start);
+};
+var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0, monthNames = monthNamesShort, weekdayNames = weekdayNamesShort, labels = DEFAULT_LABELS, date = /* @__PURE__ */ new Date(), minDate, maxDate, setYear, ...remainingProps }) => {
+	const [showYears, setShowYears] = React$1.useState(false);
+	const [currentYear, setCurrentYear] = React$1.useState(date?.getFullYear());
+	const handleSetYear = (year) => {
+		const newDate = date;
+		newDate.setFullYear(year);
+		setYear(newDate);
+		setShowYears(false);
+	};
+	const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear();
+	const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear();
+	const yearList = Array.from({ length: 16 }, (_, i) => {
+		const year = currentYear - i;
+		if (maxDate && year > maxDate.getFullYear() || minDate && year < minDate.getFullYear()) return 0;
+		return year;
+	});
+	const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({
+		firstDayOfWeek,
+		showOutsideDays: true,
+		date,
+		minDate,
+		maxDate,
+		...remainingProps
 	});
-	return F.length ? /* @__PURE__ */ u.createElement("div", { className: l("relative", "w-fit", "-mt-1", e) }, /* @__PURE__ */ u.createElement("div", { className: "absolute top-0 -right-1 flex" }, /* @__PURE__ */ u.createElement(n, {
-		label: x[D ? "previousYear" : "previous"],
+	if (!calendars.length) return null;
+	return /* @__PURE__ */ React$1.createElement("div", { className: clsx("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",
-		...!D && I({ calendars: F }),
-		...D && { onClick: () => A(k - 16) },
-		disabled: D && M
-	}, /* @__PURE__ */ u.createElement(t, { is: d })), /* @__PURE__ */ u.createElement(n, {
-		label: x[D ? "nextYear" : "next"],
+		...!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",
-		...!D && L({ calendars: F }),
-		...D && { onClick: () => A(k + 16) },
-		disabled: D && N
-	}, /* @__PURE__ */ u.createElement(t, { is: f }))), D && /* @__PURE__ */ u.createElement("div", { className: "grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]" }, P.map((e, t) => {
-		let n = e === S.getFullYear();
-		return e ? /* @__PURE__ */ u.createElement(m, {
-			key: `${e}${t}`,
-			theme: n ? "primary" : "neutral",
-			onClick: () => j(e),
-			selected: n
-		}, e) : /* @__PURE__ */ u.createElement("div", {
-			key: t,
+		...!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"
 		});
-	})), !D && F.map(({ month: e, year: t, weeks: n }) => /* @__PURE__ */ u.createElement("div", { key: `${e}${t}` }, /* @__PURE__ */ u.createElement("div", { className: "mb-4 flex h-10 items-center" }, /* @__PURE__ */ u.createElement(r, {
+		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: () => O(!0),
+		onClick: () => setShowYears(true),
 		className: "text-grey-1000 px-0"
-	}, y[e], " ", t)), /* @__PURE__ */ u.createElement("div", { className: "mb-3 grid grid-cols-7 gap-x-2 gap-y-1" }, h(b, v).map((n) => /* @__PURE__ */ u.createElement(i, {
+	}, 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: `${e}${t}${n}`,
+		key: `${month}${year}${weekday}`,
 		className: "text-center"
-	}, n))), /* @__PURE__ */ u.createElement("div", { className: "grid grid-cols-7 gap-x-2 gap-y-1" }, n.map((n, r) => n.map((n, i) => {
-		let a = `${e}${t}${r}${i}`;
-		if (!n) return /* @__PURE__ */ u.createElement("div", { key: a });
-		let { date: o, selected: s, today: l, prevMonth: d, nextMonth: f } = n;
-		return /* @__PURE__ */ u.createElement(c, {
-			isOutsideMonth: d || f,
-			isSelected: s,
-			isToday: l,
-			key: a,
-			ref: s ? g : l ? _ : null,
-			...R({ dateObj: n }),
+	}, 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"
-		}, o.getDate());
-	})))))) : null;
+		}, date.getDate());
+	}))))));
 };
-g.displayName = "Calendar";
+Calendar.displayName = "Calendar";
 //#endregion
-export { g as Calendar };
+export { Calendar };
 
 //# sourceMappingURL=Calendar.js.map