@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.1

package/dist/components/drawer/drawer-content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-content.cjs","sources":["../../../components/drawer/drawer-content.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { type ElementRef, forwardRef } from 'react';\nimport styles from './drawer.module.css';\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst drawerPopup = cva(styles.drawerPopup, {\n  variants: {\n    side: {\n      top: styles['drawerPopup-top'],\n      bottom: styles['drawerPopup-bottom'],\n      left: styles['drawerPopup-left'],\n      right: styles['drawerPopup-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\nexport interface DrawerContentProps\n  extends Omit<DrawerPrimitive.Popup.Props, 'children'>,\n    VariantProps<typeof drawerPopup> {\n  showCloseButton?: boolean;\n  overlayProps?: DrawerPrimitive.Backdrop.Props;\n  children?: React.ReactNode;\n}\n\nexport const DrawerContent = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Popup>,\n  DrawerContentProps\n>(\n  (\n    {\n      className,\n      children,\n      side = 'right',\n      showCloseButton = true,\n      overlayProps,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <DrawerPrimitive.Portal>\n        <DrawerPrimitive.Backdrop\n          {...overlayProps}\n          className={cx(styles.backdrop, overlayProps?.className)}\n        />\n        <DrawerPrimitive.Viewport className={styles.viewport}>\n          <DrawerPrimitive.Popup\n            ref={ref}\n            className={drawerPopup({ side, className })}\n            aria-label='Drawer'\n            {...props}\n          >\n            <DrawerPrimitive.Content className={styles.content}>\n              {children}\n              {showCloseButton && (\n                <DrawerPrimitive.Close\n                  className={styles.close}\n                  aria-label='Close Drawer'\n                >\n                  <Cross1Icon aria-hidden='true' />\n                </DrawerPrimitive.Close>\n              )}\n            </DrawerPrimitive.Content>\n          </DrawerPrimitive.Popup>\n        </DrawerPrimitive.Viewport>\n      </DrawerPrimitive.Portal>\n    );\n  }\n);\nDrawerContent.displayName = 'Drawer.Content';\n"],"names":[],"mappings":";;;;;;;;;;AAUA;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAUM;;AA2CL;AAEF;;"}
+{"version":3,"file":"drawer-content.cjs","sources":["../../../components/drawer/drawer-content.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { ReactNode } from 'react';\nimport styles from './drawer.module.css';\n\nconst drawerPopup = cva(styles.drawerPopup, {\n  variants: {\n    side: {\n      top: styles['drawerPopup-top'],\n      bottom: styles['drawerPopup-bottom'],\n      left: styles['drawerPopup-left'],\n      right: styles['drawerPopup-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\nexport interface DrawerContentProps\n  extends Omit<DrawerPrimitive.Popup.Props, 'children'>,\n    VariantProps<typeof drawerPopup> {\n  showCloseButton?: boolean;\n  overlayProps?: DrawerPrimitive.Backdrop.Props;\n  children?: ReactNode;\n}\n\nexport function DrawerContent({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  overlayProps,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Portal>\n      <DrawerPrimitive.Backdrop\n        {...overlayProps}\n        className={cx(styles.backdrop, overlayProps?.className)}\n      />\n      <DrawerPrimitive.Viewport className={styles.viewport}>\n        <DrawerPrimitive.Popup\n          className={drawerPopup({ side, className })}\n          aria-label='Drawer'\n          {...props}\n        >\n          <DrawerPrimitive.Content className={styles.content}>\n            {children}\n            {showCloseButton && (\n              <DrawerPrimitive.Close\n                className={styles.close}\n                aria-label='Close Drawer'\n              >\n                <Cross1Icon aria-hidden='true' />\n              </DrawerPrimitive.Close>\n            )}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPrimitive.Portal>\n  );\n}\nDrawerContent.displayName = 'Drawer.Content';\n"],"names":[],"mappings":";;;;;;;;;AAQA;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAUK;;AAmCN;AACA;;"}

package/dist/components/drawer/drawer-content.d.ts

@@ -1,13 +1,17 @@
 import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
 import { type VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
 declare const drawerPopup: (props?: ({
     side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface DrawerContentProps extends Omit<DrawerPrimitive.Popup.Props, 'children'>, VariantProps<typeof drawerPopup> {
     showCloseButton?: boolean;
     overlayProps?: DrawerPrimitive.Backdrop.Props;
-    children?: React.ReactNode;
+    children?: ReactNode;
+}
+export declare function DrawerContent({ className, children, side, showCloseButton, overlayProps, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerContent {
+    var displayName: string;
 }
-export declare const DrawerContent: import("react").ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=drawer-content.d.ts.map

package/dist/components/drawer/drawer-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-content.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer-content.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMtE,QAAA,MAAM,WAAW;;8EAYf,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC,EACnD,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,4HA4CzB,CAAC"}
+{"version":3,"file":"drawer-content.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer-content.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,QAAA,MAAM,WAAW;;8EAYf,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC,EACnD,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,IAAc,EACd,eAAsB,EACtB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA4BpB;yBAnCe,aAAa"}

package/dist/components/drawer/drawer-content.js

@@ -3,7 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { DrawerPreview } from '@base-ui/react/drawer';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { cva, cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './drawer.module.css.js';
 
 const drawerPopup = cva(styles.drawerPopup, {
@@ -19,9 +18,9 @@ const drawerPopup = cva(styles.drawerPopup, {
         side: 'right'
     }
 });
-const DrawerContent = forwardRef(({ className, children, side = 'right', showCloseButton = true, overlayProps, ...props }, ref) => {
-    return (jsxs(DrawerPreview.Portal, { children: [jsx(DrawerPreview.Backdrop, { ...overlayProps, className: cx(styles.backdrop, overlayProps?.className) }), jsx(DrawerPreview.Viewport, { className: styles.viewport, children: jsx(DrawerPreview.Popup, { ref: ref, className: drawerPopup({ side, className }), "aria-label": 'Drawer', ...props, children: jsxs(DrawerPreview.Content, { className: styles.content, children: [children, showCloseButton && (jsx(DrawerPreview.Close, { className: styles.close, "aria-label": 'Close Drawer', children: jsx(Cross1Icon, { "aria-hidden": 'true' }) }))] }) }) })] }));
-});
+function DrawerContent({ className, children, side = 'right', showCloseButton = true, overlayProps, ...props }) {
+    return (jsxs(DrawerPreview.Portal, { children: [jsx(DrawerPreview.Backdrop, { ...overlayProps, className: cx(styles.backdrop, overlayProps?.className) }), jsx(DrawerPreview.Viewport, { className: styles.viewport, children: jsx(DrawerPreview.Popup, { className: drawerPopup({ side, className }), "aria-label": 'Drawer', ...props, children: jsxs(DrawerPreview.Content, { className: styles.content, children: [children, showCloseButton && (jsx(DrawerPreview.Close, { className: styles.close, "aria-label": 'Close Drawer', children: jsx(Cross1Icon, { "aria-hidden": 'true' }) }))] }) }) })] }));
+}
 DrawerContent.displayName = 'Drawer.Content';
 
 export { DrawerContent };

package/dist/components/drawer/drawer-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-content.js","sources":["../../../components/drawer/drawer-content.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { type ElementRef, forwardRef } from 'react';\nimport styles from './drawer.module.css';\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst drawerPopup = cva(styles.drawerPopup, {\n  variants: {\n    side: {\n      top: styles['drawerPopup-top'],\n      bottom: styles['drawerPopup-bottom'],\n      left: styles['drawerPopup-left'],\n      right: styles['drawerPopup-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\nexport interface DrawerContentProps\n  extends Omit<DrawerPrimitive.Popup.Props, 'children'>,\n    VariantProps<typeof drawerPopup> {\n  showCloseButton?: boolean;\n  overlayProps?: DrawerPrimitive.Backdrop.Props;\n  children?: React.ReactNode;\n}\n\nexport const DrawerContent = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Popup>,\n  DrawerContentProps\n>(\n  (\n    {\n      className,\n      children,\n      side = 'right',\n      showCloseButton = true,\n      overlayProps,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <DrawerPrimitive.Portal>\n        <DrawerPrimitive.Backdrop\n          {...overlayProps}\n          className={cx(styles.backdrop, overlayProps?.className)}\n        />\n        <DrawerPrimitive.Viewport className={styles.viewport}>\n          <DrawerPrimitive.Popup\n            ref={ref}\n            className={drawerPopup({ side, className })}\n            aria-label='Drawer'\n            {...props}\n          >\n            <DrawerPrimitive.Content className={styles.content}>\n              {children}\n              {showCloseButton && (\n                <DrawerPrimitive.Close\n                  className={styles.close}\n                  aria-label='Close Drawer'\n                >\n                  <Cross1Icon aria-hidden='true' />\n                </DrawerPrimitive.Close>\n              )}\n            </DrawerPrimitive.Content>\n          </DrawerPrimitive.Popup>\n        </DrawerPrimitive.Viewport>\n      </DrawerPrimitive.Portal>\n    );\n  }\n);\nDrawerContent.displayName = 'Drawer.Content';\n"],"names":[],"mappings":";;;;;;;;AAUA;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAUM;;AA2CL;AAEF;;"}
+{"version":3,"file":"drawer-content.js","sources":["../../../components/drawer/drawer-content.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { ReactNode } from 'react';\nimport styles from './drawer.module.css';\n\nconst drawerPopup = cva(styles.drawerPopup, {\n  variants: {\n    side: {\n      top: styles['drawerPopup-top'],\n      bottom: styles['drawerPopup-bottom'],\n      left: styles['drawerPopup-left'],\n      right: styles['drawerPopup-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\nexport interface DrawerContentProps\n  extends Omit<DrawerPrimitive.Popup.Props, 'children'>,\n    VariantProps<typeof drawerPopup> {\n  showCloseButton?: boolean;\n  overlayProps?: DrawerPrimitive.Backdrop.Props;\n  children?: ReactNode;\n}\n\nexport function DrawerContent({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  overlayProps,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Portal>\n      <DrawerPrimitive.Backdrop\n        {...overlayProps}\n        className={cx(styles.backdrop, overlayProps?.className)}\n      />\n      <DrawerPrimitive.Viewport className={styles.viewport}>\n        <DrawerPrimitive.Popup\n          className={drawerPopup({ side, className })}\n          aria-label='Drawer'\n          {...props}\n        >\n          <DrawerPrimitive.Content className={styles.content}>\n            {children}\n            {showCloseButton && (\n              <DrawerPrimitive.Close\n                className={styles.close}\n                aria-label='Close Drawer'\n              >\n                <Cross1Icon aria-hidden='true' />\n              </DrawerPrimitive.Close>\n            )}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPrimitive.Portal>\n  );\n}\nDrawerContent.displayName = 'Drawer.Content';\n"],"names":[],"mappings":";;;;;;;AAQA;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAUK;;AAmCN;AACA;;"}

package/dist/components/drawer/drawer-misc.cjs

@@ -4,18 +4,25 @@
 var jsxRuntime = require('react/jsx-runtime');
 var drawer = require('@base-ui/react/drawer');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var drawer_module = require('./drawer.module.css.cjs');
 
 const DrawerHeader = ({ children, className }) => jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(drawer_module.default.header, className), children: children });
 DrawerHeader.displayName = 'Drawer.Header';
-const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(drawer.DrawerPreview.Title, { ref: ref, className: classVarianceAuthority.cx(drawer_module.default.title, className), ...props })));
+function DrawerTitle({ className, ...props }) {
+    return (jsxRuntime.jsx(drawer.DrawerPreview.Title, { className: classVarianceAuthority.cx(drawer_module.default.title, className), ...props }));
+}
 DrawerTitle.displayName = 'Drawer.Title';
-const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(drawer.DrawerPreview.Description, { ref: ref, className: classVarianceAuthority.cx(drawer_module.default.description, className), ...props })));
+function DrawerDescription({ className, ...props }) {
+    return (jsxRuntime.jsx(drawer.DrawerPreview.Description, { className: classVarianceAuthority.cx(drawer_module.default.description, className), ...props }));
+}
 DrawerDescription.displayName = 'Drawer.Description';
-const DrawerBody = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: classVarianceAuthority.cx(drawer_module.default.body, className), ...props })));
+function DrawerBody({ className, ...props }) {
+    return jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(drawer_module.default.body, className), ...props });
+}
 DrawerBody.displayName = 'Drawer.Body';
-const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: classVarianceAuthority.cx(drawer_module.default.footer, className), ...props })));
+function DrawerFooter({ className, ...props }) {
+    return jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(drawer_module.default.footer, className), ...props });
+}
 DrawerFooter.displayName = 'Drawer.Footer';
 
 exports.DrawerBody = DrawerBody;

package/dist/components/drawer/drawer-misc.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-misc.cjs","sources":["../../../components/drawer/drawer-misc.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { cx } from 'class-variance-authority';\nimport {\n  type ElementRef,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode\n} from 'react';\nimport styles from './drawer.module.css';\n\nexport const DrawerHeader = ({\n  children,\n  className\n}: {\n  children: ReactNode;\n  className?: string;\n}) => <div className={cx(styles.header, className)}>{children}</div>;\nDrawerHeader.displayName = 'Drawer.Header';\n\nexport const DrawerTitle = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Title>,\n  DrawerPrimitive.Title.Props\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Title\n    ref={ref}\n    className={cx(styles.title, className)}\n    {...props}\n  />\n));\nDrawerTitle.displayName = 'Drawer.Title';\n\nexport const DrawerDescription = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Description>,\n  DrawerPrimitive.Description.Props\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Description\n    ref={ref}\n    className={cx(styles.description, className)}\n    {...props}\n  />\n));\nDrawerDescription.displayName = 'Drawer.Description';\n\nexport const DrawerBody = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cx(styles.body, className)} {...props} />\n));\nDrawerBody.displayName = 'Drawer.Body';\n\nexport const DrawerFooter = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cx(styles.footer, className)} {...props} />\n));\nDrawerFooter.displayName = 'Drawer.Footer';\n"],"names":[],"mappings":";;;;;;;;;AAYa;AAOb;AAEa;AAUb;AAEa;AAUb;AAEa;AAMb;AAEa;AAMb;;;;;;"}
+{"version":3,"file":"drawer-misc.cjs","sources":["../../../components/drawer/drawer-misc.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, type ReactNode } from 'react';\nimport styles from './drawer.module.css';\n\nexport const DrawerHeader = ({\n  children,\n  className\n}: {\n  children: ReactNode;\n  className?: string;\n}) => <div className={cx(styles.header, className)}>{children}</div>;\nDrawerHeader.displayName = 'Drawer.Header';\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title className={cx(styles.title, className)} {...props} />\n  );\n}\nDrawerTitle.displayName = 'Drawer.Title';\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      className={cx(styles.description, className)}\n      {...props}\n    />\n  );\n}\nDrawerDescription.displayName = 'Drawer.Description';\n\nexport function DrawerBody({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cx(styles.body, className)} {...props} />;\n}\nDrawerBody.displayName = 'Drawer.Body';\n\nexport function DrawerFooter({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cx(styles.footer, className)} {...props} />;\n}\nDrawerFooter.displayName = 'Drawer.Footer';\n"],"names":[],"mappings":";;;;;;;;AAOa;AAOb;AAEM;;AAON;AACA;AAEM;;AAUN;AACA;AAEM;AACJ;AACF;AACA;AAEM;AACJ;AACF;AACA;;;;;;"}

package/dist/components/drawer/drawer-misc.d.ts

@@ -1,4 +1,5 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
+import { ComponentProps, type ReactNode } from 'react';
 export declare const DrawerHeader: {
     ({ children, className }: {
         children: ReactNode;
@@ -6,8 +7,20 @@ export declare const DrawerHeader: {
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export declare const DrawerTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const DrawerDescription: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-export declare const DrawerBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DrawerFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerTitle {
+    var displayName: string;
+}
+export declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerDescription {
+    var displayName: string;
+}
+export declare function DrawerBody({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerBody {
+    var displayName: string;
+}
+export declare function DrawerFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerFooter {
+    var displayName: string;
+}
 //# sourceMappingURL=drawer-misc.d.ts.map

package/dist/components/drawer/drawer-misc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-misc.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer-misc.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,YAAY;;kBAIb,SAAS;;;;CAE+C,CAAC;AAGrE,eAAO,MAAM,WAAW,8JAStB,CAAC;AAGH,eAAO,MAAM,iBAAiB,sKAS5B,CAAC;AAGH,eAAO,MAAM,UAAU,2HAKrB,CAAC;AAGH,eAAO,MAAM,YAAY,2HAKvB,CAAC"}
+{"version":3,"file":"drawer-misc.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer-misc.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,eAAO,MAAM,YAAY;;kBAIb,SAAS;;;;CAE+C,CAAC;AAGrE,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAI7B;yBAPe,WAAW;;;AAU3B,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,2CAOnC;yBAVe,iBAAiB;;;AAajC,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAExE;yBAFe,UAAU;;;AAK1B,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAE1E;yBAFe,YAAY"}

package/dist/components/drawer/drawer-misc.js

@@ -2,18 +2,25 @@
 import { jsx } from 'react/jsx-runtime';
 import { DrawerPreview } from '@base-ui/react/drawer';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './drawer.module.css.js';
 
 const DrawerHeader = ({ children, className }) => jsx("div", { className: cx(styles.header, className), children: children });
 DrawerHeader.displayName = 'Drawer.Header';
-const DrawerTitle = forwardRef(({ className, ...props }, ref) => (jsx(DrawerPreview.Title, { ref: ref, className: cx(styles.title, className), ...props })));
+function DrawerTitle({ className, ...props }) {
+    return (jsx(DrawerPreview.Title, { className: cx(styles.title, className), ...props }));
+}
 DrawerTitle.displayName = 'Drawer.Title';
-const DrawerDescription = forwardRef(({ className, ...props }, ref) => (jsx(DrawerPreview.Description, { ref: ref, className: cx(styles.description, className), ...props })));
+function DrawerDescription({ className, ...props }) {
+    return (jsx(DrawerPreview.Description, { className: cx(styles.description, className), ...props }));
+}
 DrawerDescription.displayName = 'Drawer.Description';
-const DrawerBody = forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cx(styles.body, className), ...props })));
+function DrawerBody({ className, ...props }) {
+    return jsx("div", { className: cx(styles.body, className), ...props });
+}
 DrawerBody.displayName = 'Drawer.Body';
-const DrawerFooter = forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cx(styles.footer, className), ...props })));
+function DrawerFooter({ className, ...props }) {
+    return jsx("div", { className: cx(styles.footer, className), ...props });
+}
 DrawerFooter.displayName = 'Drawer.Footer';
 
 export { DrawerBody, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle };

package/dist/components/drawer/drawer-misc.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-misc.js","sources":["../../../components/drawer/drawer-misc.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { cx } from 'class-variance-authority';\nimport {\n  type ElementRef,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode\n} from 'react';\nimport styles from './drawer.module.css';\n\nexport const DrawerHeader = ({\n  children,\n  className\n}: {\n  children: ReactNode;\n  className?: string;\n}) => <div className={cx(styles.header, className)}>{children}</div>;\nDrawerHeader.displayName = 'Drawer.Header';\n\nexport const DrawerTitle = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Title>,\n  DrawerPrimitive.Title.Props\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Title\n    ref={ref}\n    className={cx(styles.title, className)}\n    {...props}\n  />\n));\nDrawerTitle.displayName = 'Drawer.Title';\n\nexport const DrawerDescription = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Description>,\n  DrawerPrimitive.Description.Props\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Description\n    ref={ref}\n    className={cx(styles.description, className)}\n    {...props}\n  />\n));\nDrawerDescription.displayName = 'Drawer.Description';\n\nexport const DrawerBody = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cx(styles.body, className)} {...props} />\n));\nDrawerBody.displayName = 'Drawer.Body';\n\nexport const DrawerFooter = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cx(styles.footer, className)} {...props} />\n));\nDrawerFooter.displayName = 'Drawer.Footer';\n"],"names":[],"mappings":";;;;;;;AAYa;AAOb;AAEa;AAUb;AAEa;AAUb;AAEa;AAMb;AAEa;AAMb;;"}
+{"version":3,"file":"drawer-misc.js","sources":["../../../components/drawer/drawer-misc.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, type ReactNode } from 'react';\nimport styles from './drawer.module.css';\n\nexport const DrawerHeader = ({\n  children,\n  className\n}: {\n  children: ReactNode;\n  className?: string;\n}) => <div className={cx(styles.header, className)}>{children}</div>;\nDrawerHeader.displayName = 'Drawer.Header';\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title className={cx(styles.title, className)} {...props} />\n  );\n}\nDrawerTitle.displayName = 'Drawer.Title';\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      className={cx(styles.description, className)}\n      {...props}\n    />\n  );\n}\nDrawerDescription.displayName = 'Drawer.Description';\n\nexport function DrawerBody({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cx(styles.body, className)} {...props} />;\n}\nDrawerBody.displayName = 'Drawer.Body';\n\nexport function DrawerFooter({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cx(styles.footer, className)} {...props} />;\n}\nDrawerFooter.displayName = 'Drawer.Footer';\n"],"names":[],"mappings":";;;;;;AAOa;AAOb;AAEM;;AAON;AACA;AAEM;;AAUN;AACA;AAEM;AACJ;AACF;AACA;AAEM;AACJ;AACF;AACA;;"}

package/dist/components/drawer/drawer-root.cjs

@@ -5,9 +5,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var drawer = require('@base-ui/react/drawer');
 
 const sideToSwipeDirection = {
-    top: 'top',
+    top: 'up',
     right: 'right',
-    bottom: 'bottom',
+    bottom: 'down',
     left: 'left'
 };
 function DrawerRoot({ side = 'right', swipeDirection, ...props }) {

package/dist/components/drawer/drawer-root.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-root.cjs","sources":["../../../components/drawer/drawer-root.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst sideToSwipeDirection: Record<Side, Side> = {\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left'\n};\n\nexport interface DrawerRootProps extends DrawerPrimitive.Root.Props {\n  /** The direction from which the drawer appears and can be swiped to dismiss. */\n  side?: Side;\n}\n\nexport function DrawerRoot({\n  side = 'right',\n  swipeDirection,\n  ...props\n}: DrawerRootProps) {\n  return (\n    <DrawerPrimitive.Root\n      swipeDirection={swipeDirection ?? sideToSwipeDirection[side]}\n      {...props}\n    />\n  );\n}\nDrawerRoot.displayName = 'Drawer';\n"],"names":[],"mappings":";;;;;;AAMA;AACE;AACA;AACA;AACA;;AAQc;AAKd;AAMF;AACA;;"}
+{"version":3,"file":"drawer-root.cjs","sources":["../../../components/drawer/drawer-root.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst sideToSwipeDirection: Record<\n  Side,\n  DrawerPrimitive.Root.Props['swipeDirection']\n> = {\n  top: 'up',\n  right: 'right',\n  bottom: 'down',\n  left: 'left'\n};\n\nexport interface DrawerRootProps extends DrawerPrimitive.Root.Props {\n  /** The direction from which the drawer appears and can be swiped to dismiss. */\n  side?: Side;\n}\n\nexport function DrawerRoot({\n  side = 'right',\n  swipeDirection,\n  ...props\n}: DrawerRootProps) {\n  return (\n    <DrawerPrimitive.Root\n      swipeDirection={swipeDirection ?? sideToSwipeDirection[side]}\n      {...props}\n    />\n  );\n}\nDrawerRoot.displayName = 'Drawer';\n"],"names":[],"mappings":";;;;;;AAMA;AAIE;AACA;AACA;AACA;;AAQc;AAKd;AAMF;AACA;;"}

package/dist/components/drawer/drawer-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-root.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAShD,MAAM,WAAW,eAAgB,SAAQ,eAAe,CAAC,IAAI,CAAC,KAAK;IACjE,gFAAgF;IAChF,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAc,EACd,cAAc,EACd,GAAG,KAAK,EACT,EAAE,eAAe,2CAOjB;yBAXe,UAAU"}
+{"version":3,"file":"drawer-root.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAYhD,MAAM,WAAW,eAAgB,SAAQ,eAAe,CAAC,IAAI,CAAC,KAAK;IACjE,gFAAgF;IAChF,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAc,EACd,cAAc,EACd,GAAG,KAAK,EACT,EAAE,eAAe,2CAOjB;yBAXe,UAAU"}

package/dist/components/drawer/drawer-root.js

@@ -3,9 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { DrawerPreview } from '@base-ui/react/drawer';
 
 const sideToSwipeDirection = {
-    top: 'top',
+    top: 'up',
     right: 'right',
-    bottom: 'bottom',
+    bottom: 'down',
     left: 'left'
 };
 function DrawerRoot({ side = 'right', swipeDirection, ...props }) {

package/dist/components/drawer/drawer-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-root.js","sources":["../../../components/drawer/drawer-root.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst sideToSwipeDirection: Record<Side, Side> = {\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left'\n};\n\nexport interface DrawerRootProps extends DrawerPrimitive.Root.Props {\n  /** The direction from which the drawer appears and can be swiped to dismiss. */\n  side?: Side;\n}\n\nexport function DrawerRoot({\n  side = 'right',\n  swipeDirection,\n  ...props\n}: DrawerRootProps) {\n  return (\n    <DrawerPrimitive.Root\n      swipeDirection={swipeDirection ?? sideToSwipeDirection[side]}\n      {...props}\n    />\n  );\n}\nDrawerRoot.displayName = 'Drawer';\n"],"names":[],"mappings":";;;;AAMA;AACE;AACA;AACA;AACA;;AAQc;AAKd;AAMF;AACA;;"}
+{"version":3,"file":"drawer-root.js","sources":["../../../components/drawer/drawer-root.tsx"],"sourcesContent":["'use client';\n\nimport { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst sideToSwipeDirection: Record<\n  Side,\n  DrawerPrimitive.Root.Props['swipeDirection']\n> = {\n  top: 'up',\n  right: 'right',\n  bottom: 'down',\n  left: 'left'\n};\n\nexport interface DrawerRootProps extends DrawerPrimitive.Root.Props {\n  /** The direction from which the drawer appears and can be swiped to dismiss. */\n  side?: Side;\n}\n\nexport function DrawerRoot({\n  side = 'right',\n  swipeDirection,\n  ...props\n}: DrawerRootProps) {\n  return (\n    <DrawerPrimitive.Root\n      swipeDirection={swipeDirection ?? sideToSwipeDirection[side]}\n      {...props}\n    />\n  );\n}\nDrawerRoot.displayName = 'Drawer';\n"],"names":[],"mappings":";;;;AAMA;AAIE;AACA;AACA;AACA;;AAQc;AAKd;AAMF;AACA;;"}

package/dist/components/drawer/drawer.d.ts

@@ -1,10 +1,12 @@
 import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
+import { DrawerContent } from './drawer-content';
+import { DrawerBody, DrawerDescription, DrawerFooter, DrawerTitle } from './drawer-misc';
 import { DrawerRoot } from './drawer-root';
 export type { DrawerContentProps } from './drawer-content';
 export type { DrawerRootProps } from './drawer-root';
 export declare const Drawer: typeof DrawerRoot & {
     Trigger: DrawerPrimitive.Trigger;
-    Content: import("react").ForwardRefExoticComponent<Omit<import("./drawer-content").DrawerContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: typeof DrawerContent;
     Header: {
         ({ children, className }: {
             children: import("react").ReactNode;
@@ -12,10 +14,10 @@ export declare const Drawer: typeof DrawerRoot & {
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Title: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: typeof DrawerTitle;
+    Description: typeof DrawerDescription;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
     Close: DrawerPrimitive.Close;
 };
 //# sourceMappingURL=drawer.d.ts.map

package/dist/components/drawer/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AASzE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CASjB,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,YAAY,EAEZ,WAAW,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CASjB,CAAC"}

package/dist/components/empty-state/empty-state.cjs

@@ -6,12 +6,13 @@ var flex = require('../flex/flex.cjs');
 var text = require('../text/text.cjs');
 var emptyState_module = require('./empty-state.module.css.cjs');
 
-const EmptyState = ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1' }) => {
+function EmptyState({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1', ...props }) {
     if (variant === 'empty2') {
-        return (jsxRuntime.jsx(flex.Flex, { align: 'center', justify: 'center', className: emptyState_module.default.emptyStatePage, children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', align: 'start', gap: 'medium', className: classVarianceAuthority.cx(emptyState_module.default.emptyStateContent, classNames?.container), children: [jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.icon, emptyState_module.default.iconLarge, classNames?.icon), children: icon }) }), heading && (jsxRuntime.jsx(text.Text, { size: 5, weight: 500, className: classVarianceAuthority.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsx(text.Text, { size: 4, weight: 400, className: classVarianceAuthority.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading })), jsxRuntime.jsxs(flex.Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
+        return (jsxRuntime.jsx(flex.Flex, { align: 'center', justify: 'center', className: emptyState_module.default.emptyStatePage, ...props, children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', align: 'start', gap: 'medium', className: classVarianceAuthority.cx(emptyState_module.default.emptyStateContent, classNames?.container), children: [jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.icon, emptyState_module.default.iconLarge, classNames?.icon), children: icon }) }), heading && (jsxRuntime.jsx(text.Text, { size: 5, weight: 500, className: classVarianceAuthority.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsx(text.Text, { size: 4, weight: 400, className: classVarianceAuthority.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading })), jsxRuntime.jsxs(flex.Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
     }
-    return (jsxRuntime.jsxs(flex.Flex, { direction: 'column', align: 'center', gap: 'medium', className: classVarianceAuthority.cx(emptyState_module.default.emptyState, classNames?.container), children: [jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.icon, classNames?.icon), children: icon }) }), jsxRuntime.jsxs(flex.Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsxRuntime.jsx(text.Text, { size: 5, weight: 500, className: classVarianceAuthority.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsx(text.Text, { size: 4, weight: 400, className: classVarianceAuthority.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
-};
+    return (jsxRuntime.jsxs(flex.Flex, { direction: 'column', align: 'center', gap: 'medium', className: classVarianceAuthority.cx(emptyState_module.default.emptyState, classNames?.container), ...props, children: [jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.icon, classNames?.icon), children: icon }) }), jsxRuntime.jsxs(flex.Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsxRuntime.jsx(text.Text, { size: 5, weight: 500, className: classVarianceAuthority.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsx(text.Text, { size: 4, weight: 400, className: classVarianceAuthority.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
+}
+EmptyState.displayName = 'EmptyState';
 
 exports.EmptyState = EmptyState;
 //# sourceMappingURL=empty-state.cjs.map

package/dist/components/empty-state/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.cjs","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps {\n  icon: React.ReactNode;\n  heading?: React.ReactNode;\n  subHeading?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport const EmptyState = ({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1'\n}: EmptyStateProps) => {\n  if (variant === 'empty2') {\n    return (\n      <Flex align='center' justify='center' className={styles.emptyStatePage}>\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n};\n"],"names":["_jsx","Flex","styles","_jsxs","cx","Text"],"mappings":"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"}
+{"version":3,"file":"empty-state.cjs","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps extends ComponentProps<typeof Flex> {\n  icon: ReactNode;\n  heading?: ReactNode;\n  subHeading?: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryAction?: ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport function EmptyState({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1',\n  ...props\n}: EmptyStateProps) {\n  if (variant === 'empty2') {\n    return (\n      <Flex\n        align='center'\n        justify='center'\n        className={styles.emptyStatePage}\n        {...props}\n      >\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n      {...props}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n}\n\nEmptyState.displayName = 'EmptyState';\n"],"names":["_jsx","Flex","styles","_jsxs","cx","Text"],"mappings":"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"}

package/dist/components/empty-state/empty-state.d.ts

@@ -1,13 +1,18 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Flex } from '../flex';
 type classNameKeys = 'container' | 'iconContainer' | 'icon' | 'heading' | 'subHeading';
-interface EmptyStateProps {
-    icon: React.ReactNode;
-    heading?: React.ReactNode;
-    subHeading?: React.ReactNode;
-    primaryAction?: React.ReactNode;
-    secondaryAction?: React.ReactNode;
+interface EmptyStateProps extends ComponentProps<typeof Flex> {
+    icon: ReactNode;
+    heading?: ReactNode;
+    subHeading?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
     classNames?: Partial<Record<classNameKeys, string>>;
     variant?: 'empty1' | 'empty2';
 }
-export declare const EmptyState: ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare function EmptyState({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EmptyState {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../components/empty-state/empty-state.tsx"],"names":[],"mappings":"AAKA,KAAK,aAAa,GACd,WAAW,GACX,eAAe,GACf,MAAM,GACN,SAAS,GACT,YAAY,CAAC;AAEjB,UAAU,eAAe;IACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,uFAQpB,eAAe,4CAqFjB,CAAC"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../components/empty-state/empty-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,KAAK,aAAa,GACd,WAAW,GACX,eAAe,GACf,MAAM,GACN,SAAS,GACT,YAAY,CAAC;AAEjB,UAAU,eAAgB,SAAQ,cAAc,CAAC,OAAO,IAAI,CAAC;IAC3D,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,aAAa,EACb,eAAe,EACf,UAAU,EACV,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,eAAe,2CA2FjB;yBApGe,UAAU"}

package/dist/components/empty-state/empty-state.js

@@ -4,12 +4,13 @@ import { Flex } from '../flex/flex.js';
 import { Text } from '../text/text.js';
 import styles from './empty-state.module.css.js';
 
-const EmptyState = ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1' }) => {
+function EmptyState({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1', ...props }) {
     if (variant === 'empty2') {
-        return (jsx(Flex, { align: 'center', justify: 'center', className: styles.emptyStatePage, children: jsxs(Flex, { direction: 'column', align: 'start', gap: 'medium', className: cx(styles.emptyStateContent, classNames?.container), children: [jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsx("div", { className: cx(styles.icon, styles.iconLarge, classNames?.icon), children: icon }) }), heading && (jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading })), jsxs(Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
+        return (jsx(Flex, { align: 'center', justify: 'center', className: styles.emptyStatePage, ...props, children: jsxs(Flex, { direction: 'column', align: 'start', gap: 'medium', className: cx(styles.emptyStateContent, classNames?.container), children: [jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsx("div", { className: cx(styles.icon, styles.iconLarge, classNames?.icon), children: icon }) }), heading && (jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading })), jsxs(Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
     }
-    return (jsxs(Flex, { direction: 'column', align: 'center', gap: 'medium', className: cx(styles.emptyState, classNames?.container), children: [jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsx("div", { className: cx(styles.icon, classNames?.icon), children: icon }) }), jsxs(Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
-};
+    return (jsxs(Flex, { direction: 'column', align: 'center', gap: 'medium', className: cx(styles.emptyState, classNames?.container), ...props, children: [jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsx("div", { className: cx(styles.icon, classNames?.icon), children: icon }) }), jsxs(Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
+}
+EmptyState.displayName = 'EmptyState';
 
 export { EmptyState };
 //# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps {\n  icon: React.ReactNode;\n  heading?: React.ReactNode;\n  subHeading?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport const EmptyState = ({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1'\n}: EmptyStateProps) => {\n  if (variant === 'empty2') {\n    return (\n      <Flex align='center' justify='center' className={styles.emptyStatePage}>\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"empty-state.js","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps extends ComponentProps<typeof Flex> {\n  icon: ReactNode;\n  heading?: ReactNode;\n  subHeading?: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryAction?: ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport function EmptyState({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1',\n  ...props\n}: EmptyStateProps) {\n  if (variant === 'empty2') {\n    return (\n      <Flex\n        align='center'\n        justify='center'\n        className={styles.emptyStatePage}\n        {...props}\n      >\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n      {...props}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n}\n\nEmptyState.displayName = 'EmptyState';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/filter-chip/filter-chip.cjs

@@ -8,10 +8,9 @@ var React = require('react');
 var filters = require('../../types/filters.cjs');
 require('../calendar/calendar.cjs');
 var datePicker = require('../calendar/date-picker.cjs');
-require('dayjs');
+require('../calendar/range-picker.cjs');
 var flex = require('../flex/flex.cjs');
 var inputField = require('../input-field/input-field.cjs');
-require('../popover/popover.cjs');
 var select = require('../select/select.cjs');
 var text = require('../text/text.cjs');
 var filterChip_module = require('./filter-chip.module.css.cjs');

package/dist/components/filter-chip/filter-chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n  selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  selectProps,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n            {...selectProps}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}
+{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n  selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  selectProps,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n            {...selectProps}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}

package/dist/components/filter-chip/filter-chip.js

@@ -6,10 +6,9 @@ import { useState, useCallback } from 'react';
 import { filterOperators, FilterType } from '../../types/filters.js';
 import '../calendar/calendar.js';
 import { DatePicker } from '../calendar/date-picker.js';
-import 'dayjs';
+import '../calendar/range-picker.js';
 import { Flex } from '../flex/flex.js';
 import { InputField } from '../input-field/input-field.js';
-import '../popover/popover.js';
 import { Select } from '../select/select.js';
 import { Text } from '../text/text.js';
 import styles from './filter-chip.module.css.js';

package/dist/components/filter-chip/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n  selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  selectProps,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n            {...selectProps}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}
+{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n  selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  selectProps,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n            {...selectProps}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}

package/dist/components/flex/flex.cjs

@@ -2,7 +2,6 @@
 
 var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var flex_module = require('./flex.module.css.cjs');
 
 const flex = classVarianceAuthority.cva(flex_module.default.flex, {
@@ -58,7 +57,7 @@ const flex = classVarianceAuthority.cva(flex_module.default.flex, {
         wrap: 'noWrap'
     }
 });
-const Flex = React.forwardRef(({ direction, align, justify, wrap, gap, className, width, render, ...props }, ref) => {
+function Flex({ direction, align, justify, wrap, gap, className, width, render, ref, ...props }) {
     const flexProps = {
         className: flex({
             direction,
@@ -77,7 +76,8 @@ const Flex = React.forwardRef(({ direction, align, justify, wrap, gap, className
         props: react.mergeProps(flexProps, props)
     });
     return element;
-});
+}
+Flex.displayName = 'Flex';
 
 exports.Flex = Flex;
 //# sourceMappingURL=flex.cjs.map