@reapit/elements 5.0.0-beta.39 → 5.0.0-beta.40

package/dist/types/utils/keyboard-navigation/handle-arrow-navigation.d.ts

@@ -0,0 +1,19 @@
+import type { KeyboardEvent } from 'react';
+interface HandleArrowNavigationOptions {
+    /**
+     * A string containing one or more selectors to match. This string must be a valid CSS
+     * selector string; if it isn't, a SyntaxError exception is thrown. Defaults to selecting
+     * all `<a>` and `<button>` elements.
+     */
+    selectors?: string;
+}
+/**
+ * Handles arrow key events in order to move focus between a collection of elements. Elements that are
+ * focused are also scrolled into view. Focus will not be moved beyond the first or last element in the
+ * collection.
+ *
+ * The `currentTarget` of the event is assumed to be the common ancestor of the navigable elements.
+ */
+export declare function handleArrowNavigation(event: KeyboardEvent<HTMLElement>, { selectors }?: HandleArrowNavigationOptions): void;
+export {};
+//# sourceMappingURL=handle-arrow-navigation.d.ts.map

package/dist/types/utils/keyboard-navigation/handle-arrow-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-arrow-navigation.d.ts","sourceRoot":"/","sources":["utils/keyboard-navigation/handle-arrow-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,UAAU,4BAA4B;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,EAEjC,EAAE,SAAuB,EAAE,GAAE,4BAAiC,QA0C/D"}

package/dist/types/utils/keyboard-navigation/handle-link-activation.d.ts

@@ -0,0 +1,8 @@
+import type { KeyboardEvent } from 'react';
+/**
+ * Activates link elements when the Space key is pressed on them. This is useful when facilitating keyboard
+ * interaction across a group of items (e.g., menu items in a menu) so that all items, whether they are buttons
+ * or links, can be activated with the same keys.
+ */
+export declare function handleLinkActivation(event: KeyboardEvent<HTMLElement>): void;
+//# sourceMappingURL=handle-link-activation.d.ts.map

package/dist/types/utils/keyboard-navigation/handle-link-activation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-link-activation.d.ts","sourceRoot":"/","sources":["utils/keyboard-navigation/handle-link-activation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,QAUrE"}

package/dist/types/utils/keyboard-navigation/index.d.ts

@@ -0,0 +1,3 @@
+export * from './handle-arrow-navigation';
+export * from './handle-link-activation';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/utils/keyboard-navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/keyboard-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA"}

package/dist/types/utils/popover/__tests__/build-anchor-positioning-css.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=build-anchor-positioning-css.test.d.ts.map

package/dist/types/utils/popover/__tests__/build-anchor-positioning-css.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-anchor-positioning-css.test.d.ts","sourceRoot":"/","sources":["utils/popover/__tests__/build-anchor-positioning-css.test.ts"],"names":[],"mappings":""}

package/dist/types/utils/popover/__tests__/get-popover-trigger-props.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=get-popover-trigger-props.test.d.ts.map

package/dist/types/utils/popover/__tests__/get-popover-trigger-props.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-popover-trigger-props.test.d.ts","sourceRoot":"/","sources":["utils/popover/__tests__/get-popover-trigger-props.test.ts"],"names":[],"mappings":""}

package/dist/types/utils/popover/__tests__/map-placement-to-css.test.d.ts

@@ -0,0 +1,2 @@
+export declare const supportedPopoverPlacements: ["top-start", "top", "top-end", "right-start", "right", "right-end", "bottom-start", "bottom", "bottom-end", "left-start", "left", "left-end"];
+//# sourceMappingURL=map-placement-to-css.test.d.ts.map

package/dist/types/utils/popover/__tests__/map-placement-to-css.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-placement-to-css.test.d.ts","sourceRoot":"/","sources":["utils/popover/__tests__/map-placement-to-css.test.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,gJAaA,CAAA"}

package/dist/types/utils/popover/__tests__/popover.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=popover.test.d.ts.map

package/dist/types/utils/popover/__tests__/popover.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.test.d.ts","sourceRoot":"/","sources":["utils/popover/__tests__/popover.test.tsx"],"names":[],"mappings":""}

package/dist/types/utils/popover/build-anchor-positioning-css.d.ts

@@ -0,0 +1,16 @@
+import type { PopoverPlacement } from './map-placement-to-css';
+interface BuildAnchorPositioningCSSInput {
+    anchorElementId: string;
+    gap: string;
+    placement: PopoverPlacement;
+    positionedElementId: string;
+    positionTryFallbacks: string;
+}
+/**
+ * Returns a CSS string that contains styles for an anchor and its positioned element via the
+ * specified element IDs. The IDs are escaped using
+ * [CSS.escape](https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static).
+ */
+export declare function buildAnchorPositioningCSS({ anchorElementId, placement, positionedElementId, positionTryFallbacks, gap, }: BuildAnchorPositioningCSSInput): string;
+export {};
+//# sourceMappingURL=build-anchor-positioning-css.d.ts.map

package/dist/types/utils/popover/build-anchor-positioning-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-anchor-positioning-css.d.ts","sourceRoot":"/","sources":["utils/popover/build-anchor-positioning-css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D,UAAU,8BAA8B;IACtC,eAAe,EAAE,MAAM,CAAA;IACvB,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,gBAAgB,CAAA;IAC3B,mBAAmB,EAAE,MAAM,CAAA;IAC3B,oBAAoB,EAAE,MAAM,CAAA;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,eAAe,EACf,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACpB,GAAG,GACJ,EAAE,8BAA8B,GAAG,MAAM,CAkBzC"}

package/dist/types/utils/popover/get-popover-trigger-props.d.ts

@@ -0,0 +1,26 @@
+export interface GetPopoverTriggerPropsInput {
+    id: string;
+    popoverTarget: string;
+    popoverTargetAction: 'hide' | 'show' | 'toggle';
+}
+export interface GetPopoverTriggerPropsOutput {
+    id: string;
+    popovertarget: string;
+    popovertargetaction: 'hide' | 'show' | 'toggle';
+}
+/**
+ * React 18 does not support the HTML attributes involved in the
+ * [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API). This helper
+ * provides a way for consumers to use them without incurring TS prop type errors or React
+ * development runtime errors.
+ *
+ * The input properties match React 19's type definitions for the popover attributes. See
+ * [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69670/files#diff-d0d8d4879e505e2bd1813a8e662eeedbdf85c1fae8b76c4dff609bb5bcfe3a98R128)
+ *
+ * The output properties are all lowercase so that React 18 will pass them through to the
+ * underlying DOM element without throwing a runtime error about unrecognised attributes.
+ *
+ * @returns popover trigger attributes for use in React 18 consumers.
+ */
+export declare function getPopoverTriggerProps({ id, popoverTarget, popoverTargetAction, }: GetPopoverTriggerPropsInput): GetPopoverTriggerPropsOutput;
+//# sourceMappingURL=get-popover-trigger-props.d.ts.map

package/dist/types/utils/popover/get-popover-trigger-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-popover-trigger-props.d.ts","sourceRoot":"/","sources":["utils/popover/get-popover-trigger-props.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,EAAE,MAAM,CAAA;IACrB,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;CAChD;AAED,MAAM,WAAW,4BAA4B;IAC3C,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,EAAE,MAAM,CAAA;IACrB,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;CAChD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,EAAE,EACF,aAAa,EACb,mBAAmB,GACpB,EAAE,2BAA2B,GAAG,4BAA4B,CAM5D"}

package/dist/types/utils/popover/index.d.ts

@@ -0,0 +1,5 @@
+export * from './get-popover-trigger-props';
+export * from './popover';
+export * from './styles';
+export type { PopoverPlacement } from './map-placement-to-css';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/utils/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA;AAC3C,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AAExB,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/types/utils/popover/map-placement-to-css.d.ts

@@ -0,0 +1,9 @@
+export type PopoverPlacement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
+/**
+ * Returns a CSS string that defines the necessary CSS properties for a positioned element
+ * to be placed according to the specified `placement` value.
+ *
+ * @param placement the placement of the positioned element w.r.t. to its anchor
+ */
+export declare function mapPlacementToCSS(placement: PopoverPlacement, gap: string): string;
+//# sourceMappingURL=map-placement-to-css.d.ts.map

package/dist/types/utils/popover/map-placement-to-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-placement-to-css.d.ts","sourceRoot":"/","sources":["utils/popover/map-placement-to-css.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,KAAK,GACL,SAAS,GACT,aAAa,GACb,OAAO,GACP,WAAW,GACX,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,UAAU,CAAA;AAEd;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAmFlF"}

package/dist/types/utils/popover/popover.d.ts

@@ -0,0 +1,83 @@
+import { getPopoverTriggerProps } from './get-popover-trigger-props';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { PopoverPlacement } from './map-placement-to-css';
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+    /** The ID of the element this popover to which this popover should be anchored. */
+    anchorId: string;
+    /**
+     * The border radius of the popover. Can be any valid CSS length, though a border radius
+     * CSS variable is recommended. By default, the radius will be zero.
+     */
+    borderRadius?: string;
+    /** The content of the popover. */
+    children: ReactNode;
+    /** The visual elevation of the popover. Determines how much shadow the popover casts. */
+    elevation?: 'none' | 'xl';
+    /**
+     * The gap between the popover and the anchor. Can be any valid CSS length, though `--spacing-*`
+     * CSS variables are recommended. By default, the gap will be zero.
+     */
+    gap?: string;
+    /**
+     * The ID of this popover. This is mandatory because the popover's trigger will need to reference
+     * this in it's `popovertarget` attribute.
+     */
+    id: string;
+    /**
+     * The maximum height of the popover. Can be any valid CSS length, though `--size-*`
+     * CSS variables are recommended. By default, the popover will be as tall as its content requires.
+     */
+    maxHeight?: string;
+    /**
+     * The maximum width of the popover. Can be any valid CSS length, though `--size-*`
+     * CSS variables are recommended. By default, the popover will be as wide as its content requires.
+     */
+    maxWidth?: string;
+    /**
+     * The "kind" of popover this should be. See
+     * [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover)
+     * for more details.
+     *
+     * For browsers that do not support `hint`, they will fallback to `manual`.
+     *
+     * A special value of `null` allows the popover to not be a popover. This can be useful when you need
+     * to display a popover element permanently in the UI (such as in documentation or example code). Just
+     * note that the absence of the `popover` attribute means the element will not be displayed within the
+     * top-layer, so may be susceptible to z-index issues.
+     */
+    popover?: 'auto' | 'hint' | 'manual' | null;
+    /** Where the popover should be placed relative to its anchor. */
+    placement: PopoverPlacement;
+    /**
+     * Fallback positions for the popover that should be tried when it would otherwise overflow the viewport.
+     * See [position-try-fallbacks](https://developer.mozilla.org/en-US/docs/Web/CSS/position-try-fallbacks)
+     * for more details. Note that the [polyfill](https://anchor-positioning.oddbird.net/) we rely on for
+     * anchor positioning in some browsers will not play nicely with all available options.
+     *
+     * Typically, "flip-block", "flip-inline" or both will be sufficient for most use cases.
+     * Defaults to "none".
+     */
+    positionTryFallbacks?: string;
+}
+/**
+ * A simple popover that can be positioned relative to an anchor. It is designed to work with the
+ * global [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover)
+ * attribute. Positioning is facilitated using
+ * [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning),
+ * which currently requires a polyfill in some browsers.
+ *
+ * If custom styles need to be applied to the Popover element itself, it's important to ensure a
+ * custom `display` property is only set when the popover is open (via the `:popover-open`
+ * pseudo-class), otherwise the custom `display` property will override the browser's default handling
+ * of the popover's display.
+ *
+ * **note:** When working with Popover directly (uncommon) within a React 18 consumer, the
+ * `getPopoverTriggerProps` helper will be useful to avoid type errors or development runtime errors
+ * about the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) attributes used
+ * to show/hide/toggle popovers.
+ */
+export declare function Popover({ anchorId, borderRadius, children, className, elevation, gap, id, maxHeight, maxWidth, placement, positionTryFallbacks, popover, style, ...rest }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Popover {
+    var getTriggerProps: typeof getPopoverTriggerProps;
+}
+//# sourceMappingURL=popover.d.ts.map

package/dist/types/utils/popover/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"/","sources":["utils/popover/popover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAGpE,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,mFAAmF;IACnF,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAA;IACnB,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAA;IAC3C,iEAAiE;IACjE,SAAS,EAAE,gBAAgB,CAAA;IAC3B;;;;;;;;OAQG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;CAC9B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,SAAkB,EAClB,GAAS,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,SAAS,EACT,oBAA6B,EAC7B,OAAgB,EAChB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,YAAY,2CAgDd;yBA/De,OAAO"}

package/dist/types/utils/popover/popover.stories.d.ts

@@ -0,0 +1,65 @@
+import { Popover } from './popover';
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: typeof Popover;
+    argTypes: {
+        children: {
+            control: false;
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+    render: (args: import("./popover").PopoverProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Popovers come with no styling: no background, no padding, no border. They are intended to be a blank
+ * canvas on which to build a more visually attractive UI element, such as a tooltip or a menu.
+ *
+ * In the examples here, we're using a simple styled element as the content of the popover in order to
+ * help communicate the behaviour and capabilities of the popover.
+ */
+export declare const Example: Story;
+/**
+ * The distance, or gap, between the popover and its anchor can be customised. By default, there will be
+ * no gap, but many use cases will call for a non-zero gap. While the `gap` prop accepts any valid CSS
+ * length, it should typically be a `--spacing-*` CSS variable.
+ */
+export declare const Gap: Story;
+/**
+ * There are a number of placements available for popovers relative to their anchor. They are shown below.
+ */
+export declare const Placements: Story;
+/**
+ * The border radius of the popover element can be adjusted with the `borderRadius` prop. While
+ * this prop accepts any valid CSS length, it should typically be a border-radius-related CSS
+ * variable such as `--border-radius-xl` or `--comp-menu-border-radius`.
+ */
+export declare const BorderRadius: Story;
+/**
+ * By default, popovers will grow to the width of their content. To constrain this behaviour, a maximum
+ * width can be specified. Content should generally adapt to the constrained width by wrapping rather
+ * than overflowing.
+ *
+ * While the maximum width can be defined using any valid CSS length, the value should typically be a
+ * `--size-*` CSS variable.
+ */
+export declare const MaxWidth: Story;
+/**
+ * Similarly, popovers will grow, by default, to the height of their content. To constrain this behaviour,
+ * a maximum height can also be specified, at which point the popover will scroll the content.
+ *
+ * As with the maximum width, the maximum height can be defined using any valid CSS length, but the value
+ * should typically be a `--size-*` CSS variable.
+ */
+export declare const MaxHeight: Story;
+/**
+ * Since popovers are an elevated, non-modal material, it's common for them to cast a shadow on the
+ * UI beneath them. This can be achieved using the `elevation` prop. There's currently two supported
+ * elevations: `none` and `xl`.
+ */
+export declare const Elevation: Story;
+//# sourceMappingURL=popover.stories.d.ts.map

package/dist/types/utils/popover/popover.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.stories.d.ts","sourceRoot":"/","sources":["utils/popover/popover.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAInC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAiCsB,CAAA;AAEhC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,EAAE,KAKjB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAyDxB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA"}

package/dist/types/utils/popover/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const elPopover: import("@linaria/core").LinariaClassName;
+//# sourceMappingURL=styles.d.ts.map

package/dist/types/utils/popover/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"/","sources":["utils/popover/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,0CAyBrB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "5.0.0-beta.39",
+  "version": "5.0.0-beta.40",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/elements#readme",
   "bugs": {
@@ -24,7 +24,14 @@
         "./src/*/index.js"
       ],
       "import": "./src/*"
-    }
+    },
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx",
+      "./*.js",
+      "./*.jsx"
+    ]
   },
   "exports": {
     ".": {
@@ -91,7 +98,8 @@
   },
   "dependencies": {
     "@linaria/core": "^6.3.0",
-    "@linaria/react": "^6.3.0"
+    "@linaria/react": "^6.3.0",
+    "@oddbird/css-anchor-positioning": "^0.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
@@ -100,14 +108,14 @@
     "@linaria/postcss-linaria": "^6.3.0",
     "@mdx-js/react": "^3.0.1",
     "@playwright/test": "^1.43.0",
-    "@storybook/addon-a11y": "^9.0.15",
-    "@storybook/addon-designs": "^10.0.1",
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/addon-links": "^9.0.15",
-    "@storybook/cli": "^9.0.15",
+    "@storybook/addon-a11y": "^9.1.0",
+    "@storybook/addon-designs": "^10.0.2",
+    "@storybook/addon-docs": "^9.1.0",
+    "@storybook/addon-links": "^9.1.0",
+    "@storybook/cli": "^9.1.0",
     "@storybook/icons": "^1.4.0",
-    "@storybook/react-dom-shim": "^9.0.15",
-    "@storybook/react-vite": "^9.0.15",
+    "@storybook/react-dom-shim": "^9.1.0",
+    "@storybook/react-vite": "^9.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -119,7 +127,7 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@wyw-in-js/babel-preset": "^0.7.0",
     "@wyw-in-js/vite": "^0.7.0",
@@ -136,7 +144,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^9.0.15",
+    "eslint-plugin-storybook": "^9.1.0",
     "happy-dom": "^18.0.1",
     "move-file-cli": "^3.0.0",
     "postcss": "^8.5.6",
@@ -149,12 +157,12 @@
     "rollup": "^4.14.1",
     "rollup-plugin-css-only": "^4.5.2",
     "snyk": "^1.1288.0",
-    "storybook": "^9.0.15",
+    "storybook": "^9.1.0",
     "style-dictionary": "^4.3.3",
     "stylelint": "^16.21.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.1",
+    "typescript": "^5.9.2",
+    "vite": "^7.0.6",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.2.4"
   },