@beautinique/frontend-components 1.0.8 → 1.0.9

package/dist/static-page/index.js

@@ -0,0 +1,235 @@
+import { addCollection, Icon } from '@iconify/react';
+import { useId } from 'react';
+import { GradientText } from '@beautinique/frontend-components/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/static-page/static-page-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "calendar-mark-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z"/><path d="M7 4V2.5"/><path d="M17 4V2.5"/><circle cx="16.5" cy="16.5" r="1.5"/><path d="M2.5 9H21.5"/></g>'
+      },
+      "check-circle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path stroke-linejoin="round" d="M8.5 12.5L10.5 14.5L15.5 9.5"/></g>'
+      },
+      "danger-triangle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M5.31171 10.7615C8.23007 5.58716 9.68925 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.31034 17.856 2.52291 15.7061 4.94805 11.4063L5.31171 10.7615Z"/><path d="M12 8V13"/><path stroke-linejoin="round" d="M12 16H12.0001"/></g>'
+      },
+      "letter-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"/><path d="M6 8L8.1589 9.79908C9.99553 11.3296 10.9139 12.0949 12 12.0949C13.0861 12.0949 14.0045 11.3296 15.8411 9.79908L18 8"/></g>'
+      }
+    }
+  }
+];
+var { register: registerStaticPageIcons, names: STATIC_PAGE_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var StaticPageLayout = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-10 px-4 py-10 sm:px-6 sm:py-14", children }), "StaticPageLayout");
+var StaticPageHeader = /* @__PURE__ */ __name(({ icon, title, description, meta }) => /* @__PURE__ */ jsxs("header", { className: "flex flex-col items-center gap-4 text-center", children: [
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "bg-accent-duo flex size-16 items-center justify-center rounded-full shadow-lg sm:size-20",
+      children: /* @__PURE__ */ jsx(Icon, { icon, className: "size-8 text-white sm:size-10" })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    GradientText,
+    {
+      as: "h1",
+      type: "accent",
+      text: title,
+      className: "text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl"
+    }
+  ),
+  /* @__PURE__ */ jsx("p", { className: "text-secondary max-w-2xl text-sm sm:text-base", children: description }),
+  meta
+] }), "StaticPageHeader");
+var LastUpdatedBadge = /* @__PURE__ */ __name(({
+  date,
+  label = "Last updated",
+  locale = "en-US"
+}) => {
+  registerStaticPageIcons();
+  const value = new Date(date);
+  if (Number.isNaN(value.getTime())) return null;
+  return /* @__PURE__ */ jsxs("span", { className: "text-primary/50 flex items-center gap-1 text-xs sm:text-sm", children: [
+    /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", icon: "solar:calendar-mark-linear", className: "size-3.5" }),
+    label,
+    " ",
+    /* @__PURE__ */ jsx("time", { dateTime: value.toISOString().slice(0, 10), children: new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(value) })
+  ] });
+}, "LastUpdatedBadge");
+var StaticPageSection = /* @__PURE__ */ __name(({ title, children, className = "gap-4" }) => {
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": title ? titleId : void 0, className: `flex flex-col ${className}`, children: [
+    title && /* @__PURE__ */ jsx(
+      GradientText,
+      {
+        as: "h2",
+        id: titleId,
+        type: "accent",
+        text: title,
+        className: "text-xl font-semibold sm:text-2xl"
+      }
+    ),
+    children
+  ] });
+}, "StaticPageSection");
+var InfoCard = /* @__PURE__ */ __name(({ icon, title, description }) => /* @__PURE__ */ jsxs("div", { className: "border-primary/10 bg-secondary-invert hover:border-primary/20 flex items-start gap-3 rounded-xl border p-4 transition-colors motion-reduce:transition-none", children: [
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "bg-accent-duo flex size-9 shrink-0 items-center justify-center rounded-lg",
+      children: /* @__PURE__ */ jsx(Icon, { icon, className: "size-5 text-white" })
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-primary text-sm font-semibold sm:text-base", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "text-secondary text-xs sm:text-sm", children: description })
+  ] })
+] }), "InfoCard");
+var InfoCardGrid = /* @__PURE__ */ __name(({ items, columns = 2 }) => /* @__PURE__ */ jsx("div", { className: `grid grid-cols-1 gap-4 ${columns === 3 ? "sm:grid-cols-3" : "sm:grid-cols-2"}`, children: items.map((item) => /* @__PURE__ */ jsx(InfoCard, { ...item }, item.title)) }), "InfoCardGrid");
+var Checklist = /* @__PURE__ */ __name(({
+  items,
+  icon = "solar:check-circle-linear",
+  iconClassName = "text-primary-green"
+}) => {
+  registerStaticPageIcons();
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: items.map((item) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-3 sm:p-4",
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": "true",
+            icon,
+            className: `mt-0.5 size-4.5 shrink-0 ${iconClassName}`
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-secondary text-xs sm:text-sm", children: item })
+      ]
+    },
+    item
+  )) });
+}, "Checklist");
+var HighlightNote = /* @__PURE__ */ __name(({
+  icon = "solar:danger-triangle-linear",
+  title,
+  children
+}) => {
+  registerStaticPageIcons();
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "note",
+      "aria-labelledby": titleId,
+      className: "border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4 sm:p-5",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", icon, className: "text-primary/60 mt-0.5 size-5 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("p", { id: titleId, className: "text-primary text-sm font-semibold sm:text-base", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-secondary text-xs leading-relaxed sm:text-sm", children })
+        ] })
+      ]
+    }
+  );
+}, "HighlightNote");
+var NumberedSteps = /* @__PURE__ */ __name(({ steps }) => (
+  // `list-none` takes the list away for some screen readers; `role="list"` gives it back
+  /* @__PURE__ */ jsx("ol", { role: "list", className: "flex list-none flex-col gap-3", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "bg-accent-duo flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white",
+            children: index + 1
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-primary text-sm font-semibold sm:text-base", children: step.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-secondary text-xs sm:text-sm", children: step.description })
+        ] })
+      ]
+    },
+    step.title
+  )) })
+), "NumberedSteps");
+var StaticPageCTA = /* @__PURE__ */ __name(({
+  title,
+  description,
+  actions,
+  footer,
+  layout = "row",
+  className = ""
+}) => {
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: `border-primary/10 bg-secondary-invert flex flex-col gap-4 rounded-2xl border p-4 sm:p-6 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex flex-col gap-4 ${layout === "row" ? "items-start justify-between sm:flex-row sm:items-center" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-primary text-base font-semibold sm:text-lg", children: title }),
+                /* @__PURE__ */ jsx("p", { className: "text-secondary text-xs sm:text-sm", children: description })
+              ] }),
+              actions
+            ]
+          }
+        ),
+        footer
+      ]
+    }
+  );
+}, "StaticPageCTA");
+var EmailUsAction = /* @__PURE__ */ __name(({ email, children }) => {
+  registerStaticPageIcons();
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: `mailto:${email}`,
+      className: "border-primary/20 hover:bg-primary-invert/60 text-primary flex shrink-0 items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c motion-reduce:transition-none",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", icon: "solar:letter-linear", className: "size-4.5" }),
+        children ?? email
+      ]
+    }
+  );
+}, "EmailUsAction");
+
+export { Checklist, EmailUsAction, HighlightNote, InfoCard, InfoCardGrid, LastUpdatedBadge, NumberedSteps, StaticPageCTA, StaticPageHeader, StaticPageLayout, StaticPageSection };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/static-page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/icon-registry.ts","../../src/static-page/static-page-icons.ts","../../src/static-page/StaticPage.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/**\n * Makes the registration of a bundled icon set: `register` puts the sets in Iconify (once, calling it\n * again does nothing) and `names` lists every icon, e.g. `solar:info-circle-linear`.\n *\n * A component calls `register` when it renders, not when its file is imported: an app that never\n * renders the component never runs it, and nothing depends on the bundler keeping an import that is\n * only there for its effect (the build says \"ignored-bare-import\" for those).\n */\nexport const createIconRegistry = (sets: readonly IconifyJSON[]) => {\n  let registered = false;\n\n  return {\n    register: () => {\n      if (registered) return;\n\n      for (const set of sets) addCollection(set);\n      registered = true;\n    },\n    names: sets.flatMap(({ prefix, icons, aliases }) =>\n      [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`),\n    ),\n  };\n};\n","import type { IconifyJSON } from '@iconify/react';\n\nimport { createIconRegistry } from '../lib/icon-registry.js';\n\n/*\n * The icons of the parts of a static page, bundled so they show without a network and without waiting for the\n * Iconify API (see `toast/toast-icons.ts`). The data is what\n * `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'calendar-mark-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z\"/><path d=\"M7 4V2.5\"/><path d=\"M17 4V2.5\"/><circle cx=\"16.5\" cy=\"16.5\" r=\"1.5\"/><path d=\"M2.5 9H21.5\"/></g>',\n      },\n      'check-circle-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path stroke-linejoin=\"round\" d=\"M8.5 12.5L10.5 14.5L15.5 9.5\"/></g>',\n      },\n      'danger-triangle-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M5.31171 10.7615C8.23007 5.58716 9.68925 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.31034 17.856 2.52291 15.7061 4.94805 11.4063L5.31171 10.7615Z\"/><path d=\"M12 8V13\"/><path stroke-linejoin=\"round\" d=\"M12 16H12.0001\"/></g>',\n      },\n      'letter-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z\"/><path d=\"M6 8L8.1589 9.79908C9.99553 11.3296 10.9139 12.0949 12 12.0949C13.0861 12.0949 14.0045 11.3296 15.8411 9.79908L18 8\"/></g>',\n      },\n    },\n  },\n];\n\n/**\n * Registers the icons above with Iconify; the components of this entry call it when they render\n * (calling it again is harmless).\n */\nexport const { register: registerStaticPageIcons, names: STATIC_PAGE_ICON_NAMES } =\n  createIconRegistry(ICON_SETS);\n","import { Icon } from '@iconify/react';\nimport { type ReactNode, useId } from 'react';\n\nimport type { IChildren, IClassName } from '../types/component.js';\nimport { GradientText } from '../ui/index.js';\nimport { registerStaticPageIcons } from './static-page-icons.js';\n\n/*\n * The parts of a page that is only content (company, legal and information pages): a header, some\n * sections, and a closing call to action, in the same column. The headings are real headings\n * (the page `h1`, each section `h2`, each card `h3`), the lists are lists, and the icons are decoration\n * that assistive technology skips. The icons are given by name: they come from the Iconify API unless\n * the app has them registered.\n */\n\n/** The column all the parts sit in. */\nexport const StaticPageLayout = ({ children }: IChildren) => (\n  <div className=\"mx-auto flex w-full max-w-4xl flex-col gap-10 px-4 py-10 sm:px-6 sm:py-14\">\n    {children}\n  </div>\n);\n\nexport interface IStaticPageHeader {\n  /** An icon of Iconify, in a circle above the title. */\n  icon: string;\n  /** The title of the page: it is the `h1`. */\n  title: string;\n  description: ReactNode;\n  /** Something under the description, e.g. `LastUpdatedBadge`. */\n  meta?: ReactNode;\n}\n\nexport const StaticPageHeader = ({ icon, title, description, meta }: IStaticPageHeader) => (\n  <header className=\"flex flex-col items-center gap-4 text-center\">\n    <span\n      aria-hidden=\"true\"\n      className=\"bg-accent-duo flex size-16 items-center justify-center rounded-full shadow-lg sm:size-20\"\n    >\n      <Icon icon={icon} className=\"size-8 text-white sm:size-10\" />\n    </span>\n    <GradientText\n      as=\"h1\"\n      type=\"accent\"\n      text={title}\n      className=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\"\n    />\n    <p className=\"text-secondary max-w-2xl text-sm sm:text-base\">{description}</p>\n    {meta}\n  </header>\n);\n\nexport interface ILastUpdatedBadge {\n  /** When the page was changed. */\n  date: Date | string | number;\n  /** @default 'Last updated' */\n  label?: string;\n  /** The language of the date. It is fixed (not the one of the machine) so a server and a browser write the same. @default 'en-US' */\n  locale?: string;\n}\n\n/**\n * \"Last updated 15 Oct 2026\", with the date in a `<time>`. The day is the day of the date in UTC, so\n * it does not depend on where the page is drawn.\n */\nexport const LastUpdatedBadge = ({\n  date,\n  label = 'Last updated',\n  locale = 'en-US',\n}: ILastUpdatedBadge) => {\n  registerStaticPageIcons();\n\n  const value = new Date(date);\n\n  if (Number.isNaN(value.getTime())) return null;\n\n  return (\n    <span className=\"text-primary/50 flex items-center gap-1 text-xs sm:text-sm\">\n      <Icon aria-hidden=\"true\" icon=\"solar:calendar-mark-linear\" className=\"size-3.5\" />\n      {label}{' '}\n      <time dateTime={value.toISOString().slice(0, 10)}>\n        {new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeZone: 'UTC' }).format(value)}\n      </time>\n    </span>\n  );\n};\n\nexport interface IStaticPageSection extends IClassName {\n  /** The heading of the section: an `h2`. Without it the section has none. */\n  title?: string;\n  children: ReactNode;\n}\n\nexport const StaticPageSection = ({ title, children, className = 'gap-4' }: IStaticPageSection) => {\n  const titleId = useId();\n\n  return (\n    <section aria-labelledby={title ? titleId : undefined} className={`flex flex-col ${className}`}>\n      {title && (\n        <GradientText\n          as=\"h2\"\n          id={titleId}\n          type=\"accent\"\n          text={title}\n          className=\"text-xl font-semibold sm:text-2xl\"\n        />\n      )}\n      {children}\n    </section>\n  );\n};\n\nexport interface IInfoCard {\n  icon: string;\n  /** A heading (an `h3`). */\n  title: string;\n  description: string;\n}\n\nexport const InfoCard = ({ icon, title, description }: IInfoCard) => (\n  <div className=\"border-primary/10 bg-secondary-invert hover:border-primary/20 flex items-start gap-3 rounded-xl border p-4 transition-colors motion-reduce:transition-none\">\n    <span\n      aria-hidden=\"true\"\n      className=\"bg-accent-duo flex size-9 shrink-0 items-center justify-center rounded-lg\"\n    >\n      <Icon icon={icon} className=\"size-5 text-white\" />\n    </span>\n    <div>\n      <h3 className=\"text-primary text-sm font-semibold sm:text-base\">{title}</h3>\n      <p className=\"text-secondary text-xs sm:text-sm\">{description}</p>\n    </div>\n  </div>\n);\n\nexport interface IInfoCardGrid {\n  items: readonly IInfoCard[];\n  /** How many cards in a row from `sm:` up. @default 2 */\n  columns?: 2 | 3;\n}\n\nexport const InfoCardGrid = ({ items, columns = 2 }: IInfoCardGrid) => (\n  <div className={`grid grid-cols-1 gap-4 ${columns === 3 ? 'sm:grid-cols-3' : 'sm:grid-cols-2'}`}>\n    {items.map((item) => (\n      <InfoCard key={item.title} {...item} />\n    ))}\n  </div>\n);\n\nexport interface IChecklist {\n  items: readonly string[];\n  /** @default 'solar:check-circle-linear' */\n  icon?: string;\n  iconClassName?: string;\n}\n\n/** Short statements in a list, each in its own bordered row with an icon. */\nexport const Checklist = ({\n  items,\n  icon = 'solar:check-circle-linear',\n  iconClassName = 'text-primary-green',\n}: IChecklist) => {\n  registerStaticPageIcons();\n\n  return (\n    <ul className=\"flex flex-col gap-3\">\n      {items.map((item) => (\n        <li\n          key={item}\n          className=\"border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-3 sm:p-4\"\n        >\n          <Icon\n            aria-hidden=\"true\"\n            icon={icon}\n            className={`mt-0.5 size-4.5 shrink-0 ${iconClassName}`}\n          />\n          <span className=\"text-secondary text-xs sm:text-sm\">{item}</span>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport interface IHighlightNote {\n  /** @default 'solar:danger-triangle-linear' */\n  icon?: string;\n  title: string;\n  children: ReactNode;\n}\n\n/** A note that stands out: an icon beside a title and a text. It is a `note`, named by its title. */\nexport const HighlightNote = ({\n  icon = 'solar:danger-triangle-linear',\n  title,\n  children,\n}: IHighlightNote) => {\n  registerStaticPageIcons();\n\n  const titleId = useId();\n\n  return (\n    <div\n      role=\"note\"\n      aria-labelledby={titleId}\n      className=\"border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4 sm:p-5\"\n    >\n      <Icon aria-hidden=\"true\" icon={icon} className=\"text-primary/60 mt-0.5 size-5 shrink-0\" />\n      <div className=\"flex flex-col gap-1.5\">\n        <p id={titleId} className=\"text-primary text-sm font-semibold sm:text-base\">\n          {title}\n        </p>\n        <p className=\"text-secondary text-xs leading-relaxed sm:text-sm\">{children}</p>\n      </div>\n    </div>\n  );\n};\n\nexport interface INumberedStep {\n  title: string;\n  description: string;\n}\n\nexport interface INumberedSteps {\n  steps: readonly INumberedStep[];\n}\n\n/** The steps of a process in an ordered list, each with its number. */\nexport const NumberedSteps = ({ steps }: INumberedSteps) => (\n  // `list-none` takes the list away for some screen readers; `role=\"list\"` gives it back\n  <ol role=\"list\" className=\"flex list-none flex-col gap-3\">\n    {steps.map((step, index) => (\n      <li\n        key={step.title}\n        className=\"border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4\"\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"bg-accent-duo flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white\"\n        >\n          {index + 1}\n        </span>\n        <div>\n          <p className=\"text-primary text-sm font-semibold sm:text-base\">{step.title}</p>\n          <p className=\"text-secondary text-xs sm:text-sm\">{step.description}</p>\n        </div>\n      </li>\n    ))}\n  </ol>\n);\n\nexport interface IStaticPageCTA extends IClassName {\n  /** The heading of the block: an `h2`. */\n  title: string;\n  description: ReactNode;\n  /** The buttons or links. */\n  actions: ReactNode;\n  footer?: ReactNode;\n  /** `'row'` puts the text and the actions side by side from `sm:` up; `'stack'` keeps them stacked. @default 'row' */\n  layout?: 'row' | 'stack';\n}\n\n/** The closing block of a page (\"Get in touch\"): a heading, a text and the actions. */\nexport const StaticPageCTA = ({\n  title,\n  description,\n  actions,\n  footer,\n  layout = 'row',\n  className = '',\n}: IStaticPageCTA) => {\n  const titleId = useId();\n\n  return (\n    <section\n      aria-labelledby={titleId}\n      className={`border-primary/10 bg-secondary-invert flex flex-col gap-4 rounded-2xl border p-4 sm:p-6 ${className}`}\n    >\n      <div\n        className={`flex flex-col gap-4 ${\n          layout === 'row' ? 'items-start justify-between sm:flex-row sm:items-center' : ''\n        }`}\n      >\n        <div className=\"flex flex-col gap-1\">\n          <h2 id={titleId} className=\"text-primary text-base font-semibold sm:text-lg\">\n            {title}\n          </h2>\n          <p className=\"text-secondary text-xs sm:text-sm\">{description}</p>\n        </div>\n        {actions}\n      </div>\n      {footer}\n    </section>\n  );\n};\n\nexport interface IEmailUsAction {\n  /** The address; it is also the text, unless `children` says another. */\n  email: string;\n  children?: ReactNode;\n}\n\n/** A pill that writes an e-mail to an address: the usual action of `StaticPageCTA`. */\nexport const EmailUsAction = ({ email, children }: IEmailUsAction) => {\n  registerStaticPageIcons();\n\n  return (\n    <a\n      href={`mailto:${email}`}\n      className=\"border-primary/20 hover:bg-primary-invert/60 text-primary flex shrink-0 items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c motion-reduce:transition-none\"\n    >\n      <Icon aria-hidden=\"true\" icon=\"solar:letter-linear\" className=\"size-4.5\" />\n      {children ?? email}\n    </a>\n  );\n};\n"]}

package/dist/static-page/static-page-icons.d.cts

@@ -0,0 +1,6 @@
+/**
+ * Registers the icons above with Iconify; the components of this entry call it when they render
+ * (calling it again is harmless).
+ */
+export declare const registerStaticPageIcons: () => void, STATIC_PAGE_ICON_NAMES: string[];
+//# sourceMappingURL=static-page-icons.d.cts.map

package/dist/static-page/static-page-icons.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-page-icons.d.cts","sourceRoot":"","sources":["../../src/static-page/static-page-icons.ts"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,eAAO,MAAkB,uBAAuB,cAAS,sBAAsB,UAChD,CAAC"}

package/dist/static-page/static-page-icons.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Registers the icons above with Iconify; the components of this entry call it when they render
+ * (calling it again is harmless).
+ */
+export declare const registerStaticPageIcons: () => void, STATIC_PAGE_ICON_NAMES: string[];
+//# sourceMappingURL=static-page-icons.d.ts.map

package/dist/static-page/static-page-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-page-icons.d.ts","sourceRoot":"","sources":["../../src/static-page/static-page-icons.ts"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,eAAO,MAAkB,uBAAuB,cAAS,sBAAsB,UAChD,CAAC"}

package/dist/testimonials/TestimonialCarousel.d.cts

@@ -0,0 +1,40 @@
+import type { IClassName } from '../types/component.js';
+export interface ITestimonial {
+    /** What the person said. */
+    content: string;
+    name: string;
+    role?: string;
+    /** The address of a photo of the person. Without it their initials are shown. */
+    image?: string;
+    /** Stars, from 0 to 5. @default 5 */
+    rating?: number;
+}
+/** The words said to assistive technology. English by default. */
+export interface ITestimonialLabels {
+    /** The name of the carousel. */
+    carousel: string;
+    previous: string;
+    next: string;
+    /** The button that stops the carousel turning by itself. */
+    pause: string;
+    /** The button that makes it turn by itself again. */
+    play: string;
+    /** What the stars say ("Rated 5 out of 5"). */
+    rating: (rating: number) => string;
+    /** The name of a slide ("2 of 3"). */
+    slide: (index: number, total: number) => string;
+}
+export interface ITestimonialCarousel extends IClassName {
+    testimonials: readonly ITestimonial[];
+    /** How long each testimonial stays, in milliseconds. `0` never turns by itself. @default 5000 */
+    interval?: number;
+    labels?: Partial<ITestimonialLabels>;
+}
+/**
+ * Testimonials, one at a time, that turn by themselves. It follows what a carousel that moves has to
+ * do: it stops while the pointer is over it or the focus is in it, and a button stops it (and starts
+ * it again); with a system setting for less motion it does not turn at all. Previous and next buttons
+ * go round, and what is announced is the slide that is current, but only while it is not turning.
+ */
+export declare const TestimonialCarousel: ({ testimonials, interval, className, labels, }: ITestimonialCarousel) => import("react").JSX.Element | null;
+//# sourceMappingURL=TestimonialCarousel.d.cts.map

package/dist/testimonials/TestimonialCarousel.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestimonialCarousel.d.cts","sourceRoot":"","sources":["../../src/testimonials/TestimonialCarousel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,YAAY;IAC3B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,kEAAkE;AAClE,MAAM,WAAW,kBAAkB;IACjC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,sCAAsC;IACtC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACjD;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,YAAY,EAAE,SAAS,YAAY,EAAE,CAAC;IACtC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACtC;AA0CD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,gDAKjC,oBAAoB,uCA6JtB,CAAC"}

package/dist/testimonials/TestimonialCarousel.d.ts

@@ -0,0 +1,40 @@
+import type { IClassName } from '../types/component.js';
+export interface ITestimonial {
+    /** What the person said. */
+    content: string;
+    name: string;
+    role?: string;
+    /** The address of a photo of the person. Without it their initials are shown. */
+    image?: string;
+    /** Stars, from 0 to 5. @default 5 */
+    rating?: number;
+}
+/** The words said to assistive technology. English by default. */
+export interface ITestimonialLabels {
+    /** The name of the carousel. */
+    carousel: string;
+    previous: string;
+    next: string;
+    /** The button that stops the carousel turning by itself. */
+    pause: string;
+    /** The button that makes it turn by itself again. */
+    play: string;
+    /** What the stars say ("Rated 5 out of 5"). */
+    rating: (rating: number) => string;
+    /** The name of a slide ("2 of 3"). */
+    slide: (index: number, total: number) => string;
+}
+export interface ITestimonialCarousel extends IClassName {
+    testimonials: readonly ITestimonial[];
+    /** How long each testimonial stays, in milliseconds. `0` never turns by itself. @default 5000 */
+    interval?: number;
+    labels?: Partial<ITestimonialLabels>;
+}
+/**
+ * Testimonials, one at a time, that turn by themselves. It follows what a carousel that moves has to
+ * do: it stops while the pointer is over it or the focus is in it, and a button stops it (and starts
+ * it again); with a system setting for less motion it does not turn at all. Previous and next buttons
+ * go round, and what is announced is the slide that is current, but only while it is not turning.
+ */
+export declare const TestimonialCarousel: ({ testimonials, interval, className, labels, }: ITestimonialCarousel) => import("react").JSX.Element | null;
+//# sourceMappingURL=TestimonialCarousel.d.ts.map

package/dist/testimonials/TestimonialCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestimonialCarousel.d.ts","sourceRoot":"","sources":["../../src/testimonials/TestimonialCarousel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,YAAY;IAC3B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,kEAAkE;AAClE,MAAM,WAAW,kBAAkB;IACjC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,sCAAsC;IACtC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACjD;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,YAAY,EAAE,SAAS,YAAY,EAAE,CAAC;IACtC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACtC;AA0CD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,gDAKjC,oBAAoB,uCA6JtB,CAAC"}

package/dist/testimonials/index.cjs

@@ -0,0 +1,246 @@
+'use strict';
+
+var react = require('@iconify/react');
+var react$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var QUERY = "(prefers-reduced-motion: reduce)";
+var query = /* @__PURE__ */ __name(() => window.matchMedia?.(QUERY), "query");
+var subscribe = /* @__PURE__ */ __name((onChange) => {
+  const list = query();
+  list?.addEventListener("change", onChange);
+  return () => {
+    list?.removeEventListener("change", onChange);
+  };
+}, "subscribe");
+var getSnapshot = /* @__PURE__ */ __name(() => query()?.matches ?? false, "getSnapshot");
+var getServerSnapshot = /* @__PURE__ */ __name(() => false, "getServerSnapshot");
+var usePrefersReducedMotion = /* @__PURE__ */ __name(() => react$1.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot), "usePrefersReducedMotion");
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) react.addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/testimonials/testimonials-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "streamline-ultimate-color",
+    width: 24,
+    height: 24,
+    icons: {
+      "rating-star": {
+        body: '<g fill="none"><path fill="#ffef5e" d="M11.523 1.332a.511.511 0 0 1 .957 0l2.59 7.343h7.315a.512.512 0 0 1 .332.9l-6.112 5.067l2.558 7.685a.512.512 0 0 1-.788.574L12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316z"/><path fill="#fff9bf" d="M12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316l2.59-7.343a.51.51 0 0 1 .48-.332z"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M11.523 1.332a.511.511 0 0 1 .957 0l2.59 7.343h7.315a.512.512 0 0 1 .332.9l-6.112 5.067l2.558 7.685a.512.512 0 0 1-.788.574L12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316z"/></g>'
+      }
+    }
+  },
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "arrow-left-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 12H4M10 18L4 12L10 6"/>'
+      },
+      "arrow-right-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12H20M14 18L20 12L14 6"/>'
+      },
+      "pause-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2C7.88562 2 8.82843 2 9.41421 2.58579C10 3.17157 10 4.11438 10 6V18C10 19.8856 10 20.8284 9.41421 21.4142C8.82843 22 7.88562 22 6 22C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18V6Z"/><path d="M14 6C14 4.11438 14 3.17157 14.5858 2.58579C15.1716 2 16.1144 2 18 2C19.8856 2 20.8284 2 21.4142 2.58579C22 3.17157 22 4.11438 22 6V18C22 19.8856 22 20.8284 21.4142 21.4142C20.8284 22 19.8856 22 18 22C16.1144 22 15.1716 22 14.5858 21.4142C14 20.8284 14 19.8856 14 18V6Z"/></g>'
+      },
+      "play-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M20.4086 9.35258C22.5305 10.5065 22.5305 13.4935 20.4086 14.6474L7.59662 21.6145C5.53435 22.736 3 21.2763 3 18.9671L3 5.0329C3 2.72368 5.53435 1.26402 7.59661 2.38548L20.4086 9.35258Z"/>'
+      }
+    }
+  }
+];
+var { register: registerTestimonialIcons, names: TESTIMONIAL_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var LABELS = {
+  carousel: "Testimonials",
+  previous: "Previous testimonial",
+  next: "Next testimonial",
+  pause: "Pause the testimonials",
+  play: "Play the testimonials",
+  rating: /* @__PURE__ */ __name((rating) => `Rated ${String(rating)} out of 5`, "rating"),
+  slide: /* @__PURE__ */ __name((index, total) => `${String(index + 1)} of ${String(total)}`, "slide")
+};
+var MAX_STARS = 5;
+var initialsOf = /* @__PURE__ */ __name((name) => name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word).at(0) ?? "").join("").toUpperCase(), "initialsOf");
+var IconButton = /* @__PURE__ */ __name(({
+  icon,
+  label,
+  onClick
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    "aria-label": label,
+    onClick,
+    className: "text-tertiary hover:text-primary cursor-pointer rounded-sm p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c",
+    children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon, className: "size-5" })
+  }
+), "IconButton");
+var TestimonialCarousel = /* @__PURE__ */ __name(({
+  testimonials,
+  interval = 5e3,
+  className = "",
+  labels
+}) => {
+  registerTestimonialIcons();
+  const text = {
+    carousel: labels?.carousel ?? LABELS.carousel,
+    previous: labels?.previous ?? LABELS.previous,
+    next: labels?.next ?? LABELS.next,
+    pause: labels?.pause ?? LABELS.pause,
+    play: labels?.play ?? LABELS.play,
+    rating: labels?.rating ?? LABELS.rating,
+    slide: labels?.slide ?? LABELS.slide
+  };
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [index, setIndex] = react$1.useState(0);
+  const [isHovered, setIsHovered] = react$1.useState(false);
+  const [isFocused, setIsFocused] = react$1.useState(false);
+  const [choice, setChoice] = react$1.useState(null);
+  const count = testimonials.length;
+  const shown = Math.min(index, count - 1);
+  const canTurn = count > 1 && interval > 0 && !prefersReducedMotion;
+  const isTurning = canTurn && (choice === "playing" || choice === null && !isHovered && !isFocused);
+  react$1.useEffect(() => {
+    if (!isTurning) return;
+    const timer = window.setTimeout(() => {
+      setIndex((current) => (Math.min(current, count - 1) + 1) % count);
+    }, interval);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [isTurning, shown, count, interval]);
+  if (count === 0) return null;
+  const go = /* @__PURE__ */ __name((step) => {
+    setIndex((current) => (Math.min(current, count - 1) + step + count) % count);
+  }, "go");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "carousel",
+      "aria-label": text.carousel,
+      onPointerEnter: (event) => {
+        if (event.pointerType === "mouse") setIsHovered(true);
+      },
+      onPointerLeave: () => {
+        setIsHovered(false);
+      },
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setIsFocused(false);
+      },
+      className: `bg-tertiary-invert relative rounded-lg p-4 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": isTurning ? "off" : "polite", children: testimonials.map((testimonial, position) => {
+          const stars = Math.max(
+            0,
+            Math.min(MAX_STARS, Math.round(testimonial.rating ?? MAX_STARS))
+          );
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "figure",
+            {
+              role: "group",
+              "aria-roledescription": "slide",
+              "aria-label": text.slide(position, count),
+              hidden: position !== shown,
+              className: "group m-0 flex w-full flex-col gap-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 leading-6", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: text.rating(stars) }),
+                    Array.from({ length: stars }, (_, star) => /* @__PURE__ */ jsxRuntime.jsx(
+                      react.Icon,
+                      {
+                        "aria-hidden": "true",
+                        icon: "streamline-ultimate-color:rating-star",
+                        className: "size-5"
+                      },
+                      star
+                    ))
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-tertiary group-hover:text-primary text-xs break-words italic before:content-['\u201C'] after:content-['\u201D']", children: testimonial.content }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: "flex items-center gap-2 pr-24", children: [
+                  testimonial.image ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: testimonial.image,
+                      alt: "",
+                      loading: "lazy",
+                      className: "bg-secondary-invert/50 border-primary/50 size-8 shrink-0 rounded-full border object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "bg-secondary-invert/50 border-primary/50 text-secondary grid size-8 shrink-0 place-items-center rounded-full border text-[10px] font-semibold",
+                      children: initialsOf(testimonial.name)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "text-secondary text-[10px] font-semibold not-italic", children: testimonial.name }),
+                    testimonial.role && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-tertiary text-[9px] leading-4", children: testimonial.role })
+                  ] })
+                ] })
+              ]
+            },
+            `${testimonial.name}#${String(position)}`
+          );
+        }) }),
+        count > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-4 bottom-4 flex items-center gap-1", children: [
+          canTurn && /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              icon: choice === "paused" ? "solar:play-linear" : "solar:pause-linear",
+              label: choice === "paused" ? text.play : text.pause,
+              onClick: () => {
+                setChoice(choice === "paused" ? "playing" : "paused");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              icon: "solar:arrow-left-linear",
+              label: text.previous,
+              onClick: () => {
+                go(-1);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              icon: "solar:arrow-right-linear",
+              label: text.next,
+              onClick: () => {
+                go(1);
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, "TestimonialCarousel");
+
+exports.TestimonialCarousel = TestimonialCarousel;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map