@clubmed/trident-ui 2.0.0-beta.8 → 2.0.0-beta.9

package/chunks/DateField.js

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx.js";
-import { useValue as t } from "../ui/hooks/useValue.js";
-import { useInternalStatus as n } from "../ui/hooks/useInternalStatus.js";
+import { useInternalStatus as t } from "../ui/hooks/useInternalStatus.js";
+import { useValue as n } from "../ui/hooks/useValue.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, className: P, ...F } = f, I = s(null), [L, R] = c(!1), z = n({
+	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, className: P, ...F } = f, I = s(null), [L, R] = c(!1), z = t({
 		isDisabled: E,
 		validationStatus: b
-	}), { setValue: B, value: V } = t({
+	}), { setValue: B, value: V } = n({
 		name: h,
 		formatter: S,
 		initialValue: A,

package/examples/checkbox-demo.js

@@ -1,24 +1,26 @@
 "use client";
-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";
+import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
+import { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region lib/examples/checkbox-demo.tsx
-function i() {
-	let [i, a] = n(!1);
-	return /* @__PURE__ */ r("div", {
+function r() {
+	let [r, i] = t(!1), [a, o] = t("This field is required");
+	return /* @__PURE__ */ n("div", {
 		className: "space-y-4",
-		children: /* @__PURE__ */ r(e, {
-			onClick: () => a(!i),
-			children: /* @__PURE__ */ r(t, {
-				id: "demo",
-				name: "demo",
-				checked: i
-			})
+		children: /* @__PURE__ */ n(e, {
+			name: "terms",
+			value: "accepted",
+			checked: r,
+			onChange: (e) => {
+				i(e.target.checked), o(e.target.checked ? "" : "This field is required");
+			},
+			validationStatus: a ? "error" : "default",
+			errorMessage: a,
+			children: "I agree to the terms and conditions"
 		})
 	});
 }
 //#endregion
-export { i as default };
+export { r as default };
 
 //# sourceMappingURL=checkbox-demo.js.map

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 { 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"}
+{"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 [checked, setChecked] = useState(false);\n  const [error, setError] = useState('This field is required');\n\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox\n        name=\"terms\"\n        value=\"accepted\"\n        checked={checked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          setError(e.target.checked ? '' : 'This field is required');\n        }}\n        validationStatus={error ? 'error' : 'default'}\n        errorMessage={error}\n      >\n        I agree to the terms and conditions\n      </Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAe;CACrC,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAO,KAAY,EAAS,yBAAyB;AAE5D,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACG;GACT,WAAW,MAAM;AAEf,IADA,EAAW,EAAE,OAAO,QAAQ,EAC5B,EAAS,EAAE,OAAO,UAAU,KAAK,yBAAyB;;GAE5D,kBAAkB,IAAQ,UAAU;GACpC,cAAc;aACf;GAEU,CAAA;EACP,CAAA"}

package/examples/checkbox-disabled-demo.js

@@ -5,21 +5,18 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 function r() {
 	return /* @__PURE__ */ n("div", {
 		className: "space-y-4",
-		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
-			})
-		]
+		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

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      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"}
+{"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"}

package/examples/checkboxes-demo.js

@@ -1,6 +1,6 @@
 "use client";
 import { Checkboxes as e } from "../ui/forms/checkboxes/Checkboxes.js";
-import { FormCheckbox as t } from "../ui/forms/checkboxes/FormCheckbox.js";
+import { Filter as t } from "../ui/forms/Filter.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/examples/checkboxes-demo.tsx
 function i() {

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 { 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"}
+{"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 { Filter } from '@/ui/forms/Filter';\n\nexport default function CheckboxesDemo() {\n  return (\n    <Checkboxes name=\"options\">\n      <Filter value=\"option1\">Option 1</Filter>\n      <Filter value=\"option2\">Option 2</Filter>\n      <Filter value=\"option3\">Option 3</Filter>\n    </Checkboxes>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAiB;AACvC,QACE,kBAAC,GAAD;EAAY,MAAK;YAAjB;GACE,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA;GACzC,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA;GACzC,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA"}

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

@@ -1,6 +1,6 @@
 "use client";
-import { Checkboxes as e } from "../ui/forms/checkboxes/Checkboxes.js";
-import { FormCheckbox as t } from "../ui/forms/checkboxes/FormCheckbox.js";
+import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
+import { Checkboxes as t } from "../ui/forms/checkboxes/Checkboxes.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(e, {
+		children: /* @__PURE__ */ i(t, {
 			name: "options",
 			"aria-labelledby": "options-label",
 			children: [
-				/* @__PURE__ */ r(t, {
+				/* @__PURE__ */ r(e, {
 					value: "option1",
 					children: "Option 1"
 				}),
-				/* @__PURE__ */ r(t, {
+				/* @__PURE__ */ r(e, {
 					value: "option2",
 					children: "Option 2"
 				}),
-				/* @__PURE__ */ r(t, {
+				/* @__PURE__ */ r(e, {
 					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 { 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"}
+{"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"}

package/examples/elastic-height-demo.js

@@ -9,11 +9,12 @@ function i() {
 		className: "w-full max-w-md space-y-4",
 		children: [/* @__PURE__ */ n("button", {
 			onClick: () => a(!i),
-			className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700",
+			className: "rounded-md bg-ultramarine px-4 py-2 text-white hover:bg-blue-700",
 			children: i ? "Collapse" : "Expand"
 		}), /* @__PURE__ */ n(e, {
 			isExpanded: i,
 			className: "border rounded-md",
+			min: 24,
 			children: /* @__PURE__ */ r("div", {
 				className: "p-4 space-y-2",
 				children: [

package/examples/elastic-height-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"elastic-height-demo.js","names":[],"sources":["../../lib/examples/elastic-height-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ElasticHeight } from '@/ui/ElasticHeight';\n\nexport default function ElasticHeightDemo() {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-4\">\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        className=\"rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700\"\n      >\n        {isExpanded ? 'Collapse' : 'Expand'}\n      </button>\n      <ElasticHeight isExpanded={isExpanded} className=\"border rounded-md\">\n        <div className=\"p-4 space-y-2\">\n          <p className=\"font-semibold\">Expandable Content</p>\n          <p>\n            This content smoothly animates when the container expands or collapses. The\n            ElasticHeight component automatically adjusts to the height of its children.\n          </p>\n          <p>\n            Perfect for accordions, collapsible sections, and any UI element that needs smooth\n            height transitions.\n          </p>\n        </div>\n      </ElasticHeight>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAoB;CAC1C,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAM;AAEnD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,eAAe,EAAc,CAAC,EAAW;GACzC,WAAU;aAET,IAAa,aAAa;GACpB,CAAA,EACT,kBAAC,GAAD;GAA2B;GAAY,WAAU;aAC/C,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBAAgB;MAAsB,CAAA;KACnD,kBAAC,KAAD,EAAA,UAAG,4JAGC,CAAA;KACJ,kBAAC,KAAD,EAAA,UAAG,0GAGC,CAAA;;;GAEQ,CAAA,CAAA"}
+{"version":3,"file":"elastic-height-demo.js","names":[],"sources":["../../lib/examples/elastic-height-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ElasticHeight } from '@/ui/ElasticHeight';\n\nexport default function ElasticHeightDemo() {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-4\">\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        className=\"rounded-md bg-ultramarine px-4 py-2 text-white hover:bg-blue-700\"\n      >\n        {isExpanded ? 'Collapse' : 'Expand'}\n      </button>\n      <ElasticHeight isExpanded={isExpanded} className=\"border rounded-md\" min={24}>\n        <div className=\"p-4 space-y-2\">\n          <p className=\"font-semibold\">Expandable Content</p>\n          <p>\n            This content smoothly animates when the container expands or collapses. The\n            ElasticHeight component automatically adjusts to the height of its children.\n          </p>\n          <p>\n            Perfect for accordions, collapsible sections, and any UI element that needs smooth\n            height transitions.\n          </p>\n        </div>\n      </ElasticHeight>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAoB;CAC1C,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAM;AAEnD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,eAAe,EAAc,CAAC,EAAW;GACzC,WAAU;aAET,IAAa,aAAa;GACpB,CAAA,EACT,kBAAC,GAAD;GAA2B;GAAY,WAAU;GAAoB,KAAK;aACxE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBAAgB;MAAsB,CAAA;KACnD,kBAAC,KAAD,EAAA,UAAG,4JAGC,CAAA;KACJ,kBAAC,KAAD,EAAA,UAAG,0GAGC,CAAA;;;GAEQ,CAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -92,6 +92,7 @@
   "devDependencies": {
     "@clubmed/trident-icons": ">=1.7.1",
     "@tailwindcss/vite": "4.1.18",
+    "@vitest/coverage-v8": "^4.1.2",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.17",
     "change-case": "^5.4.3",

package/styles/components.css

@@ -90,4 +90,10 @@
       transition-duration: 0ms !important;
     }
   }
+
+  @property --1fr {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
 }

package/styles/theme.css

@@ -99,6 +99,11 @@
   --radius-22: 1.375rem;
   --radius-32: 2rem;
   --radius-pill: calc(infinity * 1px);
+  /*
+    Transitioning from Infinity*1px to another value causes jumps in the layout
+    This is not ideal, but currently necessary to achieve a pill that can transition to other border-radius values without jank.
+   */
+  --radius-pill-transitionable: 8rem;
   --radius-full: 100%;
 
   /* Breakpoints */

package/ui/AdvancedToast.js

@@ -1,15 +1,15 @@
 "use client";
 import { t as e } from "../chunks/clsx.js";
-import t from "./hooks/useResizeObserver.js";
-import { ElasticHeight as n } from "./ElasticHeight.js";
-import { Colors as r, getBgColor as i, getBorderColor as a, getTextColor as o } from "./helpers/colors/colors.js";
-import { useCountdown as s } from "./hooks/useCountdown.js";
+import { ElasticHeight as t } from "./ElasticHeight.js";
+import { Colors as n, getBgColor as r, getBorderColor as i, getTextColor as a } from "./helpers/colors/colors.js";
+import { useCountdown as o } from "./hooks/useCountdown.js";
+import s from "./hooks/useResizeObserver.js";
 import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
 import { Icon as f } from "@clubmed/trident-icons";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region lib/ui/AdvancedToast.tsx
-var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, children: x, accentColor: S = r.orange, duration: C = 1e4, onClose: w, toastId: T, updateHeight: E, ...D }) => {
-	let O = l(), [k, A] = d(!1), [j, M] = d(!1), N = u(null), { progress: P } = s({
+var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, children: x, accentColor: S = n.orange, duration: C = 1e4, onClose: w, toastId: T, updateHeight: E, ...D }) => {
+	let O = l(), [k, A] = d(!1), [j, M] = d(!1), N = u(null), { progress: P } = o({
 		duration: C,
 		isPaused: j,
 		isVisible: y
@@ -18,7 +18,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 		P === 100 && w?.();
 	}, [P, w]);
 	let F = () => M(!0), I = () => M(!1), L = () => M(!1);
-	return t({
+	return s({
 		ref: N,
 		onResize: () => {
 			N.current && E(T, N.current.offsetHeight);
@@ -26,7 +26,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 	}), /* @__PURE__ */ m("div", {
 		ref: N,
 		...D,
-		className: e(y ? "animate-slideRightEnter" : "animate-slideRightExit opacity-0", "relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden", a(S), h),
+		className: e(y ? "animate-slide-right-enter" : "animate-slide-right-exit opacity-0", "relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden", i(S), h),
 		role: "note",
 		onMouseDown: F,
 		onMouseUp: I,
@@ -35,7 +35,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 			/* @__PURE__ */ p(f, {
 				name: v,
 				width: "30px",
-				className: e("flex-shrink-0 pt-4", o(S))
+				className: e("flex-shrink-0 pt-4", a(S))
 			}),
 			/* @__PURE__ */ m("div", {
 				className: "flex flex-1 flex-col gap-12 pe-24 text-b4",
@@ -54,7 +54,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 						style: { rotate: k ? "180deg" : "0deg" },
 						className: "transition-all duration-300"
 					})]
-				}), /* @__PURE__ */ p(n, {
+				}), /* @__PURE__ */ p(t, {
 					isExpanded: k,
 					children: /* @__PURE__ */ p("div", {
 						className: "pt-4",
@@ -76,7 +76,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 			C !== !1 && /* @__PURE__ */ p("div", {
 				className: "absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16",
 				children: /* @__PURE__ */ p("div", {
-					className: i(S),
+					className: r(S),
 					style: {
 						width: "100%",
 						height: "100%",

package/ui/AdvancedToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slideRightEnter' : 'animate-slideRightExit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Icon\n        name={icon}\n        width=\"30px\"\n        className={clsx('flex-shrink-0 pt-4', getTextColor(accentColor))}\n      />\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,4BAA4B,oCACxC,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,GAAD;IACE,MAAM;IACN,OAAM;IACN,WAAW,EAAK,sBAAsB,EAAa,EAAY,CAAA;IAC/D,CAAA;GACF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}
+{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Icon\n        name={icon}\n        width=\"30px\"\n        className={clsx('flex-shrink-0 pt-4', getTextColor(accentColor))}\n      />\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,GAAD;IACE,MAAM;IACN,OAAM;IACN,WAAW,EAAK,sBAAsB,EAAa,EAAY,CAAA;IAC/D,CAAA;GACF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}

package/ui/BasicToast.js

@@ -10,7 +10,7 @@ function l({ className: l, description: u, href: d, icon: f, incentive: p, isVis
 	let S = r(v), C = a(), w = b ?? u;
 	return /* @__PURE__ */ c("div", {
 		...x,
-		className: e(m ? "animate-slideRightEnter" : "animate-slideRightExit opacity-0", "relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300", t(S), n(S), l),
+		className: e(m ? "animate-slide-right-enter" : "animate-slide-right-exit opacity-0", "relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300", t(S), n(S), l),
 		role: "note",
 		children: [
 			f && /* @__PURE__ */ s(o, {

package/ui/BasicToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicToast.js","names":[],"sources":["../../lib/ui/BasicToast.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, useId } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { getBgColor, getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\nimport { Link } from './Link';\nimport type { Theme } from './types/Theme';\n\nexport interface BasicToastProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * @deprecated use children slot instead\n   */\n  description?: string;\n  href: string;\n  icon?: IconicNames;\n  incentive: string;\n  isVisible: boolean;\n  labels: { close: string };\n  onClick?: () => void;\n  onClose?: () => void;\n  theme: Theme;\n  title: string;\n}\n\nexport function BasicToast({\n  className,\n  description,\n  href,\n  icon,\n  incentive,\n  isVisible,\n  labels,\n  onClick,\n  onClose,\n  theme = 'dark',\n  title,\n  children,\n  ...attrs\n}: PropsWithChildren<BasicToastProps>) {\n  const color = getThemeColor(theme);\n  const id = useId();\n  const content = children ?? description;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slideRightEnter' : 'animate-slideRightExit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300',\n        getBgColor(color),\n        getComplementaryTextColor(color),\n        className,\n      )}\n      role=\"note\"\n    >\n      {icon && <Icon name={icon} width=\"30px\" />}\n      <a className=\"group pe-44\" href={href} onClick={onClick}>\n        <p className=\"mb-4 text-b3 font-bold\" id={id}>\n          {title}\n        </p>\n        {content && <div className=\"mb-12 text-b4\">{content}</div>}\n        <Link component=\"span\" className=\"text-b3 font-bold\" label={incentive} />\n      </a>\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className={clsx('absolute end-0 top-0 m-20', getComplementaryTextColor(color))}\n          onClick={onClose}\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,EAAW,EACzB,cACA,gBACA,SACA,SACA,cACA,cACA,WACA,YACA,YACA,WAAQ,QACR,UACA,aACA,GAAG,KACkC;CACrC,IAAM,IAAQ,EAAc,EAAM,EAC5B,IAAK,GAAO,EACZ,IAAU,KAAY;AAE5B,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,IAAY,4BAA4B,oCACxC,kFACA,EAAW,EAAM,EACjB,EAA0B,EAAM,EAChC,EACD;EACD,MAAK;YATP;GAWG,KAAQ,kBAAC,GAAD;IAAM,MAAM;IAAM,OAAM;IAAS,CAAA;GAC1C,kBAAC,KAAD;IAAG,WAAU;IAAoB;IAAe;cAAhD;KACE,kBAAC,KAAD;MAAG,WAAU;MAA6B;gBACvC;MACC,CAAA;KACH,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAiB;MAAc,CAAA;KAC1D,kBAAC,GAAD;MAAM,WAAU;MAAO,WAAU;MAAoB,OAAO;MAAa,CAAA;;;GAE1E,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAW,EAAK,6BAA6B,EAA0B,EAAM,CAAC;IAC9E,SAAS;cAET,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA"}
+{"version":3,"file":"BasicToast.js","names":[],"sources":["../../lib/ui/BasicToast.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, useId } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { getBgColor, getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\nimport { Link } from './Link';\nimport type { Theme } from './types/Theme';\n\nexport interface BasicToastProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * @deprecated use children slot instead\n   */\n  description?: string;\n  href: string;\n  icon?: IconicNames;\n  incentive: string;\n  isVisible: boolean;\n  labels: { close: string };\n  onClick?: () => void;\n  onClose?: () => void;\n  theme: Theme;\n  title: string;\n}\n\nexport function BasicToast({\n  className,\n  description,\n  href,\n  icon,\n  incentive,\n  isVisible,\n  labels,\n  onClick,\n  onClose,\n  theme = 'dark',\n  title,\n  children,\n  ...attrs\n}: PropsWithChildren<BasicToastProps>) {\n  const color = getThemeColor(theme);\n  const id = useId();\n  const content = children ?? description;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300',\n        getBgColor(color),\n        getComplementaryTextColor(color),\n        className,\n      )}\n      role=\"note\"\n    >\n      {icon && <Icon name={icon} width=\"30px\" />}\n      <a className=\"group pe-44\" href={href} onClick={onClick}>\n        <p className=\"mb-4 text-b3 font-bold\" id={id}>\n          {title}\n        </p>\n        {content && <div className=\"mb-12 text-b4\">{content}</div>}\n        <Link component=\"span\" className=\"text-b3 font-bold\" label={incentive} />\n      </a>\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className={clsx('absolute end-0 top-0 m-20', getComplementaryTextColor(color))}\n          onClick={onClose}\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,EAAW,EACzB,cACA,gBACA,SACA,SACA,cACA,cACA,WACA,YACA,YACA,WAAQ,QACR,UACA,aACA,GAAG,KACkC;CACrC,IAAM,IAAQ,EAAc,EAAM,EAC5B,IAAK,GAAO,EACZ,IAAU,KAAY;AAE5B,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,kFACA,EAAW,EAAM,EACjB,EAA0B,EAAM,EAChC,EACD;EACD,MAAK;YATP;GAWG,KAAQ,kBAAC,GAAD;IAAM,MAAM;IAAM,OAAM;IAAS,CAAA;GAC1C,kBAAC,KAAD;IAAG,WAAU;IAAoB;IAAe;cAAhD;KACE,kBAAC,KAAD;MAAG,WAAU;MAA6B;gBACvC;MACC,CAAA;KACH,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAiB;MAAc,CAAA;KAC1D,kBAAC,GAAD;MAAM,WAAU;MAAO,WAAU;MAAoB,OAAO;MAAa,CAAA;;;GAE1E,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAW,EAAK,6BAA6B,EAA0B,EAAM,CAAC;IAC9E,SAAS;cAET,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA"}

package/ui/ChoiceExpander.js

@@ -43,7 +43,7 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 		children: /* @__PURE__ */ u("div", {
 			ref: O,
 			className: e("absolute top-0 grid transition-all duration-500", !M && [
-				"w-240 rounded-pill border-transparent",
+				"w-240 rounded-pill-transitionable border-transparent",
 				t(y),
 				n(b)
 			], M && [

package/ui/ChoiceExpander.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceExpander.js","names":[],"sources":["../../lib/ui/ChoiceExpander.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { getBgColor, getTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\nexport interface ChoiceExpanderProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Text shown when collapsed (e.g., \"From $255\")\n   */\n  label: string;\n\n  /**\n   * Show check icon in collapsed state (selected variant)\n   */\n  showCheckIcon?: boolean;\n\n  /**\n   * Content shown when expanded\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled state - if provided, component is controlled\n   */\n  expanded?: boolean;\n\n  /**\n   * Initial state for uncontrolled mode\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (isExpanded: boolean) => void;\n\n  /**\n   * Disable interaction\n   */\n  disabled?: boolean;\n\n  /**\n   * Custom aria-label for button\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background color for unexpanded button state\n   */\n  buttonBgColor?: Colors;\n\n  /**\n   * Text color for unexpanded button state\n   */\n  buttonTextColor?: Colors;\n\n  /**\n   * collapse label for screen readers\n   */\n  collapseLabel: string;\n\n  /**\n   * expand label for screen readers\n   */\n  expandLabel: string;\n}\n\nexport const ChoiceExpander: FunctionComponent<ChoiceExpanderProps> = ({\n  label,\n  showCheckIcon = false,\n  children,\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  disabled = false,\n  ariaLabel,\n  buttonBgColor = 'black',\n  buttonTextColor = 'white',\n  collapseLabel,\n  expandLabel,\n  className,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const contentId = useId();\n  const morphContainerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const hasInteractedRef = useRef(false);\n\n  const isExpanded = expanded !== undefined ? expanded : internalExpanded;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    hasInteractedRef.current = true;\n    const newState = !isExpanded;\n\n    if (expanded === undefined) {\n      setInternalExpanded(newState);\n    }\n\n    onExpandedChange?.(newState);\n  }, [disabled, isExpanded, expanded, onExpandedChange]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isExpanded, handleToggle]);\n\n  useEffect(() => {\n    if (isExpanded && closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    } else if (!isExpanded && hasInteractedRef.current && triggerButtonRef.current) {\n      triggerButtonRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (morphContainerRef.current && !morphContainerRef.current.contains(event.target as Node)) {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isExpanded, handleToggle]);\n\n  return (\n    <div\n      className={clsx('relative flex items-center justify-center', className)}\n      data-name=\"ChoiceExpander\"\n      data-testid=\"choice-expander\"\n      style={{ width: '240px', height: 48 }}\n      {...props}\n    >\n      <div\n        ref={morphContainerRef}\n        className={clsx(\n          'absolute top-0 grid transition-all duration-500',\n          !isExpanded && [\n            'w-240 rounded-pill border-transparent',\n            getBgColor(buttonBgColor),\n            getTextColor(buttonTextColor),\n          ],\n          isExpanded && [\n            'w-324 rounded-16 bg-white text-black border border-gray-900',\n            'z-10',\n            disabled && 'opacity-50',\n          ],\n        )}\n      >\n        <button\n          ref={triggerButtonRef}\n          type=\"button\"\n          data-testid=\"choice-expander-button\"\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-label={ariaLabel || label}\n          disabled={disabled}\n          onClick={handleToggle}\n          className={clsx(\n            'flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200',\n            'rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            '[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]',\n          )}\n        >\n          {/* invisible top middle anchor position */}\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute h-24 w-24 mx-auto pointer-events-none\"\n            style={{ anchorName: '--middle-anchor' } as React.CSSProperties}\n          ></div>\n          <span className=\"text-b3 flex items-center font-semibold\">\n            {/* label anchor */}\n            <span\n              className={clsx('transition-opacity duration-200 pe-8', isExpanded && 'opacity-0')}\n            >\n              {label}\n            </span>\n            <div\n              className=\"h-24 w-24\"\n              style={{ anchorName: '--label-anchor' } as React.CSSProperties}\n              aria-hidden=\"true\"\n            >\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                aria-hidden=\"true\"\n                className={clsx(\n                  isExpanded ? 'absolute left-[calc(50%-12px)] rotate-180' : 'rotate-[0deg]',\n                )}\n                style={\n                  {\n                    transition: 'rotate 0.3s, left 0.3s',\n                    opacity: 'calc((1 - var(--anchorSupport)) * 1)',\n                  } as React.CSSProperties\n                }\n              />\n            </div>\n            <span className=\"sr-only\">{isExpanded ? collapseLabel : expandLabel}</span>\n          </span>\n          <Icon\n            name=\"ArrowDefaultDown\"\n            width=\"24px\"\n            aria-hidden=\"true\"\n            className={clsx('absolute', isExpanded ? 'rotate-180' : 'rotate-[0deg]')}\n            style={\n              {\n                positionAnchor: isExpanded ? '--middle-anchor' : '--label-anchor',\n                left: 'anchor(left)',\n                top: 'anchor(top)',\n                transition: 'left 0.3s, rotate 0.3s',\n              } as React.CSSProperties\n            }\n          />\n          {showCheckIcon && (\n            <Icon\n              name=\"CheckDefault\"\n              width=\"24px\"\n              aria-hidden=\"true\"\n              className={clsx('transition-opacity duration-200', isExpanded && 'opacity-0')}\n            />\n          )}\n        </button>\n\n        <div\n          className={clsx(\n            'grid overflow-hidden transition-[grid-template-rows,opacity] duration-500',\n            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0',\n          )}\n        >\n          <div className=\"overflow-hidden\">\n            <div className=\"px-8 pb-8\" id={contentId}>\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChoiceExpander.js","names":[],"sources":["../../lib/ui/ChoiceExpander.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { getBgColor, getTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\nexport interface ChoiceExpanderProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Text shown when collapsed (e.g., \"From $255\")\n   */\n  label: string;\n\n  /**\n   * Show check icon in collapsed state (selected variant)\n   */\n  showCheckIcon?: boolean;\n\n  /**\n   * Content shown when expanded\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled state - if provided, component is controlled\n   */\n  expanded?: boolean;\n\n  /**\n   * Initial state for uncontrolled mode\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (isExpanded: boolean) => void;\n\n  /**\n   * Disable interaction\n   */\n  disabled?: boolean;\n\n  /**\n   * Custom aria-label for button\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background color for unexpanded button state\n   */\n  buttonBgColor?: Colors;\n\n  /**\n   * Text color for unexpanded button state\n   */\n  buttonTextColor?: Colors;\n\n  /**\n   * collapse label for screen readers\n   */\n  collapseLabel: string;\n\n  /**\n   * expand label for screen readers\n   */\n  expandLabel: string;\n}\n\nexport const ChoiceExpander: FunctionComponent<ChoiceExpanderProps> = ({\n  label,\n  showCheckIcon = false,\n  children,\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  disabled = false,\n  ariaLabel,\n  buttonBgColor = 'black',\n  buttonTextColor = 'white',\n  collapseLabel,\n  expandLabel,\n  className,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const contentId = useId();\n  const morphContainerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const hasInteractedRef = useRef(false);\n\n  const isExpanded = expanded !== undefined ? expanded : internalExpanded;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    hasInteractedRef.current = true;\n    const newState = !isExpanded;\n\n    if (expanded === undefined) {\n      setInternalExpanded(newState);\n    }\n\n    onExpandedChange?.(newState);\n  }, [disabled, isExpanded, expanded, onExpandedChange]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isExpanded, handleToggle]);\n\n  useEffect(() => {\n    if (isExpanded && closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    } else if (!isExpanded && hasInteractedRef.current && triggerButtonRef.current) {\n      triggerButtonRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (morphContainerRef.current && !morphContainerRef.current.contains(event.target as Node)) {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isExpanded, handleToggle]);\n\n  return (\n    <div\n      className={clsx('relative flex items-center justify-center', className)}\n      data-name=\"ChoiceExpander\"\n      data-testid=\"choice-expander\"\n      style={{ width: '240px', height: 48 }}\n      {...props}\n    >\n      <div\n        ref={morphContainerRef}\n        className={clsx(\n          'absolute top-0 grid transition-all duration-500',\n          !isExpanded && [\n            'w-240 rounded-pill-transitionable border-transparent',\n            getBgColor(buttonBgColor),\n            getTextColor(buttonTextColor),\n          ],\n          isExpanded && [\n            'w-324 rounded-16 bg-white text-black border border-gray-900',\n            'z-10',\n            disabled && 'opacity-50',\n          ],\n        )}\n      >\n        <button\n          ref={triggerButtonRef}\n          type=\"button\"\n          data-testid=\"choice-expander-button\"\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-label={ariaLabel || label}\n          disabled={disabled}\n          onClick={handleToggle}\n          className={clsx(\n            'flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200',\n            'rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            '[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]',\n          )}\n        >\n          {/* invisible top middle anchor position */}\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute h-24 w-24 mx-auto pointer-events-none\"\n            style={{ anchorName: '--middle-anchor' } as React.CSSProperties}\n          ></div>\n          <span className=\"text-b3 flex items-center font-semibold\">\n            {/* label anchor */}\n            <span\n              className={clsx('transition-opacity duration-200 pe-8', isExpanded && 'opacity-0')}\n            >\n              {label}\n            </span>\n            <div\n              className=\"h-24 w-24\"\n              style={{ anchorName: '--label-anchor' } as React.CSSProperties}\n              aria-hidden=\"true\"\n            >\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                aria-hidden=\"true\"\n                className={clsx(\n                  isExpanded ? 'absolute left-[calc(50%-12px)] rotate-180' : 'rotate-[0deg]',\n                )}\n                style={\n                  {\n                    transition: 'rotate 0.3s, left 0.3s',\n                    opacity: 'calc((1 - var(--anchorSupport)) * 1)',\n                  } as React.CSSProperties\n                }\n              />\n            </div>\n            <span className=\"sr-only\">{isExpanded ? collapseLabel : expandLabel}</span>\n          </span>\n          <Icon\n            name=\"ArrowDefaultDown\"\n            width=\"24px\"\n            aria-hidden=\"true\"\n            className={clsx('absolute', isExpanded ? 'rotate-180' : 'rotate-[0deg]')}\n            style={\n              {\n                positionAnchor: isExpanded ? '--middle-anchor' : '--label-anchor',\n                left: 'anchor(left)',\n                top: 'anchor(top)',\n                transition: 'left 0.3s, rotate 0.3s',\n              } as React.CSSProperties\n            }\n          />\n          {showCheckIcon && (\n            <Icon\n              name=\"CheckDefault\"\n              width=\"24px\"\n              aria-hidden=\"true\"\n              className={clsx('transition-opacity duration-200', isExpanded && 'opacity-0')}\n            />\n          )}\n        </button>\n\n        <div\n          className={clsx(\n            'grid overflow-hidden transition-[grid-template-rows,opacity] duration-500',\n            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0',\n          )}\n        >\n          <div className=\"overflow-hidden\">\n            <div className=\"px-8 pb-8\" id={contentId}>\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/ElasticHeight.d.ts

@@ -3,7 +3,6 @@ interface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {
     innerClassName?: string;
     isExpanded?: boolean;
     min?: number;
-    onHeightChange?: (height: number) => void;
 }
 export declare const ElasticHeight: FunctionComponent<ElasticHeightProps>;
 export {};

package/ui/ElasticHeight.js

@@ -1,31 +1,22 @@
-"use client";
 import { t as e } from "../chunks/clsx.js";
-import t from "./hooks/useResizeObserver.js";
-import { useLayoutEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
+import { useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region lib/ui/ElasticHeight.tsx
-var o = ({ className: o, children: s, innerClassName: c, isExpanded: l = !1, min: u = 0, ...d }) => {
-	let f = r(null), [p, m] = i(0);
-	return t({
-		ref: f,
-		onResize: () => {
-			f.current && m(f.current?.offsetHeight);
-		}
-	}), n(() => {
-		f.current && m(f.current.offsetHeight);
-	}, [f]), /* @__PURE__ */ a("div", {
-		...d,
-		className: e("overflow-hidden transition-all duration-500", o),
-		"data-expanded": l,
-		style: { height: l ? p : u },
-		children: /* @__PURE__ */ a("div", {
-			className: c,
-			ref: f,
-			children: s
+var r = ({ className: r, children: i, innerClassName: a, isExpanded: o = !1, min: s = 0, ...c }) => {
+	let l = t(null);
+	return /* @__PURE__ */ n("div", {
+		...c,
+		className: e("overflow-hidden transition-all duration-500 grid", "data-[expanded=true]:grid-rows-[1fr]", "data-[expanded=false]:grid-rows-[0fr]", r),
+		"data-expanded": o,
+		children: /* @__PURE__ */ n("div", {
+			style: { minHeight: s },
+			className: e("overflow-hidden", a),
+			ref: l,
+			children: i
 		})
 	});
 };
 //#endregion
-export { o as ElasticHeight };
+export { r as ElasticHeight };
 
 //# sourceMappingURL=ElasticHeight.js.map

package/ui/ElasticHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElasticHeight.js","names":[],"sources":["../../lib/ui/ElasticHeight.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n  onHeightChange?: (height: number) => void;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n  const [max, setMax] = useState(0);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: ref,\n    onResize: () => {\n      if (ref.current) {\n        setMax(ref.current?.offsetHeight);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMax(ref.current.offsetHeight);\n  }, [ref]);\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('overflow-hidden transition-all duration-500', className)}\n      data-expanded={isExpanded}\n      style={{ height: isExpanded ? max : min }}\n    >\n      <div className={innerClassName} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAmBA,IAAa,KAAwD,EACnE,cACA,aACA,mBACA,gBAAa,IACb,SAAM,GACN,GAAG,QACC;CACJ,IAAM,IAAM,EAAuB,KAAY,EACzC,CAAC,GAAK,KAAU,EAAS,EAAE;AAkBjC,QAhBA,EAAkC;EAC3B;EACL,gBAAgB;AACd,GAAI,EAAI,WACN,EAAO,EAAI,SAAS,aAAa;;EAGtC,CAAC,EAEF,QAAsB;AACf,IAAI,WAGT,EAAO,EAAI,QAAQ,aAAa;IAC/B,CAAC,EAAI,CAAC,EAGP,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,+CAA+C,EAAU;EACzE,iBAAe;EACf,OAAO,EAAE,QAAQ,IAAa,IAAM,GAAK;YAEzC,kBAAC,OAAD;GAAK,WAAW;GAAqB;GAClC;GACG,CAAA;EACF,CAAA"}
+{"version":3,"file":"ElasticHeight.js","names":[],"sources":["../../lib/ui/ElasticHeight.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type FunctionComponent, useRef } from 'react';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        'overflow-hidden transition-all duration-500 grid',\n        'data-[expanded=true]:grid-rows-[1fr]',\n        'data-[expanded=false]:grid-rows-[0fr]',\n        className,\n      )}\n      data-expanded={isExpanded}\n    >\n      <div style={{ minHeight: min }} className={clsx('overflow-hidden', innerClassName)} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAa,KAAwD,EACnE,cACA,aACA,mBACA,gBAAa,IACb,SAAM,GACN,GAAG,QACC;CACJ,IAAM,IAAM,EAAuB,KAAY;AAE/C,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,oDACA,wCACA,yCACA,EACD;EACD,iBAAe;YAEf,kBAAC,OAAD;GAAK,OAAO,EAAE,WAAW,GAAK;GAAE,WAAW,EAAK,mBAAmB,EAAe;GAAO;GACtF;GACG,CAAA;EACF,CAAA"}

package/ui/SidebarLayout.js

@@ -125,7 +125,7 @@ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, ...u }) => {
 		}), /* @__PURE__ */ l("div", {
 			className: "flex h-full overflow-x-clip overflow-y-hidden",
 			children: [/* @__PURE__ */ l("aside", {
-				className: t("max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0", m ? "max-md:-translate-x-full" : "md:pe-24"),
+				className: t("z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0", m ? "max-md:-translate-x-full" : "md:pe-24"),
 				children: [/* @__PURE__ */ c("button", {
 					className: "hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]",
 					onClick: g,

package/ui/SidebarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type PropsWithChildren,\n  type ReactNode,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n}\n\nfunction useSidebarLayout() {\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, []);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout();\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type PropsWithChildren,\n  type ReactNode,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n}\n\nfunction useSidebarLayout() {\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, []);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout();\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}