@clubmed/trident-ui 2.0.0-beta.74 → 2.0.0-beta.76

package/ui/Chapters/Chapter.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+interface Props {
+    index: number;
+    setActiveChapter: (index: number) => void;
+}
+export declare const Chapter: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/ui/Chapters/Chapter.js

@@ -0,0 +1,36 @@
+"use client";
+import { useEffect as e, useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+var r = (() => {
+	let e = [];
+	for (let t = 0; t <= 1; t += .03) e.push(parseFloat(t.toFixed(2)));
+	return e;
+})(), i = (e) => {
+	let t = e.boundingClientRect.height <= window.innerHeight / 2 && e.intersectionRect.height > window.innerHeight / 3, n = e.boundingClientRect.height <= window.innerHeight / 2 && e.boundingClientRect.height === e.intersectionRect.height, r = e.boundingClientRect.height > window.innerHeight / 2 && e.intersectionRect.height > window.innerHeight / 2;
+	return t || n || r;
+}, a = ({ children: a, index: o, setActiveChapter: s }) => {
+	let c = t(null);
+	return e(() => {
+		let e = c.current;
+		if (e) {
+			let t = new IntersectionObserver(([e]) => {
+				i(e) && s(o);
+			}, {
+				threshold: r,
+				rootMargin: "0px 0px 0px 0px"
+			});
+			return t.observe(e), () => t.unobserve(e);
+		}
+	}, [
+		c,
+		o,
+		s
+	]), /* @__PURE__ */ n("section", {
+		ref: c,
+		children: a
+	});
+};
+//#endregion
+export { a as Chapter };
+
+//# sourceMappingURL=Chapter.js.map

package/ui/Chapters/Chapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapter.js","names":[],"sources":["../../../lib/ui/Chapters/Chapter.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useRef, type FunctionComponent, type PropsWithChildren } from 'react';\n\ninterface Props {\n  index: number;\n  setActiveChapter: (index: number) => void;\n}\n\nconst generateThreshold = () => {\n  const threshold: number[] = [];\n\n  for (let i = 0; i <= 1; i += 0.03) {\n    threshold.push(parseFloat(i.toFixed(2)));\n  }\n\n  return threshold;\n};\n\nconst THRESHOLD = generateThreshold();\n\nconst isChapterActive = (entry: IntersectionObserverEntry) => {\n  const isHalfHeightAndOneThirdVisible =\n    entry.boundingClientRect.height <= window.innerHeight / 2 &&\n    entry.intersectionRect.height > window.innerHeight / 3;\n\n  const isHalfHeightAndFullyVisible =\n    entry.boundingClientRect.height <= window.innerHeight / 2 &&\n    entry.boundingClientRect.height === entry.intersectionRect.height;\n\n  const isMoreThanHalfHeightAndHalfVisible =\n    entry.boundingClientRect.height > window.innerHeight / 2 &&\n    entry.intersectionRect.height > window.innerHeight / 2;\n\n  return (\n    isHalfHeightAndOneThirdVisible ||\n    isHalfHeightAndFullyVisible ||\n    isMoreThanHalfHeightAndHalfVisible\n  );\n};\n\nexport const Chapter: FunctionComponent<PropsWithChildren<Props>> = ({\n  children,\n  index,\n  setActiveChapter,\n}) => {\n  const element = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const current = element.current;\n\n    if (current) {\n      const observer = new IntersectionObserver(\n        ([entry]) => {\n          if (isChapterActive(entry)) {\n            setActiveChapter(index);\n          }\n        },\n        {\n          threshold: THRESHOLD,\n          rootMargin: '0px 0px 0px 0px',\n        },\n      );\n\n      observer.observe(current);\n\n      return () => observer.unobserve(current);\n    }\n  }, [element, index, setActiveChapter]);\n\n  return <section ref={element}>{children}</section>;\n};\n"],"mappings":";;;AAkBA,IAAM,WAV0B;CAC9B,IAAM,IAAsB,EAAE;AAE9B,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,IAC3B,GAAU,KAAK,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;AAG1C,QAAO;IAG4B,EAE/B,KAAmB,MAAqC;CAC5D,IAAM,IACJ,EAAM,mBAAmB,UAAU,OAAO,cAAc,KACxD,EAAM,iBAAiB,SAAS,OAAO,cAAc,GAEjD,IACJ,EAAM,mBAAmB,UAAU,OAAO,cAAc,KACxD,EAAM,mBAAmB,WAAW,EAAM,iBAAiB,QAEvD,IACJ,EAAM,mBAAmB,SAAS,OAAO,cAAc,KACvD,EAAM,iBAAiB,SAAS,OAAO,cAAc;AAEvD,QACE,KACA,KACA;GAIS,KAAwD,EACnE,aACA,UACA,0BACI;CACJ,IAAM,IAAU,EAAuB,KAAK;AAwB5C,QAtBA,QAAgB;EACd,IAAM,IAAU,EAAQ;AAExB,MAAI,GAAS;GACX,IAAM,IAAW,IAAI,sBAClB,CAAC,OAAW;AACX,IAAI,EAAgB,EAAM,IACxB,EAAiB,EAAM;MAG3B;IACE,WAAW;IACX,YAAY;IACb,CACF;AAID,UAFA,EAAS,QAAQ,EAAQ,QAEZ,EAAS,UAAU,EAAQ;;IAEzC;EAAC;EAAS;EAAO;EAAiB,CAAC,EAE/B,kBAAC,WAAD;EAAS,KAAK;EAAU;EAAmB,CAAA"}

package/ui/Chapters/ChapterTitle.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';
+import { Heading } from '../heading/Heading';
+import { Theme } from '../types/Theme';
+interface Props {
+    className?: string;
+    hasNext?: boolean;
+    hLevel?: ComponentProps<typeof Heading>['level'];
+    index: number;
+    isActive?: boolean;
+    onClick?: () => void;
+    theme?: Theme;
+}
+export declare const ChapterTitle: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/ui/Chapters/ChapterTitle.js

@@ -0,0 +1,35 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Heading as t } from "../heading/Heading.js";
+import { getTheme as n } from "./Chapters.themes.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Icon as a } from "@clubmed/trident-icons";
+//#region lib/ui/Chapters/ChapterTitle.tsx
+var o = ({ children: o, className: s, hasNext: c = !1, hLevel: l = 2, index: u, isActive: d = !1, onClick: f, theme: p = "coreRange" }) => {
+	let { thTitle: m, thTitleUnActive: h } = n(p);
+	return /* @__PURE__ */ i(t, {
+		className: e("text-h5 @md:text-h2 sticky top-0 z-1 flex justify-between gap-x-8 p-20 font-serif transition-colors duration-300 @md:static @md:bg-transparent @md:p-0", m, s),
+		id: `chapter${u}`,
+		level: l,
+		children: [/* @__PURE__ */ i("a", {
+			className: e("flex-1", { [h]: !d }),
+			href: `#chapter${u}`,
+			onClick: f,
+			children: [/* @__PURE__ */ i("span", {
+				className: "@md:hidden",
+				children: [u + 1, " - "]
+			}), o]
+		}), c && /* @__PURE__ */ r("a", {
+			className: "@md:hidden",
+			href: `#chapter${u + 1}`,
+			children: /* @__PURE__ */ r(a, {
+				name: "ArrowTailDown",
+				width: "24px"
+			})
+		})]
+	});
+};
+//#endregion
+export { o as ChapterTitle };
+
+//# sourceMappingURL=ChapterTitle.js.map

package/ui/Chapters/ChapterTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChapterTitle.js","names":[],"sources":["../../../lib/ui/Chapters/ChapterTitle.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { Heading } from '../heading/Heading';\nimport type { Theme } from '../types/Theme';\n\nimport { getTheme } from './Chapters.themes';\n\ninterface Props {\n  className?: string;\n  hasNext?: boolean;\n  hLevel?: ComponentProps<typeof Heading>['level'];\n  index: number;\n  isActive?: boolean;\n  onClick?: () => void;\n  theme?: Theme;\n}\n\nexport const ChapterTitle: FunctionComponent<PropsWithChildren<Props>> = ({\n  children,\n  className,\n  hasNext = false,\n  hLevel = 2,\n  index,\n  isActive = false,\n  onClick,\n  theme = 'coreRange',\n}) => {\n  const { thTitle, thTitleUnActive } = getTheme(theme);\n\n  return (\n    <Heading\n      className={clsx(\n        'text-h5 @md:text-h2 sticky top-0 z-1 flex justify-between gap-x-8 p-20 font-serif transition-colors duration-300 @md:static @md:bg-transparent @md:p-0',\n        thTitle,\n        className,\n      )}\n      id={`chapter${index}`}\n      level={hLevel}\n    >\n      <a\n        className={clsx('flex-1', {\n          [thTitleUnActive]: !isActive,\n        })}\n        href={`#chapter${index}`}\n        onClick={onClick}\n      >\n        <span className=\"@md:hidden\">{index + 1} - </span>\n        {children}\n      </a>\n      {hasNext && (\n        <a className=\"@md:hidden\" href={`#chapter${index + 1}`}>\n          <Icon name=\"ArrowTailDown\" width=\"24px\" />\n        </a>\n      )}\n    </Heading>\n  );\n};\n"],"mappings":";;;;;;;AAoBA,IAAa,KAA6D,EACxE,aACA,cACA,aAAU,IACV,YAAS,GACT,UACA,cAAW,IACX,YACA,WAAQ,kBACJ;CACJ,IAAM,EAAE,YAAS,uBAAoB,EAAS,EAAM;AAEpD,QACE,kBAAC,GAAD;EACE,WAAW,EACT,0JACA,GACA,EACD;EACD,IAAI,UAAU;EACd,OAAO;YAPT,CASE,kBAAC,KAAD;GACE,WAAW,EAAK,UAAU,GACvB,IAAkB,CAAC,GACrB,CAAC;GACF,MAAM,WAAW;GACR;aALX,CAOE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CAA8B,IAAQ,GAAE,MAAA;OACvC,EAAA;MAEF,KACC,kBAAC,KAAD;GAAG,WAAU;GAAa,MAAM,WAAW,IAAQ;aACjD,kBAAC,GAAD;IAAM,MAAK;IAAgB,OAAM;IAAS,CAAA;GACxC,CAAA,CAAA"}

package/ui/Chapters/Chapters.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, FunctionComponent, ReactNode } from 'react';
+import { IconicNames } from '@clubmed/trident-icons';
+import { Theme } from '../types/Theme';
+export interface ChapterItem {
+    content: ReactNode;
+    title: string;
+}
+export interface ChaptersProps extends Omit<ComponentPropsWithoutRef<'section'>, 'onClick' | 'children'> {
+    chapters: ChapterItem[];
+    hLevel?: 2 | 3 | 4;
+    icon?: IconicNames;
+    onClick?: (chapter: ChapterItem) => void;
+    theme?: Theme;
+}
+export declare const Chapters: FunctionComponent<ChaptersProps>;

package/ui/Chapters/Chapters.js

@@ -0,0 +1,42 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Chapter as t } from "./Chapter.js";
+import { ChapterTitle as n } from "./ChapterTitle.js";
+import { ChaptersSummary as r } from "./ChaptersSummary.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/ui/Chapters/Chapters.tsx
+var s = ({ chapters: s, className: c, hLevel: l = 2, icon: u, onClick: d, theme: f = "coreRange", ...p }) => {
+	let [m, h] = i(0);
+	return /* @__PURE__ */ o("section", {
+		...p,
+		className: e(c, "flex @container/chapters"),
+		children: [/* @__PURE__ */ a(r, {
+			activeChapter: m,
+			chapters: s,
+			className: "hidden w-3/10 @md:block @xl:w-[calc(50%-380px)]",
+			icon: u,
+			onClick: d,
+			theme: f
+		}), /* @__PURE__ */ a("div", {
+			className: e("relative isolate w-full flex-1 @md:max-w-7/10 @xl:max-w-[calc(50%+380px)]", "@md:ps-20 @lg:ps-40 @xl:ps-120"),
+			children: s.map((e, r) => /* @__PURE__ */ o(t, {
+				index: r,
+				setActiveChapter: h,
+				children: [/* @__PURE__ */ a(n, {
+					hasNext: r < s.length - 1,
+					hLevel: l,
+					index: r,
+					isActive: r === m,
+					onClick: () => d?.(e),
+					theme: f,
+					children: e.title
+				}), e.content]
+			}, e.title))
+		})]
+	});
+};
+//#endregion
+export { s as Chapters };
+
+//# sourceMappingURL=Chapters.js.map

package/ui/Chapters/Chapters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapters.js","names":[],"sources":["../../../lib/ui/Chapters/Chapters.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport {\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n} from 'react';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Theme } from '../types/Theme';\n\nimport { Chapter } from './Chapter';\nimport { ChapterTitle } from './ChapterTitle';\nimport { ChaptersSummary } from './ChaptersSummary';\n\nexport interface ChapterItem {\n  content: ReactNode;\n  title: string;\n}\n\nexport interface ChaptersProps\n  extends Omit<ComponentPropsWithoutRef<'section'>, 'onClick' | 'children'> {\n  chapters: ChapterItem[];\n  hLevel?: 2 | 3 | 4;\n  icon?: IconicNames;\n  onClick?: (chapter: ChapterItem) => void;\n  theme?: Theme;\n}\n\nexport const Chapters: FunctionComponent<ChaptersProps> = ({\n  chapters,\n  className,\n  hLevel = 2,\n  icon,\n  onClick,\n  theme = 'coreRange',\n  ...attrs\n}) => {\n  const [activeChapter, setActiveChapter] = useState(0);\n\n  return (\n    <section {...attrs} className={clsx(className, 'flex @container/chapters')}>\n      <ChaptersSummary\n        activeChapter={activeChapter}\n        chapters={chapters}\n        className=\"hidden w-3/10 @md:block @xl:w-[calc(50%-380px)]\"\n        icon={icon}\n        onClick={onClick}\n        theme={theme}\n      />\n\n      <div\n        className={clsx(\n          'relative isolate w-full flex-1 @md:max-w-7/10 @xl:max-w-[calc(50%+380px)]',\n          '@md:ps-20 @lg:ps-40 @xl:ps-120',\n        )}\n      >\n        {chapters.map((chapter, index) => (\n          <Chapter index={index} key={chapter.title} setActiveChapter={setActiveChapter}>\n            <ChapterTitle\n              hasNext={index < chapters.length - 1}\n              hLevel={hLevel}\n              index={index}\n              isActive={index === activeChapter}\n              onClick={() => onClick?.(chapter)}\n              theme={theme}\n            >\n              {chapter.title}\n            </ChapterTitle>\n            {chapter.content}\n          </Chapter>\n        ))}\n      </div>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;AA8BA,IAAa,KAA8C,EACzD,aACA,cACA,YAAS,GACT,SACA,YACA,WAAQ,aACR,GAAG,QACC;CACJ,IAAM,CAAC,GAAe,KAAoB,EAAS,EAAE;AAErD,QACE,kBAAC,WAAD;EAAS,GAAI;EAAO,WAAW,EAAK,GAAW,2BAA2B;YAA1E,CACE,kBAAC,GAAD;GACiB;GACL;GACV,WAAU;GACJ;GACG;GACF;GACP,CAAA,EAEF,kBAAC,OAAD;GACE,WAAW,EACT,6EACA,iCACD;aAEA,EAAS,KAAK,GAAS,MACtB,kBAAC,GAAD;IAAgB;IAA6C;cAA7D,CACE,kBAAC,GAAD;KACE,SAAS,IAAQ,EAAS,SAAS;KAC3B;KACD;KACP,UAAU,MAAU;KACpB,eAAe,IAAU,EAAQ;KAC1B;eAEN,EAAQ;KACI,CAAA,EACd,EAAQ,QAAA;MAXiB,EAAQ,MAY1B,CAAA;GAER,CAAA,CAAA"}

package/ui/Chapters/Chapters.themes.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from '../types/Theme';
+export declare const getTheme: (theme: Theme) => {
+    thSummary: string;
+    thSummaryIcon: string;
+    thSummaryIconName: string;
+    thSummaryIconWidth: string;
+    thTitle: string;
+    thTitleUnActive: string;
+};

package/ui/Chapters/Chapters.themes.js

@@ -0,0 +1,65 @@
+//#region lib/ui/Chapters/Chapters.themes.ts
+var e = {
+	BLACK: {
+		thSummary: "bg-black text-white",
+		thSummaryIcon: "text-white max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-black text-white",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	CORE_RANGE: {
+		thSummary: "bg-lightSand text-black",
+		thSummaryIcon: "text-sand max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-lightSand text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	},
+	EXCLUSIVE_COLLECTION: {
+		thSummary: "bg-ultramarine text-white",
+		thSummaryIcon: "text-white max-w-220",
+		thSummaryIconName: "ExclusiveCollection",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-ultramarine text-white md:text-black",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	HAPPY_TO_CARE: {
+		thSummary: "bg-verdigris text-black",
+		thSummaryIcon: "text-black max-w-220",
+		thSummaryIconName: "HappyToCare",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-verdigris text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	},
+	SIENNA: {
+		thSummary: "bg-sienna text-white",
+		thSummaryIcon: "text-white max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-sienna text-white md:text-black",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	WHITE: {
+		thSummary: "bg-white text-black",
+		thSummaryIcon: "text-sand max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-white text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	}
+}, t = (t) => {
+	switch (t) {
+		case "black": return e.BLACK;
+		case "dark":
+		case "exclusiveCollection": return e.EXCLUSIVE_COLLECTION;
+		case "happyToCare": return e.HAPPY_TO_CARE;
+		case "sienna": return e.SIENNA;
+		case "white": return e.WHITE;
+		default: return e.CORE_RANGE;
+	}
+};
+//#endregion
+export { t as getTheme };
+
+//# sourceMappingURL=Chapters.themes.js.map

package/ui/Chapters/Chapters.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapters.themes.js","names":[],"sources":["../../../lib/ui/Chapters/Chapters.themes.ts"],"sourcesContent":["import type { Theme } from '../types/Theme';\n\nconst THEMES = {\n  BLACK: {\n    thSummary: 'bg-black text-white',\n    thSummaryIcon: 'text-white max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-black text-white',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  CORE_RANGE: {\n    thSummary: 'bg-lightSand text-black',\n    thSummaryIcon: 'text-sand max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-lightSand text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n  EXCLUSIVE_COLLECTION: {\n    thSummary: 'bg-ultramarine text-white',\n    thSummaryIcon: 'text-white max-w-220',\n    thSummaryIconName: 'ExclusiveCollection',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-ultramarine text-white md:text-black',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  HAPPY_TO_CARE: {\n    thSummary: 'bg-verdigris text-black',\n    thSummaryIcon: 'text-black max-w-220',\n    thSummaryIconName: 'HappyToCare',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-verdigris text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n  SIENNA: {\n    thSummary: 'bg-sienna text-white',\n    thSummaryIcon: 'text-white max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-sienna text-white md:text-black',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  WHITE: {\n    thSummary: 'bg-white text-black',\n    thSummaryIcon: 'text-sand max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-white text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n};\n\nexport const getTheme = (theme: Theme) => {\n  switch (theme) {\n    case 'black':\n      return THEMES.BLACK;\n    case 'dark':\n    case 'exclusiveCollection':\n      return THEMES.EXCLUSIVE_COLLECTION;\n    case 'happyToCare':\n      return THEMES.HAPPY_TO_CARE;\n    case 'sienna':\n      return THEMES.SIENNA;\n    case 'white':\n      return THEMES.WHITE;\n    case 'light':\n    case 'coreRange':\n    default:\n      return THEMES.CORE_RANGE;\n  }\n};\n"],"mappings":";AAEA,IAAM,IAAS;CACb,OAAO;EACL,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,YAAY;EACV,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,sBAAsB;EACpB,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,eAAe;EACb,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,QAAQ;EACN,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,OAAO;EACL,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACF,EAEY,KAAY,MAAiB;AACxC,SAAQ,GAAR;EACE,KAAK,QACH,QAAO,EAAO;EAChB,KAAK;EACL,KAAK,sBACH,QAAO,EAAO;EAChB,KAAK,cACH,QAAO,EAAO;EAChB,KAAK,SACH,QAAO,EAAO;EAChB,KAAK,QACH,QAAO,EAAO;EAGhB,QACE,QAAO,EAAO"}

package/ui/Chapters/ChaptersSummary.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { IconicNames } from '@clubmed/trident-icons';
+import { Theme } from '../types/Theme';
+interface ChapterSummaryItem {
+    content: ReactNode;
+    title: string;
+}
+interface Props {
+    activeChapter: number;
+    chapters: ChapterSummaryItem[];
+    className?: string;
+    icon?: IconicNames;
+    onClick?: (chapter: ChapterSummaryItem) => void;
+    theme?: Theme;
+}
+export declare const ChaptersSummary: FunctionComponent<Props>;
+export {};

package/ui/Chapters/ChaptersSummary.js

@@ -0,0 +1,29 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { getTheme as t } from "./Chapters.themes.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@clubmed/trident-icons";
+//#region lib/ui/Chapters/ChaptersSummary.tsx
+var a = { HappyToCareFRCA: "translate-y-[28px]" }, o = ({ activeChapter: o, chapters: s, className: c, icon: l, onClick: u, theme: d = "coreRange" }) => {
+	let { thSummary: f, thSummaryIcon: p, thSummaryIconName: m, thSummaryIconWidth: h } = t(d), g = l ?? m, _ = a[g];
+	return /* @__PURE__ */ n("div", {
+		className: e("rounded-e-16", f, c),
+		children: /* @__PURE__ */ r("nav", {
+			className: "sticky top-0 ms-auto flex w-full max-w-380 flex-col gap-y-20 p-40",
+			children: [s.map((t, r) => /* @__PURE__ */ n("a", {
+				className: e("text-h5 block font-serif", { "opacity-50": r !== o }),
+				href: `#chapter${r}`,
+				onClick: () => u?.(t),
+				children: t.title
+			}, t.title)), /* @__PURE__ */ n(i, {
+				className: e("mt-90 self-center", p, _),
+				name: g,
+				width: h
+			})]
+		})
+	});
+};
+//#endregion
+export { o as ChaptersSummary };
+
+//# sourceMappingURL=ChaptersSummary.js.map

package/ui/Chapters/ChaptersSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChaptersSummary.js","names":[],"sources":["../../../lib/ui/Chapters/ChaptersSummary.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { FunctionComponent, ReactNode } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport type { Theme } from '../types/Theme';\n\nimport { getTheme } from './Chapters.themes';\n\nconst ICON_VERTICAL_OFFSET_CLASS: Partial<Record<IconicNames, string>> = {\n  // FR-CA asset has an intrinsic Y offset; compensate to match EN-CA visual alignment.\n  HappyToCareFRCA: 'translate-y-[28px]',\n};\n\ninterface ChapterSummaryItem {\n  content: ReactNode;\n  title: string;\n}\n\ninterface Props {\n  activeChapter: number;\n  chapters: ChapterSummaryItem[];\n  className?: string;\n  icon?: IconicNames;\n  onClick?: (chapter: ChapterSummaryItem) => void;\n  theme?: Theme;\n}\n\nexport const ChaptersSummary: FunctionComponent<Props> = ({\n  activeChapter,\n  chapters,\n  className,\n  icon,\n  onClick,\n  theme = 'coreRange',\n}) => {\n  const { thSummary, thSummaryIcon, thSummaryIconName, thSummaryIconWidth } = getTheme(theme);\n  const summaryIconName = (icon ?? thSummaryIconName) as IconicNames;\n  const iconVerticalOffsetClass = ICON_VERTICAL_OFFSET_CLASS[summaryIconName];\n\n  return (\n    <div className={clsx('rounded-e-16', thSummary, className)}>\n      <nav className=\"sticky top-0 ms-auto flex w-full max-w-380 flex-col gap-y-20 p-40\">\n        {chapters.map((chapter, index) => (\n          <a\n            className={clsx('text-h5 block font-serif', {\n              'opacity-50': index !== activeChapter,\n            })}\n            href={`#chapter${index}`}\n            key={chapter.title}\n            onClick={() => onClick?.(chapter)}\n          >\n            {chapter.title}\n          </a>\n        ))}\n        <Icon\n          className={clsx('mt-90 self-center', thSummaryIcon, iconVerticalOffsetClass)}\n          name={summaryIconName}\n          width={thSummaryIconWidth}\n        />\n      </nav>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AASA,IAAM,IAAmE,EAEvE,iBAAiB,sBAClB,EAgBY,KAA6C,EACxD,kBACA,aACA,cACA,SACA,YACA,WAAQ,kBACJ;CACJ,IAAM,EAAE,cAAW,kBAAe,sBAAmB,0BAAuB,EAAS,EAAM,EACrF,IAAmB,KAAQ,GAC3B,IAA0B,EAA2B;AAE3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,gBAAgB,GAAW,EAAU;YACxD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,EAAS,KAAK,GAAS,MACtB,kBAAC,KAAD;IACE,WAAW,EAAK,4BAA4B,EAC1C,cAAc,MAAU,GACzB,CAAC;IACF,MAAM,WAAW;IAEjB,eAAe,IAAU,EAAQ;cAEhC,EAAQ;IACP,EAJG,EAAQ,MAIX,CACJ,EACF,kBAAC,GAAD;IACE,WAAW,EAAK,qBAAqB,GAAe,EAAwB;IAC5E,MAAM;IACN,OAAO;IACP,CAAA,CAAA;;EAEA,CAAA"}

package/ui/ElasticHeight.js

@@ -12,6 +12,7 @@ var r = ({ className: r, children: i, innerClassName: a, isExpanded: o = !1, min
 			style: { minHeight: s },
 			className: e("overflow-hidden", a),
 			ref: l,
+			...o ? {} : { inert: !0 },
 			children: i
 		})
 	});

package/ui/ElasticHeight.js.map

@@ -1 +1 @@
-{"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"}
+{"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\n        style={{ minHeight: min }}\n        className={clsx('overflow-hidden', innerClassName)}\n        ref={ref}\n        {...(!isExpanded ? { inert: true } : {})}\n      >\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;GACE,OAAO,EAAE,WAAW,GAAK;GACzB,WAAW,EAAK,mBAAmB,EAAe;GAC7C;GACL,GAAM,IAA+B,EAAE,GAApB,EAAE,OAAO,IAAM;GAEjC;GACG,CAAA;EACF,CAAA"}

package/ui/Promises/Promises.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { ImageProps } from '../Image';
+export interface PromisesItem {
+    href: string;
+    id?: string;
+    image: ImageProps;
+    title: string;
+}
+export interface PromisesLabels {
+    anchor: {
+        continue: string;
+    };
+    layer: {
+        close: string;
+        open: string;
+    };
+    scroller: {
+        previous: string;
+        next: string;
+    };
+}
+export interface PromisesProps extends ComponentPropsWithoutRef<'div'> {
+    items: PromisesItem[];
+    labels: PromisesLabels;
+}
+export declare const Promises: FunctionComponent<PromisesProps>;

package/ui/Promises/Promises.js

@@ -0,0 +1,42 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { PromisesMedia as t } from "./PromisesMedia.js";
+import { PromisesMenu as n } from "./PromisesMenu.js";
+import { useCallback as r, useEffect as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region lib/ui/Promises/Promises.tsx
+var c = 1e4, l = ({ className: l, items: u, labels: d, ...f }) => {
+	let [p, m] = a(0), [h, g] = a(0), _ = r(() => {
+		m((e) => (e - 1 + u.length) % u.length);
+	}, [u.length]), v = r(() => {
+		m((e) => (e + 1) % u.length);
+	}, [u.length]), y = r((e) => {
+		m(e), g((e) => e + 1);
+	}, []);
+	return i(() => {
+		let e = setInterval(() => {
+			v();
+		}, c);
+		return () => clearInterval(e);
+	}, [v, h]), /* @__PURE__ */ s("div", {
+		...f,
+		className: e("relative isolate flex gap-x-20 @container/promises", l),
+		children: [/* @__PURE__ */ o(t, {
+			activeIndex: p,
+			items: u,
+			labels: d,
+			onClickMenu: (e) => m(e),
+			onNext: v,
+			onPrevious: _
+		}), /* @__PURE__ */ o(n, {
+			activeIndex: p,
+			items: u,
+			labels: d,
+			onClickMenu: (e) => y(e)
+		})]
+	});
+};
+//#endregion
+export { l as Promises };
+
+//# sourceMappingURL=Promises.js.map

package/ui/Promises/Promises.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Promises.js","names":[],"sources":["../../../lib/ui/Promises/Promises.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { ImageProps } from '../Image';\n\nimport { PromisesMedia } from './PromisesMedia';\nimport { PromisesMenu } from './PromisesMenu';\n\nconst INTERVAL_IN_MS = 10000;\n\nexport interface PromisesItem {\n  href: string;\n  id?: string;\n  image: ImageProps;\n  title: string;\n}\n\nexport interface PromisesLabels {\n  anchor: { continue: string };\n  layer: { close: string; open: string };\n  scroller: { previous: string; next: string };\n}\n\nexport interface PromisesProps extends ComponentPropsWithoutRef<'div'> {\n  items: PromisesItem[];\n  labels: PromisesLabels;\n}\n\nexport const Promises: FunctionComponent<PromisesProps> = ({\n  className,\n  items,\n  labels,\n  ...attrs\n}) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [intervalKey, setIntervalKey] = useState(0);\n\n  const previousActiveIndex = useCallback(() => {\n    setActiveIndex((state) => (state - 1 + items.length) % items.length);\n  }, [items.length]);\n\n  const nextActiveIndex = useCallback(() => {\n    setActiveIndex((state) => (state + 1) % items.length);\n  }, [items.length]);\n\n  const goToIndex = useCallback((index: number) => {\n    setActiveIndex(index);\n    setIntervalKey((k) => k + 1);\n  }, []);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      nextActiveIndex();\n    }, INTERVAL_IN_MS);\n\n    return () => clearInterval(interval);\n  }, [nextActiveIndex, intervalKey]);\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('relative isolate flex gap-x-20 @container/promises', className)}\n    >\n      <PromisesMedia\n        activeIndex={activeIndex}\n        items={items}\n        labels={labels}\n        onClickMenu={(i) => setActiveIndex(i)}\n        onNext={nextActiveIndex}\n        onPrevious={previousActiveIndex}\n      />\n      <PromisesMenu\n        activeIndex={activeIndex}\n        items={items}\n        labels={labels}\n        onClickMenu={(i) => goToIndex(i)}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAM,IAAiB,KAoBV,KAA8C,EACzD,cACA,UACA,WACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAa,KAAkB,EAAS,EAAE,EAC3C,CAAC,GAAa,KAAkB,EAAS,EAAE,EAE3C,IAAsB,QAAkB;AAC5C,KAAgB,OAAW,IAAQ,IAAI,EAAM,UAAU,EAAM,OAAO;IACnE,CAAC,EAAM,OAAO,CAAC,EAEZ,IAAkB,QAAkB;AACxC,KAAgB,OAAW,IAAQ,KAAK,EAAM,OAAO;IACpD,CAAC,EAAM,OAAO,CAAC,EAEZ,IAAY,GAAa,MAAkB;AAE/C,EADA,EAAe,EAAM,EACrB,GAAgB,MAAM,IAAI,EAAE;IAC3B,EAAE,CAAC;AAUN,QARA,QAAgB;EACd,IAAM,IAAW,kBAAkB;AACjC,MAAiB;KAChB,EAAe;AAElB,eAAa,cAAc,EAAS;IACnC,CAAC,GAAiB,EAAY,CAAC,EAGhC,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,sDAAsD,EAAU;YAFlF,CAIE,kBAAC,GAAD;GACe;GACN;GACC;GACR,cAAc,MAAM,EAAe,EAAE;GACrC,QAAQ;GACR,YAAY;GACZ,CAAA,EACF,kBAAC,GAAD;GACe;GACN;GACC;GACR,cAAc,MAAM,EAAU,EAAA;GAC9B,CAAA,CAAA"}

package/ui/Promises/PromisesMedia.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { PromisesItem, PromisesLabels } from './Promises';
+interface Props extends ComponentPropsWithoutRef<'div'> {
+    activeIndex: number;
+    items: PromisesItem[];
+    labels: PromisesLabels;
+    onClickMenu: (index: number) => void;
+    onNext: () => void;
+    onPrevious: () => void;
+}
+export declare const PromisesMedia: FunctionComponent<Props>;
+export {};

package/ui/Promises/PromisesMedia.js

@@ -0,0 +1,64 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Arrows as t } from "../arrows/Arrows.js";
+import { Image as n } from "../Image.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/Promises/PromisesMedia.tsx
+var a = ({ activeIndex: a, items: o, labels: s, onClickMenu: c, onNext: l, onPrevious: u, ...d }) => /* @__PURE__ */ i("div", {
+	...d,
+	className: "rounded-16 relative isolate w-full shrink-0 overflow-hidden @3xl/promises:max-w-380",
+	children: [
+		/* @__PURE__ */ r("div", {
+			className: "relative isolate grid",
+			children: o.map(({ id: t, image: i, title: o }, s) => {
+				let c = s === a;
+				return /* @__PURE__ */ r("article", {
+					"aria-hidden": !c,
+					className: e("aspect-vertical-video rounded-16 relative isolate col-start-1 row-start-1 w-full origin-top overflow-hidden opacity-0 transition-opacity duration-500", { "opacity-100": c }),
+					inert: !c,
+					children: /* @__PURE__ */ r(n, {
+						...i,
+						className: "size-full object-cover",
+						lazyLoad: !0,
+						sizes: "(min-width: 768px) 380px, 100vw"
+					})
+				}, t ?? `${o}-${s}`);
+			})
+		}),
+		/* @__PURE__ */ r(t, {
+			iconType: "ArrowDefault",
+			isDisabledHidden: !0,
+			isNextDisabled: a === o.length - 1,
+			isPrevDisabled: a === 0,
+			labels: {
+				next: s.scroller.next,
+				previous: s.scroller.previous
+			},
+			size: "small",
+			className: "absolute inset-0 -mx-12 !w-[calc(100%_+_24px)] @3xl/promises:hidden",
+			onNext: l,
+			onPrev: u
+		}),
+		/* @__PURE__ */ r("ul", {
+			className: "absolute inset-x-0 top-0 flex list-none gap-2 p-20",
+			children: o.map(({ id: t, title: n }, i) => /* @__PURE__ */ r("li", {
+				className: "w-full flex items-start",
+				children: /* @__PURE__ */ r("button", {
+					"aria-current": i === a,
+					"aria-label": n,
+					className: e("rounded-pill h-4 w-full overflow-hidden", {
+						"bg-white": i < a,
+						"bg-white/40": i >= a
+					}),
+					onClick: () => c(i),
+					type: "button",
+					children: i === a && /* @__PURE__ */ r("span", { className: "animate-filling block h-full w-full origin-left bg-white rtl:origin-right" })
+				})
+			}, t ?? i))
+		})
+	]
+});
+//#endregion
+export { a as PromisesMedia };
+
+//# sourceMappingURL=PromisesMedia.js.map

package/ui/Promises/PromisesMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromisesMedia.js","names":[],"sources":["../../../lib/ui/Promises/PromisesMedia.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport { Image } from '../Image';\nimport { Arrows } from '../arrows/Arrows';\nimport type { PromisesItem, PromisesLabels } from './Promises';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  activeIndex: number;\n  items: PromisesItem[];\n  labels: PromisesLabels;\n  onClickMenu: (index: number) => void;\n  onNext: () => void;\n  onPrevious: () => void;\n}\n\nexport const PromisesMedia: FunctionComponent<Props> = ({\n  activeIndex,\n  items,\n  labels,\n  onClickMenu,\n  onNext,\n  onPrevious,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className=\"rounded-16 relative isolate w-full shrink-0 overflow-hidden @3xl/promises:max-w-380\"\n    >\n      <div className=\"relative isolate grid\">\n        {items.map(({ id, image, title }, index) => {\n          const isActive = index === activeIndex;\n\n          return (\n            <article\n              aria-hidden={!isActive}\n              key={id ?? `${title}-${index}`}\n              className={clsx(\n                'aspect-vertical-video rounded-16 relative isolate col-start-1 row-start-1 w-full origin-top overflow-hidden opacity-0 transition-opacity duration-500',\n                { 'opacity-100': isActive },\n              )}\n              inert={!isActive}\n            >\n              <Image\n                {...image}\n                className=\"size-full object-cover\"\n                lazyLoad\n                sizes=\"(min-width: 768px) 380px, 100vw\"\n              />\n            </article>\n          );\n        })}\n      </div>\n\n      <Arrows\n        iconType=\"ArrowDefault\"\n        isDisabledHidden={true}\n        isNextDisabled={activeIndex === items.length - 1}\n        isPrevDisabled={activeIndex === 0}\n        labels={{\n          next: labels.scroller.next,\n          previous: labels.scroller.previous,\n        }}\n        size=\"small\"\n        className=\"absolute inset-0 -mx-12 !w-[calc(100%_+_24px)] @3xl/promises:hidden\"\n        onNext={onNext}\n        onPrev={onPrevious}\n      />\n\n      <ul className=\"absolute inset-x-0 top-0 flex list-none gap-2 p-20\">\n        {items.map(({ id, title }, index) => (\n          <li key={id ?? index} className=\"w-full flex items-start\">\n            <button\n              aria-current={index === activeIndex}\n              aria-label={title}\n              className={clsx('rounded-pill h-4 w-full overflow-hidden', {\n                'bg-white': index < activeIndex,\n                'bg-white/40': index >= activeIndex,\n              })}\n              onClick={() => onClickMenu(index)}\n              type=\"button\"\n            >\n              {index === activeIndex && (\n                <span className=\"animate-filling block h-full w-full origin-left bg-white rtl:origin-right\" />\n              )}\n            </button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KAA2C,EACtD,gBACA,UACA,WACA,gBACA,WACA,eACA,GAAG,QAGD,kBAAC,OAAD;CACE,GAAI;CACJ,WAAU;WAFZ;EAIE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,EAAE,OAAI,UAAO,YAAS,MAAU;IAC1C,IAAM,IAAW,MAAU;AAE3B,WACE,kBAAC,WAAD;KACE,eAAa,CAAC;KAEd,WAAW,EACT,yJACA,EAAE,eAAe,GAAU,CAC5B;KACD,OAAO,CAAC;eAER,kBAAC,GAAD;MACE,GAAI;MACJ,WAAU;MACV,UAAA;MACA,OAAM;MACN,CAAA;KACM,EAbH,KAAM,GAAG,EAAM,GAAG,IAaf;;GAGV,CAAA;EAEN,kBAAC,GAAD;GACE,UAAS;GACT,kBAAkB;GAClB,gBAAgB,MAAgB,EAAM,SAAS;GAC/C,gBAAgB,MAAgB;GAChC,QAAQ;IACN,MAAM,EAAO,SAAS;IACtB,UAAU,EAAO,SAAS;IAC3B;GACD,MAAK;GACL,WAAU;GACF;GACR,QAAQ;GACR,CAAA;EAEF,kBAAC,MAAD;GAAI,WAAU;aACX,EAAM,KAAK,EAAE,OAAI,YAAS,MACzB,kBAAC,MAAD;IAAsB,WAAU;cAC9B,kBAAC,UAAD;KACE,gBAAc,MAAU;KACxB,cAAY;KACZ,WAAW,EAAK,2CAA2C;MACzD,YAAY,IAAQ;MACpB,eAAe,KAAS;MACzB,CAAC;KACF,eAAe,EAAY,EAAM;KACjC,MAAK;eAEJ,MAAU,KACT,kBAAC,QAAD,EAAM,WAAU,6EAA8E,CAAA;KAEzF,CAAA;IACN,EAfI,KAAM,EAeV,CAAA;GAEJ,CAAA"}

package/ui/Promises/PromisesMenu.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+import { PromisesItem, PromisesLabels } from './Promises';
+interface Props {
+    activeIndex: number;
+    className?: string;
+    items: PromisesItem[];
+    labels: PromisesLabels;
+    onClickMenu: (index: number) => void;
+}
+export declare const PromisesMenu: FunctionComponent<Props>;
+export {};