@helpwave/hightide 0.1.25 → 0.1.26

package/dist/components/layout-and-navigation/Expandable.js

@@ -38,7 +38,7 @@ var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 var import_clsx = __toESM(require("clsx"));
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
 // src/components/layout-and-navigation/Expandable.tsx
@@ -47,8 +47,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_lucide_react.ChevronDown,
     {
+      "aria-hidden": true,
       className: (0, import_clsx.default)(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
         { "rotate-180": isExpanded },
         className
       )
@@ -57,6 +58,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = (0, import_react.forwardRef)(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -70,16 +72,23 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
 }, ref) {
   const defaultIcon = (0, import_react.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = (0, import_react.useId)();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref,
-      className: (0, import_clsx.default)("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: (0, import_clsx.default)(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: (0, import_clsx.default)(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -89,7 +98,9 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
             children: [
               label,
               icon(isExpanded)
@@ -99,6 +110,7 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
+            id: `${id}-content`,
             className: (0, import_clsx.default)(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -107,6 +119,7 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )

package/dist/components/layout-and-navigation/Expandable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n  contentExpandedClassName?: string,\n}>\n\n\nexport type ExpansionIconProps = {\n  isExpanded: boolean,\n  className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n  return (\n    <ChevronDown\n      className={clsx(\n        'min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out',\n        { 'rotate-180': isExpanded },\n        className\n      )}\n    />\n  )\n}\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                            contentExpandedClassName,\n                                                                                          }, ref) {\n  const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n  icon ??= defaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-97': !isExpanded,\n            'hover:brightness-97': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      <div\n        className={clsx(\n          'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n          {\n            [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n            'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n          },\n          contentClassName\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6D;AAC7D,0BAA4B;AAC5B,kBAAiB;;;ACHV,IAAM,OAAO,MAAM;;;ADgCtB;AAFG,IAAM,gBAAgB,CAAC,EAAE,YAAY,UAAU,MAA0B;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,YAAAA;AAAA,QACT;AAAA,QACA,EAAE,cAAc,WAAW;AAAA,QAC3B;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAMO,IAAM,iBAAa,yBAA4C,SAASC,YAAW;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AAChG,QAAM,kBAAc,0BAAY,CAAC,aAAsB,4CAAC,iBAAc,YAAY,UAAS,GAAI,CAAC,CAAC;AACjG,WAAS;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,YAAAD,SAAK,oEAAoE,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,GAAG,SAAS;AAAA,MACpJ,SAAS,MAAM,CAAC,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,MAEtE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,YAAAA;AAAA,cACT;AAAA,cACA;AAAA,gBACE,6BAA6B,CAAC;AAAA,gBAC9B,uBAAuB,cAAc,CAAC;AAAA,gBACtC,kBAAkB,qBAAqB,CAAC;AAAA,cAC1C;AAAA,cACA;AAAA,YACF;AAAA,YACA,SAAS,MAAM,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,YAEpE;AAAA;AAAA,cACA,KAAK,UAAU;AAAA;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,YAAAA;AAAA,cACT;AAAA,cACA;AAAA,gBACE,KAAC,YAAAA,SAAK,6CAA6C,wBAAwB,CAAC,GAAG;AAAA,gBAC/E,qCAAqC,CAAC;AAAA,cACxC;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAEM,IAAM,6BAAyB,yBAA4C,SAASE,wBAAuB;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GACA,KAAK;AACrH,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,UAAU;AAE/D,8BAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,WAAS;AACjB,iBAAS,KAAK;AACd,0BAAkB,KAAK;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["clsx","Expandable","ExpandableUncontrolled"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/utils/noop.ts"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useId, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '@/src/utils/noop'\n\nexport type ExpansionIconProps = {\n  isExpanded?: boolean,\n  className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n  return (\n    <ChevronDown\n      aria-hidden={true}\n      className={clsx(\n        'min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out',\n        { 'rotate-180': isExpanded },\n        className\n      )}\n    />\n  )\n}\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  id?: string,\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n  contentExpandedClassName?: string,\n}>\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            id: providedId,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                            contentExpandedClassName,\n                                                                                          }, ref) {\n\n  const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n  icon ??= defaultIcon\n\n  const generatedId = useId()\n  const id = providedId ?? generatedId\n\n  return (\n    <div\n      ref={ref}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n\n      className={clsx(\n        'flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm',\n        { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className\n      )}\n    >\n      <button\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n\n        className={clsx(\n          'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-97': !isExpanded,\n            'hover:brightness-97': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n\n        aria-expanded={isExpanded}\n        aria-controls={`${id}-content`}\n        aria-disabled={disabled ?? undefined}\n      >\n        {label}\n        {icon(isExpanded)}\n      </button>\n      <div\n        id={`${id}-content`}\n        className={clsx(\n          'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n          {\n            [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n            'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n          },\n          contentClassName\n        )}\n\n        role=\"region\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoE;AACpE,0BAA4B;AAC5B,kBAAiB;;;ACHV,IAAM,OAAO,MAAM;;;ADatB;AAFG,IAAM,gBAAgB,CAAC,EAAE,YAAY,UAAU,MAA0B;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,eAAW,YAAAA;AAAA,QACT;AAAA,QACA,EAAE,cAAc,WAAW;AAAA,QAC3B;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAwBO,IAAM,iBAAa,yBAA4C,SAASC,YAAW;AAAA,EACE;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AAEhG,QAAM,kBAAc,0BAAY,CAAC,aAAsB,4CAAC,iBAAc,YAAY,UAAS,GAAI,CAAC,CAAC;AACjG,WAAS;AAET,QAAM,kBAAc,oBAAM;AAC1B,QAAM,KAAK,cAAc;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,MAAM,CAAC,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,MAEtE,eAAW,YAAAD;AAAA,QACT;AAAA,QACA,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS;AAAA,QAAG;AAAA,MACzD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,YAErE,eAAW,YAAAA;AAAA,cACT;AAAA,cACA;AAAA,gBACE,6BAA6B,CAAC;AAAA,gBAC9B,uBAAuB,cAAc,CAAC;AAAA,gBACtC,kBAAkB,qBAAqB,CAAC;AAAA,cAC1C;AAAA,cACA;AAAA,YACF;AAAA,YAEA,iBAAe;AAAA,YACf,iBAAe,GAAG,EAAE;AAAA,YACpB,iBAAe,YAAY;AAAA,YAE1B;AAAA;AAAA,cACA,KAAK,UAAU;AAAA;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,EAAE;AAAA,YACT,eAAW,YAAAA;AAAA,cACT;AAAA,cACA;AAAA,gBACE,KAAC,YAAAA,SAAK,6CAA6C,wBAAwB,CAAC,GAAG;AAAA,gBAC/E,qCAAqC,CAAC;AAAA,cACxC;AAAA,cACA;AAAA,YACF;AAAA,YAEA,MAAK;AAAA,YAEJ;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAEM,IAAM,6BAAyB,yBAA4C,SAASE,wBAAuB;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GACA,KAAK;AACrH,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,UAAU;AAE/D,8BAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,WAAS;AACjB,iBAAS,KAAK;AACd,0BAAkB,KAAK;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["clsx","Expandable","ExpandableUncontrolled"]}

package/dist/components/layout-and-navigation/Expandable.mjs

@@ -1,9 +1,9 @@
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect, useId, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import clsx from "clsx";
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
 // src/components/layout-and-navigation/Expandable.tsx
@@ -12,8 +12,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ jsx(
     ChevronDown,
     {
+      "aria-hidden": true,
       className: clsx(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
         { "rotate-180": isExpanded },
         className
       )
@@ -22,6 +23,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = forwardRef(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -35,16 +37,23 @@ var Expandable = forwardRef(function Expandable2({
 }, ref) {
   const defaultIcon = useCallback((expanded) => /* @__PURE__ */ jsx(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      className: clsx("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: clsx(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxs(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: clsx(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -54,7 +63,9 @@ var Expandable = forwardRef(function Expandable2({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
             children: [
               label,
               icon(isExpanded)
@@ -64,6 +75,7 @@ var Expandable = forwardRef(function Expandable2({
         /* @__PURE__ */ jsx(
           "div",
           {
+            id: `${id}-content`,
             className: clsx(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -72,6 +84,7 @@ var Expandable = forwardRef(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )

package/dist/components/layout-and-navigation/Expandable.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n  contentExpandedClassName?: string,\n}>\n\n\nexport type ExpansionIconProps = {\n  isExpanded: boolean,\n  className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n  return (\n    <ChevronDown\n      className={clsx(\n        'min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out',\n        { 'rotate-180': isExpanded },\n        className\n      )}\n    />\n  )\n}\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                            contentExpandedClassName,\n                                                                                          }, ref) {\n  const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n  icon ??= defaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-97': !isExpanded,\n            'hover:brightness-97': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      <div\n        className={clsx(\n          'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n          {\n            [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n            'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n          },\n          contentClassName\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n"],"mappings":";AACA,SAAS,YAAY,aAAa,WAAW,gBAAgB;AAC7D,SAAS,mBAAmB;AAC5B,OAAO,UAAU;;;ACHV,IAAM,OAAO,MAAM;;;ADgCtB,cAoCE,YApCF;AAFG,IAAM,gBAAgB,CAAC,EAAE,YAAY,UAAU,MAA0B;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,EAAE,cAAc,WAAW;AAAA,QAC3B;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAMO,IAAM,aAAa,WAA4C,SAASA,YAAW;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AAChG,QAAM,cAAc,YAAY,CAAC,aAAsB,oBAAC,iBAAc,YAAY,UAAS,GAAI,CAAC,CAAC;AACjG,WAAS;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,oEAAoE,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,GAAG,SAAS;AAAA,MACpJ,SAAS,MAAM,CAAC,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,MAEtE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,6BAA6B,CAAC;AAAA,gBAC9B,uBAAuB,cAAc,CAAC;AAAA,gBACtC,kBAAkB,qBAAqB,CAAC;AAAA,cAC1C;AAAA,cACA;AAAA,YACF;AAAA,YACA,SAAS,MAAM,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,YAEpE;AAAA;AAAA,cACA,KAAK,UAAU;AAAA;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,CAAC,KAAK,6CAA6C,wBAAwB,CAAC,GAAG;AAAA,gBAC/E,qCAAqC,CAAC;AAAA,cACxC;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAEM,IAAM,yBAAyB,WAA4C,SAASC,wBAAuB;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GACA,KAAK;AACrH,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,UAAU;AAE/D,YAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,WAAS;AACjB,iBAAS,KAAK;AACd,0BAAkB,KAAK;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Expandable","ExpandableUncontrolled"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/utils/noop.ts"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useId, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '@/src/utils/noop'\n\nexport type ExpansionIconProps = {\n  isExpanded?: boolean,\n  className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n  return (\n    <ChevronDown\n      aria-hidden={true}\n      className={clsx(\n        'min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out',\n        { 'rotate-180': isExpanded },\n        className\n      )}\n    />\n  )\n}\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  id?: string,\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n  contentExpandedClassName?: string,\n}>\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            id: providedId,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                            contentExpandedClassName,\n                                                                                          }, ref) {\n\n  const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n  icon ??= defaultIcon\n\n  const generatedId = useId()\n  const id = providedId ?? generatedId\n\n  return (\n    <div\n      ref={ref}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n\n      className={clsx(\n        'flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm',\n        { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className\n      )}\n    >\n      <button\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n\n        className={clsx(\n          'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-97': !isExpanded,\n            'hover:brightness-97': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n\n        aria-expanded={isExpanded}\n        aria-controls={`${id}-content`}\n        aria-disabled={disabled ?? undefined}\n      >\n        {label}\n        {icon(isExpanded)}\n      </button>\n      <div\n        id={`${id}-content`}\n        className={clsx(\n          'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n          {\n            [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n            'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n          },\n          contentClassName\n        )}\n\n        role=\"region\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n"],"mappings":";AACA,SAAS,YAAY,aAAa,WAAW,OAAO,gBAAgB;AACpE,SAAS,mBAAmB;AAC5B,OAAO,UAAU;;;ACHV,IAAM,OAAO,MAAM;;;ADatB,cAgEE,YAhEF;AAFG,IAAM,gBAAgB,CAAC,EAAE,YAAY,UAAU,MAA0B;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA,EAAE,cAAc,WAAW;AAAA,QAC3B;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAwBO,IAAM,aAAa,WAA4C,SAASA,YAAW;AAAA,EACE;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AAEhG,QAAM,cAAc,YAAY,CAAC,aAAsB,oBAAC,iBAAc,YAAY,UAAS,GAAI,CAAC,CAAC;AACjG,WAAS;AAET,QAAM,cAAc,MAAM;AAC1B,QAAM,KAAK,cAAc;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,MAAM,CAAC,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,MAEtE,WAAW;AAAA,QACT;AAAA,QACA,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS;AAAA,QAAG;AAAA,MACzD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,YAErE,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,6BAA6B,CAAC;AAAA,gBAC9B,uBAAuB,cAAc,CAAC;AAAA,gBACtC,kBAAkB,qBAAqB,CAAC;AAAA,cAC1C;AAAA,cACA;AAAA,YACF;AAAA,YAEA,iBAAe;AAAA,YACf,iBAAe,GAAG,EAAE;AAAA,YACpB,iBAAe,YAAY;AAAA,YAE1B;AAAA;AAAA,cACA,KAAK,UAAU;AAAA;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,EAAE;AAAA,YACT,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,CAAC,KAAK,6CAA6C,wBAAwB,CAAC,GAAG;AAAA,gBAC/E,qCAAqC,CAAC;AAAA,cACxC;AAAA,cACA;AAAA,YACF;AAAA,YAEA,MAAK;AAAA,YAEJ;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAEM,IAAM,yBAAyB,WAA4C,SAASC,wBAAuB;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GACA,KAAK;AACrH,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,UAAU;AAE/D,YAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,WAAS;AACjB,iBAAS,KAAK;AACd,0BAAkB,KAAK;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Expandable","ExpandableUncontrolled"]}

package/dist/components/layout-and-navigation/FAQSection.js

@@ -39,7 +39,7 @@ var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 var import_clsx = __toESM(require("clsx"));
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
 // src/components/layout-and-navigation/Expandable.tsx
@@ -48,8 +48,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_lucide_react.ChevronDown,
     {
+      "aria-hidden": true,
       className: (0, import_clsx.default)(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
         { "rotate-180": isExpanded },
         className
       )
@@ -58,6 +59,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = (0, import_react.forwardRef)(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -71,16 +73,23 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
 }, ref) {
   const defaultIcon = (0, import_react.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = (0, import_react.useId)();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref,
-      className: (0, import_clsx.default)("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: (0, import_clsx.default)(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: (0, import_clsx.default)(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -90,7 +99,9 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
             children: [
               label,
               icon(isExpanded)
@@ -100,6 +111,7 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
+            id: `${id}-content`,
             className: (0, import_clsx.default)(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -108,6 +120,7 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )
@@ -375,18 +388,18 @@ var FAQSection = ({
   entries,
   expandableClassName
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     ExpandableUncontrolled,
     {
       ...restProps,
-      label: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { id, className: "textstyle-title-md", children: title }),
+      label: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { id, className: "typography-title-md-semibold", children: title }),
       clickOnlyOnHeader: false,
       icon: (expanded) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
       className: (0, import_clsx2.default)("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
-  )) });
+  ) }, id)) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/layout-and-navigation/FAQSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/FAQSection.tsx","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts","../../../src/components/layout-and-navigation/MarkdownInterpreter.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport type { ExpandableProps } from './Expandable'\nimport { ExpansionIcon } from './Expandable'\nimport { ExpandableUncontrolled } from './Expandable'\nimport { MarkdownInterpreter } from './MarkdownInterpreter'\n\ntype ContentType = {\n  type: 'markdown',\n  value: string,\n} | {\n  type: 'custom',\n  value: ReactNode,\n}\n\nexport type FAQItem = Pick<ExpandableProps, 'isExpanded' | 'className'> & {\n  id: string,\n  title: string,\n  content: ContentType,\n}\n\nexport type FAQSectionProps = {\n  entries: FAQItem[],\n  expandableClassName?: string,\n}\n\n/**\n * Description\n */\nexport const FAQSection = ({\n                             entries,\n                             expandableClassName\n                           }: FAQSectionProps) => {\n  return (\n    <div className=\"flex-col-4\">\n      {entries.map(({ id, title, content, ...restProps }) => (\n        <ExpandableUncontrolled\n          key={id}\n          {...restProps}\n          label={(<h3 id={id} className=\"textstyle-title-md\">{title}</h3>)}\n          clickOnlyOnHeader={false}\n          icon={(expanded) => (<ExpansionIcon isExpanded={expanded} className=\"text-primary\"/>)}\n          className={clsx('rounded-xl', expandableClassName)}\n        >\n          <div className=\"mt-2\">\n            {content.type === 'markdown' ? (<MarkdownInterpreter text={content.value}/>) : content.value}\n          </div>\n        </ExpandableUncontrolled>\n      ))}\n    </div>\n  )\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n  contentExpandedClassName?: string,\n}>\n\n\nexport type ExpansionIconProps = {\n  isExpanded: boolean,\n  className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n  return (\n    <ChevronDown\n      className={clsx(\n        'min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out',\n        { 'rotate-180': isExpanded },\n        className\n      )}\n    />\n  )\n}\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                            contentExpandedClassName,\n                                                                                          }, ref) {\n  const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n  icon ??= defaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-97': !isExpanded,\n            'hover:brightness-97': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      <div\n        className={clsx(\n          'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n          {\n            [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n            'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n          },\n          contentClassName\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n","type ASTNodeModifierType =\n  'none'\n  | 'italic'\n  | 'bold'\n  | 'underline'\n  | 'font-space'\n  | 'primary'\n  | 'secondary'\n  | 'warn'\n  | 'positive'\n  | 'negative'\n\nconst astNodeInserterType = ['helpwave', 'newline'] as const\ntype ASTNodeInserterType = typeof astNodeInserterType[number]\ntype ASTNodeDefaultType = 'text'\n\ntype ASTNode = {\n  type: ASTNodeModifierType,\n  children: ASTNode[],\n} | {\n  type: ASTNodeInserterType,\n} | {\n  type: ASTNodeDefaultType,\n  text: string,\n}\n\nexport type ASTNodeInterpreterProps = {\n  node: ASTNode,\n  isRoot?: boolean,\n  className?: string,\n}\nexport const ASTNodeInterpreter = ({\n                                     node,\n                                     isRoot = false,\n                                     className = '',\n                                   }: ASTNodeInterpreterProps) => {\n  switch (node.type) {\n    case 'newline':\n      return <br/>\n    case 'text':\n      return isRoot ? <span className={className}>{node.text}</span> : node.text\n    case 'helpwave':\n      return (<span className=\"font-bold font-space no-underline\">helpwave</span>)\n    case 'none':\n      return isRoot ? (\n          <span className={className}>{node.children.map((value, index) => (\n            <ASTNodeInterpreter key={index}\n                                node={value}/>\n          ))}</span>\n        ) :\n        <>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</>\n    case 'bold':\n      return <b>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</b>\n    case 'italic':\n      return <i>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</i>\n    case 'underline':\n      return (<u>{node.children.map((value, index) => (<ASTNodeInterpreter key={index} node={value}/>))}</u>)\n    case 'font-space':\n      return (\n        <span className=\"font-space\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter key={index}\n                              node={value}/>\n        ))}</span>\n      )\n    case 'primary':\n      return (\n        <span className=\"text-primary\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'secondary':\n      return (\n        <span className=\"text-secondary\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'warn':\n      return (\n        <span className=\"text-warning\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'positive':\n      return (\n        <span className=\"text-positive\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'negative':\n      return (\n        <span className=\"text-negative\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    default:\n      return null\n  }\n}\n\nconst modifierIdentifierMapping = [\n  { id: 'i', name: 'italic' },\n  { id: 'b', name: 'bold' },\n  { id: 'u', name: 'underline' },\n  { id: 'space', name: 'font-space' },\n  { id: 'primary', name: 'primary' },\n  { id: 'secondary', name: 'secondary' },\n  { id: 'warn', name: 'warn' },\n  { id: 'positive', name: 'positive' },\n  { id: 'negative', name: 'negative' },\n] as const\n\nconst inserterIdentifierMapping = [\n  { id: 'helpwave', name: 'helpwave' },\n  { id: 'newline', name: 'newline' }\n] as const\nconst parseMarkdown = (\n  text: string,\n  commandStart: string = '\\\\',\n  open: string = '{',\n  close: string = '}'\n): ASTNode => {\n  let start = text.indexOf(commandStart)\n  const children: ASTNode[] = []\n\n  // parse the text step by step\n  while (text !== '') {\n    if (start === -1) {\n      children.push({\n        type: 'text',\n        text\n      })\n      break\n    }\n    children.push(parseMarkdown(text.substring(0, start)))\n    text = text.substring(start)\n    if (text.length <= 1) {\n      children.push({\n        type: 'text',\n        text\n      })\n      text = ''\n      continue\n    }\n    const simpleReplace = [commandStart, open, close]\n    if (simpleReplace.some(value => text[1] === value)) {\n      children.push({\n        type: 'text',\n        text: simpleReplace.find(value => text[1] === value)!\n      })\n      text = text.substring(2)\n      start = text.indexOf(commandStart)\n      continue\n    }\n    const inserter = inserterIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n    if (inserter) {\n      children.push({\n        type: inserter.name,\n      })\n      text = text.substring(inserter.id.length + 1)\n      start = text.indexOf(commandStart)\n      continue\n    }\n    const modifier = modifierIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n    if (modifier) {\n      // check brackets\n      if (text[modifier.id.length + 1] !== open) {\n        children.push({\n          type: 'text',\n          text: text.substring(0, modifier.id.length + 1)\n        })\n        text = text.substring(modifier.id.length + 2)\n        start = text.indexOf(commandStart)\n        continue\n      }\n      let closing = -1\n      let index = modifier.id.length + 2\n      let counter = 1\n      let escaping = false\n      while (index < text.length) {\n        if (text[index] === open && !escaping) {\n          counter++\n        }\n        if (text[index] === close && !escaping) {\n          counter--\n          if (counter === 0) {\n            closing = index\n            break\n          }\n        }\n        escaping = text[index] === commandStart\n        index++\n      }\n\n      if (closing !== -1) {\n        children.push({\n          type: modifier.name,\n          children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]\n        })\n        text = text.substring(closing + 1)\n        start = text.indexOf(commandStart)\n        continue\n      }\n    }\n    // nothing could be applied to command start\n    children.push({\n      type: 'text',\n      text: text[0]!\n    })\n    text = text.substring(1)\n    start = text.indexOf(commandStart)\n  }\n\n  return {\n    type: 'none',\n    children\n  }\n}\n\nconst optimizeTree = (node: ASTNode) => {\n  if (node.type === 'text') {\n    return !node.text ? undefined : node\n  }\n  if (astNodeInserterType.some(value => value === node.type)) {\n    return node\n  }\n\n  const currentNode = node as\n    { type: ASTNodeModifierType, children: ASTNode[] }\n\n  if (currentNode.children.length === 0) {\n    return undefined\n  }\n\n  let children: ASTNode[] = []\n  for (let i = 0; i < currentNode.children.length; i++) {\n    const child = optimizeTree(currentNode.children[i]!)\n    if (!child) {\n      continue\n    }\n    if (child.type === 'none') {\n      children.push(...child.children)\n    } else {\n      children.push(child)\n    }\n  }\n\n  currentNode.children = children\n  children = []\n\n  for (let i = 0; i < currentNode.children.length; i++) {\n    const child = currentNode.children[i]!\n    if (child) {\n      if (child.type === 'text' && children[children.length - 1]?.type === 'text') {\n        (children[children.length - 1]! as { type: ASTNodeDefaultType, text: string }).text += child.text\n      } else {\n        children.push(child)\n      }\n    }\n  }\n  currentNode.children = children\n  return currentNode\n}\n\nexport type MarkdownInterpreterProps = {\n  text: string,\n  className?: string,\n}\n\nexport const MarkdownInterpreter = ({ text, className }: MarkdownInterpreterProps) => {\n  const tree = parseMarkdown(text)\n  const optimizedTree = optimizeTree(tree)!\n  return <ASTNodeInterpreter node={optimizedTree} isRoot={true} className={className}/>\n}\n"],"mappings":"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","names":["import_clsx","clsx","Expandable","ExpandableUncontrolled","import_jsx_runtime","import_jsx_runtime","clsx"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/FAQSection.tsx","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/utils/noop.ts","../../../src/components/layout-and-navigation/MarkdownInterpreter.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport type { ExpandableProps } from './Expandable'\nimport { ExpansionIcon } from './Expandable'\nimport { ExpandableUncontrolled } from './Expandable'\nimport { MarkdownInterpreter } from './MarkdownInterpreter'\n\ntype ContentType = {\n  type: 'markdown',\n  value: string,\n} | {\n  type: 'custom',\n  value: ReactNode,\n}\n\nexport type FAQItem = Pick<ExpandableProps, 'isExpanded' | 'className'> & {\n  id: string,\n  title: string,\n  content: ContentType,\n}\n\nexport type FAQSectionProps = {\n  entries: FAQItem[],\n  expandableClassName?: string,\n}\n\n/**\n * Description\n */\nexport const FAQSection = ({\n                             entries,\n                             expandableClassName\n                           }: FAQSectionProps) => {\n  return (\n    <ul className=\"flex-col-4\">\n      {entries.map(({ id, title, content, ...restProps }) => (\n        <li key={id}>\n          <ExpandableUncontrolled\n            key={id}\n            {...restProps}\n            label={(<h3 id={id} className=\"typography-title-md-semibold\">{title}</h3>)}\n            clickOnlyOnHeader={false}\n            icon={(expanded) => (<ExpansionIcon isExpanded={expanded} className=\"text-primary\"/>)}\n            className={clsx('rounded-xl', expandableClassName)}\n          >\n            <div className=\"mt-2\">\n              {content.type === 'markdown' ? (<MarkdownInterpreter text={content.value}/>) : content.value}\n            </div>\n          </ExpandableUncontrolled>\n        </li>\n      ))}\n    </ul>\n  )\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useId, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '@/src/utils/noop'\n\nexport type ExpansionIconProps = {\n  isExpanded?: boolean,\n  className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n  return (\n    <ChevronDown\n      aria-hidden={true}\n      className={clsx(\n        'min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out',\n        { 'rotate-180': isExpanded },\n        className\n      )}\n    />\n  )\n}\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  id?: string,\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n  contentExpandedClassName?: string,\n}>\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            id: providedId,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                            contentExpandedClassName,\n                                                                                          }, ref) {\n\n  const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n  icon ??= defaultIcon\n\n  const generatedId = useId()\n  const id = providedId ?? generatedId\n\n  return (\n    <div\n      ref={ref}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n\n      className={clsx(\n        'flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm',\n        { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className\n      )}\n    >\n      <button\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n\n        className={clsx(\n          'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-97': !isExpanded,\n            'hover:brightness-97': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n\n        aria-expanded={isExpanded}\n        aria-controls={`${id}-content`}\n        aria-disabled={disabled ?? undefined}\n      >\n        {label}\n        {icon(isExpanded)}\n      </button>\n      <div\n        id={`${id}-content`}\n        className={clsx(\n          'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n          {\n            [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n            'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n          },\n          contentClassName\n        )}\n\n        role=\"region\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n","type ASTNodeModifierType =\n  'none'\n  | 'italic'\n  | 'bold'\n  | 'underline'\n  | 'font-space'\n  | 'primary'\n  | 'secondary'\n  | 'warn'\n  | 'positive'\n  | 'negative'\n\nconst astNodeInserterType = ['helpwave', 'newline'] as const\ntype ASTNodeInserterType = typeof astNodeInserterType[number]\ntype ASTNodeDefaultType = 'text'\n\ntype ASTNode = {\n  type: ASTNodeModifierType,\n  children: ASTNode[],\n} | {\n  type: ASTNodeInserterType,\n} | {\n  type: ASTNodeDefaultType,\n  text: string,\n}\n\nexport type ASTNodeInterpreterProps = {\n  node: ASTNode,\n  isRoot?: boolean,\n  className?: string,\n}\nexport const ASTNodeInterpreter = ({\n                                     node,\n                                     isRoot = false,\n                                     className = '',\n                                   }: ASTNodeInterpreterProps) => {\n  switch (node.type) {\n    case 'newline':\n      return <br/>\n    case 'text':\n      return isRoot ? <span className={className}>{node.text}</span> : node.text\n    case 'helpwave':\n      return (<span className=\"font-bold font-space no-underline\">helpwave</span>)\n    case 'none':\n      return isRoot ? (\n          <span className={className}>{node.children.map((value, index) => (\n            <ASTNodeInterpreter key={index}\n                                node={value}/>\n          ))}</span>\n        ) :\n        <>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</>\n    case 'bold':\n      return <b>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</b>\n    case 'italic':\n      return <i>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</i>\n    case 'underline':\n      return (<u>{node.children.map((value, index) => (<ASTNodeInterpreter key={index} node={value}/>))}</u>)\n    case 'font-space':\n      return (\n        <span className=\"font-space\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter key={index}\n                              node={value}/>\n        ))}</span>\n      )\n    case 'primary':\n      return (\n        <span className=\"text-primary\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'secondary':\n      return (\n        <span className=\"text-secondary\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'warn':\n      return (\n        <span className=\"text-warning\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'positive':\n      return (\n        <span className=\"text-positive\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'negative':\n      return (\n        <span className=\"text-negative\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    default:\n      return null\n  }\n}\n\nconst modifierIdentifierMapping = [\n  { id: 'i', name: 'italic' },\n  { id: 'b', name: 'bold' },\n  { id: 'u', name: 'underline' },\n  { id: 'space', name: 'font-space' },\n  { id: 'primary', name: 'primary' },\n  { id: 'secondary', name: 'secondary' },\n  { id: 'warn', name: 'warn' },\n  { id: 'positive', name: 'positive' },\n  { id: 'negative', name: 'negative' },\n] as const\n\nconst inserterIdentifierMapping = [\n  { id: 'helpwave', name: 'helpwave' },\n  { id: 'newline', name: 'newline' }\n] as const\nconst parseMarkdown = (\n  text: string,\n  commandStart: string = '\\\\',\n  open: string = '{',\n  close: string = '}'\n): ASTNode => {\n  let start = text.indexOf(commandStart)\n  const children: ASTNode[] = []\n\n  // parse the text step by step\n  while (text !== '') {\n    if (start === -1) {\n      children.push({\n        type: 'text',\n        text\n      })\n      break\n    }\n    children.push(parseMarkdown(text.substring(0, start)))\n    text = text.substring(start)\n    if (text.length <= 1) {\n      children.push({\n        type: 'text',\n        text\n      })\n      text = ''\n      continue\n    }\n    const simpleReplace = [commandStart, open, close]\n    if (simpleReplace.some(value => text[1] === value)) {\n      children.push({\n        type: 'text',\n        text: simpleReplace.find(value => text[1] === value)!\n      })\n      text = text.substring(2)\n      start = text.indexOf(commandStart)\n      continue\n    }\n    const inserter = inserterIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n    if (inserter) {\n      children.push({\n        type: inserter.name,\n      })\n      text = text.substring(inserter.id.length + 1)\n      start = text.indexOf(commandStart)\n      continue\n    }\n    const modifier = modifierIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n    if (modifier) {\n      // check brackets\n      if (text[modifier.id.length + 1] !== open) {\n        children.push({\n          type: 'text',\n          text: text.substring(0, modifier.id.length + 1)\n        })\n        text = text.substring(modifier.id.length + 2)\n        start = text.indexOf(commandStart)\n        continue\n      }\n      let closing = -1\n      let index = modifier.id.length + 2\n      let counter = 1\n      let escaping = false\n      while (index < text.length) {\n        if (text[index] === open && !escaping) {\n          counter++\n        }\n        if (text[index] === close && !escaping) {\n          counter--\n          if (counter === 0) {\n            closing = index\n            break\n          }\n        }\n        escaping = text[index] === commandStart\n        index++\n      }\n\n      if (closing !== -1) {\n        children.push({\n          type: modifier.name,\n          children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]\n        })\n        text = text.substring(closing + 1)\n        start = text.indexOf(commandStart)\n        continue\n      }\n    }\n    // nothing could be applied to command start\n    children.push({\n      type: 'text',\n      text: text[0]!\n    })\n    text = text.substring(1)\n    start = text.indexOf(commandStart)\n  }\n\n  return {\n    type: 'none',\n    children\n  }\n}\n\nconst optimizeTree = (node: ASTNode) => {\n  if (node.type === 'text') {\n    return !node.text ? undefined : node\n  }\n  if (astNodeInserterType.some(value => value === node.type)) {\n    return node\n  }\n\n  const currentNode = node as\n    { type: ASTNodeModifierType, children: ASTNode[] }\n\n  if (currentNode.children.length === 0) {\n    return undefined\n  }\n\n  let children: ASTNode[] = []\n  for (let i = 0; i < currentNode.children.length; i++) {\n    const child = optimizeTree(currentNode.children[i]!)\n    if (!child) {\n      continue\n    }\n    if (child.type === 'none') {\n      children.push(...child.children)\n    } else {\n      children.push(child)\n    }\n  }\n\n  currentNode.children = children\n  children = []\n\n  for (let i = 0; i < currentNode.children.length; i++) {\n    const child = currentNode.children[i]!\n    if (child) {\n      if (child.type === 'text' && children[children.length - 1]?.type === 'text') {\n        (children[children.length - 1]! as { type: ASTNodeDefaultType, text: string }).text += child.text\n      } else {\n        children.push(child)\n      }\n    }\n  }\n  currentNode.children = children\n  return currentNode\n}\n\nexport type MarkdownInterpreterProps = {\n  text: string,\n  className?: string,\n}\n\nexport const MarkdownInterpreter = ({ text, className }: MarkdownInterpreterProps) => {\n  const tree = parseMarkdown(text)\n  const optimizedTree = optimizeTree(tree)!\n  return <ASTNodeInterpreter node={optimizedTree} isRoot={true} className={className}/>\n}\n"],"mappings":"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","names":["import_clsx","clsx","Expandable","ExpandableUncontrolled","import_jsx_runtime","import_jsx_runtime","clsx"]}

package/dist/components/layout-and-navigation/FAQSection.mjs

@@ -2,11 +2,11 @@
 import clsx2 from "clsx";
 
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect, useId, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import clsx from "clsx";
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
 // src/components/layout-and-navigation/Expandable.tsx
@@ -15,8 +15,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ jsx(
     ChevronDown,
     {
+      "aria-hidden": true,
       className: clsx(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
         { "rotate-180": isExpanded },
         className
       )
@@ -25,6 +26,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = forwardRef(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -38,16 +40,23 @@ var Expandable = forwardRef(function Expandable2({
 }, ref) {
   const defaultIcon = useCallback((expanded) => /* @__PURE__ */ jsx(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      className: clsx("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: clsx(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxs(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: clsx(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -57,7 +66,9 @@ var Expandable = forwardRef(function Expandable2({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
             children: [
               label,
               icon(isExpanded)
@@ -67,6 +78,7 @@ var Expandable = forwardRef(function Expandable2({
         /* @__PURE__ */ jsx(
           "div",
           {
+            id: `${id}-content`,
             className: clsx(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -75,6 +87,7 @@ var Expandable = forwardRef(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )
@@ -342,18 +355,18 @@ var FAQSection = ({
   entries,
   expandableClassName
 }) => {
-  return /* @__PURE__ */ jsx3("div", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx3("ul", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
     ExpandableUncontrolled,
     {
       ...restProps,
-      label: /* @__PURE__ */ jsx3("h3", { id, className: "textstyle-title-md", children: title }),
+      label: /* @__PURE__ */ jsx3("h3", { id, className: "typography-title-md-semibold", children: title }),
       clickOnlyOnHeader: false,
       icon: (expanded) => /* @__PURE__ */ jsx3(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
       className: clsx2("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ jsx3("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ jsx3(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
-  )) });
+  ) }, id)) });
 };
 export {
   FAQSection