musae 0.2.2 → 0.2.4

package/README.md

@@ -13,7 +13,7 @@
 
 ```bash
 npm install musae
-## yarn add musae
+## pnpm i musae
 ```
 
 ## 🔨 Usage

package/dist/components/avatar/avatar.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/avatar/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ContextValue } from "./types";
 /**
  * @description

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/breadcrumb/item.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';

package/dist/components/button/button.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { ComponentToken, ButtonClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { useButton } from './hooks.js';
 import Ripple from '../ripple/ripple.js';

package/dist/components/button-toggle/context.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Context: import("react").Context<{}>;

package/dist/components/calendar/calendar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import Button from '../button/button.js';

package/dist/components/calendar/hooks.js

@@ -5,7 +5,7 @@ import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
 import { toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/cascader/hooks.d.ts

@@ -6,14 +6,7 @@ import type { Option } from "../../types/option";
  * @description
  * cascader value
  */
-export declare const useValue: ([valueInProps, readableOptions, readablePaths, mode, close, setAdditionalMenusItems]: [
-    CascaderProps["value"],
-    ReadableOptions,
-    ReadablePaths,
-    CascaderProps["mode"],
-    close: VoidFunction,
-    Dispatch<SetStateAction<MenuItem[][]>>
-]) => {
+export declare const useValue: ([valueInProps, readableOptions, readablePaths, mode, close, setAdditionalMenusItems]: [CascaderProps["value"], ReadableOptions, ReadablePaths, CascaderProps["mode"], close: VoidFunction, Dispatch<SetStateAction<MenuItem[][]>>]) => {
     values: Map<number, Required<Pick<Option, "value" | "label">>[]>;
     onChange: (id: number) => void;
 };

package/dist/components/cascader/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { KeyOrOption, Optionable, ReadBy, ReadableOption, ReadableOptions, ReadablePaths, Value, ValueOrValues } from "./types";
 import type { MenuItem } from "../menu";
 /**

package/dist/components/checkbox/checkbox.js

@@ -4,7 +4,7 @@ import Context from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CheckboxClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
@@ -24,6 +24,7 @@ const styles = {
     cursor: "musae-mper1u",
     width: "musae-r8isjd",
     height: "musae-1gfonl1",
+    position: "musae-1n2onr6",
     "::before_content": "musae-1cpjm7i",
     "::before_visibility": "musae-11srvyv",
     "::before_display": "musae-1fgarty",
@@ -94,7 +95,7 @@ const styles = {
     "::after_display": "musae-hkezso",
     "::after_width": "musae-11yodxc",
     "::after_height": "musae-ec44on",
-    "::after_transform": "musae-1db1611",
+    "::after_transform": "musae-q1m6zb",
     "::after_borderWidth": "musae-15z8w9c",
     "::after_borderInlineWidth": null,
     "::after_borderInlineStartWidth": null,
@@ -163,7 +164,7 @@ const Checkbox = ({
   }, [_setIsChecked, contextValue, value]);
   const styled = {
     checkbox: {
-      className: "musae-78zum5 musae-6s0dn4 musae-1ypdohk"
+      className: "musae-3nfvp2 musae-6s0dn4 musae-1ypdohk"
     },
     trigger: props(styles.trigger({
       borderColor: theme.colors[ColorToken.Outline]

package/dist/components/checkbox/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

package/dist/components/checkbox/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Checkbox: (({ value, className, style, children, ...props }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
     Group: (props: import("./types").CheckboxGroupProps) => import("react").JSX.Element;
 };

package/dist/components/clock/column.js

@@ -4,7 +4,7 @@ import Menu from '../menu/menu.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
 import { isVoid } from '@aiszlab/relax';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/collapse/collapse.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CollapseProps } from "./types";
+declare const Collapse: ({ items, className, defaultActiveKey, activeKey, onChange, style, accordion, }: CollapseProps) => React.JSX.Element | null;
+export default Collapse;

package/dist/components/collapse/collapse.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, CollapseClassToken } from '../../utils/class-name.js';
+import CollapseItem from './item.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import clsx from 'clsx';
+import { useActiveKeys } from './hooks.js';
+import { Context } from './context.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+
+const styles = {
+  collapse: props => [{
+    borderWidth: "musae-1i8jmgv",
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: null,
+    borderStyle: "musae-1y0btm7",
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderBlockStyle: null,
+    borderTopStyle: null,
+    borderBottomStyle: null,
+    borderColor: "musae-eqt46j",
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    borderRadius: "musae-1h268bu",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  }, {
+    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+  }]
+};
+const Collapse = ({
+  items,
+  className,
+  defaultActiveKey,
+  activeKey,
+  onChange,
+  style,
+  accordion = false
+}) => {
+  const classNames = useClassNames(ComponentToken.Collapse);
+  const [activeKeys, toggle] = useActiveKeys({
+    defaultActiveKey,
+    activeKey,
+    onChange,
+    accordion
+  });
+  const theme = useTheme();
+  // no need to render when items is empty
+  if (items.length === 0) return null;
+  const styled = _stylex.props(styles.collapse({
+    outlineColor: theme.colors[ColorToken.OutlineVariant]
+  }));
+  return React.createElement(Context.Provider, {
+    value: {
+      activeKeys,
+      toggle
+    }
+  }, React.createElement("div", {
+    className: clsx(classNames[CollapseClassToken.Collapse], className, styled.className),
+    style: {
+      ...styled.style,
+      ...style
+    }
+  }, items.map(item => {
+    return React.createElement(CollapseItem, {
+      ...item,
+      value: item.key
+    });
+  })));
+};
+var Collapse$1 = Collapse;
+
+export { Collapse$1 as default };

package/dist/components/collapse/context.d.ts

@@ -0,0 +1,6 @@
+import type { ContextValue } from "./types";
+/**
+ * @description
+ * `Collapse` Context
+ */
+export declare const Context: import("react").Context<ContextValue>;

package/dist/components/collapse/context.js

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+/**
+ * @description
+ * `Collapse` Context
+ */
+const Context = createContext({
+    activeKeys: new Set(),
+    toggle: () => { },
+});
+
+export { Context };

package/dist/components/collapse/hooks.d.ts

@@ -0,0 +1,12 @@
+import { type Key } from "react";
+import type { Value } from "./types";
+/**
+ * @description
+ * `Collapse` active key hook
+ */
+export declare const useActiveKeys: ({ defaultActiveKey, activeKey: _activeKey, onChange: _onChange, accordion, }: {
+    defaultActiveKey?: Value;
+    activeKey?: Value;
+    onChange?: (value: Key[]) => void;
+    accordion: boolean;
+}) => [Set<Key>, (key: Key) => void];

package/dist/components/collapse/hooks.js

@@ -0,0 +1,43 @@
+import { useControlledState, exclude, toArray, useEvent } from '@aiszlab/relax';
+import { useMemo } from 'react';
+
+/**
+ * @description
+ * `Collapse` active key hook
+ */
+const useActiveKeys = ({ defaultActiveKey, activeKey: _activeKey, onChange: _onChange, accordion, }) => {
+    const [_activeKeys, _setActiveKeys] = useControlledState(_activeKey, { defaultState: defaultActiveKey });
+    const activeKeys = useMemo(() => {
+        const keys = exclude(toArray(_activeKeys), [void 0]);
+        if (accordion) {
+            return new Set(keys.slice(0, 1));
+        }
+        return new Set(keys);
+    }, [_activeKeys, accordion]);
+    const toggle = useEvent((key) => {
+        const expandedKeys = new Set(activeKeys);
+        const isExpanded = expandedKeys.has(key);
+        // `accordion` mode, just toggle `key`
+        // otherwise, normally toggle `key`
+        if (accordion) {
+            expandedKeys.clear();
+            if (!isExpanded) {
+                expandedKeys.add(key);
+            }
+        }
+        else {
+            if (isExpanded) {
+                expandedKeys.delete(key);
+            }
+            else {
+                expandedKeys.add(key);
+            }
+        }
+        const _expandedKeys = Array.from(expandedKeys);
+        _setActiveKeys(_expandedKeys);
+        _onChange?.(_expandedKeys);
+    });
+    return [activeKeys, toggle];
+};
+
+export { useActiveKeys };

package/dist/components/collapse/index.d.ts

@@ -0,0 +1,2 @@
+import Collapse from "./collapse";
+export { Collapse };

package/dist/components/collapse/item.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CollapseItemProps } from "./types";
+declare const CollapseItem: ({ children, label, value }: CollapseItemProps) => React.JSX.Element;
+export default CollapseItem;

package/dist/components/collapse/item.js

@@ -0,0 +1,144 @@
+import React, { useContext } from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, CollapseClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useEvent } from '@aiszlab/relax';
+import { useAnimate } from 'framer-motion';
+import clsx from 'clsx';
+import { Context } from './context.js';
+import { useExpandEffect } from '../../hooks/use-expand-effect.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
+
+const styles = {
+  item: {
+    default: props => [{
+      borderBottomWidth: "musae-lntmim",
+      borderBottomStyle: "musae-1q0q8m5",
+      borderBottomColor: "musae-43481e",
+      ":last-of-type_borderBottomWidth": "musae-zm6erk",
+      $$css: true
+    }, {
+      "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }]
+  },
+  header: {
+    default: {
+      paddingInline: "musae-1xkwav8",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: "musae-avjae4",
+      paddingTop: null,
+      paddingBottom: null,
+      display: "musae-78zum5",
+      flexDirection: "musae-1q0g3np",
+      alignItems: "musae-6s0dn4",
+      gap: "musae-vbka3v",
+      rowGap: null,
+      columnGap: null,
+      cursor: "musae-1ypdohk",
+      $$css: true
+    }
+  },
+  panel: {
+    default: {
+      height: "musae-t7dq6l",
+      $$css: true
+    },
+    hidden: {
+      display: "musae-1s85apg",
+      $$css: true
+    }
+  },
+  content: {
+    default: props => [{
+      borderTopWidth: "musae-1yeim8r",
+      borderTopStyle: "musae-13fuv20",
+      borderTopColor: "musae-is9nib",
+      padding: "musae-12ldsqu",
+      paddingInline: null,
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: null,
+      paddingTop: null,
+      paddingBottom: null,
+      $$css: true
+    }, {
+      "--borderTopColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }]
+  },
+  collapser: {
+    default: {
+      willChange: "musae-1so62im",
+      transitionProperty: "musae-11xpdln",
+      transitionDuration: "musae-13dflua",
+      $$css: true
+    },
+    expanded: {
+      transform: "musae-1iffjtl",
+      $$css: true
+    }
+  }
+};
+const CollapseItem = ({
+  children,
+  label,
+  value
+}) => {
+  const classNames = useClassNames(ComponentToken.Collapse);
+  const {
+    activeKeys,
+    toggle
+  } = useContext(Context);
+  const isExpanded = activeKeys.has(value);
+  const [collapser, animate] = useAnimate();
+  const theme = useTheme();
+  useExpandEffect({
+    animate,
+    expanded: isExpanded,
+    target: collapser
+  });
+  const styled = {
+    item: _stylex.props(styles.item.default({
+      outlineColor: theme.colors[ColorToken.OutlineVariant]
+    })),
+    header: _stylex.props(styles.header.default),
+    panel: _stylex.props(styles.panel.default, !isExpanded && styles.panel.hidden),
+    content: _stylex.props(styles.content.default({
+      outlineColor: theme.colors[ColorToken.OutlineVariant]
+    })),
+    collapser: _stylex.props(styles.collapser.default, isExpanded && styles.collapser.expanded)
+  };
+  const onClick = useEvent(() => {
+    toggle(value);
+  });
+  return React.createElement("div", {
+    className: clsx(classNames[CollapseClassToken.Item], {
+      [classNames[CollapseClassToken.ItemActive]]: isExpanded
+    }, styled.item.className),
+    style: styled.item.style
+  }, React.createElement("div", {
+    className: clsx(classNames[CollapseClassToken.Header], styled.header.className),
+    style: styled.header.style,
+    onClick: onClick
+  }, React.createElement(KeyboardArrowRight, {
+    className: clsx(classNames[CollapseClassToken.Collapser], styled.collapser.className),
+    style: styled.collapser.style
+  }), label), React.createElement("div", {
+    ref: collapser,
+    className: clsx(classNames[CollapseClassToken.Panel], {
+      [classNames[CollapseClassToken.PanelActive]]: isExpanded
+    }, styled.panel.className),
+    style: styled.panel.style
+  }, React.createElement("div", {
+    className: clsx(classNames[CollapseClassToken.Content], styled.content.className),
+    style: styled.content.style
+  }, children)));
+};
+
+export { CollapseItem as default };

package/dist/components/collapse/types.d.ts

@@ -0,0 +1,87 @@
+import type { Key, ReactNode } from "react";
+import type { ComponentProps } from "../../types/element";
+export type Value = Key | Key[];
+/**
+ * @description
+ * `Collapse` item
+ */
+interface CollapseItem {
+    /**
+     * @description
+     * key
+     */
+    key: Key;
+    /**
+     * @description
+     * label
+     */
+    label: string;
+    /**
+     * @description
+     * children
+     */
+    children: ReactNode;
+}
+/**
+ * @description
+ * `Collapse` props
+ */
+export interface CollapseProps extends ComponentProps {
+    /**
+     * @description
+     * default active key
+     * @default void 0
+     */
+    defaultActiveKey?: Value;
+    /**
+     * @description
+     * active key
+     * @default void 0
+     */
+    activeKey?: Value;
+    /**
+     * @description
+     * items
+     */
+    items: CollapseItem[];
+    /**
+     * @description
+     * change handler
+     * @default void 0
+     */
+    onChange?: (value: Key[]) => void;
+    /**
+     * @description
+     * accordion mode
+     * @default false
+     */
+    accordion?: boolean;
+}
+/**
+ * @description
+ * `Collapse` item props
+ */
+export interface CollapseItemProps extends Omit<CollapseItem, "key"> {
+    /**
+     * @description
+     * value
+     */
+    value: Key;
+}
+/**
+ * @description
+ * context value
+ */
+export interface ContextValue {
+    /**
+     * @description
+     * active keys
+     */
+    activeKeys: Set<Key>;
+    /**
+     * @description
+     * key toggle
+     */
+    toggle: (key: Key) => void;
+}
+export {};

package/dist/components/config/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue>;
 export default Context;

package/dist/components/date-picker/date-picker.js

@@ -4,7 +4,7 @@ import Calendar from '../calendar/calendar.js';
 import { useValue } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, DatePickerClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { styles } from '../input/input.js';
 

package/dist/components/date-picker/hooks.d.ts

@@ -5,11 +5,7 @@ import { PickerRef } from "../picker";
  * @description
  * value
  */
-export declare const useValue: ([_value, _change, _ref]: [
-    DatePickerProps["value"],
-    DatePickerProps["onChange"],
-    RefObject<PickerRef>
-]) => {
+export declare const useValue: ([_value, _change, _ref]: [DatePickerProps["value"], DatePickerProps["onChange"], RefObject<PickerRef>]) => {
     value: import("dayjs").Dayjs | undefined;
     onChange: (value: import("dayjs").Dayjs) => void;
 };

package/dist/components/date-range-picker/hooks.d.ts

@@ -7,11 +7,7 @@ import { PickerRef } from "../picker";
  * @description
  * value
  */
-export declare const useValue: ([_value, _change, ref]: [
-    DateRangePickerProps["value"],
-    DateRangePickerProps["onChange"],
-    RefObject<PickerRef>
-]) => {
+export declare const useValue: ([_value, _change, ref]: [DateRangePickerProps["value"], DateRangePickerProps["onChange"], RefObject<PickerRef>]) => {
     value: [Partialable<Dayjs>, Partialable<Dayjs>];
     onChange: (_value: Dayjs) => void;
 };

package/dist/components/dialog/hooks.d.ts

@@ -4,8 +4,4 @@ import type { PopupProps } from "./types";
  * @description
  * footer
  */
-export declare const useFooter: ([footer, onConfirm, onClose]: [
-    footer: PopupProps["footer"],
-    onConfirm: PopupProps["onConfirm"],
-    onClose: PopupProps["onClose"]
-]) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const useFooter: ([footer, onConfirm, onClose]: [footer: PopupProps["footer"], onConfirm: PopupProps["onConfirm"], onClose: PopupProps["onClose"]]) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;

package/dist/components/dialog/popup.js

@@ -3,13 +3,13 @@ import { useFooter } from './hooks.js';
 import { useAnimate } from 'framer-motion';
 import { ComponentToken, DialogClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import { useDismissable } from '../../hooks/use-dismissable.js';
-import { contains } from '../../node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.55_react-dom@18.3.1_react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
   header: {