@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/lib/textarea/textarea.module.scss

@@ -0,0 +1,50 @@
+.textarea__container {
+  position: relative;
+  width: 100%;
+}
+
+.textarea__main {
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.5rem;
+
+  &:has(textarea[aria-invalid]) {
+    border-color: var(--color-red-600);
+  }
+
+  &:hover {
+    border-color: var(--color-primary-300);
+  }
+
+  &:has(textarea:focus) {
+    outline: none;
+    border-color: var(--color-primary-600);
+    box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
+  }
+
+  &:has(textarea:read-only) {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &:has(textarea:disabled) {
+    background-color: var(--color-neutral-300);
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-300);
+    pointer-events: none;
+  }
+}
+
+.textarea__control {
+  width: 100%;
+  background-color: transparent;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: var(--color-neutral-400);
+  }
+}

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

@@ -16,4 +16,3 @@ interface TextareaExtendedProps extends ResponsiveDesign<TextareaResponsiveProps
 }
 export type TextareaProps = ShallowMerge<JSX.IntrinsicElements['textarea'], TextareaExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/textarea/types.js

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './time-picker';
+export * from './types';

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

@@ -1,3 +1,2 @@
 import { TimePickerProps } from './types';
 export declare const TimePicker: ({ placeholder, onChange, defaultValue, value, clearable, onClear, containerProps, placement, open, onOpenChange, disabled, ...rest }: TimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=time-picker.d.ts.map

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

@@ -0,0 +1,213 @@
+import { useCallback, useRef, useState } from 'react';
+import dayjs from 'dayjs';
+import { isNil, uniqueId } from 'lodash-es';
+import { useWindowScreen } from '../../hooks';
+import { getResponsiveProp, getSizeVariantState } from '../../utils';
+import { Floating, FloatingContent, FloatingTrigger } from '../floating';
+import { Icon } from '../icon';
+import { VirtualizedList } from '../../components';
+import { useControllableState } from '../../hooks';
+import CloseIcon from '@/assets/svg/times-close-delete.svg?raw';
+import ClockIcon from '@/assets/svg/clock-time.svg?raw';
+import { mediaQuery, getTypographyVar } from '../../theme';
+const TIME_FORMAT = 'HH:mm';
+// const ITEM_SIZE = 28;
+// const DISPLAY_ITEMS = 5;
+export const TimePicker = ({ placeholder = '--:--', onChange, defaultValue, value, clearable, onClear, containerProps, placement = 'bottom-start', open, onOpenChange, disabled, ...rest }) => {
+    const floatingRef = useRef(null);
+    const windowScreen = useWindowScreen();
+    const responsiveSize = isNil(windowScreen.name) ? undefined : getResponsiveProp(rest, 'size', windowScreen.name);
+    const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
+    const [isOpen, setIsOpen] = useControllableState({
+        defaultValue: open ?? false,
+        value: open,
+    });
+    const [selectedDate, setSelectedDate] = useControllableState({
+        defaultValue: defaultValue,
+        value,
+    });
+    const [hours] = useState(Array.from({ length: 24 }, (_, index) => ({
+        value: index,
+        label: index.toString().padStart(2, '0'),
+    })));
+    const [minutes] = useState(Array.from({ length: 60 }, (_, index) => ({
+        value: index,
+        label: index.toString().padStart(2, '0'),
+    })));
+    const prehandleOpenChange = (nextOpen, event, reason) => {
+        setIsOpen(nextOpen);
+        onOpenChange?.(nextOpen, event, reason);
+    };
+    const estimateSize = useCallback((_index) => {
+        return rowMinHeight ?? 0;
+    }, [rowMinHeight]);
+    const getItemKeyHour = useCallback((index) => {
+        const option = hours.at(index);
+        return option ? option.value.toString() : `${uniqueId}-${index}`;
+    }, [hours, uniqueId]);
+    const getItemKeyMinute = useCallback((index) => {
+        const option = minutes.at(index);
+        return option ? option.value.toString() : `${uniqueId}-${index}`;
+    }, [hours, uniqueId]);
+    const sizeOptions = {
+        apply({ elements }) {
+            const { width } = elements.reference.getBoundingClientRect();
+            Object.assign(elements.floating.style, {
+                minWidth: `${width}px`,
+            });
+        },
+    };
+    const RowComponentHour = ({ row }) => {
+        const rowData = hours.at(row.index);
+        const onClick = (e) => {
+            e.preventDefault();
+            const preset = dayjs(selectedDate ?? new Date())
+                .set('hour', rowData?.value)
+                .toDate();
+            setSelectedDate(preset);
+            onChange?.(preset);
+        };
+        return (<button onClick={onClick} css={{
+                paddingLeft: '0.5rem',
+                paddingRight: '0.5rem',
+                paddingTop: '0.25rem',
+                paddingBottom: '0.25rem',
+                borderRadius: '0.25rem',
+                width: '100%',
+                height: '100%',
+                '&:hover': { backgroundColor: 'var(--ic-light)' },
+                ...(dayjs(selectedDate).hour() === rowData?.value
+                    ? {
+                        backgroundColor: 'var(--ic-blue-1s)',
+                        fontWeight: 500,
+                        color: 'var(--ic-blue-6s)',
+                        borderWidth: 1,
+                        borderStyle: 'solid',
+                        borderColor: 'var(--ic-blue-2s)',
+                    }
+                    : {}),
+            }}>
+        {rowData?.label}
+      </button>);
+    };
+    const RowComponentMinute = ({ row }) => {
+        const rowData = minutes.at(row.index);
+        const onClick = (e) => {
+            e.preventDefault();
+            const preset = dayjs(selectedDate ?? new Date())
+                .set('minute', rowData?.value)
+                .toDate();
+            setSelectedDate(preset);
+            onChange?.(preset);
+        };
+        return (<button onClick={onClick} css={{
+                paddingLeft: '0.5rem',
+                paddingRight: '0.5rem',
+                paddingTop: '0.25rem',
+                paddingBottom: '0.25rem',
+                borderRadius: '0.25rem',
+                width: '100%',
+                height: '100%',
+                '&:hover': { backgroundColor: 'var(--ic-light)' },
+                ...(dayjs(selectedDate).minute() === rowData?.value
+                    ? {
+                        backgroundColor: 'var(--ic-blue-1s)',
+                        fontWeight: 500,
+                        color: 'var(--ic-blue-6s)',
+                        borderWidth: 1,
+                        borderStyle: 'solid',
+                        borderColor: 'var(--ic-blue-2s)',
+                    }
+                    : {}),
+            }}>
+        {rowData?.label}
+      </button>);
+    };
+    const portalContentRenderer = () => (<div css={{
+            display: 'flex',
+            borderRadius: '0.5rem',
+            padding: '0.5rem',
+            backgroundColor: 'var(--ic-white-6s)',
+            fontSize: getTypographyVar('sm').fontSize,
+            lineHeight: getTypographyVar('sm').lineHeight,
+            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: 'var(--ic-ink-1s)',
+            gap: '0.5rem',
+        }}>
+      <div css={{ display: 'flex', flexDirection: 'column', flex: '1 1 0%' }}>
+        <VirtualizedList RowComponent={RowComponentHour} options={{
+            count: hours.length,
+            estimateSize: estimateSize,
+            getItemKey: getItemKeyHour,
+        }}/>
+      </div>
+      <div css={{ display: 'flex', flexDirection: 'column', flex: '1 1 0%' }}>
+        <VirtualizedList RowComponent={RowComponentMinute} options={{
+            count: hours.length,
+            estimateSize: estimateSize,
+            getItemKey: getItemKeyMinute,
+        }}/>
+      </div>
+    </div>);
+    const handleClear = (e) => {
+        e.stopPropagation();
+        onClear?.();
+    };
+    const getCss = (sizeVariant) => {
+        if (isNil(sizeVariant))
+            return {};
+        return getSizeVariantState(sizeVariant);
+    };
+    const createStyle = (screen) => {
+        const { css } = rest[screen] ?? {};
+        return {
+            ...css,
+        };
+    };
+    const getIcon = () => {
+        if (selectedDate && clearable) {
+            return (<Icon xs={{ size: getCss(rest.xs?.size).iconSize }} source={CloseIcon} css={{ color: disabled ? 'var(--ic-ink-4s)' : 'var(--ic-ink-5s)' }} onClick={handleClear}/>);
+        }
+        return (<Icon source={ClockIcon} xs={{ size: getCss(rest.xs?.size).iconSize }} css={{ color: disabled ? 'var(--ic-ink-4s)' : 'var(--ic-ink-5s)' }}/>);
+    };
+    return (<div {...containerProps} css={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+      <Floating clickProps={{
+            enabled: true,
+        }} dismissProps={{
+            enabled: true,
+        }} sizeOptions={sizeOptions} placement={placement} open={isOpen} onOpenChange={prehandleOpenChange} ref={floatingRef}>
+        <FloatingTrigger>
+          <div css={[
+            createStyle('sm'),
+            {
+                [mediaQuery('xs')]: createStyle('xs'),
+                [mediaQuery('sm')]: createStyle('sm'),
+                [mediaQuery('md')]: createStyle('md'),
+                [mediaQuery('lg')]: createStyle('lg'),
+            },
+        ]}>
+            {!selectedDate && !!placeholder && <span css={{ color: 'var(--ic-ink-4s)' }}>{placeholder}</span>}
+            {!!selectedDate && <span>{dayjs(selectedDate).format(TIME_FORMAT)}</span>}
+            {getIcon()}
+          </div>
+        </FloatingTrigger>
+        <FloatingContent>
+          <div css={{
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderRadius: '0.5rem',
+            boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+            fontSize: getTypographyVar('sm').fontSize,
+            lineHeight: getTypographyVar('sm').lineHeight,
+            backgroundColor: 'var(--color-surface-default)',
+        }}>
+            {portalContentRenderer()}
+          </div>
+        </FloatingContent>
+      </Floating>
+    </div>);
+};

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

@@ -19,4 +19,3 @@ type TimePickerBaseProps = {
 };
 export type TimePickerProps = TimePickerBaseProps & ResponsiveDesign<TimeResponsiveProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

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

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

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

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

package/dist/lib/tooltip/index.js

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

package/dist/lib/tooltip/tooltip.d.ts

@@ -3,4 +3,3 @@ import { TooltipOptions } from './types';
 export declare function Tooltip({ children, defaultOpen, placement, open, onOpenChange, content, contentWidth, enable, handleClose, arrowProps, }: {
     children: ReactNode;
 } & TooltipOptions): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=tooltip.d.ts.map

package/dist/lib/tooltip/tooltip.jsx

@@ -0,0 +1,86 @@
+import { cloneElement, useRef } from 'react';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, useMergeRefs, arrow, FloatingArrow, size as floatingSize, safePolygon, FloatingPortal, } from '@floating-ui/react';
+import { get, isUndefined } from 'lodash-es';
+import { useControllableState } from '../../hooks';
+import { getTypographyVar } from '../../theme';
+export function Tooltip({ children, defaultOpen = false, placement = 'top', open, onOpenChange, content, contentWidth, enable = true, handleClose, arrowProps, }) {
+    const [visible, setVisible] = useControllableState({
+        defaultValue: defaultOpen,
+        value: open,
+    });
+    const triggerRef = useRef(null);
+    const arrowRef = useRef(null);
+    const handleOpenChange = (val, event, reason) => {
+        if (enable === 'truncated' && event?.target) {
+            const target = event.target;
+            const { width, height } = target.getBoundingClientRect();
+            const fullWidth = Math.max(target.scrollWidth, target.clientWidth) + (width - target.clientWidth);
+            const fullHeight = Math.max(target.scrollHeight, target.clientHeight) + (height - target.clientHeight);
+            if ([fullWidth <= width, fullHeight <= height].every(Boolean))
+                return;
+        }
+        setVisible(val);
+        onOpenChange?.(val, event, reason);
+    };
+    const { refs, floatingStyles, context } = useFloating({
+        placement,
+        open: visible,
+        onOpenChange: handleOpenChange,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(5),
+            flip({
+                crossAxis: placement.includes('-'),
+                fallbackAxisSideDirection: 'start',
+                padding: 5,
+            }),
+            shift({ padding: 5 }),
+            arrow({ element: arrowRef }),
+            floatingSize({
+                apply({ elements }) {
+                    const { width } = elements.reference.getBoundingClientRect();
+                    const styledWidth = contentWidth === 'fit-parent' ? width : contentWidth;
+                    const styles = {
+                        maxWidth: isUndefined(styledWidth) ? '' : `${styledWidth}px`,
+                    };
+                    Object.assign(elements.floating.style, styles);
+                },
+            }),
+        ],
+    });
+    const hover = useHover(context, {
+        move: false,
+        handleClose: handleClose === 'safe-polygon' ? safePolygon() : handleClose,
+    });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'tooltip' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+    const ref = useMergeRefs([refs.setReference, get(children, 'ref'), triggerRef]);
+    return (<div>
+      {cloneElement(children, getReferenceProps({
+            ref: ref,
+            ...children?.props,
+            'data-state': visible ? 'open' : 'closed',
+        }))}
+      <FloatingPortal>
+        {visible && (<div style={{
+                ...floatingStyles,
+            }} ref={refs.setFloating} css={{
+                borderRadius: '0.5rem',
+                backgroundColor: 'var(--color-neutral-600)',
+                paddingLeft: '0.75rem',
+                paddingRight: '0.75rem',
+                paddingTop: '0.5rem',
+                paddingBottom: '0.5rem',
+                fontSize: getTypographyVar('sm').fontSize,
+                lineHeight: getTypographyVar('sm').lineHeight,
+                fontWeight: 400,
+                color: 'white',
+            }} {...getFloatingProps()}>
+            {content}
+            <FloatingArrow {...arrowProps} css={{ fill: 'var(--color-neutral-600)' }} ref={arrowRef} context={context}/>
+          </div>)}
+      </FloatingPortal>
+    </div>);
+}

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

@@ -12,4 +12,3 @@ export type TooltipOptions = {
     handleClose?: UseHoverProps['handleClose'] | 'safe-polygon';
     arrowProps?: Partial<FloatingArrowProps>;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/tooltip/types.js

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

package/dist/lib/unordered-list/index.d.ts

@@ -1,3 +1,2 @@
 export * from './unordered-list';
 export * from './list-item';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/unordered-list/index.js

@@ -0,0 +1,2 @@
+export * from './unordered-list';
+export * from './list-item';

package/dist/lib/unordered-list/list-item/helpers.d.ts

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

package/dist/lib/unordered-list/list-item/helpers.js

@@ -1,14 +1,11 @@
-import { mergeComponentProps } from "../../../utils/index.js";
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {
-  xs: {
-    css: {
-      alignItems: "flex-start"
-    }
-  }
+    xs: {
+        css: {
+            alignItems: 'flex-start',
+        },
+    },
 };
-const getListItemProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getListItemProps
+export const getListItemProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/unordered-list/list-item/index.d.ts

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

package/dist/lib/unordered-list/list-item/index.js

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

package/dist/lib/unordered-list/list-item/list-item.d.ts

@@ -1,3 +1,2 @@
 import { ListItemProps } from './types';
-export declare const ListItem: import('react').ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
-//# sourceMappingURL=list-item.d.ts.map
+export declare const ListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/lib/unordered-list/list-item/list-item.jsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { isNil } from 'lodash-es';
+import { getListItemProps } from './helpers';
+import { mediaQuery } from '../../../theme';
+export const ListItem = forwardRef((_props, ref) => {
+    const { xs, sm, md, children, dangerouslySetInnerHTML, ...rest } = getListItemProps(_props);
+    const css = [
+        {
+            display: 'inline-flex',
+        },
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+        },
+    ];
+    return (<li css={css} suppressContentEditableWarning dangerouslySetInnerHTML={isNil(children) ? dangerouslySetInnerHTML : undefined} {...rest} ref={ref}>
+      {isNil(dangerouslySetInnerHTML) ? children : null}
+    </li>);
+});
+const createStyle = ({ css } = {}) => {
+    return [css];
+};

package/dist/lib/unordered-list/list-item/types.d.ts

@@ -1,5 +1,4 @@
-import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign } from '../../../types';
+import { JSX } from "react";
+import { PropsWithCSS, ResponsiveDesign } from "../../../types";
 export type ListItemResponsiveProps = PropsWithCSS;
 export type ListItemProps = JSX.IntrinsicElements["li"] & ResponsiveDesign<ListItemResponsiveProps>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/unordered-list/list-item/types.js

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

package/dist/lib/unordered-list/unordered-list/helpers.d.ts

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

package/dist/lib/unordered-list/unordered-list/helpers.js

@@ -1,14 +1,11 @@
-import { mergeComponentProps } from "../../../utils/index.js";
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {
-  xs: {
-    css: {
-      alignItems: "flex-start"
-    }
-  }
+    xs: {
+        css: {
+            alignItems: 'flex-start',
+        },
+    },
 };
-const getUnorderedListProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getUnorderedListProps
+export const getUnorderedListProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/unordered-list/unordered-list/index.d.ts

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

package/dist/lib/unordered-list/unordered-list/index.js

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

package/dist/lib/unordered-list/unordered-list/types.d.ts

@@ -1,5 +1,4 @@
-import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+import { JSX } from "react";
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types";
 export type UnorderedListResponsiveProps = PropsWithCSS;
 export type UnorderedListProps = ShallowMerge<JSX.IntrinsicElements["ul"], ResponsiveDesign<UnorderedListResponsiveProps>>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/unordered-list/unordered-list/types.js

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

package/dist/lib/unordered-list/unordered-list/unordered-list.d.ts

@@ -1,3 +1,2 @@
 import { UnorderedListProps } from './types';
-export declare const UnorderedList: import('react').ForwardRefExoticComponent<Omit<UnorderedListProps, "ref"> & import('react').RefAttributes<HTMLUListElement>>;
-//# sourceMappingURL=unordered-list.d.ts.map
+export declare const UnorderedList: import("react").ForwardRefExoticComponent<Omit<UnorderedListProps, "ref"> & import("react").RefAttributes<HTMLUListElement>>;

package/dist/lib/unordered-list/unordered-list/unordered-list.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import { getUnorderedListProps } from './helpers';
+import { mediaQuery } from '../../../theme';
+export const UnorderedList = forwardRef((_props, ref) => {
+    const { xs, sm, md, ...rest } = getUnorderedListProps(_props);
+    const css = [
+        {
+            display: 'inline-flex',
+            flexDirection: 'column',
+            verticalAlign: 'top',
+        },
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+        },
+    ];
+    return <ul css={css} {...rest} ref={ref}/>;
+});
+const createStyle = ({ css } = {}) => {
+    return [css];
+};

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

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

package/dist/lib/video/helpers.js

@@ -1,10 +1,7 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  controls: true
+    controls: true,
 };
-const getVideoProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getVideoProps
+export const getVideoProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

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

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

package/dist/lib/video/index.js

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

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

@@ -7,4 +7,3 @@ type VideoExtendedProps = ResponsiveDesign<PropsWithCSS> & {
 };
 export type VideoProps = ShallowMerge<ReactPlayerProps, VideoExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/video/types.js

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

package/dist/lib/video/video.d.ts

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