@box/blueprint-web 5.31.3

package/lib-esm/side-panel/scroll-context.d.ts

@@ -0,0 +1,11 @@
+import { type UIEvent } from 'react';
+type ScrollContextType = {
+    isScrolledUnderHeader: boolean;
+    isScrolledUnderFooter: boolean;
+    onScroll: (event: UIEvent<HTMLDivElement>) => void;
+};
+export declare const ScrollProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.ReactElement;
+export declare function useScrollContext(): ScrollContextType;
+export {};

package/lib-esm/side-panel/scroll-context.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import noop from 'lodash/noop';
+import { useState, useCallback, useMemo, useContext, createContext } from 'react';
+
+const ScrollContext = /*#__PURE__*/createContext({
+  isScrolledUnderFooter: false,
+  isScrolledUnderHeader: false,
+  onScroll: noop
+});
+const ScrollProvider = ({
+  children
+}) => {
+  const [isScrolledUnderHeader, setScrolledUnderHeader] = useState(false);
+  const [isScrolledUnderFooter, setScrolledUnderFooter] = useState(false);
+  const onScroll = useCallback(event => {
+    const scroll = event.currentTarget.scrollTop;
+    setScrolledUnderHeader(scroll > 0);
+    const {
+      scrollHeight,
+      offsetHeight
+    } = event.currentTarget;
+    const scrolledToBottom = scroll >= scrollHeight - offsetHeight;
+    setScrolledUnderFooter(!scrolledToBottom);
+  }, []);
+  const value = useMemo(() => ({
+    isScrolledUnderFooter,
+    isScrolledUnderHeader,
+    onScroll
+  }), [isScrolledUnderFooter, isScrolledUnderHeader, onScroll]);
+  return jsx(ScrollContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+function useScrollContext() {
+  const context = useContext(ScrollContext);
+  if (context === undefined) {
+    throw new Error('useScroll must be used with ScrollProvider');
+  }
+  return context;
+}
+
+export { ScrollProvider, useScrollContext };

package/lib-esm/side-panel/side-panel-close.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type SidePanelCloseProps } from './types';
+/**
+ * The button that closes the SidePanel.
+ */
+export declare const SidePanelClose: import("react").ForwardRefExoticComponent<SidePanelCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default SidePanelClose;

package/lib-esm/side-panel/side-panel-close.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { XMark } from '@box/blueprint-web-assets/icons/Fill';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import styles from './side-panel.module.js';
+
+/**
+ * The button that closes the SidePanel.
+ */
+const SidePanelClose = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
+  icon,
+  ...rest
+}, forwardedRef) => jsx(RadixDialog.Close, {
+  ref: forwardedRef,
+  asChild: true,
+  children: jsx(IconButton, {
+    "aria-label": ariaLabel,
+    className: styles.close,
+    icon: icon || XMark,
+    ...rest
+  })
+}));
+
+export { SidePanelClose, SidePanelClose as default };

package/lib-esm/side-panel/side-panel-content.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import * as RadixDialog from '@radix-ui/react-dialog';
+/**
+ * Contains content to be rendered in the open SidePanel in Overlay view.
+ */
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Contains content to be rendered in the open SidePanel in Persistent view.
+ */
+export declare const SidePanelPersistentContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default SidePanelContent;

package/lib-esm/side-panel/side-panel-content.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './side-panel.module.js';
+import { useVariant } from './variant-context.js';
+
+/**
+ * Contains content to be rendered in the open SidePanel in Overlay view.
+ */
+const SidePanelContent = /*#__PURE__*/forwardRef(({
+  asChild = false,
+  children,
+  className,
+  ...props
+}, forwardedRef) => {
+  const variant = useVariant();
+  return jsx(RadixDialog.Content, {
+    ...props,
+    ref: forwardedRef,
+    asChild: asChild,
+    className: clsx(styles.content, styles.contentAnimated, {
+      [styles.dropShadowContent]: variant === 'dropShadowOverlay'
+    }, className),
+    children: children
+  });
+});
+/**
+ * Contains content to be rendered in the open SidePanel in Persistent view.
+ */
+const SidePanelPersistentContent = /*#__PURE__*/forwardRef(({
+  children,
+  ...props
+}, forwardedRef) => jsx("div", {
+  ref: forwardedRef,
+  className: styles.content,
+  ...props,
+  children: children
+}));
+
+export { SidePanelContent, SidePanelPersistentContent, SidePanelContent as default };

package/lib-esm/side-panel/side-panel-footer.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import { type SidePanelFooterProps } from './types';
+/**
+ * Wrapper for buttons in the footer of the SidePanel.
+ * Exposes primary and secondary buttons most commonly used inside footer of the SidePanel.
+ */
+export declare const SidePanelFooter: import("react").ForwardRefExoticComponent<Omit<SidePanelFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children?: string | string[] | undefined;
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, never>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children?: string | string[] | undefined;
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    SecondaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children?: string | string[] | undefined;
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, never>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children?: string | string[] | undefined;
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export default SidePanelFooter;

package/lib-esm/side-panel/side-panel-footer.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Button } from '../basics/button/button.js';
+import { useScrollContext } from './scroll-context.js';
+import styles from './side-panel.module.js';
+
+const SidePanelFooterComponent = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, forwardedRef) => {
+  const {
+    isScrolledUnderFooter
+  } = useScrollContext();
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.footer, {
+      [styles.footerShadow]: isScrolledUnderFooter
+    }, className),
+    children: children
+  });
+});
+const PrimaryButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(Button, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.footerButton, className),
+    variant: "primary",
+    children: children
+  });
+});
+const SecondaryButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(Button, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.footerButton, className),
+    variant: "secondary",
+    children: children
+  });
+});
+/**
+ * Wrapper for buttons in the footer of the SidePanel.
+ * Exposes primary and secondary buttons most commonly used inside footer of the SidePanel.
+ */
+const SidePanelFooter = Object.assign(SidePanelFooterComponent, {
+  PrimaryButton,
+  SecondaryButton
+});
+
+export { SidePanelFooter, SidePanelFooter as default };

package/lib-esm/side-panel/side-panel-header.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type SidePanelHeaderProps } from './types';
+/**
+ * Header of the SidePanel
+ */
+export declare const SidePanelHeader: import("react").ForwardRefExoticComponent<Omit<SidePanelHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export default SidePanelHeader;

package/lib-esm/side-panel/side-panel-header.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Text } from '../text/text.js';
+import { useMobile } from '../utils/useMobile.js';
+import { useScrollContext } from './scroll-context.js';
+import styles from './side-panel.module.js';
+import { useVariant } from './variant-context.js';
+
+const BaseSidePanelHeader = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, forwardedRef) => {
+  return jsx(Text, {
+    ...rest,
+    ref: forwardedRef,
+    as: "h2",
+    className: clsx(styles.header, className),
+    color: "textOnLightDefault",
+    variant: "titleLarge",
+    children: children
+  });
+});
+/**
+ * Header of the SidePanel
+ */
+const SidePanelHeader = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, forwardedRef) => {
+  const {
+    isScrolledUnderHeader
+  } = useScrollContext();
+  const isMobile = useMobile();
+  const variant = useVariant();
+  const classes = clsx({
+    [styles.headerShadow]: isScrolledUnderHeader,
+    [styles.headerMobile]: isMobile
+  }, className);
+  if (variant === 'overlay' || variant === 'dropShadowOverlay') {
+    return jsx(RadixDialog.Title, {
+      ...rest,
+      ref: forwardedRef,
+      asChild: true,
+      className: classes,
+      children: jsx(BaseSidePanelHeader, {
+        children: children
+      })
+    });
+  }
+  return jsx(BaseSidePanelHeader, {
+    ref: forwardedRef,
+    className: classes,
+    ...rest,
+    children: children
+  });
+});
+
+export { SidePanelHeader, SidePanelHeader as default };

package/lib-esm/side-panel/side-panel-overlay.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as RadixDialog from '@radix-ui/react-dialog';
+/**
+ * A layer that covers the inert portion of the view when the dialog is open.
+ */
+export declare const SidePanelOverlay: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & Pick<RadixDialog.DialogPortalProps, "container">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/side-panel/side-panel-overlay.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './side-panel.module.js';
+import { useVariant } from './variant-context.js';
+
+/**
+ * A layer that covers the inert portion of the view when the dialog is open.
+ */
+const SidePanelOverlay = /*#__PURE__*/forwardRef(({
+  children,
+  container,
+  className,
+  ...props
+}, forwardedRef) => {
+  const variant = useVariant();
+  return jsx(RadixDialog.Portal, {
+    container: container,
+    children: jsx(RadixDialog.Overlay, {
+      ref: forwardedRef,
+      className: clsx(styles.overlay, {
+        [styles.dropShadowOverlay]: variant === 'dropShadowOverlay'
+      }, className),
+      ...props,
+      children: children
+    })
+  });
+});
+
+export { SidePanelOverlay };

package/lib-esm/side-panel/side-panel-scrollable-container.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type SidePanelScrollableContainerProps } from './types';
+/**
+ * Wrapper for the contents of the SidePanel.
+ * This element is scrollable when the size of the content would make the SidePanel not fit on the screen.
+ */
+export declare const SidePanelScrollableContainer: import("react").ForwardRefExoticComponent<Omit<SidePanelScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default SidePanelScrollableContainer;

package/lib-esm/side-panel/side-panel-scrollable-container.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import { useScrollContext } from './scroll-context.js';
+import styles from './side-panel.module.js';
+
+/**
+ * Wrapper for the contents of the SidePanel.
+ * This element is scrollable when the size of the content would make the SidePanel not fit on the screen.
+ */
+const SidePanelScrollableContainer = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, forwardedRef) => {
+  const {
+    onScroll
+  } = useScrollContext();
+  const scrollableContainerRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => scrollableContainerRef.current);
+  useEffect(() => {
+    if (scrollableContainerRef.current) {
+      scrollableContainerRef.current.scrollTo({
+        top: 0.5
+      });
+      scrollableContainerRef.current.scrollTo({
+        top: 0
+      });
+    }
+  }, []);
+  return jsx("div", {
+    ...rest,
+    ref: scrollableContainerRef,
+    className: clsx(styles.scrollableContainer, className),
+    onScroll: onScroll,
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0,
+    children: children
+  });
+});
+
+export { SidePanelScrollableContainer, SidePanelScrollableContainer as default };

package/lib-esm/side-panel/side-panel.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import { type SidePanelProps } from './types';
+export declare const SidePanel: ((props: SidePanelProps) => JSX.Element | null) & {
+    Close: import("react").ForwardRefExoticComponent<import("./types").SidePanelCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+        PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children?: string | string[] | undefined;
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, never>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children?: string | string[] | undefined;
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+        SecondaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children?: string | string[] | undefined;
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, never>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children?: string | string[] | undefined;
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    Header: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Overlay: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    } & Pick<import("@radix-ui/react-dialog").DialogPortalProps, "container">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default SidePanel;

package/lib-esm/side-panel/side-panel.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { Root as Root$1 } from '@radix-ui/react-dialog';
+import { ScrollProvider } from './scroll-context.js';
+import { SidePanelClose } from './side-panel-close.js';
+import { SidePanelContent, SidePanelPersistentContent } from './side-panel-content.js';
+import { SidePanelFooter } from './side-panel-footer.js';
+import { SidePanelHeader } from './side-panel-header.js';
+import { SidePanelOverlay } from './side-panel-overlay.js';
+import { SidePanelScrollableContainer } from './side-panel-scrollable-container.js';
+import { VariantProvider } from './variant-context.js';
+
+const Root = props => {
+  const {
+    variant,
+    children,
+    ...restProps
+  } = props;
+  if (variant === 'persistent') {
+    return jsx(SidePanelPersistentContent, {
+      ...restProps,
+      children: jsx(VariantProvider, {
+        variant: variant,
+        children: jsx(ScrollProvider, {
+          children: children
+        })
+      })
+    });
+  }
+  if (variant === 'overlay' || variant === 'dropShadowOverlay') {
+    return jsx(Root$1, {
+      ...restProps,
+      modal: true,
+      children: jsx(VariantProvider, {
+        variant: variant,
+        children: jsx(ScrollProvider, {
+          children: children
+        })
+      })
+    });
+  }
+  return null;
+};
+const SidePanel = Object.assign(Root, {
+  Close: SidePanelClose,
+  Content: SidePanelContent,
+  Footer: SidePanelFooter,
+  Header: SidePanelHeader,
+  ScrollableContainer: SidePanelScrollableContainer,
+  Overlay: SidePanelOverlay
+});
+
+export { SidePanel, SidePanel as default };

package/lib-esm/side-panel/side-panel.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"overlay":"side-panel-module_overlay__-aLwG","dropShadowOverlay":"side-panel-module_dropShadowOverlay__xUen7","content":"side-panel-module_content__YsFqp","header":"side-panel-module_header__aW-RR","headerMobile":"side-panel-module_headerMobile__irfPh","headerShadow":"side-panel-module_headerShadow__ko64d","contentAnimated":"side-panel-module_contentAnimated__9q97i","slideIn":"side-panel-module_slideIn__HFq2t","dropShadowContent":"side-panel-module_dropShadowContent__PdzWi","close":"side-panel-module_close__UCb8C","scrollableContainer":"side-panel-module_scrollableContainer__fLJLh","footer":"side-panel-module_footer__vSEh4","footerShadow":"side-panel-module_footerShadow__VRKaG","footerButton":"side-panel-module_footerButton__tuPid"};
+
+export { styles as default };

package/lib-esm/side-panel/types.d.ts

@@ -0,0 +1,38 @@
+import { type DialogContentProps, type DialogPortalProps, type DialogProps } from '@radix-ui/react-dialog';
+import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type ReactNode, type SVGProps } from 'react';
+/**
+ * 'persistent' - side panel is displayed inline with the page content
+ *
+ * 'overlay' - side panel is displayed over the page content on a darkened overlay
+ *
+ * 'dropShadowOverlay' - side panel is displayed over the page content on a transparent overlay
+ */
+export type SidePanelVariant = 'persistent' | 'overlay' | 'dropShadowOverlay';
+export type SidePanelProps = (SidePanelPersistentProps | SidePanelOverlayProps) & {
+    variant: SidePanelVariant;
+};
+export type SidePanelPersistentProps = ComponentPropsWithRef<'div'> & {
+    variant: 'persistent';
+};
+export type SidePanelOverlayProps = DialogProps;
+export type SidePanelOverlayComponentProps = ComponentPropsWithRef<'div'> & Pick<DialogPortalProps, 'container'>;
+export type SidePanelContentProps = DialogContentProps;
+export type SidePanelPersistentContentProps = ComponentPropsWithRef<'div'>;
+export interface SidePanelCloseProps {
+    /** The aria-label for the Close element */
+    'aria-label': string;
+    /** Custom icon for Close element */
+    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+}
+export interface SidePanelScrollableContainerProps extends ComponentPropsWithRef<'div'> {
+    /** Content of the ScrollableContainer element */
+    children: ReactNode;
+}
+export interface SidePanelFooterProps extends ComponentPropsWithRef<'div'> {
+    /** Content of the Footer element */
+    children: ReactNode;
+}
+export interface SidePanelHeaderProps extends ComponentPropsWithRef<'h2'> {
+    /** Content of the Header element */
+    children: ReactNode;
+}

package/lib-esm/side-panel/variant-context.d.ts

@@ -0,0 +1,6 @@
+import { type SidePanelVariant } from './types';
+export declare const VariantProvider: ({ children, variant, }: {
+    children: React.ReactNode;
+    variant: SidePanelVariant;
+}) => React.ReactElement;
+export declare function useVariant(): SidePanelVariant;

package/lib-esm/side-panel/variant-context.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext } from 'react';
+
+const VariantContext = /*#__PURE__*/createContext('persistent');
+const VariantProvider = ({
+  children,
+  variant
+}) => {
+  return jsx(VariantContext.Provider, {
+    value: variant,
+    children: children
+  });
+};
+function useVariant() {
+  const context = useContext(VariantContext);
+  if (context === undefined) {
+    throw new Error('useVariant must be used with VariantProvider');
+  }
+  return context;
+}
+
+export { VariantProvider, useVariant };

package/lib-esm/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './slider';
+export { type SliderIncrementerProps, type SliderProps } from './types';

package/lib-esm/slider/slider-incrementer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type SliderIncrementerProps } from './types';
+export declare const SliderIncrementer: {
+    ({ children, disabled, max, min, minusButtonLabel, minusButtonTooltipContent, plusButtonLabel, plusButtonTooltipContent, setValue, step, value, }: SliderIncrementerProps): JSX.Element;
+    displayName: string;
+};