@infonomic/uikit 5.43.1 → 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.43.1",
+  "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,53 +58,45 @@
     }
   },
   "dependencies": {
-    "@mantine/hooks": "^8.3.16",
-    "@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.35.2",
+    "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",
     "zod": "^4.3.6",
     "zod-form-data": "^3.0.1"
   },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
   "devDependencies": {
-    "@astrojs/check": "0.9.7",
-    "@astrojs/node": "10.0.0",
-    "@biomejs/biome": "2.4.6",
-    "@rsbuild/plugin-react": "^1.4.5",
+    "@astrojs/check": "0.9.8",
+    "@astrojs/node": "10.0.3",
+    "@biomejs/biome": "2.4.8",
+    "@rsbuild/plugin-react": "^1.4.6",
     "@rslib/core": "^0.20.0",
-    "@storybook/addon-a11y": "^10.2.17",
-    "@storybook/addon-docs": "^10.2.17",
-    "@storybook/addon-links": "^10.2.17",
-    "@storybook/addon-themes": "^10.2.17",
-    "@storybook/react-vite": "^10.2.17",
+    "@storybook/addon-a11y": "^10.3.1",
+    "@storybook/addon-docs": "^10.3.1",
+    "@storybook/addon-links": "^10.3.1",
+    "@storybook/addon-themes": "^10.3.1",
+    "@storybook/react-vite": "^10.3.1",
     "@types/lodash": "^4.17.24",
-    "@types/node": "^25.4.0",
+    "@types/node": "^25.5.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "astro": "6.0.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "astro": "6.0.8",
     "chokidar": "^5.0.0",
-    "eslint-plugin-storybook": "^10.2.17",
+    "eslint-plugin-storybook": "^10.3.1",
     "lightningcss": "^1.32.0",
     "lightningcss-cli": "^1.32.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
     "rimraf": "^6.1.3",
-    "storybook": "^10.2.17",
+    "storybook": "^10.3.1",
     "typescript": "5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "vite": "^8.0.1",
+    "vitest": "^4.1.0"
   },
   "publishConfig": {
     "access": "public",

package/src/astro.d.ts

@@ -7,14 +7,14 @@ import type CardFooterComponent from './components/card/card-footer.astro'
 import type CardHeaderComponent from './components/card/card-header.astro'
 import type CardTitleComponent from './components/card/card-title.astro'
 import type ContainerComponent from './components/container/container.astro'
-import type HamburgerComponent from './components/hamburger/hamburger.astro'
 import type ErrorTextComponent from './components/forms/error-text.astro'
 import type HelpTextComponent from './components/forms/help-text.astro'
 import type InputComponent from './components/forms/input.astro'
 import type InputAdornmentComponent from './components/forms/input-adornment.astro'
 import type LabelComponent from './components/forms/label.astro'
-import type SectionComponent from './components/section/section.astro'
+import type HamburgerComponent from './components/hamburger/hamburger.astro'
 import type ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
+import type SectionComponent from './components/section/section.astro'
 import type CloseIconComponent from './icons/close-icon.astro'
 import type IconElementComponent from './icons/icon-element.astro'
 import type LightIconComponent from './icons/light-icon.astro'

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>