@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/lib/floating/floating/floating.d.ts

@@ -1,54 +1,53 @@
 import { Placement } from '@floating-ui/react';
-export declare const Floating: import('react').ForwardRefExoticComponent<{
+export declare const Floating: import("react").ForwardRefExoticComponent<{
     placement?: Placement;
-    onOpenChange?: import('@floating-ui/react').UseFloatingOptions["onOpenChange"];
+    onOpenChange?: import("@floating-ui/react").UseFloatingOptions["onOpenChange"];
     open?: boolean;
-    elements?: import('@floating-ui/react').UseFloatingOptions["elements"];
-    clickProps?: import('@floating-ui/react').UseClickProps;
-    dismissProps?: import('@floating-ui/react').UseDismissProps;
-    hoverProps?: import('@floating-ui/react').UseHoverProps;
-    focusProps?: import('@floating-ui/react').UseFocusProps;
-    offsetOptions?: import('@floating-ui/react').OffsetOptions;
-    sizeOptions?: import('@floating-ui/react').SizeOptions;
-    autoUpdateOptions?: import('@floating-ui/react').AutoUpdateOptions;
+    elements?: import("@floating-ui/react").UseFloatingOptions["elements"];
+    clickProps?: import("@floating-ui/react").UseClickProps;
+    dismissProps?: import("@floating-ui/react").UseDismissProps;
+    hoverProps?: import("@floating-ui/react").UseHoverProps;
+    focusProps?: import("@floating-ui/react").UseFocusProps;
+    offsetOptions?: import("@floating-ui/react").OffsetOptions;
+    sizeOptions?: import("@floating-ui/react").SizeOptions;
+    autoUpdateOptions?: import("@floating-ui/react").AutoUpdateOptions;
 } & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<{
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<{
     placement: Placement;
-    strategy: import('@floating-ui/react').Strategy;
-    middlewareData: import('@floating-ui/react').MiddlewareData;
+    strategy: import("@floating-ui/react").Strategy;
+    middlewareData: import("@floating-ui/react").MiddlewareData;
     x: number;
     y: number;
     isPositioned: boolean;
     update: () => void;
-    floatingStyles: import('react').CSSProperties;
+    floatingStyles: import("react").CSSProperties;
     refs: {
-        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
-        floating: import('react').MutableRefObject<HTMLElement | null>;
-        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
         setFloating: (node: HTMLElement | null) => void;
-    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
-        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;
-    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
         x: number;
         y: number;
         update: () => void;
         placement: Placement;
-        strategy: import('@floating-ui/react').Strategy;
-        middlewareData: import('@floating-ui/react').MiddlewareData;
+        strategy: import("@floating-ui/react").Strategy;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
         isPositioned: boolean;
-        floatingStyles: import('react').CSSProperties;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
-        events: import('@floating-ui/react').FloatingEvents;
-        dataRef: import('react').MutableRefObject<import('@floating-ui/react').ContextData>;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
         floatingId: string | undefined;
-        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
-        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
 }>>;
-//# sourceMappingURL=floating.d.ts.map

package/dist/lib/floating/floating/floating.jsx

@@ -0,0 +1,76 @@
+import { forwardRef, useImperativeHandle, useMemo } from 'react';
+import { autoUpdate, flip, FloatingTree, offset, size, useClick, useDismiss, useFloating, useFloatingParentNodeId, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
+import { FloatingContext } from './helpers';
+const FloatingCore = forwardRef(({ open, placement = 'bottom', onOpenChange, dismissProps = {
+    enabled: false,
+}, children, clickProps = {
+    enabled: false,
+}, focusProps = {
+    enabled: false,
+}, hoverProps = {
+    enabled: false,
+}, elements, offsetOptions = 4, sizeOptions, autoUpdateOptions, }, ref) => {
+    const floating = useFloating({
+        open,
+        onOpenChange,
+        placement,
+        middleware: [
+            offset(offsetOptions),
+            flip(),
+            size({
+                ...sizeOptions,
+                apply(args) {
+                    const { availableHeight, availableWidth, rects, elements, placement, x } = args;
+                    const styles = {};
+                    if (rects.floating.height > availableHeight) {
+                        styles.height = `${availableHeight}px`;
+                    }
+                    if (rects.floating.width > availableWidth) {
+                        const maxWidth = Math.min(rects.floating.width, window.innerWidth);
+                        styles.maxWidth = `${maxWidth}px`;
+                        const verticalPlacements = [
+                            'top',
+                            'top-start',
+                            'top-end',
+                            'bottom',
+                            'bottom-start',
+                            'bottom-end',
+                        ];
+                        const isVertical = verticalPlacements.includes(placement);
+                        if (isVertical) {
+                            styles.left = `${-x + (window.innerWidth - rects.floating.width) / 2}px`;
+                        }
+                    }
+                    Object.assign(elements.floating.style, styles);
+                    sizeOptions?.apply?.(args);
+                },
+            }),
+        ],
+        whileElementsMounted: (...args) => {
+            return autoUpdate(...args, autoUpdateOptions);
+        },
+        elements,
+    });
+    useImperativeHandle(ref, () => floating, [floating]);
+    const { context } = floating;
+    const click = useClick(context, clickProps);
+    const hover = useHover(context, hoverProps);
+    const focus = useFocus(context, focusProps);
+    const dismiss = useDismiss(context, dismissProps);
+    const role = useRole(context);
+    const interactions = useInteractions([click, dismiss, role, hover, focus]);
+    const contextValue = useMemo(() => ({
+        ...floating,
+        ...interactions,
+    }), [floating, interactions]);
+    return <FloatingContext.Provider value={contextValue}>{children}</FloatingContext.Provider>;
+});
+export const Floating = forwardRef((props, ref) => {
+    const parentId = useFloatingParentNodeId();
+    if (parentId) {
+        return <FloatingCore {...props} ref={ref}/>;
+    }
+    return (<FloatingTree>
+      <FloatingCore {...props} ref={ref}/>
+    </FloatingTree>);
+});

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

@@ -1,5 +1,4 @@
 import { UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react';
 export type FloatingContextValue = UseFloatingReturn & UseInteractionsReturn;
-export declare const FloatingContext: import('react').Context<FloatingContextValue>;
+export declare const FloatingContext: import("react").Context<FloatingContextValue>;
 export declare const useFloatingContext: () => FloatingContextValue;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/floating/floating/helpers.js

@@ -1,9 +1,5 @@
-import { createContext, useContext } from "react";
-const FloatingContext = createContext({});
-const useFloatingContext = () => {
-  return useContext(FloatingContext);
-};
-export {
-  FloatingContext,
-  useFloatingContext
+import { createContext, useContext } from 'react';
+export const FloatingContext = createContext({});
+export const useFloatingContext = () => {
+    return useContext(FloatingContext);
 };

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

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

package/dist/lib/floating/floating/index.js

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

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

@@ -14,4 +14,3 @@ export type FloatingProps = PropsWithChildren<{
     autoUpdateOptions?: AutoUpdateOptions;
 }>;
 export type FloatingRef = UseFloatingReturn;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/floating/floating/types.js

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

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

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

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

@@ -0,0 +1,22 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { useFloatingContext } from '../floating/helpers';
+import { cn } from '../../../utils';
+export const FloatingClose = forwardRef(({ event = 'click', reason, className, ...props }, ref) => {
+    const wrapperRef = useRef(null);
+    const { context: { onOpenChange }, } = useFloatingContext();
+    const mergedRefs = useMergeRefs([ref, wrapperRef]);
+    useEffect(() => {
+        const wrapperEl = wrapperRef.current;
+        if (!wrapperEl)
+            return;
+        const handleEvent = function (event) {
+            onOpenChange?.(false, event, reason);
+        };
+        wrapperEl.addEventListener(event, handleEvent);
+        return () => {
+            wrapperEl.removeEventListener(event, handleEvent);
+        };
+    }, [event, onOpenChange, reason]);
+    return <div css={{ display: 'contents' }} className={cn(className)} {...props} ref={mergedRefs}/>;
+});

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

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

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

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

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

@@ -5,4 +5,3 @@ export type FloatingCloseProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     event?: keyof HTMLElementEventMap;
     reason?: OpenChangeReason;
 }>;
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/floating/floating-content/floating-content.d.ts

@@ -1,3 +1,2 @@
 import { FloatingContentProps } from './types';
-export declare const FloatingContent: import('react').ForwardRefExoticComponent<Omit<FloatingContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=floating-content.d.ts.map
+export declare const FloatingContent: import("react").ForwardRefExoticComponent<Omit<FloatingContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib/floating/floating-content/floating-content.jsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useMergeRefs } from '@floating-ui/react';
+import { AnimatePresence, motion } from 'motion/react';
+import { useFloatingContext } from '../floating/helpers';
+import { FLOATING_Z_INDEX } from '../../../theme';
+import { useIsHydrated } from '../../../hooks/use-is-hydrated';
+export const FloatingContent = forwardRef(({ style, floatingPortalProps, floatingFocusManagerProps, floatingOverlayProps, ...props }, ref) => {
+    const { getFloatingProps, context } = useFloatingContext();
+    const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
+    const isHydrated = useIsHydrated();
+    return (<AnimatePresence>
+        {context.open && isHydrated && (<FloatingPortal root={document.body} {...floatingPortalProps}>
+            <FloatingOverlay {...floatingOverlayProps} style={{
+                display: (floatingOverlayProps?.disabled ?? true) ? 'contents' : undefined,
+                ...floatingOverlayProps?.style,
+            }}>
+              <FloatingFocusManager disabled context={context} {...floatingFocusManagerProps}>
+                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} style={{
+                ...(context.elements.reference ? context.floatingStyles : {}),
+                ...style,
+                zIndex: FLOATING_Z_INDEX,
+            }} {...getFloatingProps(props)} ref={mergedRefs}>
+                  {props.children}
+                </motion.div>
+              </FloatingFocusManager>
+            </FloatingOverlay>
+          </FloatingPortal>)}
+      </AnimatePresence>);
+});

package/dist/lib/floating/floating-content/index.d.ts

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

package/dist/lib/floating/floating-content/index.js

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

package/dist/lib/floating/floating-content/types.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, HTMLProps } from 'react';
 import { Interpolation } from '@emotion/react';
-import { FloatingFocusManager, FloatingOverlay, FloatingPortal } from '@floating-ui/react';
+import type { FloatingFocusManager, FloatingOverlay, FloatingPortal } from '@floating-ui/react';
 import { ShallowMerge } from '../../../types';
 export type FloatingContentProps = ShallowMerge<HTMLProps<HTMLDivElement>, {
     floatingPortalProps?: Partial<ComponentProps<typeof FloatingPortal>>;
@@ -10,4 +10,3 @@ export type FloatingContentProps = ShallowMerge<HTMLProps<HTMLDivElement>, {
     }>>;
     floatingFocusManagerProps?: Partial<ComponentProps<typeof FloatingFocusManager>>;
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/floating/floating-content/types.js

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

package/dist/lib/floating/floating-trigger/floating-trigger.d.ts

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

package/dist/lib/floating/floating-trigger/floating-trigger.jsx

@@ -0,0 +1,27 @@
+import { cloneElement, isValidElement } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { get, isFunction } from 'lodash-es';
+import { useFloatingContext } from '../floating/helpers';
+export const FloatingTrigger = ({ children }) => {
+    const { getReferenceProps, context } = useFloatingContext();
+    const mergedRefs = useMergeRefs([
+        context.refs.setReference,
+        isValidElement(children) ? get(children.props, 'ref') : undefined,
+    ]);
+    if (isValidElement(children)) {
+        return cloneElement(children, getReferenceProps({
+            ...(children.props ?? {}),
+            ref: mergedRefs,
+        }));
+    }
+    if (isFunction(children)) {
+        const reactElement = children(context);
+        return cloneElement(reactElement, getReferenceProps({
+            ...(reactElement.props ?? {}),
+            ref: mergedRefs,
+        }));
+    }
+    return (<div {...getReferenceProps()} ref={mergedRefs}>
+      {children}
+    </div>);
+};

package/dist/lib/floating/floating-trigger/index.d.ts

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

package/dist/lib/floating/floating-trigger/index.js

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

package/dist/lib/floating/floating-trigger/types.d.ts

@@ -3,4 +3,3 @@ import { UseFloatingReturn } from '@floating-ui/react';
 export type FloatingTriggerProps = {
     children?: ReactElement | ((context: UseFloatingReturn['context']) => ReactElement);
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/floating/floating-trigger/types.js

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

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

@@ -2,4 +2,3 @@ export * from './floating';
 export * from './floating-trigger';
 export * from './floating-content';
 export * from './floating-close';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/floating/index.js

@@ -0,0 +1,4 @@
+export * from './floating';
+export * from './floating-trigger';
+export * from './floating-content';
+export * from './floating-close';

package/dist/lib/form-helper-text/form-helper-text.d.ts

@@ -1,3 +1,2 @@
 import { FormHelperTextProps } from './types';
 export declare const FormHelperText: ({ error, children, ...props }: FormHelperTextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=form-helper-text.d.ts.map

package/dist/lib/form-helper-text/form-helper-text.jsx

@@ -0,0 +1,14 @@
+import { getTypographyVar, getColorVar } from '../../theme';
+export const FormHelperText = ({ error, children, ...props }) => {
+    return (<p css={{
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 4,
+            fontSize: getTypographyVar('xs').fontSize,
+            lineHeight: getTypographyVar('xs').lineHeight,
+            '&:empty': { display: 'none' },
+            ...(error && { color: getColorVar('red.600') }),
+        }} {...props}>
+      {children}
+    </p>);
+};

package/dist/lib/form-helper-text/index.d.ts

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

package/dist/lib/form-helper-text/index.js

@@ -0,0 +1,2 @@
+export * from './form-helper-text';
+export * from './types';

package/dist/lib/form-helper-text/types.d.ts

@@ -3,4 +3,3 @@ import { ShallowMerge } from '../../types';
 export type FormHelperTextProps = ShallowMerge<JSX.IntrinsicElements['p'], {
     error?: boolean;
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/form-helper-text/types.js

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

package/dist/lib/form-label/form-label.d.ts

@@ -4,4 +4,3 @@ export type FormLabelProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     required?: boolean;
 }>;
 export declare const FormLabel: ({ required, children, ...props }: FormLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=form-label.d.ts.map

package/dist/lib/form-label/form-label.jsx

@@ -0,0 +1,12 @@
+import { isString } from 'lodash-es';
+import { getColorVar, mediaQuery } from '../../theme';
+export const FormLabel = ({ required, children, ...props }) => {
+    return (<div css={{
+            marginBottom: '0.375rem',
+            display: 'inline-flex',
+            [mediaQuery('sm')]: { marginBottom: '0.5rem' },
+        }} {...props}>
+      {isString(children) ? <label>{children}</label> : children}
+      {required && <span css={{ color: getColorVar('red.600') }}>&nbsp;*</span>}
+    </div>);
+};

package/dist/lib/form-label/index.d.ts

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

package/dist/lib/form-label/index.js

@@ -0,0 +1 @@
+export * from './form-label';

package/dist/lib/grid/cell/cell.d.ts

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

package/dist/lib/grid/cell/cell.jsx

@@ -0,0 +1,25 @@
+import { isNumber } from 'lodash-es';
+import { getCellProps } from './helpers';
+import { mediaQuery } from '../../../theme';
+export const Cell = ({ children, ref, ..._props }) => {
+    const { xs, sm, md, lg, ...rest } = getCellProps(_props);
+    const css = [
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+            [mediaQuery('lg')]: createStyle(lg),
+        },
+    ];
+    return (<div css={css} {...rest} ref={ref}>
+      {children}
+    </div>);
+};
+const createStyle = ({ colSpan, css } = {}) => {
+    return [
+        {
+            gridColumn: isNumber(colSpan) ? `span ${colSpan}` : colSpan,
+        },
+        css,
+    ];
+};

package/dist/lib/grid/cell/helpers.d.ts

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

package/dist/lib/grid/cell/helpers.js

@@ -1,8 +1,5 @@
-import { mergeComponentProps } from "../../../utils/index.js";
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {};
-const getCellProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getCellProps
+export const getCellProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/grid/cell/index.d.ts

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

package/dist/lib/grid/cell/index.js

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

package/dist/lib/grid/cell/types.d.ts

@@ -4,4 +4,3 @@ export interface CellResponsiveProps extends PropsWithCSS {
     colSpan?: number;
 }
 export type CellProps = JSX.IntrinsicElements['div'] & ResponsiveDesign<CellResponsiveProps>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/grid/cell/types.js

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

package/dist/lib/grid/grid/grid.d.ts

@@ -2,4 +2,3 @@ import { GridProps } from './types';
 export declare const GRID_MINIMUM_COLS = 1;
 export declare const GRID_MAXIMUM_COLS = 24;
 export declare const Grid: ({ children, ref, ..._props }: GridProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=grid.d.ts.map

package/dist/lib/grid/grid/grid.jsx

@@ -0,0 +1,33 @@
+import { isNil } from 'lodash-es';
+import { getGridProps } from './helpers';
+import { mediaQuery } from '../../../theme';
+import { containerStyle } from '../../../constants/emotion';
+export const GRID_MINIMUM_COLS = 1;
+export const GRID_MAXIMUM_COLS = 24;
+export const Grid = ({ children, ref, ..._props }) => {
+    const { xs, sm, md, lg, container, ...rest } = getGridProps(_props);
+    const css = [
+        container && containerStyle,
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+            [mediaQuery('lg')]: createStyle(lg),
+        },
+    ];
+    return (<div css={css} {...rest} ref={ref}>
+      <div css={{ display: 'grid', width: '100%', height: '100%' }}>{children}</div>
+    </div>);
+};
+const createStyle = ({ cols, css: { width, height, ...css } = {} } = {}) => {
+    return [
+        {
+            width,
+            height,
+            '& > *': {
+                gridTemplateColumns: isNil(cols) ? undefined : `repeat(${cols}, minmax(0, 1fr))`,
+                ...css,
+            },
+        },
+    ];
+};

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

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

package/dist/lib/grid/grid/helpers.js

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

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

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

package/dist/lib/grid/grid/index.js

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

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

@@ -8,4 +8,3 @@ type GridExtendedProps = ResponsiveDesign<GridResponsiveProps> & {
 };
 export type GridProps = ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/grid/grid/types.js

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

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

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

package/dist/lib/grid/index.js

@@ -0,0 +1,2 @@
+export * from './grid';
+export * from './cell';

package/dist/lib/highlight-words/highlight-words.d.ts

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