@janbox/storefront-ui 1.0.12 → 1.0.14

package/dist/lib/countdown-timer/index.d.ts

@@ -1,3 +1,2 @@
 export * from './countdown-timer';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/countdown-timer/index.js

@@ -0,0 +1,2 @@
+export * from './countdown-timer';
+export * from './types';

package/dist/lib/countdown-timer/types.d.ts

@@ -2,4 +2,3 @@ import { TimeDiff, useCountdownTimer } from '../../hooks';
 export type CountdownTimerProps = Parameters<typeof useCountdownTimer>[0] & {
     children?: (timeDiff: TimeDiff) => React.ReactNode;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/countdown-timer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/date-picker/date-picker.css

@@ -0,0 +1,2 @@
+@import 'react-date-range/dist/styles.css';
+@import 'react-date-range/dist/theme/default.css';

package/dist/lib/date-picker/date-picker.d.ts

@@ -1,6 +1,6 @@
-import { default as React } from 'react';
+import './date-picker.css';
+import React from 'react';
 import { DatePickerProps } from './types';
 declare const DatePicker: (_props: DatePickerProps, ref?: React.ForwardedRef<HTMLButtonElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
 declare const ForwardRefDatePicker: typeof DatePicker;
 export { ForwardRefDatePicker as DatePicker };
-//# sourceMappingURL=date-picker.d.ts.map

package/dist/lib/date-picker/date-picker.jsx

@@ -0,0 +1,117 @@
+import './date-picker.css';
+import { forwardRef, useRef } from 'react';
+import dayjs from 'dayjs';
+import { isNil } from 'lodash-es';
+import { Calendar } from 'react-date-range';
+import { getDatePickerProps } from './helpers';
+import CalendarIcon from '../../assets/svg/calendar.svg?raw';
+import { getSizeVariantState } from '../../utils';
+import { Floating, FloatingContent, FloatingTrigger } from '../floating';
+import { FormHelperText } from '../form-helper-text';
+import { Icon } from '../icon';
+import { InputMask } from '../input-mask';
+import { TimePicker } from '../time-picker';
+import { useControllableState } from '../../hooks';
+import { getColorVar } from '../../theme';
+import CloseIcon from '../../assets/svg/times-close-delete.svg?raw';
+const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY';
+const DEFAULT_DATETIME_FORMAT = 'MM/DD/YYYY HH:mm';
+const DatePicker = (_props, ref) => {
+    const { value, defaultValue, onChange, placeholder, icon, format, minDate, maxDate, timePicker, clearable, onClear, helperText, error, containerProps, open, onOpenChange, placement = 'bottom-end', ...rest } = getDatePickerProps(_props);
+    const floatingRef = useRef(null);
+    const valueFormat = format ?? (timePicker ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATE_FORMAT);
+    const [selectedDate, setSelectedDate] = useControllableState({
+        defaultValue: defaultValue,
+        value,
+    });
+    const [isOpen, setIsOpen] = useControllableState({
+        defaultValue: open ?? false,
+        value: open,
+    });
+    const prehandleOpenChange = (nextOpen, event, reason) => {
+        setIsOpen(nextOpen);
+        onOpenChange?.(nextOpen, event, reason);
+    };
+    const handleChange = (date) => {
+        let preset = date;
+        if (timePicker) {
+            preset = dayjs(preset)
+                .set('hour', dayjs(selectedDate ?? new Date()).hour())
+                .set('minute', dayjs(selectedDate ?? new Date()).minute())
+                .toDate();
+        }
+        if (minDate && dayjs(preset).isBefore(minDate)) {
+            preset = minDate;
+        }
+        if (maxDate && dayjs(preset).isAfter(maxDate)) {
+            preset = maxDate;
+        }
+        setSelectedDate(preset);
+        onChange?.(preset);
+    };
+    const onChangeTime = (val) => {
+        const preset = dayjs(selectedDate ?? new Date())
+            .set('hour', dayjs(val).hour())
+            .set('minute', dayjs(val).minute())
+            .toDate();
+        setSelectedDate(preset);
+        onChange?.(preset);
+    };
+    const getCss = (sizeVariant) => {
+        if (isNil(sizeVariant))
+            return {};
+        return getSizeVariantState(sizeVariant);
+    };
+    const portalContentRenderer = () => (<div css={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            overflow: 'hidden',
+            borderRadius: 12,
+            backgroundColor: getColorVar('white'),
+            fontSize: '0.875rem',
+            lineHeight: '1.25rem',
+            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+            border: '1px solid',
+            borderColor: getColorVar('neutral.100'),
+        }}>
+      <Calendar onChange={handleChange} minDate={minDate} maxDate={maxDate} date={selectedDate ?? undefined}/>
+      {timePicker && (<div css={{ paddingLeft: 12, paddingRight: 12, paddingBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span css={{ fontSize: '0.75rem', lineHeight: '1rem' }}>Time:</span>
+          <TimePicker onChange={onChangeTime} placement="top" xs={{ size: 'xs' }} value={selectedDate}/>
+        </div>)}
+    </div>);
+    const handleClear = (e) => {
+        e.stopPropagation();
+        onClear?.();
+    };
+    const getSuffix = () => {
+        if (icon) {
+            return icon;
+        }
+        if (selectedDate && clearable) {
+            return (<Icon source={CloseIcon} css={{ color: rest.disabled ? 'var(--ic-ink-4s)' : 'var(--ic-ink-5s)' }} xs={{ size: getCss(rest.xs?.size).iconSize }} onClick={handleClear}/>);
+        }
+        return (<Icon source={CalendarIcon} xs={{ size: getCss(rest.xs?.size).iconSize }} css={{ color: rest.disabled ? 'var(--ic-ink-4s)' : 'var(--ic-ink-5s)' }}/>);
+    };
+    return (<div {...containerProps} css={{ display: 'flex', flexDirection: 'column', width: '100%', ...containerProps?.css }}>
+      <Floating clickProps={{
+            enabled: true,
+        }} dismissProps={{
+            enabled: true,
+        }} placement={placement} open={isOpen} onOpenChange={prehandleOpenChange} ref={floatingRef}>
+        <FloatingTrigger>
+          <InputMask type="button" error={isOpen ? false : error} as="button" suffix={getSuffix()} {...rest} ref={ref}>
+            <div css={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {!selectedDate && !!placeholder && <span css={{ color: getColorVar('neutral.400') }}>{placeholder}</span>}
+              {!!selectedDate && <span>{dayjs(selectedDate).format(valueFormat)}</span>}
+            </div>
+          </InputMask>
+        </FloatingTrigger>
+        <FloatingContent>{portalContentRenderer()}</FloatingContent>
+      </Floating>
+      <FormHelperText error={error}>{helperText}</FormHelperText>
+    </div>);
+};
+const ForwardRefDatePicker = forwardRef(DatePicker);
+export { ForwardRefDatePicker as DatePicker };

package/dist/lib/date-picker/helpers.d.ts

@@ -1,3 +1,2 @@
 import { DatePickerProps } from './types';
 export declare const getDatePickerProps: (extended: DatePickerProps) => DatePickerProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/date-picker/helpers.js

@@ -1,12 +1,9 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+    xs: {
+        size: 'md',
+    },
 };
-const getDatePickerProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getDatePickerProps
+export const getDatePickerProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/date-picker/index.d.ts

@@ -1,4 +1,3 @@
 export * from './date-picker';
 export * from './helpers';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/date-picker/index.js

@@ -0,0 +1,3 @@
+export * from './date-picker';
+export * from './helpers';
+export * from './types';

package/dist/lib/date-picker/types.d.ts

@@ -36,4 +36,3 @@ type DatePickerBaseProps = {
 };
 export type DatePickerProps = DatePickerBaseProps & ResponsiveDesign<DateResponsiveProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/date-picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/dialog/dialog/dialog.d.ts

@@ -1,3 +1,2 @@
 import { DialogProps } from './types';
 export declare const Dialog: (_props: DialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=dialog.d.ts.map

package/dist/lib/dialog/dialog/dialog.jsx

@@ -0,0 +1,65 @@
+import { getDialogProps, getDialogSizeInNumber } from './helpers';
+import { Floating, FloatingContent } from '../../..';
+import { getColorVar, FLOATING_Z_INDEX, mediaQuery } from '../../../theme';
+export const Dialog = (_props) => {
+    const { xs, sm, md, lg, children, ...props } = getDialogProps(_props);
+    return (<Floating dismissProps={{
+            enabled: true,
+        }} {...props}>
+      <FloatingContent floatingOverlayProps={{
+            disabled: false,
+            css: {
+                display: 'grid',
+                placeItems: 'center',
+                padding: '1rem',
+                [mediaQuery('sm')]: { padding: '1.25rem' },
+                [mediaQuery('md')]: { padding: '1.5rem' },
+            },
+            lockScroll: true,
+            style: {
+                zIndex: FLOATING_Z_INDEX,
+            },
+        }} css={{
+            maxHeight: '100%',
+            maxWidth: '100%',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+        }}>
+        <div css={{
+            backdropFilter: 'blur(2px)',
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            pointerEvents: 'none',
+        }}/>
+        <div css={[
+            {
+                width: getDialogSizeInNumber(xs?.size),
+                backgroundColor: getColorVar('surface.default'),
+                maxWidth: '100%',
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+                borderRadius: '0.5rem',
+                paddingTop: '0.5rem',
+                paddingBottom: '0.5rem',
+                position: 'relative',
+            },
+            {
+                [mediaQuery('sm')]: {
+                    width: getDialogSizeInNumber(sm?.size),
+                },
+                [mediaQuery('md')]: {
+                    width: getDialogSizeInNumber(md?.size),
+                },
+                [mediaQuery('lg')]: {
+                    width: getDialogSizeInNumber(lg?.size),
+                },
+            },
+        ]}>
+          {children}
+        </div>
+      </FloatingContent>
+    </Floating>);
+};

package/dist/lib/dialog/dialog/helpers.d.ts

@@ -1,5 +1,4 @@
 import { DialogProps, DialogSize } from './types';
 export declare const getDialogProps: (extended: DialogProps) => DialogProps;
 export declare const getDialogSizeInNumber: (size?: DialogSize) => number | undefined;
-export declare const useDialogContext: () => import('../../floating').FloatingContextValue;
-//# sourceMappingURL=helpers.d.ts.map
+export declare const useDialogContext: () => import("../../floating").FloatingContextValue;

package/dist/lib/dialog/dialog/helpers.js

@@ -1,27 +1,21 @@
-import { isString } from "lodash-es";
-import { breakpoint } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
-import { mergeComponentProps } from "../../../utils/index.js";
-import { useFloatingContext } from "../../floating/floating/helpers.js";
+import { isString } from 'lodash-es';
+import { useFloatingContext } from '../../floating';
+import { breakpoint } from '../../../theme';
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {
-  xs: {
-    size: "sm"
-  }
+    xs: {
+        size: 'sm',
+    },
 };
-const getDialogProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
+export const getDialogProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };
-const getDialogSizeInNumber = (size) => {
-  if (isString(size)) {
-    return size === "xs" ? 480 : breakpoint[size].minWidth;
-  }
-  return size;
+export const getDialogSizeInNumber = (size) => {
+    if (isString(size)) {
+        return size === 'xs' ? 480 : breakpoint[size].minWidth;
+    }
+    return size;
 };
-const useDialogContext = () => {
-  return useFloatingContext();
-};
-export {
-  getDialogProps,
-  getDialogSizeInNumber,
-  useDialogContext
+export const useDialogContext = () => {
+    return useFloatingContext();
 };

package/dist/lib/dialog/dialog/index.d.ts

@@ -1,4 +1,3 @@
 export * from './dialog';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog/index.js

@@ -0,0 +1,3 @@
+export * from './dialog';
+export * from './types';
+export * from './helpers';

package/dist/lib/dialog/dialog/types.d.ts

@@ -1,8 +1,7 @@
 import { FloatingProps } from '../../floating';
-import { breakpoint } from '../../../theme';
+import { type breakpoint } from '../../../theme';
 import { ResponsiveDesign, ShallowMerge } from '../../../types';
 export type DialogSize = keyof typeof breakpoint | number;
 export type DialogProps = ShallowMerge<FloatingProps, ResponsiveDesign<{
     size?: DialogSize;
 }>>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/dialog/dialog-body/dialog-body.d.ts

@@ -1,3 +1,2 @@
 import { DialogBodyProps } from './types';
 export declare const DialogBody: (props: DialogBodyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=dialog-body.d.ts.map

package/dist/lib/dialog/dialog-body/dialog-body.jsx

@@ -0,0 +1,15 @@
+import { ScrollView } from '../../../components';
+import { mediaQuery } from '../../../theme';
+export const DialogBody = (props) => {
+    return (<ScrollView css={{
+            flex: '1 1 0%',
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
+            overflow: 'auto',
+            '&:first-of-type': { paddingTop: '0.75rem' },
+            '&:last-of-type': { paddingBottom: '0.75rem' },
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            [mediaQuery('sm')]: { paddingLeft: '1.25rem', paddingRight: '1.25rem' },
+        }} {...props}/>);
+};

package/dist/lib/dialog/dialog-body/index.d.ts

@@ -1,3 +1,2 @@
 export * from './dialog-body';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog-body/index.js

@@ -0,0 +1,2 @@
+export * from './dialog-body';
+export * from './types';

package/dist/lib/dialog/dialog-body/types.d.ts

@@ -1,4 +1,3 @@
 import { ScrollViewProps } from '../../../components';
 import { ShallowMerge } from '../../../types';
 export type DialogBodyProps = ShallowMerge<ScrollViewProps, {}>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog-body/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/dialog/dialog-close/dialog-close.d.ts

@@ -1,2 +1 @@
-export declare const DialogClose: import('react').ForwardRefExoticComponent<Omit<import('../../floating').FloatingCloseProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=dialog-close.d.ts.map
+export declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<import("../../floating").FloatingCloseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib/dialog/dialog-close/dialog-close.jsx

@@ -0,0 +1,2 @@
+import { FloatingClose } from '../../floating';
+export const DialogClose = FloatingClose;

package/dist/lib/dialog/dialog-close/index.d.ts

@@ -1,3 +1,2 @@
 export * from './dialog-close';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog-close/index.js

@@ -0,0 +1,2 @@
+export * from './dialog-close';
+export * from './types';

package/dist/lib/dialog/dialog-close/types.d.ts

@@ -1,3 +1,2 @@
 import { FloatingCloseProps } from '../../floating';
 export type DialogCloseProps = FloatingCloseProps;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog-close/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/dialog/dialog-footer/dialog-footer.d.ts

@@ -1,3 +1,2 @@
 import { DialogFooterProps } from './types';
 export declare const DialogFooter: (props: DialogFooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=dialog-footer.d.ts.map

package/dist/lib/dialog/dialog-footer/dialog-footer.jsx

@@ -0,0 +1,14 @@
+import { mediaQuery } from '../../../theme';
+export const DialogFooter = (props) => {
+    return (<div css={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '0.5rem',
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            position: 'relative',
+            [mediaQuery('sm')]: { paddingLeft: '1.25rem', paddingRight: '1.25rem' },
+        }} {...props}/>);
+};

package/dist/lib/dialog/dialog-footer/index.d.ts

@@ -1,3 +1,2 @@
 export * from './dialog-footer';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog-footer/index.js

@@ -0,0 +1,2 @@
+export * from './dialog-footer';
+export * from './types';

package/dist/lib/dialog/dialog-footer/types.d.ts

@@ -1,4 +1,3 @@
 import { HTMLAttributes } from 'react';
 export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog-footer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/dialog/dialog-header/dialog-header.d.ts

@@ -1,3 +1,2 @@
 import { DialogHeaderProps } from './types';
 export declare const DialogHeader: ({ children, closeable, ...props }: DialogHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=dialog-header.d.ts.map

package/dist/lib/dialog/dialog-header/dialog-header.jsx

@@ -0,0 +1,43 @@
+import { IconButton } from '../../icon-button';
+import { DialogClose } from '../dialog-close';
+import CloseIcon from '../../../assets/svg/times-close-delete.svg?raw';
+import { getTypographyVar, mediaQuery } from '../../../theme';
+export const DialogHeader = ({ children, closeable = true, ...props }) => {
+    return (<div css={[
+            {
+                paddingTop: '0.5rem',
+                paddingBottom: '0.5rem',
+                paddingLeft: '1rem',
+                paddingRight: '1rem',
+                gap: '0.5rem',
+                position: 'relative',
+                fontSize: getTypographyVar('lg').fontSize,
+                lineHeight: getTypographyVar('lg').lineHeight,
+                fontWeight: 500,
+                [mediaQuery('sm')]: {
+                    paddingLeft: '1.25rem',
+                    paddingRight: '1.25rem',
+                    fontSize: getTypographyVar('xl').fontSize,
+                    lineHeight: getTypographyVar('xl').lineHeight,
+                },
+            },
+            closeable && { paddingRight: '3rem' },
+        ]} {...props}>
+      {children}
+      {closeable && (<DialogClose>
+          <div css={{
+                position: 'absolute',
+                right: '0.5rem',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                [mediaQuery('sm')]: { right: '0.75rem' },
+            }}>
+            <IconButton xs={{
+                size: 'sm',
+            }} color="neutral" icon={{
+                source: CloseIcon,
+            }}/>
+          </div>
+        </DialogClose>)}
+    </div>);
+};

package/dist/lib/dialog/dialog-header/index.d.ts

@@ -1,3 +1,2 @@
 export * from './dialog-header';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog-header/index.js

@@ -0,0 +1,2 @@
+export * from './dialog-header';
+export * from './types';

package/dist/lib/dialog/dialog-header/types.d.ts

@@ -2,4 +2,3 @@ import { HTMLAttributes } from 'react';
 export interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
     closeable?: boolean;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog-header/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/dialog/index.d.ts

@@ -3,4 +3,3 @@ export * from './dialog-body';
 export * from './dialog-close';
 export * from './dialog-footer';
 export * from './dialog-header';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/index.js

@@ -0,0 +1,5 @@
+export * from './dialog';
+export * from './dialog-body';
+export * from './dialog-close';
+export * from './dialog-footer';
+export * from './dialog-header';

package/dist/lib/drawer/drawer/drawer.d.ts

@@ -1,3 +1,2 @@
 import { DrawerProps } from './types';
 export declare const Drawer: ({ children, placement, ...props }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=drawer.d.ts.map

package/dist/lib/drawer/drawer/drawer.jsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { motion } from 'motion/react';
+import { FLOATING_Z_INDEX } from '../../../theme';
+import { Floating, FloatingContent } from '../../..';
+export const Drawer = ({ children, placement = 'left', ...props }) => {
+    const initial = useMemo(() => {
+        switch (placement) {
+            case 'left':
+                return { x: '-100%' };
+            case 'right':
+                return { x: '100%' };
+            case 'top':
+                return { y: '-100%' };
+            case 'bottom':
+                return { y: '100%' };
+        }
+    }, [placement]);
+    const animate = useMemo(() => {
+        switch (placement) {
+            case 'left':
+            case 'right':
+                return { x: 0 };
+            case 'top':
+            case 'bottom':
+                return { y: 0 };
+        }
+    }, [placement]);
+    return (<Floating dismissProps={{
+            enabled: true,
+        }} {...props}>
+      <FloatingContent floatingOverlayProps={{
+            disabled: false,
+            lockScroll: true,
+            style: {
+                zIndex: FLOATING_Z_INDEX,
+            },
+        }} css={{
+            maxHeight: '100%',
+            maxWidth: '100%',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+        }}>
+        <div css={{
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            pointerEvents: 'none',
+        }}/>
+
+        <motion.div initial={initial} animate={animate} exit={initial} transition={{
+            duration: 0.2,
+            ease: 'easeInOut',
+        }} css={[
+            {
+                position: 'fixed',
+                backgroundColor: 'white',
+            },
+            placement === 'left' && { top: 0, bottom: 0, left: 0 },
+            placement === 'right' && { top: 0, bottom: 0, right: 0 },
+            placement === 'top' && { left: 0, right: 0, top: 0 },
+            placement === 'bottom' && { left: 0, right: 0, bottom: 0 },
+        ]}>
+          {children}
+        </motion.div>
+      </FloatingContent>
+    </Floating>);
+};

package/dist/lib/drawer/drawer/helpers.d.ts

@@ -1,2 +1 @@
-export declare const useDrawerContext: () => import('../../floating').FloatingContextValue;
-//# sourceMappingURL=helpers.d.ts.map
+export declare const useDrawerContext: () => import("../../floating").FloatingContextValue;

package/dist/lib/drawer/drawer/helpers.js

@@ -1,7 +1,4 @@
-import { useFloatingContext } from "../../floating/floating/helpers.js";
-const useDrawerContext = () => {
-  return useFloatingContext();
-};
-export {
-  useDrawerContext
+import { useFloatingContext } from '../../floating';
+export const useDrawerContext = () => {
+    return useFloatingContext();
 };

package/dist/lib/drawer/drawer/index.d.ts

@@ -1,4 +1,3 @@
 export * from './drawer';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map