@seed-design/react 1.2.15 → 2.0.1

package/lib/components/SideNavigation/SideNavigation.cjs

@@ -0,0 +1,175 @@
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_createSlotRecipeContext = require("../../utils/createSlotRecipeContext.cjs");
+const require_createWithStateProps = require("../../utils/createWithStateProps.cjs");
+const require_createRecipeContext = require("../../utils/createRecipeContext.cjs");
+const require_Icon = require("../private/Icon.cjs");
+let _seed_design_react_side_navigation = require("@seed-design/react-side-navigation");
+let _seed_design_react_primitive = require("@seed-design/react-primitive");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _seed_design_dom_utils = require("@seed-design/dom-utils");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _seed_design_css_breakpoints = require("@seed-design/css/breakpoints");
+let _seed_design_css_recipes_side_navigation = require("@seed-design/css/recipes/side-navigation");
+let _seed_design_css_recipes_side_navigation_inset = require("@seed-design/css/recipes/side-navigation-inset");
+let _seed_design_css_recipes_side_navigation_menu_item = require("@seed-design/css/recipes/side-navigation-menu-item");
+//#region src/components/SideNavigation/SideNavigation.tsx
+var { withProvider, withContext, useClassNames } = require_createSlotRecipeContext.createSlotRecipeContext(_seed_design_css_recipes_side_navigation.sideNavigation);
+var { ClassNamesProvider: ItemClassNamesProvider, withContext: withItemContext } = require_createSlotRecipeContext.createSlotRecipeContext(_seed_design_css_recipes_side_navigation_menu_item.sideNavigationMenuItem);
+var { withContext: withInsetContext } = require_createRecipeContext.createRecipeContext(_seed_design_css_recipes_side_navigation_inset.sideNavigationInset);
+var withSideNavigationStateProps = require_createWithStateProps.createWithStateProps([_seed_design_react_side_navigation.useSideNavigationContext]);
+var withItemStateProps = require_createWithStateProps.createWithStateProps([_seed_design_react_side_navigation.useSideNavigationContext, {
+	useContext: _seed_design_react_side_navigation.useSideNavigationItemContext,
+	strict: false
+}]);
+var withItemSlotCollapsibleStateProps = require_createWithStateProps.createWithStateProps([
+	_seed_design_react_side_navigation.useSideNavigationContext,
+	{
+		useContext: _seed_design_react_side_navigation.useSideNavigationItemContext,
+		strict: false
+	},
+	{
+		useContext: _seed_design_react_side_navigation.useCollapsibleContext,
+		strict: false
+	}
+]);
+function ResponsiveCollapseEffect() {
+	const { setCollapsed } = (0, _seed_design_react_side_navigation.useSideNavigationContext)();
+	react.default.useEffect(() => {
+		const mql = window.matchMedia(_seed_design_css_breakpoints.mediaQueries.lg);
+		const handler = (e) => {
+			setCollapsed(!e.matches);
+		};
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, [setCollapsed]);
+	return null;
+}
+function SideNavigationProvider(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_side_navigation.SideNavigation.Provider, {
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveCollapseEffect, {}), props.children]
+	});
+}
+SideNavigationProvider.displayName = "SideNavigationProvider";
+var SideNavigationRoot = withProvider(_seed_design_react_side_navigation.SideNavigation.Root, "root");
+SideNavigationRoot.displayName = "SideNavigationRoot";
+var SideNavigationHeader = withContext(withSideNavigationStateProps(_seed_design_react_primitive.Primitive.div), "header");
+SideNavigationHeader.displayName = "SideNavigationHeader";
+var SideNavigationContent = react.default.forwardRef(({ className, ...props }, forwardedRef) => {
+	const classNames = useClassNames();
+	const { stateProps } = (0, _seed_design_react_side_navigation.useSideNavigationContext)();
+	const ref = react.default.useRef(null);
+	const [scrolled, setScrolled] = react.default.useState(false);
+	react.default.useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const check = () => setScrolled(element.scrollTop > 0);
+		check();
+		element.addEventListener("scroll", check);
+		const observer = new ResizeObserver(check);
+		observer.observe(element);
+		return () => {
+			element.removeEventListener("scroll", check);
+			observer.disconnect();
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
+		ref: (0, _radix_ui_react_compose_refs.composeRefs)(ref, forwardedRef),
+		className: (0, clsx.default)(classNames.content, className),
+		"data-scrolled": (0, _seed_design_dom_utils.dataAttr)(scrolled),
+		...stateProps,
+		...props
+	});
+});
+SideNavigationContent.displayName = "SideNavigationContent";
+var SideNavigationFooter = withContext(withSideNavigationStateProps(_seed_design_react_primitive.Primitive.div), "footer");
+SideNavigationFooter.displayName = "SideNavigationFooter";
+var SideNavigationGroup = withContext(withSideNavigationStateProps(_seed_design_react_primitive.Primitive.div), "group");
+SideNavigationGroup.displayName = "SideNavigationGroup";
+var SideNavigationGroupLabel = withContext(withSideNavigationStateProps(_seed_design_react_primitive.Primitive.div), "groupLabel");
+SideNavigationGroupLabel.displayName = "SideNavigationGroupLabel";
+var SideNavigationItem = react.default.forwardRef(({ current, disabled, className, ...props }, ref) => {
+	const [variantProps, restProps] = _seed_design_css_recipes_side_navigation_menu_item.sideNavigationMenuItem.splitVariantProps(props);
+	const classNames = (0, _seed_design_css_recipes_side_navigation_menu_item.sideNavigationMenuItem)(variantProps);
+	const { stateProps: sideNavStateProps } = (0, _seed_design_react_side_navigation.useSideNavigationContext)();
+	const api = (0, _seed_design_react_side_navigation.useSideNavigationItem)({
+		current,
+		disabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_side_navigation.SideNavigationItemProvider, {
+		value: api,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemClassNamesProvider, {
+			value: classNames,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.button, {
+				className: (0, clsx.default)(classNames.root, className),
+				ref,
+				...restProps,
+				...sideNavStateProps,
+				...api.rootProps
+			})
+		})
+	});
+});
+SideNavigationItem.displayName = "SideNavigationItem";
+var SideNavigationItemLabel = withItemContext(withItemStateProps(_seed_design_react_primitive.Primitive.span), "label");
+SideNavigationItemLabel.displayName = "SideNavigationItemLabel";
+var SideNavigationItemPrefixIcon = withItemContext(withItemStateProps(require_Icon.InternalIcon), "prefixIcon");
+var SideNavigationItemSuffixIcon = withItemContext(withItemSlotCollapsibleStateProps(require_Icon.InternalIcon), "suffixIcon");
+var SideNavigationItemCollapsibleRoot = react.default.forwardRef(({ children, ...props }, ref) => {
+	const [variantProps, restProps] = _seed_design_css_recipes_side_navigation_menu_item.sideNavigationMenuItem.splitVariantProps(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemClassNamesProvider, {
+		value: (0, _seed_design_css_recipes_side_navigation_menu_item.sideNavigationMenuItem)(variantProps),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_side_navigation.SideNavigation.ItemCollapsibleRoot, {
+			ref,
+			...restProps,
+			children
+		})
+	});
+});
+SideNavigationItemCollapsibleRoot.displayName = "SideNavigationItemCollapsibleRoot";
+var SideNavigationItemCollapsibleTrigger = react.default.forwardRef(({ current, disabled, className, ...props }, ref) => {
+	const classNames = (0, _seed_design_css_recipes_side_navigation_menu_item.sideNavigationMenuItem)();
+	const { stateProps: sideNavStateProps } = (0, _seed_design_react_side_navigation.useSideNavigationContext)();
+	const api = (0, _seed_design_react_side_navigation.useSideNavigationItem)({
+		current,
+		disabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_side_navigation.SideNavigationItemProvider, {
+		value: api,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_side_navigation.SideNavigation.ItemCollapsibleTrigger, {
+			ref,
+			className: (0, clsx.default)(classNames.root, className),
+			...sideNavStateProps,
+			...api.stateProps,
+			...props
+		})
+	});
+});
+SideNavigationItemCollapsibleTrigger.displayName = "SideNavigationItemCollapsibleTrigger";
+var SideNavigationItemCollapsibleContent = withItemContext(_seed_design_react_side_navigation.SideNavigation.ItemCollapsibleContent, "panel");
+SideNavigationItemCollapsibleContent.displayName = "SideNavigationItemCollapsibleContent";
+var SideNavigationTrigger = withContext(_seed_design_react_side_navigation.SideNavigation.Trigger, "trigger");
+SideNavigationTrigger.displayName = "SideNavigationTrigger";
+var SideNavigationInset = withInsetContext(_seed_design_react_primitive.Primitive.div);
+//#endregion
+exports.SideNavigationContent = SideNavigationContent;
+exports.SideNavigationFooter = SideNavigationFooter;
+exports.SideNavigationGroup = SideNavigationGroup;
+exports.SideNavigationGroupLabel = SideNavigationGroupLabel;
+exports.SideNavigationHeader = SideNavigationHeader;
+exports.SideNavigationInset = SideNavigationInset;
+exports.SideNavigationItem = SideNavigationItem;
+exports.SideNavigationItemCollapsibleContent = SideNavigationItemCollapsibleContent;
+exports.SideNavigationItemCollapsibleRoot = SideNavigationItemCollapsibleRoot;
+exports.SideNavigationItemCollapsibleTrigger = SideNavigationItemCollapsibleTrigger;
+exports.SideNavigationItemLabel = SideNavigationItemLabel;
+exports.SideNavigationItemPrefixIcon = SideNavigationItemPrefixIcon;
+exports.SideNavigationItemSuffixIcon = SideNavigationItemSuffixIcon;
+exports.SideNavigationProvider = SideNavigationProvider;
+exports.SideNavigationRoot = SideNavigationRoot;
+exports.SideNavigationTrigger = SideNavigationTrigger;

package/lib/components/SideNavigation/SideNavigation.d.ts

@@ -0,0 +1,59 @@
+import { SideNavigation as SideNavigationPrimitive, UseSideNavigationItemProps, SideNavigationProviderProps as SideNavigationProviderPrimitiveProps } from '@seed-design/react-side-navigation';
+import { SideNavigationVariantProps } from '@seed-design/css/recipes/side-navigation';
+import { SideNavigationInsetVariantProps } from '@seed-design/css/recipes/side-navigation-inset';
+import { SideNavigationMenuItemVariantProps } from '@seed-design/css/recipes/side-navigation-menu-item';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { InternalIconProps } from '../private/Icon';
+import { default as React } from 'react';
+export interface SideNavigationProviderProps extends SideNavigationProviderPrimitiveProps {
+}
+export declare function SideNavigationProvider(props: SideNavigationProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNavigationProvider {
+    var displayName: string;
+}
+export interface SideNavigationRootProps extends SideNavigationVariantProps, SideNavigationPrimitive.RootProps {
+}
+export declare const SideNavigationRoot: React.ForwardRefExoticComponent<SideNavigationRootProps & React.RefAttributes<HTMLElement>>;
+export interface SideNavigationHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const SideNavigationHeader: React.ForwardRefExoticComponent<SideNavigationHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface SideNavigationContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const SideNavigationContent: React.ForwardRefExoticComponent<SideNavigationContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface SideNavigationFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const SideNavigationFooter: React.ForwardRefExoticComponent<SideNavigationFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface SideNavigationGroupProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const SideNavigationGroup: React.ForwardRefExoticComponent<SideNavigationGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface SideNavigationGroupLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const SideNavigationGroupLabel: React.ForwardRefExoticComponent<SideNavigationGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+export interface SideNavigationItemProps extends SideNavigationMenuItemVariantProps, UseSideNavigationItemProps, PrimitiveProps, React.HTMLAttributes<HTMLButtonElement> {
+}
+export declare const SideNavigationItem: React.ForwardRefExoticComponent<SideNavigationItemProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SideNavigationItemLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const SideNavigationItemLabel: React.ForwardRefExoticComponent<SideNavigationItemLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export interface SideNavigationItemPrefixIconProps extends InternalIconProps {
+}
+export declare const SideNavigationItemPrefixIcon: React.ForwardRefExoticComponent<SideNavigationItemPrefixIconProps & React.RefAttributes<SVGSVGElement>>;
+export interface SideNavigationItemSuffixIconProps extends InternalIconProps {
+}
+export declare const SideNavigationItemSuffixIcon: React.ForwardRefExoticComponent<SideNavigationItemSuffixIconProps & React.RefAttributes<SVGSVGElement>>;
+export interface SideNavigationItemCollapsibleRootProps extends SideNavigationMenuItemVariantProps, SideNavigationPrimitive.ItemCollapsibleRootProps {
+}
+export declare const SideNavigationItemCollapsibleRoot: React.ForwardRefExoticComponent<SideNavigationItemCollapsibleRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface SideNavigationItemCollapsibleTriggerProps extends UseSideNavigationItemProps, SideNavigationPrimitive.ItemCollapsibleTriggerProps {
+}
+export declare const SideNavigationItemCollapsibleTrigger: React.ForwardRefExoticComponent<SideNavigationItemCollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SideNavigationItemCollapsibleContentProps extends SideNavigationPrimitive.ItemCollapsibleContentProps {
+}
+export declare const SideNavigationItemCollapsibleContent: React.ForwardRefExoticComponent<SideNavigationItemCollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface SideNavigationTriggerProps extends SideNavigationPrimitive.TriggerProps {
+}
+export declare const SideNavigationTrigger: React.ForwardRefExoticComponent<SideNavigationTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SideNavigationInsetProps extends SideNavigationInsetVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const SideNavigationInset: React.ForwardRefExoticComponent<SideNavigationInsetProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SideNavigation.d.ts.map

package/lib/components/SideNavigation/SideNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/SideNavigation/SideNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,IAAI,uBAAuB,EAMzC,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,IAAI,oCAAoC,EACzE,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAEL,KAAK,kCAAkC,EACxC,MAAM,oDAAoD,CAAC;AAC5D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAuC1B,MAAM,WAAW,2BAA4B,SAAQ,oCAAoC;CAAG;AAE5F,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAOxE;yBAPe,sBAAsB;;;AAatC,MAAM,WAAW,uBACf,SAAQ,0BAA0B,EAChC,uBAAuB,CAAC,SAAS;CAAG;AAExC,eAAO,MAAM,kBAAkB,6FAG9B,CAAC;AAMF,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,oBAAoB,kGAGhC,CAAC;AAMF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,mGAmCjC,CAAC;AAMF,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,oBAAoB,kGAGhC,CAAC;AAMF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAMF,MAAM,WAAW,6BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,wBAAwB,sGAGpC,CAAC;AAMF,MAAM,WAAW,uBACf,SAAQ,kCAAkC,EACxC,0BAA0B,EAC1B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,kBAAkB,mGAsB9B,CAAC;AAMF,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,uBAAuB,sGAGU,CAAC;AAM/C,MAAM,WAAW,iCAAkC,SAAQ,iBAAiB;CAAG;AAE/E,eAAO,MAAM,4BAA4B,yGAGQ,CAAC;AAIlD,MAAM,WAAW,iCAAkC,SAAQ,iBAAiB;CAAG;AAE/E,eAAO,MAAM,4BAA4B,yGAGuB,CAAC;AAIjE,MAAM,WAAW,sCACf,SAAQ,kCAAkC,EACxC,uBAAuB,CAAC,wBAAwB;CAAG;AAEvD,eAAO,MAAM,iCAAiC,+GAc5C,CAAC;AAMH,MAAM,WAAW,yCACf,SAAQ,0BAA0B,EAChC,uBAAuB,CAAC,2BAA2B;CAAG;AAE1D,eAAO,MAAM,oCAAoC,qHAmB/C,CAAC;AAMH,MAAM,WAAW,yCACf,SAAQ,uBAAuB,CAAC,2BAA2B;CAAG;AAEhE,eAAO,MAAM,oCAAoC,kHAGS,CAAC;AAM3D,MAAM,WAAW,0BAA2B,SAAQ,uBAAuB,CAAC,YAAY;CAAG;AAE3F,eAAO,MAAM,qBAAqB,sGAGjC,CAAC;AAMF,MAAM,WAAW,wBACf,SAAQ,+BAA+B,EACrC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,mBAAmB,iGAE/B,CAAC"}

package/lib/components/SideNavigation/SideNavigation.js

@@ -0,0 +1,157 @@
+"use client";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext.js";
+import { createWithStateProps } from "../../utils/createWithStateProps.js";
+import { createRecipeContext } from "../../utils/createRecipeContext.js";
+import { InternalIcon } from "../private/Icon.js";
+import { SideNavigation, SideNavigationItemProvider, useCollapsibleContext, useSideNavigationContext, useSideNavigationItem, useSideNavigationItemContext } from "@seed-design/react-side-navigation";
+import { Primitive } from "@seed-design/react-primitive";
+import clsx$1 from "clsx";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { dataAttr } from "@seed-design/dom-utils";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { mediaQueries } from "@seed-design/css/breakpoints";
+import { sideNavigation } from "@seed-design/css/recipes/side-navigation";
+import { sideNavigationInset } from "@seed-design/css/recipes/side-navigation-inset";
+import { sideNavigationMenuItem } from "@seed-design/css/recipes/side-navigation-menu-item";
+//#region src/components/SideNavigation/SideNavigation.tsx
+var { withProvider, withContext, useClassNames } = createSlotRecipeContext(sideNavigation);
+var { ClassNamesProvider: ItemClassNamesProvider, withContext: withItemContext } = createSlotRecipeContext(sideNavigationMenuItem);
+var { withContext: withInsetContext } = createRecipeContext(sideNavigationInset);
+var withSideNavigationStateProps = createWithStateProps([useSideNavigationContext]);
+var withItemStateProps = createWithStateProps([useSideNavigationContext, {
+	useContext: useSideNavigationItemContext,
+	strict: false
+}]);
+var withItemSlotCollapsibleStateProps = createWithStateProps([
+	useSideNavigationContext,
+	{
+		useContext: useSideNavigationItemContext,
+		strict: false
+	},
+	{
+		useContext: useCollapsibleContext,
+		strict: false
+	}
+]);
+function ResponsiveCollapseEffect() {
+	const { setCollapsed } = useSideNavigationContext();
+	React.useEffect(() => {
+		const mql = window.matchMedia(mediaQueries.lg);
+		const handler = (e) => {
+			setCollapsed(!e.matches);
+		};
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, [setCollapsed]);
+	return null;
+}
+function SideNavigationProvider(props) {
+	return /* @__PURE__ */ jsxs(SideNavigation.Provider, {
+		...props,
+		children: [/* @__PURE__ */ jsx(ResponsiveCollapseEffect, {}), props.children]
+	});
+}
+SideNavigationProvider.displayName = "SideNavigationProvider";
+var SideNavigationRoot = withProvider(SideNavigation.Root, "root");
+SideNavigationRoot.displayName = "SideNavigationRoot";
+var SideNavigationHeader = withContext(withSideNavigationStateProps(Primitive.div), "header");
+SideNavigationHeader.displayName = "SideNavigationHeader";
+var SideNavigationContent = React.forwardRef(({ className, ...props }, forwardedRef) => {
+	const classNames = useClassNames();
+	const { stateProps } = useSideNavigationContext();
+	const ref = React.useRef(null);
+	const [scrolled, setScrolled] = React.useState(false);
+	React.useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const check = () => setScrolled(element.scrollTop > 0);
+		check();
+		element.addEventListener("scroll", check);
+		const observer = new ResizeObserver(check);
+		observer.observe(element);
+		return () => {
+			element.removeEventListener("scroll", check);
+			observer.disconnect();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		ref: composeRefs(ref, forwardedRef),
+		className: clsx$1(classNames.content, className),
+		"data-scrolled": dataAttr(scrolled),
+		...stateProps,
+		...props
+	});
+});
+SideNavigationContent.displayName = "SideNavigationContent";
+var SideNavigationFooter = withContext(withSideNavigationStateProps(Primitive.div), "footer");
+SideNavigationFooter.displayName = "SideNavigationFooter";
+var SideNavigationGroup = withContext(withSideNavigationStateProps(Primitive.div), "group");
+SideNavigationGroup.displayName = "SideNavigationGroup";
+var SideNavigationGroupLabel = withContext(withSideNavigationStateProps(Primitive.div), "groupLabel");
+SideNavigationGroupLabel.displayName = "SideNavigationGroupLabel";
+var SideNavigationItem = React.forwardRef(({ current, disabled, className, ...props }, ref) => {
+	const [variantProps, restProps] = sideNavigationMenuItem.splitVariantProps(props);
+	const classNames = sideNavigationMenuItem(variantProps);
+	const { stateProps: sideNavStateProps } = useSideNavigationContext();
+	const api = useSideNavigationItem({
+		current,
+		disabled
+	});
+	return /* @__PURE__ */ jsx(SideNavigationItemProvider, {
+		value: api,
+		children: /* @__PURE__ */ jsx(ItemClassNamesProvider, {
+			value: classNames,
+			children: /* @__PURE__ */ jsx(Primitive.button, {
+				className: clsx$1(classNames.root, className),
+				ref,
+				...restProps,
+				...sideNavStateProps,
+				...api.rootProps
+			})
+		})
+	});
+});
+SideNavigationItem.displayName = "SideNavigationItem";
+var SideNavigationItemLabel = withItemContext(withItemStateProps(Primitive.span), "label");
+SideNavigationItemLabel.displayName = "SideNavigationItemLabel";
+var SideNavigationItemPrefixIcon = withItemContext(withItemStateProps(InternalIcon), "prefixIcon");
+var SideNavigationItemSuffixIcon = withItemContext(withItemSlotCollapsibleStateProps(InternalIcon), "suffixIcon");
+var SideNavigationItemCollapsibleRoot = React.forwardRef(({ children, ...props }, ref) => {
+	const [variantProps, restProps] = sideNavigationMenuItem.splitVariantProps(props);
+	return /* @__PURE__ */ jsx(ItemClassNamesProvider, {
+		value: sideNavigationMenuItem(variantProps),
+		children: /* @__PURE__ */ jsx(SideNavigation.ItemCollapsibleRoot, {
+			ref,
+			...restProps,
+			children
+		})
+	});
+});
+SideNavigationItemCollapsibleRoot.displayName = "SideNavigationItemCollapsibleRoot";
+var SideNavigationItemCollapsibleTrigger = React.forwardRef(({ current, disabled, className, ...props }, ref) => {
+	const classNames = sideNavigationMenuItem();
+	const { stateProps: sideNavStateProps } = useSideNavigationContext();
+	const api = useSideNavigationItem({
+		current,
+		disabled
+	});
+	return /* @__PURE__ */ jsx(SideNavigationItemProvider, {
+		value: api,
+		children: /* @__PURE__ */ jsx(SideNavigation.ItemCollapsibleTrigger, {
+			ref,
+			className: clsx$1(classNames.root, className),
+			...sideNavStateProps,
+			...api.stateProps,
+			...props
+		})
+	});
+});
+SideNavigationItemCollapsibleTrigger.displayName = "SideNavigationItemCollapsibleTrigger";
+var SideNavigationItemCollapsibleContent = withItemContext(SideNavigation.ItemCollapsibleContent, "panel");
+SideNavigationItemCollapsibleContent.displayName = "SideNavigationItemCollapsibleContent";
+var SideNavigationTrigger = withContext(SideNavigation.Trigger, "trigger");
+SideNavigationTrigger.displayName = "SideNavigationTrigger";
+var SideNavigationInset = withInsetContext(Primitive.div);
+//#endregion
+export { SideNavigationContent, SideNavigationFooter, SideNavigationGroup, SideNavigationGroupLabel, SideNavigationHeader, SideNavigationInset, SideNavigationItem, SideNavigationItemCollapsibleContent, SideNavigationItemCollapsibleRoot, SideNavigationItemCollapsibleTrigger, SideNavigationItemLabel, SideNavigationItemPrefixIcon, SideNavigationItemSuffixIcon, SideNavigationProvider, SideNavigationRoot, SideNavigationTrigger };

package/lib/components/SideNavigation/SideNavigation.namespace.cjs

@@ -0,0 +1,28 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_SideNavigation = require("./SideNavigation.cjs");
+//#region src/components/SideNavigation/SideNavigation.namespace.ts
+var SideNavigation_namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
+	Content: () => require_SideNavigation.SideNavigationContent,
+	Footer: () => require_SideNavigation.SideNavigationFooter,
+	Group: () => require_SideNavigation.SideNavigationGroup,
+	GroupLabel: () => require_SideNavigation.SideNavigationGroupLabel,
+	Header: () => require_SideNavigation.SideNavigationHeader,
+	Inset: () => require_SideNavigation.SideNavigationInset,
+	Item: () => require_SideNavigation.SideNavigationItem,
+	ItemCollapsibleContent: () => require_SideNavigation.SideNavigationItemCollapsibleContent,
+	ItemCollapsibleRoot: () => require_SideNavigation.SideNavigationItemCollapsibleRoot,
+	ItemCollapsibleTrigger: () => require_SideNavigation.SideNavigationItemCollapsibleTrigger,
+	ItemLabel: () => require_SideNavigation.SideNavigationItemLabel,
+	ItemPrefixIcon: () => require_SideNavigation.SideNavigationItemPrefixIcon,
+	ItemSuffixIcon: () => require_SideNavigation.SideNavigationItemSuffixIcon,
+	Provider: () => require_SideNavigation.SideNavigationProvider,
+	Root: () => require_SideNavigation.SideNavigationRoot,
+	Trigger: () => require_SideNavigation.SideNavigationTrigger
+});
+//#endregion
+Object.defineProperty(exports, "SideNavigation_namespace_exports", {
+	enumerable: true,
+	get: function() {
+		return SideNavigation_namespace_exports;
+	}
+});

package/lib/components/SideNavigation/SideNavigation.namespace.d.ts

@@ -0,0 +1,3 @@
+export { SideNavigationRoot as Root, SideNavigationHeader as Header, SideNavigationContent as Content, SideNavigationFooter as Footer, SideNavigationGroup as Group, SideNavigationGroupLabel as GroupLabel, SideNavigationItem as Item, SideNavigationItemLabel as ItemLabel, SideNavigationItemPrefixIcon as ItemPrefixIcon, SideNavigationItemSuffixIcon as ItemSuffixIcon, SideNavigationItemCollapsibleRoot as ItemCollapsibleRoot, SideNavigationItemCollapsibleTrigger as ItemCollapsibleTrigger, SideNavigationItemCollapsibleContent as ItemCollapsibleContent, SideNavigationTrigger as Trigger, SideNavigationInset as Inset, type SideNavigationRootProps as RootProps, type SideNavigationHeaderProps as HeaderProps, type SideNavigationContentProps as ContentProps, type SideNavigationFooterProps as FooterProps, type SideNavigationGroupProps as GroupProps, type SideNavigationGroupLabelProps as GroupLabelProps, type SideNavigationItemProps as ItemProps, type SideNavigationItemLabelProps as ItemLabelProps, type SideNavigationItemPrefixIconProps as ItemPrefixIconProps, type SideNavigationItemSuffixIconProps as ItemSuffixIconProps, type SideNavigationItemCollapsibleRootProps as ItemCollapsibleRootProps, type SideNavigationItemCollapsibleTriggerProps as ItemCollapsibleTriggerProps, type SideNavigationItemCollapsibleContentProps as ItemCollapsibleContentProps, type SideNavigationTriggerProps as TriggerProps, type SideNavigationInsetProps as InsetProps, } from './SideNavigation';
+export { SideNavigationProvider as Provider, type SideNavigationProviderProps as ProviderProps, } from './SideNavigation';
+//# sourceMappingURL=SideNavigation.namespace.d.ts.map

package/lib/components/SideNavigation/SideNavigation.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigation.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/SideNavigation/SideNavigation.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,IAAI,EAC1B,oBAAoB,IAAI,MAAM,EAC9B,qBAAqB,IAAI,OAAO,EAChC,oBAAoB,IAAI,MAAM,EAC9B,mBAAmB,IAAI,KAAK,EAC5B,wBAAwB,IAAI,UAAU,EACtC,kBAAkB,IAAI,IAAI,EAC1B,uBAAuB,IAAI,SAAS,EACpC,4BAA4B,IAAI,cAAc,EAC9C,4BAA4B,IAAI,cAAc,EAC9C,iCAAiC,IAAI,mBAAmB,EACxD,oCAAoC,IAAI,sBAAsB,EAC9D,oCAAoC,IAAI,sBAAsB,EAC9D,qBAAqB,IAAI,OAAO,EAChC,mBAAmB,IAAI,KAAK,EAC5B,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,yBAAyB,IAAI,WAAW,EAC7C,KAAK,0BAA0B,IAAI,YAAY,EAC/C,KAAK,yBAAyB,IAAI,WAAW,EAC7C,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,6BAA6B,IAAI,eAAe,EACrD,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,4BAA4B,IAAI,cAAc,EACnD,KAAK,iCAAiC,IAAI,mBAAmB,EAC7D,KAAK,iCAAiC,IAAI,mBAAmB,EAC7D,KAAK,sCAAsC,IAAI,wBAAwB,EACvE,KAAK,yCAAyC,IAAI,2BAA2B,EAC7E,KAAK,yCAAyC,IAAI,2BAA2B,EAC7E,KAAK,0BAA0B,IAAI,YAAY,EAC/C,KAAK,wBAAwB,IAAI,UAAU,GAC5C,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,sBAAsB,IAAI,QAAQ,EAClC,KAAK,2BAA2B,IAAI,aAAa,GAClD,MAAM,kBAAkB,CAAC"}

package/lib/components/SideNavigation/SideNavigation.namespace.js

@@ -0,0 +1,23 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SideNavigationContent, SideNavigationFooter, SideNavigationGroup, SideNavigationGroupLabel, SideNavigationHeader, SideNavigationInset, SideNavigationItem, SideNavigationItemCollapsibleContent, SideNavigationItemCollapsibleRoot, SideNavigationItemCollapsibleTrigger, SideNavigationItemLabel, SideNavigationItemPrefixIcon, SideNavigationItemSuffixIcon, SideNavigationProvider, SideNavigationRoot, SideNavigationTrigger } from "./SideNavigation.js";
+//#region src/components/SideNavigation/SideNavigation.namespace.ts
+var SideNavigation_namespace_exports = /* @__PURE__ */ __exportAll({
+	Content: () => SideNavigationContent,
+	Footer: () => SideNavigationFooter,
+	Group: () => SideNavigationGroup,
+	GroupLabel: () => SideNavigationGroupLabel,
+	Header: () => SideNavigationHeader,
+	Inset: () => SideNavigationInset,
+	Item: () => SideNavigationItem,
+	ItemCollapsibleContent: () => SideNavigationItemCollapsibleContent,
+	ItemCollapsibleRoot: () => SideNavigationItemCollapsibleRoot,
+	ItemCollapsibleTrigger: () => SideNavigationItemCollapsibleTrigger,
+	ItemLabel: () => SideNavigationItemLabel,
+	ItemPrefixIcon: () => SideNavigationItemPrefixIcon,
+	ItemSuffixIcon: () => SideNavigationItemSuffixIcon,
+	Provider: () => SideNavigationProvider,
+	Root: () => SideNavigationRoot,
+	Trigger: () => SideNavigationTrigger
+});
+//#endregion
+export { SideNavigation_namespace_exports };

package/lib/components/SideNavigation/index.cjs

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_SideNavigation = require("./SideNavigation.cjs");
+const require_SideNavigation_namespace = require("./SideNavigation.namespace.cjs");
+Object.defineProperty(exports, "SideNavigation", {
+	enumerable: true,
+	get: function() {
+		return require_SideNavigation_namespace.SideNavigation_namespace_exports;
+	}
+});
+exports.SideNavigationContent = require_SideNavigation.SideNavigationContent;
+exports.SideNavigationFooter = require_SideNavigation.SideNavigationFooter;
+exports.SideNavigationGroup = require_SideNavigation.SideNavigationGroup;
+exports.SideNavigationGroupLabel = require_SideNavigation.SideNavigationGroupLabel;
+exports.SideNavigationHeader = require_SideNavigation.SideNavigationHeader;
+exports.SideNavigationInset = require_SideNavigation.SideNavigationInset;
+exports.SideNavigationItem = require_SideNavigation.SideNavigationItem;
+exports.SideNavigationItemCollapsibleContent = require_SideNavigation.SideNavigationItemCollapsibleContent;
+exports.SideNavigationItemCollapsibleRoot = require_SideNavigation.SideNavigationItemCollapsibleRoot;
+exports.SideNavigationItemCollapsibleTrigger = require_SideNavigation.SideNavigationItemCollapsibleTrigger;
+exports.SideNavigationItemLabel = require_SideNavigation.SideNavigationItemLabel;
+exports.SideNavigationItemPrefixIcon = require_SideNavigation.SideNavigationItemPrefixIcon;
+exports.SideNavigationItemSuffixIcon = require_SideNavigation.SideNavigationItemSuffixIcon;
+exports.SideNavigationProvider = require_SideNavigation.SideNavigationProvider;
+exports.SideNavigationRoot = require_SideNavigation.SideNavigationRoot;
+exports.SideNavigationTrigger = require_SideNavigation.SideNavigationTrigger;

package/lib/components/SideNavigation/index.d.ts

@@ -0,0 +1,4 @@
+export { SideNavigationRoot, SideNavigationHeader, SideNavigationContent, SideNavigationFooter, SideNavigationGroup, SideNavigationGroupLabel, SideNavigationItem, SideNavigationItemLabel, SideNavigationItemPrefixIcon, SideNavigationItemSuffixIcon, SideNavigationItemCollapsibleRoot, SideNavigationItemCollapsibleTrigger, SideNavigationItemCollapsibleContent, SideNavigationTrigger, SideNavigationInset, type SideNavigationRootProps, type SideNavigationHeaderProps, type SideNavigationContentProps, type SideNavigationFooterProps, type SideNavigationGroupProps, type SideNavigationGroupLabelProps, type SideNavigationItemProps, type SideNavigationItemLabelProps, type SideNavigationItemPrefixIconProps, type SideNavigationItemSuffixIconProps, type SideNavigationItemCollapsibleRootProps, type SideNavigationItemCollapsibleTriggerProps, type SideNavigationItemCollapsibleContentProps, type SideNavigationTriggerProps, type SideNavigationInsetProps, } from './SideNavigation';
+export { SideNavigationProvider, type SideNavigationProviderProps, } from './SideNavigation';
+export * as SideNavigation from './SideNavigation.namespace';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/SideNavigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SideNavigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,4BAA4B,EAC5B,iCAAiC,EACjC,oCAAoC,EACpC,oCAAoC,EACpC,qBAAqB,EACrB,mBAAmB,EACnB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,6BAA6B,EAClC,KAAK,uBAAuB,EAC5B,KAAK,4BAA4B,EACjC,KAAK,iCAAiC,EACtC,KAAK,iCAAiC,EACtC,KAAK,sCAAsC,EAC3C,KAAK,yCAAyC,EAC9C,KAAK,yCAAyC,EAC9C,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,GAC9B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}

package/lib/components/SideNavigation/index.js

@@ -0,0 +1,3 @@
+import { SideNavigationContent, SideNavigationFooter, SideNavigationGroup, SideNavigationGroupLabel, SideNavigationHeader, SideNavigationInset, SideNavigationItem, SideNavigationItemCollapsibleContent, SideNavigationItemCollapsibleRoot, SideNavigationItemCollapsibleTrigger, SideNavigationItemLabel, SideNavigationItemPrefixIcon, SideNavigationItemSuffixIcon, SideNavigationProvider, SideNavigationRoot, SideNavigationTrigger } from "./SideNavigation.js";
+import { SideNavigation_namespace_exports } from "./SideNavigation.namespace.js";
+export { SideNavigation_namespace_exports as SideNavigation, SideNavigationContent, SideNavigationFooter, SideNavigationGroup, SideNavigationGroupLabel, SideNavigationHeader, SideNavigationInset, SideNavigationItem, SideNavigationItemCollapsibleContent, SideNavigationItemCollapsibleRoot, SideNavigationItemCollapsibleTrigger, SideNavigationItemLabel, SideNavigationItemPrefixIcon, SideNavigationItemSuffixIcon, SideNavigationProvider, SideNavigationRoot, SideNavigationTrigger };

package/lib/components/SidePanel/SidePanel.cjs

@@ -0,0 +1,100 @@
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_createSlotRecipeContext = require("../../utils/createSlotRecipeContext.cjs");
+const require_styled = require("../../utils/styled.cjs");
+const require_createRenderTrackingContext = require("../../utils/createRenderTrackingContext.cjs");
+let _seed_design_react_primitive = require("@seed-design/react-primitive");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _seed_design_dom_utils = require("@seed-design/dom-utils");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _seed_design_react_drawer = require("@seed-design/react-drawer");
+let _seed_design_css_recipes_side_panel = require("@seed-design/css/recipes/side-panel");
+//#region src/components/SidePanel/SidePanel.tsx
+var { withContext, useClassNames, ClassNamesProvider } = require_createSlotRecipeContext.createSlotRecipeContext(_seed_design_css_recipes_side_panel.sidePanel);
+var closeButtonTracker = require_createRenderTrackingContext.createRenderTrackingContext("SidePanelCloseButton");
+function SidePanelRoot(props) {
+	const [variantProps, otherProps] = _seed_design_css_recipes_side_panel.sidePanel.splitVariantProps({
+		direction: "right",
+		lazyMount: true,
+		unmountOnExit: true,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassNamesProvider, {
+		value: (0, _seed_design_css_recipes_side_panel.sidePanel)(variantProps),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(closeButtonTracker.Provider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_drawer.Drawer.Root, { ...otherProps }) })
+	});
+}
+var SidePanelTrigger = _seed_design_react_drawer.Drawer.Trigger;
+var SidePanelPositioner = withContext(_seed_design_react_drawer.Drawer.Positioner, "positioner");
+var SidePanelBackdrop = withContext(_seed_design_react_drawer.Drawer.Backdrop, "backdrop");
+var SidePanelContent = withContext(require_styled.withStyleProps(_seed_design_react_drawer.Drawer.Content), "content");
+var SidePanelHeader = react.forwardRef(({ className, ...props }, ref) => {
+	const classNames = useClassNames();
+	const { isRendered } = closeButtonTracker.useRenderTracking();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_drawer.Drawer.Header, {
+		ref,
+		"data-show-close-button": (0, _seed_design_dom_utils.dataAttr)(isRendered),
+		className: (0, clsx.default)(classNames.header, className),
+		...props
+	});
+});
+SidePanelHeader.displayName = "SidePanelHeader";
+var SidePanelTitle = withContext(_seed_design_react_drawer.Drawer.Title, "title");
+SidePanelTitle.displayName = "SidePanelTitle";
+var SidePanelDescription = withContext(_seed_design_react_drawer.Drawer.Description, "description");
+SidePanelDescription.displayName = "SidePanelDescription";
+var SidePanelBody = react.forwardRef((props, forwardedRef) => {
+	const classNames = useClassNames();
+	const { style, restProps } = require_styled.useStyleProps(props);
+	const { className, ...otherProps } = restProps;
+	const ref = react.useRef(null);
+	const [scrolled, setScrolled] = react.useState(false);
+	react.useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const check = () => setScrolled(element.scrollTop > 0);
+		check();
+		element.addEventListener("scroll", check);
+		const observer = new ResizeObserver(check);
+		observer.observe(element);
+		return () => {
+			element.removeEventListener("scroll", check);
+			observer.disconnect();
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
+		ref: (0, _radix_ui_react_compose_refs.composeRefs)(ref, forwardedRef),
+		className: (0, clsx.default)(classNames.body, className),
+		style,
+		"data-scrolled": (0, _seed_design_dom_utils.dataAttr)(scrolled),
+		...otherProps
+	});
+});
+SidePanelBody.displayName = "SidePanelBody";
+var SidePanelFooter = withContext(_seed_design_react_primitive.Primitive.div, "footer");
+var SidePanelCloseButton = react.forwardRef(({ className, ...props }, ref) => {
+	const classNames = useClassNames();
+	const { trackRef } = closeButtonTracker.useRenderTracking();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_drawer.Drawer.CloseButton, {
+		ref: (0, _radix_ui_react_compose_refs.composeRefs)(ref, trackRef),
+		className: (0, clsx.default)(classNames.closeButton, className),
+		...props
+	});
+});
+SidePanelCloseButton.displayName = "SidePanelCloseButton";
+//#endregion
+exports.SidePanelBackdrop = SidePanelBackdrop;
+exports.SidePanelBody = SidePanelBody;
+exports.SidePanelCloseButton = SidePanelCloseButton;
+exports.SidePanelContent = SidePanelContent;
+exports.SidePanelDescription = SidePanelDescription;
+exports.SidePanelFooter = SidePanelFooter;
+exports.SidePanelHeader = SidePanelHeader;
+exports.SidePanelPositioner = SidePanelPositioner;
+exports.SidePanelRoot = SidePanelRoot;
+exports.SidePanelTitle = SidePanelTitle;
+exports.SidePanelTrigger = SidePanelTrigger;