@infonomic/uikit 5.44.0 → 6.0.0

package/dist/widgets/datepicker/datepicker.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
+import { Popover } from "@base-ui/react/popover";
 import classnames from "classnames";
 import { format } from "date-fns";
-import { Popover } from "radix-ui";
 import { Button } from "../../components/button/button.js";
 import { IconButton } from "../../components/button/icon-button.js";
 import { Calendar } from "../../components/forms/calendar.js";
@@ -119,137 +119,139 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                 onOpenChange: setIsOpen,
                 children: [
                     /*#__PURE__*/ jsx(Popover.Trigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ jsx("div", {
+                        nativeButton: false,
+                        render: /*#__PURE__*/ jsx("div", {
                             style: {
                                 position: 'relative',
                                 height: '1px'
-                            },
-                            children: /*#__PURE__*/ jsx("span", {
-                                className: "sr-only",
-                                children: "Select date"
-                            })
+                            }
+                        }),
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "sr-only",
+                            children: "Select date"
                         })
                     }),
                     /*#__PURE__*/ jsx(Popover.Portal, {
-                        children: /*#__PURE__*/ jsxs(Popover.Content, {
+                        children: /*#__PURE__*/ jsx(Popover.Positioner, {
                             sideOffset: 5,
-                            className: classnames('infonomic-datepicker-content', datepicker_module.content, contentClassName),
-                            children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    className: classnames('infonomic-datepicker-content-components', datepicker_module["content-components"]),
-                                    children: [
-                                        /*#__PURE__*/ jsx("div", {
-                                            ref: calendarRef,
-                                            children: /*#__PURE__*/ jsx(Calendar, {
-                                                mode: "single",
-                                                required: true,
-                                                captionLayout: "dropdown",
-                                                selected: date ?? void 0,
-                                                month: month ?? void 0,
-                                                onMonthChange: setMonth,
-                                                onSelect: (selectedDate)=>{
-                                                    if (selectedDate) {
-                                                        const [hours, minutes] = time.split(':');
-                                                        selectedDate.setHours(Number.parseInt(hours, 10), Number.parseInt(minutes, 10));
-                                                        setDate(selectedDate);
-                                                        setMonth(selectedDate);
-                                                        handleOnDateChange(selectedDate);
-                                                    }
-                                                },
-                                                startMonth: new Date(new Date().getFullYear() - yearsInPast, 0),
-                                                endMonth: new Date(new Date().getFullYear() + yearsInFuture, 0)
-                                            })
-                                        }),
-                                        'datetime' === mode && /*#__PURE__*/ jsx("div", {
-                                            className: datepicker_module["time-picker-container"],
-                                            children: /*#__PURE__*/ jsx(ScrollArea, {
-                                                className: datepicker_module["time-picker-scroll-area"],
-                                                children: /*#__PURE__*/ jsx("div", {
-                                                    className: datepicker_module["time-picker"],
-                                                    children: Array.from({
-                                                        length: 96
-                                                    }).map((_, i)=>{
-                                                        const hour = Math.floor(i / 4).toString().padStart(2, '0');
-                                                        const minute = (i % 4 * 15).toString().padStart(2, '0');
-                                                        const timeValue = `${hour}:${minute}`;
-                                                        return /*#__PURE__*/ jsx(Button, {
-                                                            size: "sm",
-                                                            className: datepicker_module["time-picker-button"],
-                                                            variant: "outlined",
-                                                            onClick: ()=>{
-                                                                setTime(timeValue);
-                                                                if (date) {
-                                                                    const newDate = new Date(date.getTime());
-                                                                    newDate.setHours(Number.parseInt(hour, 10), Number.parseInt(minute, 10), 0);
-                                                                    setDate(newDate);
-                                                                    handleOnDateChange(newDate);
-                                                                }
-                                                            },
-                                                            children: timeValue
-                                                        }, i);
+                            children: /*#__PURE__*/ jsxs(Popover.Popup, {
+                                className: classnames('infonomic-datepicker-content', datepicker_module.content, contentClassName),
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: classnames('infonomic-datepicker-content-components', datepicker_module["content-components"]),
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                ref: calendarRef,
+                                                children: /*#__PURE__*/ jsx(Calendar, {
+                                                    mode: "single",
+                                                    required: true,
+                                                    captionLayout: "dropdown",
+                                                    selected: date ?? void 0,
+                                                    month: month ?? void 0,
+                                                    onMonthChange: setMonth,
+                                                    onSelect: (selectedDate)=>{
+                                                        if (selectedDate) {
+                                                            const [hours, minutes] = time.split(':');
+                                                            selectedDate.setHours(Number.parseInt(hours, 10), Number.parseInt(minutes, 10));
+                                                            setDate(selectedDate);
+                                                            setMonth(selectedDate);
+                                                            handleOnDateChange(selectedDate);
+                                                        }
+                                                    },
+                                                    startMonth: new Date(new Date().getFullYear() - yearsInPast, 0),
+                                                    endMonth: new Date(new Date().getFullYear() + yearsInFuture, 0)
+                                                })
+                                            }),
+                                            'datetime' === mode && /*#__PURE__*/ jsx("div", {
+                                                className: datepicker_module["time-picker-container"],
+                                                children: /*#__PURE__*/ jsx(ScrollArea, {
+                                                    className: datepicker_module["time-picker-scroll-area"],
+                                                    children: /*#__PURE__*/ jsx("div", {
+                                                        className: datepicker_module["time-picker"],
+                                                        children: Array.from({
+                                                            length: 96
+                                                        }).map((_, i)=>{
+                                                            const hour = Math.floor(i / 4).toString().padStart(2, '0');
+                                                            const minute = (i % 4 * 15).toString().padStart(2, '0');
+                                                            const timeValue = `${hour}:${minute}`;
+                                                            return /*#__PURE__*/ jsx(Button, {
+                                                                size: "sm",
+                                                                className: datepicker_module["time-picker-button"],
+                                                                variant: "outlined",
+                                                                onClick: ()=>{
+                                                                    setTime(timeValue);
+                                                                    if (date) {
+                                                                        const newDate = new Date(date.getTime());
+                                                                        newDate.setHours(Number.parseInt(hour, 10), Number.parseInt(minute, 10), 0);
+                                                                        setDate(newDate);
+                                                                        handleOnDateChange(newDate);
+                                                                    }
+                                                                },
+                                                                children: timeValue
+                                                            }, i);
+                                                        })
                                                     })
                                                 })
                                             })
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("div", {
-                                    className: classnames('infonomic-datepicker-status-and-actions', datepicker_module["status-and-actions"]),
-                                    children: [
-                                        /*#__PURE__*/ jsx("div", {
-                                            className: classnames('infonomic-datepicker-content-status', datepicker_module["content-status"]),
-                                            children: date ? format(date, 'datetime' === mode ? 'PPPp' : 'PPP') : 'No date selected'
-                                        }),
-                                        /*#__PURE__*/ jsxs("div", {
-                                            className: classnames('infonomic-datepicker-content-actions', datepicker_module["content-actions"]),
-                                            children: [
-                                                /*#__PURE__*/ jsx("div", {
-                                                    children: /*#__PURE__*/ jsx(Button, {
-                                                        variant: "outlined",
-                                                        size: "sm",
-                                                        className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
-                                                        onClick: ()=>{
-                                                            const today = new Date();
-                                                            setDate(today);
-                                                            setMonth(today);
-                                                            handleOnDateChange(today);
-                                                        },
-                                                        children: "Today"
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsxs("div", {
-                                                    style: {
-                                                        display: 'flex',
-                                                        gap: 'var(--spacing-12)'
-                                                    },
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(Button, {
-                                                            size: "sm",
-                                                            intent: "noeffect",
-                                                            className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
-                                                            onClick: ()=>{
-                                                                setIsOpen(false);
-                                                            },
-                                                            children: "Cancel"
-                                                        }),
-                                                        /*#__PURE__*/ jsx(Button, {
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: classnames('infonomic-datepicker-status-and-actions', datepicker_module["status-and-actions"]),
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: classnames('infonomic-datepicker-content-status', datepicker_module["content-status"]),
+                                                children: date ? format(date, 'datetime' === mode ? 'PPPp' : 'PPP') : 'No date selected'
+                                            }),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: classnames('infonomic-datepicker-content-actions', datepicker_module["content-actions"]),
+                                                children: [
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        children: /*#__PURE__*/ jsx(Button, {
                                                             variant: "outlined",
                                                             size: "sm",
                                                             className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                             onClick: ()=>{
-                                                                setIsOpen(false);
-                                                                handleOnDateChange(date);
+                                                                const today = new Date();
+                                                                setDate(today);
+                                                                setMonth(today);
+                                                                handleOnDateChange(today);
                                                             },
-                                                            children: "Select"
+                                                            children: "Today"
                                                         })
-                                                    ]
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        style: {
+                                                            display: 'flex',
+                                                            gap: 'var(--spacing-12)'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Button, {
+                                                                size: "sm",
+                                                                intent: "noeffect",
+                                                                className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
+                                                                onClick: ()=>{
+                                                                    setIsOpen(false);
+                                                                },
+                                                                children: "Cancel"
+                                                            }),
+                                                            /*#__PURE__*/ jsx(Button, {
+                                                                variant: "outlined",
+                                                                size: "sm",
+                                                                className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
+                                                                onClick: ()=>{
+                                                                    setIsOpen(false);
+                                                                    handleOnDateChange(date);
+                                                                },
+                                                                children: "Select"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
                         })
                     })
                 ]

package/dist/widgets/datepicker/datepicker.module.css

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .container,
   :global(.infonomic-datepicker-container) {
     position: relative;
@@ -33,19 +34,19 @@
       box-shadow: var(--shadow-md);
     }
 
-    &[data-state="open"][data-side="top"] {
+    &[data-open][data-side="top"] {
       animation-name: slideDownAndFade;
     }
 
-    &[data-state="open"][data-side="right"] {
+    &[data-open][data-side="right"] {
       animation-name: slideLeftAndFade;
     }
 
-    &[data-state="open"][data-side="bottom"] {
+    &[data-open][data-side="bottom"] {
       animation-name: slideUpAndFade;
     }
 
-    &[data-state="open"][data-side="left"] {
+    &[data-open][data-side="left"] {
       animation-name: slideRightAndFade;
     }
   }
@@ -204,4 +205,4 @@
       transform: translateX(0);
     }
   }
-}
+}

package/dist/widgets/datepicker/datepicker_module.css

@@ -29,19 +29,19 @@
     box-shadow: var(--shadow-md);
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="top"] {
+  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-open][data-side="top"] {
     animation-name: slideDownAndFade-dohHTE;
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="right"] {
+  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-open][data-side="right"] {
     animation-name: slideLeftAndFade-ugM6Hs;
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="bottom"] {
+  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-open][data-side="bottom"] {
     animation-name: slideUpAndFade-bAwQJS;
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="left"] {
+  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-open][data-side="left"] {
     animation-name: slideRightAndFade-o0jl7q;
   }
 

package/dist/widgets/drawer/drawer-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-wrapper.d.ts","sourceRoot":"","sources":["../../../src/widgets/drawer/drawer-wrapper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAKnD,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACR,EAAE,kBAAkB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4BxC"}
+{"version":3,"file":"drawer-wrapper.d.ts","sourceRoot":"","sources":["../../../src/widgets/drawer/drawer-wrapper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAMnD,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACR,EAAE,kBAAkB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4BxC"}

package/dist/widgets/drawer/drawer-wrapper.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { useFocusTrap } from "@mantine/hooks";
 import classnames from "classnames";
 import { m } from "motion/react";
+import { useFocusTrap } from "../../hooks/use-focus-trap/index.js";
 import drawer_module from "./drawer.module.js";
 function DrawerWrapper({ className, children, onEscapeKey, ...rest }) {
     const focusTrapRef = useFocusTrap();

package/dist/widgets/modal/modal-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-wrapper.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-wrapper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAKnD,MAAM,WAAW,iBAAkB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4BvC"}
+{"version":3,"file":"modal-wrapper.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-wrapper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAMnD,MAAM,WAAW,iBAAkB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4BvC"}

package/dist/widgets/modal/modal-wrapper.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { useFocusTrap } from "@mantine/hooks";
 import classnames from "classnames";
 import { m } from "motion/react";
+import { useFocusTrap } from "../../hooks/use-focus-trap/index.js";
 import modal_module from "./modal.module.js";
 function ModalWrapper({ children, onEscapeKey, ...rest }) {
     const focusTrapRef = useFocusTrap();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.44.0",
+  "version": "6.0.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [
@@ -58,16 +58,12 @@
     }
   },
   "dependencies": {
-    "@mantine/hooks": "^8.3.18",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-slot": "^1.2.4",
+    "@base-ui/react": "^1.0.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
-    "material-ripple-effects": "^2.0.1",
     "motion": "^12.38.0",
     "npm-run-all": "^4.1.5",
     "prism-react-renderer": "^2.4.1",
-    "radix-ui": "^1.4.3",
     "react": "19.2.4",
     "react-day-picker": "^9.14.0",
     "react-dom": "19.2.4",

package/src/components/accordion/accordion.module.css

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .item,
   :global(.infonomic-accordion-item) {
     overflow: hidden;
@@ -25,11 +26,11 @@
   :global(.infonomic-accordion-content) {
     overflow: hidden;
 
-    &[data-state="open"] {
+    &[data-open] {
       animation: accordionSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
     }
 
-    &[data-state="closed"] {
+    &[data-ending-style] {
       animation: accordionSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
     }
   }
@@ -40,17 +41,17 @@
     }
 
     to {
-      height: var(--radix-accordion-content-height);
+      height: var(--accordion-panel-height);
     }
   }
 
   @keyframes accordionSlideUp {
     from {
-      height: var(--radix-accordion-content-height);
+      height: var(--accordion-panel-height);
     }
 
     to {
       height: 0;
     }
   }
-}
+}

package/src/components/accordion/accordion.stories.tsx

@@ -1,6 +1,6 @@
-import { ChevronDownIcon } from '@radix-ui/react-icons'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
+import { ChevronDownIcon } from '../../icons/chevron-down-icon.js'
 import { Accordion as AccordionComponent } from './accordion.js'
 
 const meta: Meta = {
@@ -24,10 +24,7 @@ type Story = StoryObj<typeof AccordionComponent.Root>
  */
 export const Accordion: Story = {
   args: {
-    type: 'single',
-    asChild: true,
-    defaultValue: 'item-1',
-    collapsible: true,
+    defaultValue: ['item-1'],
     className: 'accordion-root',
   },
   render: (args) => (
@@ -56,11 +53,11 @@ export const Accordion: Story = {
         transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
       }
 
-      .accordion-trigger[data-state="open"] + .accordion-chevron {
+      .accordion-trigger[data-panel-open] ~ .accordion-chevron {
         transform: rotate(180deg);
       }
 
-      .accordion-content {
+      .accordion-panel {
         padding: 0 12px;
       }
 
@@ -85,9 +82,9 @@ export const Accordion: Story = {
               </AccordionComponent.Trigger>
               <ChevronDownIcon className="accordion-chevron" />
             </AccordionComponent.Header>
-            <AccordionComponent.Content className="accordion-content">
+            <AccordionComponent.Panel className="accordion-panel">
               <p>Yes. It adheres to the WAI-ARIA design pattern.</p>
-            </AccordionComponent.Content>
+            </AccordionComponent.Panel>
           </AccordionComponent.Item>
 
           <AccordionComponent.Item value="item-2">
@@ -97,13 +94,13 @@ export const Accordion: Story = {
               </AccordionComponent.Trigger>
               <ChevronDownIcon className="accordion-chevron" />
             </AccordionComponent.Header>
-            <AccordionComponent.Content className="accordion-content">
+            <AccordionComponent.Panel className="accordion-panel">
               <ul>
                 <li>Submenu Item One</li>
                 <li>Submenu Item Two</li>
                 <li>Submenu Item Three</li>
               </ul>
-            </AccordionComponent.Content>
+            </AccordionComponent.Panel>
           </AccordionComponent.Item>
 
           <AccordionComponent.Item value="item-3">
@@ -113,9 +110,9 @@ export const Accordion: Story = {
               </AccordionComponent.Trigger>
               <ChevronDownIcon className="accordion-chevron" />
             </AccordionComponent.Header>
-            <AccordionComponent.Content className="accordion-content">
+            <AccordionComponent.Panel className="accordion-panel">
               <p> Yes! You can animate the Accordion with CSS or JavaScript.</p>
-            </AccordionComponent.Content>
+            </AccordionComponent.Panel>
           </AccordionComponent.Item>
         </nav>
       </AccordionComponent.Root>

package/src/components/accordion/accordion.tsx

@@ -8,8 +8,8 @@
 
 import type React from 'react'
 
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
 import cx from 'classnames'
-import { Accordion as AccordionPrimitive } from 'radix-ui'
 
 import styles from './accordion.module.css'
 
@@ -24,7 +24,7 @@ const Root = ({
   children: React.ReactNode
   className?: string
   ref?: React.RefObject<AccordionRootElement>
-} & (AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps)) => {
+} & React.ComponentProps<typeof AccordionPrimitive.Root>) => {
   return (
     <AccordionPrimitive.Root
       ref={ref}
@@ -42,7 +42,7 @@ const Item = function AccordionItem({
   children,
   className,
   ...props
-}: AccordionPrimitive.AccordionItemProps & {
+}: React.ComponentProps<typeof AccordionPrimitive.Item> & {
   ref?: React.RefObject<AccordionItemElement>
 }) {
   return (
@@ -56,13 +56,13 @@ const Item = function AccordionItem({
   )
 }
 
-export type AccordionHeaderElement = React.ComponentRef<'h2'>
+export type AccordionHeaderElement = React.ComponentRef<'h3'>
 const Header = function AccordionHeader({
   ref,
   children,
   className,
   ...props
-}: AccordionPrimitive.AccordionHeaderProps & {
+}: React.ComponentProps<typeof AccordionPrimitive.Header> & {
   ref?: React.RefObject<AccordionHeaderElement>
 }) {
   return (
@@ -82,7 +82,7 @@ const Trigger = function AccordionTrigger({
   children,
   className,
   ...props
-}: AccordionPrimitive.AccordionTriggerProps & {
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
   ref?: React.RefObject<AccordionTriggerElement>
 }) {
   return (
@@ -96,23 +96,23 @@ const Trigger = function AccordionTrigger({
   )
 }
 
-export type AccordionContentElement = React.ComponentRef<'div'>
-const Content = function AccordionContent({
+export type AccordionPanelElement = React.ComponentRef<'div'>
+const Panel = function AccordionPanel({
   ref,
   children,
   className,
   ...props
-}: AccordionPrimitive.AccordionContentProps & {
-  ref?: React.RefObject<AccordionContentElement>
+}: React.ComponentProps<typeof AccordionPrimitive.Panel> & {
+  ref?: React.RefObject<AccordionPanelElement>
 }) {
   return (
-    <AccordionPrimitive.Content
+    <AccordionPrimitive.Panel
       className={cx('infonomic-accordion-content', styles.content, className)}
       {...props}
       ref={ref}
     >
       {children}
-    </AccordionPrimitive.Content>
+    </AccordionPrimitive.Panel>
   )
 }
 
@@ -121,5 +121,5 @@ export const Accordion = {
   Item,
   Header,
   Trigger,
-  Content,
+  Panel,
 }

package/src/components/avatar/avatar.tsx

@@ -2,8 +2,8 @@
 
 import type React from 'react'
 
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
 import cx from 'classnames'
-import { Avatar as AvatarPrimitive } from 'radix-ui'
 
 import styles from './avatar.module.css'
 
@@ -19,7 +19,7 @@ export const Avatar = ({ initials }: { initials: string }): React.JSX.Element =>
       />
       <AvatarPrimitive.Fallback
         className={cx('infonomic-avatar-fallback', styles['avatar-fallback'])}
-        delayMs={600}
+        delay={600}
       >
         <span className={cx('infonomic-avatar-text', styles['avatar-text'])}>{initials}</span>
       </AvatarPrimitive.Fallback>