@clubmed/trident-ui 2.0.0-beta.3 → 2.0.0-beta.5

package/chunks/DateField.js

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx.js";
-import { useInternalStatus as t } from "../ui/hooks/useInternalStatus.js";
-import { useValue as n } from "../ui/hooks/useValue.js";
+import { useValue as t } from "../ui/hooks/useValue.js";
+import { useInternalStatus as n } from "../ui/hooks/useInternalStatus.js";
 import { FormControl as r } from "../ui/forms/FormControl.js";
 import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { Icon as l } from "@clubmed/trident-icons";
@@ -71,10 +71,10 @@ var S = (e) => !e || !v(new Date(e)) ? "" : x(new Date(e), { representation: "da
 	let r = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), i = r(new Date(e));
 	return !(t && i < r(t) || n && i > r(n));
 }, w = (f) => {
-	let p = o(), { id: m = p, name: h = m, label: g, description: _, openDatepicker: v, validationStatus: b = "default", icon: x = "CalendarDefault", iconType: w, errorMessage: T, disabled: E = !1, required: D = !1, hideRequiredStar: O, dataTestId: k = "DateField", value: A, min: j, max: M, onChange: N, ...P } = f, F = s(null), [I, L] = c(!1), R = t({
+	let p = o(), { id: m = p, name: h = m, label: g, description: _, openDatepicker: v, validationStatus: b = "default", icon: x = "CalendarDefault", iconType: w, errorMessage: T, disabled: E = !1, required: D = !1, hideRequiredStar: O, dataTestId: k = "DateField", value: A, min: j, max: M, onChange: N, ...P } = f, F = s(null), [I, L] = c(!1), R = n({
 		isDisabled: E,
 		validationStatus: b
-	}), { setValue: z, value: B } = n({
+	}), { setValue: z, value: B } = t({
 		name: h,
 		formatter: S,
 		initialValue: A,

package/examples/checkbox-demo.js

@@ -1,27 +1,21 @@
 "use client";
-import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
-import { useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Clickable as e } from "../ui/Clickable.js";
+import { Checkbox as t } from "../ui/forms/checkboxes/Checkbox.js";
+import { useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region lib/examples/checkbox-demo.tsx
 function i() {
-	let [i, a] = t(!1), [o, s] = t(!1);
+	let [i, a] = n(!1);
 	return /* @__PURE__ */ r("div", {
 		className: "space-y-4",
-		children: [/* @__PURE__ */ n(e, {
-			name: "demo",
-			value: "demo-value",
-			checked: i,
-			onChange: (e) => a(e.target.checked),
-			children: "Basic checkbox"
-		}), /* @__PURE__ */ n(e, {
-			name: "demo2",
-			value: "demo-value2",
-			checked: o,
-			onChange: (e) => s(e.target.checked),
-			validationStatus: "error",
-			errorMessage: "This is an error",
-			children: "Checkbox with error"
-		})]
+		children: /* @__PURE__ */ r(e, {
+			onClick: () => a(!i),
+			children: /* @__PURE__ */ r(t, {
+				id: "demo",
+				name: "demo",
+				checked: i
+			})
+		})
 	});
 }
 //#endregion

package/examples/checkbox-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-demo.js","names":[],"sources":["../../lib/examples/checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\nimport { useState } from 'react';\n\nexport default function CheckboxDemo() {\n  const [checked1, setChecked1] = useState(false);\n  const [checked2, setChecked2] = useState(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox\n        name=\"demo\"\n        value=\"demo-value\"\n        checked={checked1}\n        onChange={(e) => setChecked1(e.target.checked)}\n      >\n        Basic checkbox\n      </Checkbox>\n      <Checkbox\n        name=\"demo2\"\n        value=\"demo-value2\"\n        checked={checked2}\n        onChange={(e) => setChecked2(e.target.checked)}\n        validationStatus=\"error\"\n        errorMessage=\"This is an error\"\n      >\n        Checkbox with error\n      </Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAe;CACrC,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAU,KAAe,EAAS,GAAM;AAE/C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACN,SAAS;GACT,WAAW,MAAM,EAAY,EAAE,OAAO,QAAQ;aAC/C;GAEU,CAAA,EACX,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACN,SAAS;GACT,WAAW,MAAM,EAAY,EAAE,OAAO,QAAQ;GAC9C,kBAAiB;GACjB,cAAa;aACd;GAEU,CAAA,CAAA"}
+{"version":3,"file":"checkbox-demo.js","names":[],"sources":["../../lib/examples/checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Clickable } from '@/ui/Clickable';\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\nimport { useState } from 'react';\n\nexport default function CheckboxDemo() {\n  const [checked, setChecked] = useState(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <Clickable onClick={() => setChecked(!checked)}>\n        <Checkbox id=\"demo\" name=\"demo\" checked={checked} />\n      </Clickable>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAe;CACrC,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM;AAE7C,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAW,eAAe,EAAW,CAAC,EAAQ;aAC5C,kBAAC,GAAD;IAAU,IAAG;IAAO,MAAK;IAAgB;IAAW,CAAA;GAC1C,CAAA;EACR,CAAA"}

package/examples/checkbox-disabled-demo.js

@@ -5,18 +5,21 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 function r() {
 	return /* @__PURE__ */ n("div", {
 		className: "space-y-4",
-		children: [/* @__PURE__ */ t(e, {
-			name: "disabled-unchecked",
-			value: "disabled",
-			disabled: !0,
-			children: "Disabled unchecked"
-		}), /* @__PURE__ */ t(e, {
-			name: "disabled-checked",
-			value: "disabled-checked",
-			disabled: !0,
-			checked: !0,
-			children: "Disabled checked"
-		})]
+		children: [
+			"Disabled unchecked",
+			/* @__PURE__ */ t(e, {
+				name: "disabled-unchecked",
+				value: "disabled",
+				disabled: !0
+			}),
+			"Disabled checked",
+			/* @__PURE__ */ t(e, {
+				name: "disabled-checked",
+				value: "disabled-checked",
+				disabled: !0,
+				checked: !0
+			})
+		]
 	});
 }
 //#endregion

package/examples/checkbox-disabled-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-disabled-demo.js","names":[],"sources":["../../lib/examples/checkbox-disabled-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxDisabledDemo() {\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox name=\"disabled-unchecked\" value=\"disabled\" disabled>\n        Disabled unchecked\n      </Checkbox>\n      <Checkbox name=\"disabled-checked\" value=\"disabled-checked\" disabled checked>\n        Disabled checked\n      </Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAuB;AAC7C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAU,MAAK;GAAqB,OAAM;GAAW,UAAA;aAAS;GAEnD,CAAA,EACX,kBAAC,GAAD;GAAU,MAAK;GAAmB,OAAM;GAAmB,UAAA;GAAS,SAAA;aAAQ;GAEjE,CAAA,CAAA"}
+{"version":3,"file":"checkbox-disabled-demo.js","names":[],"sources":["../../lib/examples/checkbox-disabled-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxDisabledDemo() {\n  return (\n    <div className=\"space-y-4\">\n      Disabled unchecked\n      <Checkbox name=\"disabled-unchecked\" value=\"disabled\" disabled></Checkbox>\n      Disabled checked\n      <Checkbox name=\"disabled-checked\" value=\"disabled-checked\" disabled checked></Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAuB;AAC7C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAA2B;GAEzB,kBAAC,GAAD;IAAU,MAAK;IAAqB,OAAM;IAAW,UAAA;IAAoB,CAAA;;GAEzE,kBAAC,GAAD;IAAU,MAAK;IAAmB,OAAM;IAAmB,UAAA;IAAS,SAAA;IAAmB,CAAA"}

package/examples/checkboxes-demo.js

@@ -1,21 +1,21 @@
 "use client";
-import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
-import { Checkboxes as t } from "../ui/forms/checkboxes/Checkboxes.js";
+import { Checkboxes as e } from "../ui/forms/checkboxes/Checkboxes.js";
+import { FormCheckbox as t } from "../ui/forms/checkboxes/FormCheckbox.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/examples/checkboxes-demo.tsx
 function i() {
-	return /* @__PURE__ */ r(t, {
+	return /* @__PURE__ */ r(e, {
 		name: "options",
 		children: [
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ n(t, {
 				value: "option1",
 				children: "Option 1"
 			}),
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ n(t, {
 				value: "option2",
 				children: "Option 2"
 			}),
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ n(t, {
 				value: "option3",
 				children: "Option 3"
 			})

package/examples/checkboxes-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxes-demo.js","names":[],"sources":["../../lib/examples/checkboxes-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxesDemo() {\n  return (\n    <Checkboxes name=\"options\">\n      <Checkbox value=\"option1\">Option 1</Checkbox>\n      <Checkbox value=\"option2\">Option 2</Checkbox>\n      <Checkbox value=\"option3\">Option 3</Checkbox>\n    </Checkboxes>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAiB;AACvC,QACE,kBAAC,GAAD;EAAY,MAAK;YAAjB;GACE,kBAAC,GAAD;IAAU,OAAM;cAAU;IAAmB,CAAA;GAC7C,kBAAC,GAAD;IAAU,OAAM;cAAU;IAAmB,CAAA;GAC7C,kBAAC,GAAD;IAAU,OAAM;cAAU;IAAmB,CAAA"}
+{"version":3,"file":"checkboxes-demo.js","names":[],"sources":["../../lib/examples/checkboxes-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { FormCheckbox } from '@/ui/forms/checkboxes/FormCheckbox';\n\nexport default function CheckboxesDemo() {\n  return (\n    <Checkboxes name=\"options\">\n      <FormCheckbox value=\"option1\">Option 1</FormCheckbox>\n      <FormCheckbox value=\"option2\">Option 2</FormCheckbox>\n      <FormCheckbox value=\"option3\">Option 3</FormCheckbox>\n    </Checkboxes>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAiB;AACvC,QACE,kBAAC,GAAD;EAAY,MAAK;YAAjB;GACE,kBAAC,GAAD;IAAc,OAAM;cAAU;IAAuB,CAAA;GACrD,kBAAC,GAAD;IAAc,OAAM;cAAU;IAAuB,CAAA;GACrD,kBAAC,GAAD;IAAc,OAAM;cAAU;IAAuB,CAAA"}

package/examples/checkboxes-with-form-control-demo.js

@@ -1,6 +1,6 @@
 "use client";
-import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
-import { Checkboxes as t } from "../ui/forms/checkboxes/Checkboxes.js";
+import { Checkboxes as e } from "../ui/forms/checkboxes/Checkboxes.js";
+import { FormCheckbox as t } from "../ui/forms/checkboxes/FormCheckbox.js";
 import { FormControl as n } from "../ui/forms/FormControl.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/examples/checkboxes-with-form-control-demo.tsx
@@ -8,19 +8,19 @@ function a() {
 	return /* @__PURE__ */ r(n, {
 		label: "Select options",
 		description: "Choose one or more options",
-		children: /* @__PURE__ */ i(t, {
+		children: /* @__PURE__ */ i(e, {
 			name: "options",
 			"aria-labelledby": "options-label",
 			children: [
-				/* @__PURE__ */ r(e, {
+				/* @__PURE__ */ r(t, {
 					value: "option1",
 					children: "Option 1"
 				}),
-				/* @__PURE__ */ r(e, {
+				/* @__PURE__ */ r(t, {
 					value: "option2",
 					children: "Option 2"
 				}),
-				/* @__PURE__ */ r(e, {
+				/* @__PURE__ */ r(t, {
 					value: "option3",
 					children: "Option 3"
 				})

package/examples/checkboxes-with-form-control-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxes-with-form-control-demo.js","names":[],"sources":["../../lib/examples/checkboxes-with-form-control-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormControl } from '@/ui/forms/FormControl';\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxesWithFormControlDemo() {\n  return (\n    <FormControl label=\"Select options\" description=\"Choose one or more options\">\n      <Checkboxes name=\"options\" aria-labelledby=\"options-label\">\n        <Checkbox value=\"option1\">Option 1</Checkbox>\n        <Checkbox value=\"option2\">Option 2</Checkbox>\n        <Checkbox value=\"option3\">Option 3</Checkbox>\n      </Checkboxes>\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAgC;AACtD,QACE,kBAAC,GAAD;EAAa,OAAM;EAAiB,aAAY;YAC9C,kBAAC,GAAD;GAAY,MAAK;GAAU,mBAAgB;aAA3C;IACE,kBAAC,GAAD;KAAU,OAAM;eAAU;KAAmB,CAAA;IAC7C,kBAAC,GAAD;KAAU,OAAM;eAAU;KAAmB,CAAA;IAC7C,kBAAC,GAAD;KAAU,OAAM;eAAU;KAAmB,CAAA;;;EAEnC,CAAA"}
+{"version":3,"file":"checkboxes-with-form-control-demo.js","names":[],"sources":["../../lib/examples/checkboxes-with-form-control-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormControl } from '@/ui/forms/FormControl';\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { FormCheckbox } from '@/ui/forms/checkboxes/FormCheckbox';\n\nexport default function CheckboxesWithFormControlDemo() {\n  return (\n    <FormControl label=\"Select options\" description=\"Choose one or more options\">\n      <Checkboxes name=\"options\" aria-labelledby=\"options-label\">\n        <FormCheckbox value=\"option1\">Option 1</FormCheckbox>\n        <FormCheckbox value=\"option2\">Option 2</FormCheckbox>\n        <FormCheckbox value=\"option3\">Option 3</FormCheckbox>\n      </Checkboxes>\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAgC;AACtD,QACE,kBAAC,GAAD;EAAa,OAAM;EAAiB,aAAY;YAC9C,kBAAC,GAAD;GAAY,MAAK;GAAU,mBAAgB;aAA3C;IACE,kBAAC,GAAD;KAAc,OAAM;eAAU;KAAuB,CAAA;IACrD,kBAAC,GAAD;KAAc,OAAM;eAAU;KAAuB,CAAA;IACrD,kBAAC,GAAD;KAAc,OAAM;eAAU;KAAuB,CAAA;;;EAE3C,CAAA"}

package/examples/form-checkbox-demo.d.ts

@@ -0,0 +1 @@
+export default function FormCheckboxDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/form-checkbox-demo.js

@@ -0,0 +1,30 @@
+"use client";
+import { FormCheckbox as e } from "../ui/forms/checkboxes/FormCheckbox.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/form-checkbox-demo.tsx
+function i() {
+	let [i, a] = t(!1), [o, s] = t(!1);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ n(e, {
+			name: "demo",
+			value: "demo-value",
+			checked: i,
+			onChange: (e) => a(e.target.checked),
+			children: "Basic checkbox"
+		}), /* @__PURE__ */ n(e, {
+			name: "demo2",
+			value: "demo-value2",
+			checked: o,
+			onChange: (e) => s(e.target.checked),
+			validationStatus: "error",
+			errorMessage: "This field is required",
+			children: "Checkbox with validation"
+		})]
+	});
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=form-checkbox-demo.js.map

package/examples/form-checkbox-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox-demo.js","names":[],"sources":["../../lib/examples/form-checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormCheckbox } from '@/ui/forms/checkboxes/FormCheckbox';\nimport { useState } from 'react';\n\nexport default function FormCheckboxDemo() {\n  const [checked1, setChecked1] = useState(false);\n  const [checked2, setChecked2] = useState(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <FormCheckbox\n        name=\"demo\"\n        value=\"demo-value\"\n        checked={checked1}\n        onChange={(e) => setChecked1(e.target.checked)}\n      >\n        Basic checkbox\n      </FormCheckbox>\n      <FormCheckbox\n        name=\"demo2\"\n        value=\"demo-value2\"\n        checked={checked2}\n        onChange={(e) => setChecked2(e.target.checked)}\n        validationStatus=\"error\"\n        errorMessage=\"This field is required\"\n      >\n        Checkbox with validation\n      </FormCheckbox>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAmB;CACzC,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAU,KAAe,EAAS,GAAM;AAE/C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACN,SAAS;GACT,WAAW,MAAM,EAAY,EAAE,OAAO,QAAQ;aAC/C;GAEc,CAAA,EACf,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACN,SAAS;GACT,WAAW,MAAM,EAAY,EAAE,OAAO,QAAQ;GAC9C,kBAAiB;GACjB,cAAa;aACd;GAEc,CAAA,CAAA"}

package/examples/form-checkbox-disabled-demo.d.ts

@@ -0,0 +1 @@
+export default function FormCheckboxDisabledDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/form-checkbox-disabled-demo.js

@@ -0,0 +1,25 @@
+"use client";
+import { FormCheckbox as e } from "../ui/forms/checkboxes/FormCheckbox.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/examples/form-checkbox-disabled-demo.tsx
+function r() {
+	return /* @__PURE__ */ n("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ t(e, {
+			name: "disabled-unchecked",
+			value: "disabled",
+			disabled: !0,
+			children: "Disabled unchecked"
+		}), /* @__PURE__ */ t(e, {
+			name: "disabled-checked",
+			value: "disabled-checked",
+			disabled: !0,
+			checked: !0,
+			children: "Disabled checked"
+		})]
+	});
+}
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=form-checkbox-disabled-demo.js.map

package/examples/form-checkbox-disabled-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox-disabled-demo.js","names":[],"sources":["../../lib/examples/form-checkbox-disabled-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormCheckbox } from '@/ui/forms/checkboxes/FormCheckbox';\n\nexport default function FormCheckboxDisabledDemo() {\n  return (\n    <div className=\"space-y-4\">\n      <FormCheckbox name=\"disabled-unchecked\" value=\"disabled\" disabled>\n        Disabled unchecked\n      </FormCheckbox>\n      <FormCheckbox name=\"disabled-checked\" value=\"disabled-checked\" disabled checked>\n        Disabled checked\n      </FormCheckbox>\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAA2B;AACjD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAc,MAAK;GAAqB,OAAM;GAAW,UAAA;aAAS;GAEnD,CAAA,EACf,kBAAC,GAAD;GAAc,MAAK;GAAmB,OAAM;GAAmB,UAAA;GAAS,SAAA;aAAQ;GAEjE,CAAA,CAAA"}

package/examples/sidebar-layout-demo.js

@@ -9,7 +9,7 @@ var o = [
 	{
 		label: "Home",
 		icon: "Home",
-		url: "#"
+		href: "#"
 	},
 	{
 		label: "Projects",
@@ -17,22 +17,22 @@ var o = [
 		items: [
 			{
 				label: "Project A",
-				url: "#"
+				href: "#"
 			},
 			{
 				label: "Project B",
-				url: "#"
+				href: "#"
 			},
 			{
 				label: "Project C",
-				url: "#"
+				href: "#"
 			}
 		]
 	},
 	{
 		label: "Team",
 		icon: "PeopleDouble",
-		url: "#"
+		href: "#"
 	}
 ];
 function s() {

package/examples/sidebar-layout-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar } from '@/ui/Avatar';\nimport { Dropdown } from '@/ui/Dropdown';\nimport { SidebarLayout } from '@/ui/SidebarLayout';\nimport { Button } from '@/ui/buttons/Button';\n\nconst items = [\n  { label: 'Home', icon: 'Home' as const, url: '#' },\n  {\n    label: 'Projects',\n    icon: 'HeartOutlined' as const,\n    items: [\n      { label: 'Project A', url: '#' },\n      { label: 'Project B', url: '#' },\n      { label: 'Project C', url: '#' },\n    ],\n  },\n  { label: 'Team', icon: 'PeopleDouble' as const, url: '#' },\n];\n\nexport default function SidebarLayoutDemo() {\n  const user = { firstName: 'John', lastName: 'Doe' };\n\n  return (\n    <SidebarLayout items={items}>\n      <div data-slot=\"header-logo\" className=\"text-white text-b3 font-semibold\">\n        CM\n      </div>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Project Dashboard\n      </div>\n      <Dropdown data-slot=\"header-actions\" aria-label=\"Open user actions\">\n        <span data-slot=\"label\" className=\"hidden md:inline text-body\">\n          {user.firstName} {user.lastName}\n        </span>\n        <Avatar\n          data-slot=\"label\"\n          alt={`${user.firstName} ${user.lastName}`}\n          className=\"w-40 h-40\"\n          style={{ width: '40px', height: '40px' }}\n        />\n        <Button size=\"small\">Logout</Button>\n      </Dropdown>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Welcome to your dashboard</h1>\n        <p className=\"text-body\">This example shows SidebarLayout with composable header slots.</p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAQ;CACZ;EAAE,OAAO;EAAQ,MAAM;EAAiB,KAAK;EAAK;CAClD;EACE,OAAO;EACP,MAAM;EACN,OAAO;GACL;IAAE,OAAO;IAAa,KAAK;IAAK;GAChC;IAAE,OAAO;IAAa,KAAK;IAAK;GAChC;IAAE,OAAO;IAAa,KAAK;;;EAE9B;CACD;EAAE,OAAO;EAAQ,MAAM;EAAyB,KAAK;;CACtD;AAED,SAAwB,IAAoB;CAC1C,IAAM,IAAO;EAAE,WAAW;EAAQ,UAAU;EAAO;AAEnD,QACE,kBAAC,GAAD;EAAsB;YAAtB;GACE,kBAAC,OAAD;IAAK,aAAU;IAAc,WAAU;cAAmC;IAEpE,CAAA;GACN,kBAAC,OAAD;IAAK,aAAU;IAAS,WAAU;cAAqB;IAEjD,CAAA;GACN,kBAAC,GAAD;IAAU,aAAU;IAAiB,cAAW;cAAhD;KACE,kBAAC,QAAD;MAAM,aAAU;MAAQ,WAAU;gBAAlC;OACG,EAAK;OAAU;OAAE,EAAK;;;KAEzB,kBAAC,GAAD;MACE,aAAU;MACV,KAAK,GAAG,EAAK,UAAU,GAAG,EAAK;MAC/B,WAAU;MACV,OAAO;OAAE,OAAO;OAAQ,QAAQ;;MAChC,CAAA;KACF,kBAAC,GAAD;MAAQ,MAAK;gBAAQ;MAAe,CAAA;;;GAGtC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAgB;IAA8B,CAAA,EAC5D,kBAAC,KAAD;IAAG,WAAU;cAAY;IAAkE,CAAA,CACvF,EAAA,CAAA"}
+{"version":3,"file":"sidebar-layout-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar } from '@/ui/Avatar';\nimport { Dropdown } from '@/ui/Dropdown';\nimport { SidebarLayout } from '@/ui/SidebarLayout';\nimport { Button } from '@/ui/buttons/Button';\n\nconst items = [\n  { label: 'Home', icon: 'Home' as const, href: '#' },\n  {\n    label: 'Projects',\n    icon: 'HeartOutlined' as const,\n    items: [\n      { label: 'Project A', href: '#' },\n      { label: 'Project B', href: '#' },\n      { label: 'Project C', href: '#' },\n    ],\n  },\n  { label: 'Team', icon: 'PeopleDouble' as const, href: '#' },\n];\n\nexport default function SidebarLayoutDemo() {\n  const user = { firstName: 'John', lastName: 'Doe' };\n\n  return (\n    <SidebarLayout items={items}>\n      <div data-slot=\"header-logo\" className=\"text-white text-b3 font-semibold\">\n        CM\n      </div>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Project Dashboard\n      </div>\n      <Dropdown data-slot=\"header-actions\" aria-label=\"Open user actions\">\n        <span data-slot=\"label\" className=\"hidden md:inline text-body\">\n          {user.firstName} {user.lastName}\n        </span>\n        <Avatar\n          data-slot=\"label\"\n          alt={`${user.firstName} ${user.lastName}`}\n          className=\"w-40 h-40\"\n          style={{ width: '40px', height: '40px' }}\n        />\n        <Button size=\"small\">Logout</Button>\n      </Dropdown>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Welcome to your dashboard</h1>\n        <p className=\"text-body\">This example shows SidebarLayout with composable header slots.</p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAQ;CACZ;EAAE,OAAO;EAAQ,MAAM;EAAiB,MAAM;EAAK;CACnD;EACE,OAAO;EACP,MAAM;EACN,OAAO;GACL;IAAE,OAAO;IAAa,MAAM;IAAK;GACjC;IAAE,OAAO;IAAa,MAAM;IAAK;GACjC;IAAE,OAAO;IAAa,MAAM;;;EAE/B;CACD;EAAE,OAAO;EAAQ,MAAM;EAAyB,MAAM;;CACvD;AAED,SAAwB,IAAoB;CAC1C,IAAM,IAAO;EAAE,WAAW;EAAQ,UAAU;EAAO;AAEnD,QACE,kBAAC,GAAD;EAAsB;YAAtB;GACE,kBAAC,OAAD;IAAK,aAAU;IAAc,WAAU;cAAmC;IAEpE,CAAA;GACN,kBAAC,OAAD;IAAK,aAAU;IAAS,WAAU;cAAqB;IAEjD,CAAA;GACN,kBAAC,GAAD;IAAU,aAAU;IAAiB,cAAW;cAAhD;KACE,kBAAC,QAAD;MAAM,aAAU;MAAQ,WAAU;gBAAlC;OACG,EAAK;OAAU;OAAE,EAAK;;;KAEzB,kBAAC,GAAD;MACE,aAAU;MACV,KAAK,GAAG,EAAK,UAAU,GAAG,EAAK;MAC/B,WAAU;MACV,OAAO;OAAE,OAAO;OAAQ,QAAQ;;MAChC,CAAA;KACF,kBAAC,GAAD;MAAQ,MAAK;gBAAQ;MAAe,CAAA;;;GAGtC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAgB;IAA8B,CAAA,EAC5D,kBAAC,KAAD;IAAG,WAAU;cAAY;IAAkE,CAAA,CACvF,EAAA,CAAA"}

package/examples/sidebar-layout-minimal-demo.js

@@ -5,11 +5,11 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = [{
 	label: "Home",
 	icon: "Home",
-	url: "#"
+	href: "#"
 }, {
 	label: "Settings",
 	icon: "Compare",
-	url: "#"
+	href: "#"
 }];
 function i() {
 	return /* @__PURE__ */ n(e, {

package/examples/sidebar-layout-minimal-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout-minimal-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-minimal-demo.tsx"],"sourcesContent":["'use client';\n\nimport { SidebarLayout } from '@/ui/SidebarLayout';\n\nconst items = [\n  { label: 'Home', icon: 'Home' as const, url: '#' },\n  { label: 'Settings', icon: 'Compare' as const, url: '#' },\n];\n\nexport default function SidebarLayoutMinimalDemo() {\n  return (\n    <SidebarLayout items={items} activeIndex={1}>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Minimal Layout\n      </div>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Minimal navigation</h1>\n        <p className=\"text-body\">This layout demonstrates a compact SidebarLayout setup.</p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAQ,CACZ;CAAE,OAAO;CAAQ,MAAM;CAAiB,KAAK;CAAK,EAClD;CAAE,OAAO;CAAY,MAAM;CAAoB,KAAK;CAAK,CAC1D;AAED,SAAwB,IAA2B;AACjD,QACE,kBAAC,GAAD;EAAsB;EAAO,aAAa;YAA1C,CACE,kBAAC,OAAD;GAAK,aAAU;GAAS,WAAU;aAAqB;GAEjD,CAAA,EAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;GAAI,WAAU;aAAgB;GAAuB,CAAA,EACrD,kBAAC,KAAD;GAAG,WAAU;aAAY;GAA2D,CAAA,CAChF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"sidebar-layout-minimal-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-minimal-demo.tsx"],"sourcesContent":["'use client';\n\nimport { SidebarLayout } from '@/ui/SidebarLayout';\n\nconst items = [\n  { label: 'Home', icon: 'Home' as const, href: '#' },\n  { label: 'Settings', icon: 'Compare' as const, href: '#' },\n];\n\nexport default function SidebarLayoutMinimalDemo() {\n  return (\n    <SidebarLayout items={items} activeIndex={1}>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Minimal Layout\n      </div>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Minimal navigation</h1>\n        <p className=\"text-body\">This layout demonstrates a compact SidebarLayout setup.</p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAQ,CACZ;CAAE,OAAO;CAAQ,MAAM;CAAiB,MAAM;CAAK,EACnD;CAAE,OAAO;CAAY,MAAM;CAAoB,MAAM;CAAK,CAC3D;AAED,SAAwB,IAA2B;AACjD,QACE,kBAAC,GAAD;EAAsB;EAAO,aAAa;YAA1C,CACE,kBAAC,OAAD;GAAK,aAAU;GAAS,WAAU;aAAqB;GAEjD,CAAA,EAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;GAAI,WAAU;aAAgB;GAAuB,CAAA,EACrD,kBAAC,KAAD;GAAG,WAAU;aAAY;GAA2D,CAAA,CAChF,EAAA,CAAA,CAAA"}

package/examples/sidebar-layout-with-header-demo.js

@@ -5,11 +5,11 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = [{
 	label: "Dashboard",
 	icon: "Home",
-	url: "#"
+	href: "#"
 }, {
 	label: "Analytics",
 	icon: "CheckOutlined",
-	url: "#"
+	href: "#"
 }];
 function i() {
 	return /* @__PURE__ */ n(e, {

package/examples/sidebar-layout-with-header-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout-with-header-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-with-header-demo.tsx"],"sourcesContent":["'use client';\n\nimport { SidebarLayout } from '@/ui/SidebarLayout';\n\nconst items = [\n  { label: 'Dashboard', icon: 'Home' as const, url: '#' },\n  { label: 'Analytics', icon: 'CheckOutlined' as const, url: '#' },\n];\n\nexport default function SidebarLayoutWithHeaderDemo() {\n  return (\n    <SidebarLayout items={items}>\n      <div data-slot=\"header-logo\" className=\"text-white text-b3 font-semibold\">\n        CM\n      </div>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Project Dashboard\n      </div>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Custom header example</h1>\n        <p className=\"text-body\">\n          This layout demonstrates custom `header-logo` and `header` slots.\n        </p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAQ,CACZ;CAAE,OAAO;CAAa,MAAM;CAAiB,KAAK;CAAK,EACvD;CAAE,OAAO;CAAa,MAAM;CAA0B,KAAK;CAAK,CACjE;AAED,SAAwB,IAA8B;AACpD,QACE,kBAAC,GAAD;EAAsB;YAAtB;GACE,kBAAC,OAAD;IAAK,aAAU;IAAc,WAAU;cAAmC;IAEpE,CAAA;GACN,kBAAC,OAAD;IAAK,aAAU;IAAS,WAAU;cAAqB;IAEjD,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAgB;IAA0B,CAAA,EACxD,kBAAC,KAAD;IAAG,WAAU;cAAY;IAErB,CAAA,CACA,EAAA,CAAA"}
+{"version":3,"file":"sidebar-layout-with-header-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-with-header-demo.tsx"],"sourcesContent":["'use client';\n\nimport { SidebarLayout } from '@/ui/SidebarLayout';\n\nconst items = [\n  { label: 'Dashboard', icon: 'Home' as const, href: '#' },\n  { label: 'Analytics', icon: 'CheckOutlined' as const, href: '#' },\n];\n\nexport default function SidebarLayoutWithHeaderDemo() {\n  return (\n    <SidebarLayout items={items}>\n      <div data-slot=\"header-logo\" className=\"text-white text-b3 font-semibold\">\n        CM\n      </div>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Project Dashboard\n      </div>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Custom header example</h1>\n        <p className=\"text-body\">\n          This layout demonstrates custom `header-logo` and `header` slots.\n        </p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAQ,CACZ;CAAE,OAAO;CAAa,MAAM;CAAiB,MAAM;CAAK,EACxD;CAAE,OAAO;CAAa,MAAM;CAA0B,MAAM;CAAK,CAClE;AAED,SAAwB,IAA8B;AACpD,QACE,kBAAC,GAAD;EAAsB;YAAtB;GACE,kBAAC,OAAD;IAAK,aAAU;IAAc,WAAU;cAAmC;IAEpE,CAAA;GACN,kBAAC,OAAD;IAAK,aAAU;IAAS,WAAU;cAAqB;IAEjD,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAgB;IAA0B,CAAA,EACxD,kBAAC,KAAD;IAAG,WAAU;cAAY;IAErB,CAAA,CACA,EAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/styles/animate.css

@@ -13,7 +13,7 @@
   }
 }
 
-@keyframes bounceEnter {
+@keyframes bounce-enter {
   0% {
     opacity: 0;
     transform: scale(0.5);
@@ -28,7 +28,7 @@
   }
 }
 
-@keyframes bounceEnterStrong {
+@keyframes bounce-enter-strong {
   0% {
     opacity: 0;
     transform: scale(0.5);
@@ -43,7 +43,7 @@
   }
 }
 
-@keyframes bounceExit {
+@keyframes bounce-exit {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -63,7 +63,7 @@
   }
 }
 
-@keyframes loaderDash {
+@keyframes loader-dash {
   0% {
     stroke-dashoffset: 38;
     stroke-dasharray: 38;
@@ -93,7 +93,7 @@
   }
 }
 
-@keyframes rotatesIn {
+@keyframes rotates-in {
   0% {
     transform: translateY(-20px);
     opacity: 0;
@@ -104,16 +104,16 @@
   }
 }
 
-@keyframes slideDown {
+@keyframes slide-down {
   0% {
-    transform: translateY(var(--tw-slideDown, -100%));
+    transform: translateY(var(--tw-slide-down, -100%));
   }
   100% {
     transform: translateY(0%);
   }
 }
 
-@keyframes slideRightEnter {
+@keyframes slide-right-enter {
   0% {
     transform: translateX(100%);
     opacity: 0;
@@ -124,7 +124,7 @@
   }
 }
 
-@keyframes slideRightExit {
+@keyframes slide-right-exit {
   0% {
     transform: translateX(0%);
   }
@@ -133,9 +133,9 @@
   }
 }
 
-@keyframes slideUp {
+@keyframes slide-up {
   0% {
-    transform: translateY(var(--tw-slideUp, 100%));
+    transform: translateY(var(--tw-slide-up, 100%));
   }
   100% {
     transform: translateY(0%);
@@ -178,7 +178,7 @@
   }
 }
 
-@keyframes backdropFadeIn {
+@keyframes backdrop-fade-in {
   0% {
     backdrop-filter: blur(0px);
     opacity: 0;
@@ -189,7 +189,7 @@
   }
 }
 
-@keyframes backdropFadeOut {
+@keyframes backdrop-fade-out {
   0% {
     backdrop-filter: blur(10px);
     opacity: 0.8;
@@ -200,7 +200,7 @@
   }
 }
 
-@keyframes backdropSweepIn {
+@keyframes backdrop-sweep-in {
   0% {
     backdrop-filter: blur(0px);
     opacity: 0;
@@ -213,7 +213,7 @@
   }
 }
 
-@keyframes backdropSweepOut {
+@keyframes backdrop-sweep-out {
   0% {
     backdrop-filter: blur(10px);
     opacity: 0.8;
@@ -246,7 +246,7 @@
   }
 }
 
-@keyframes toastEnter {
+@keyframes toast-enter {
   0% {
     transform: translateX(100%);
     opacity: 0;
@@ -257,7 +257,7 @@
   }
 }
 
-@keyframes toastExit {
+@keyframes toast-exit {
   0% {
     transform: translateX(0%);
   }
@@ -266,7 +266,7 @@
   }
 }
 
-@keyframes zoomIn {
+@keyframes zoom-in {
   0% {
     transform: scale(0.3);
     opacity: 0.3;
@@ -277,7 +277,7 @@
   }
 }
 
-@keyframes zoomOut {
+@keyframes zoom-out {
   0% {
     transform: scale(1);
     opacity: 1;

package/styles/theme.css

@@ -98,7 +98,7 @@
   --radius-16: 1rem;
   --radius-22: 1.375rem;
   --radius-32: 2rem;
-  --radius-pill: 7.5rem;
+  --radius-pill: calc(infinity * 1px);
   --radius-full: 100%;
 
   /* Breakpoints */
@@ -143,32 +143,32 @@
   --transition-duration-boop: 0.4s;
 
   --animate-none: none;
-  --animate-backdropFadeIn: backdropFadeIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-backdropFadeOut: backdropFadeOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
-  --animate-backdropSweepIn: backdropSweepIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-backdropSweepOut: backdropSweepOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-fade-in: backdrop-fade-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-fade-out: backdrop-fade-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-sweep-in: backdrop-sweep-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-sweep-out: backdrop-sweep-out 260ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
   --animate-boop: boop 230ms cubic-bezier(0.76, 0.24, 0.65, 0.85) normal both;
   --animate-bounce: bounce 1s infinite; /* NOT IN DCX */
-  --animate-bounceEnter: bounceEnter 500ms linear;
-  --animate-bounceEnterStrong: bounceEnterStrong 600ms linear;
-  --animate-bounceExit: bounceExit 500ms linear;
+  --animate-bounce-enter: bounce-enter 500ms linear;
+  --animate-bounce-enter-strong: bounce-enter-strong 600ms linear;
+  --animate-bounce-exit: bounce-exit 500ms linear;
   --animate-filling: filling 10s linear;
-  --animate-loaderDash: loaderDash 1.5s ease-in-out infinite;
+  --animate-loader-dash: loader-dash 1.5s ease-in-out infinite;
   --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; /* NOT IN DCX */
   --animate-pulsation: pulsation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   --animate-pulse: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animate-rotatesIn: rotatesIn 0.4s ease-in-out;
-  --animate-slideDown: slideDown 0.5s ease-out;
-  --animate-slideRightEnter: slideRightEnter 0.4s ease;
-  --animate-slideRightExit: slideRightExit 0.4s ease;
-  --animate-slideUp: slideUp 0.5s ease-out;
+  --animate-rotates-in: rotates-in 0.4s ease-in-out;
+  --animate-slide-down: slide-down 0.5s ease-out;
+  --animate-slide-right-enter: slide-right-enter 0.4s ease;
+  --animate-slide-right-exit: slide-right-exit 0.4s ease;
+  --animate-slide-up: slide-up 0.5s ease-out;
   --animate-spin: spin 1s linear infinite;
   --animate-tick: tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-  --animate-toastEnter: toastEnter 0.4s ease; /* NOT IN DCX */
-  --animate-toastExit: toastExit 0.4s ease; /* NOT IN DCX */
+  --animate-toast-enter: toast-enter 0.4s ease; /* NOT IN DCX */
+  --animate-toast-exit: toast-exit 0.4s ease; /* NOT IN DCX */
   --animate-tock: tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
   --animate-wave: wave 4s linear infinite;
-  --animate-zoomIn: zoomIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-zoomOut: zoomOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --animate-zoom-in: zoom-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
+  --animate-zoom-out: zoom-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
   --animate-wiggle: wiggle 0.75s ease-in-out;
 }