@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/lib/lightbox/README.md

@@ -0,0 +1,93 @@
+# Lightbox Component
+
+A full-screen media viewer component supporting both images and videos with swiper navigation.
+
+## Quick Start
+
+```tsx
+import { useState } from 'react';
+import { Lightbox } from '~/packages/ui';
+
+export const Gallery = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>View Media</button>
+      
+      <Lightbox
+        open={open}
+        onOpenChange={setOpen}
+        slides={[
+          { 
+            source: { type: 'image', src: '/image1.jpg' },
+            title: 'Beautiful Sunset'
+          },
+          { 
+            source: { type: 'image', src: '/image2.jpg' },
+            title: 'Mountain View'
+          },
+          { 
+            source: { type: 'video', src: 'https://example.com/video.mp4' },
+            title: 'Product Demo'
+          },
+        ]}
+      />
+    </>
+  );
+};
+```
+
+## Features
+
+- ✅ Full-screen media viewing with dark overlay
+- ✅ Support for both images and videos
+- ✅ Swiper-based navigation with loop
+- ✅ Navigation controls (previous/next)
+- ✅ Slide counter display
+- ✅ Smooth fade animations
+- ✅ Responsive layout (different button positions on mobile/desktop)
+
+## Documentation
+
+For complete documentation, see [Lightbox Component Guide](/docs/patterns/lightbox-component.md)
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `slides` | `LightboxSlide[]` | Required | Array of image/video slides |
+| `open` | `boolean` | `false` | Controls visibility |
+| `onOpenChange` | `(open: boolean) => void` | - | Open/close callback |
+
+## Slide Types
+
+### Image Slide
+```typescript
+{
+  source: {
+    type: 'image',
+    src: string
+  },
+  title?: string
+}
+```
+
+### Video Slide
+```typescript
+{
+  source: {
+    type: 'video',
+    src: string,
+    thumbnail?: string
+  },
+  title?: string
+}
+```
+
+## Navigation
+
+- **Mobile**: Navigation buttons appear in top-right corner
+- **Desktop**: Navigation buttons appear on left/right sides of the content
+- **Counter**: Always displayed showing current position (e.g., "1 / 5")
+- **Loop**: Enabled by default - navigate from last to first slide seamlessly

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

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

package/dist/lib/lightbox/index.js

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

package/dist/lib/lightbox/lightbox.d.ts

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

package/dist/lib/lightbox/lightbox.jsx

@@ -0,0 +1,194 @@
+import { useEffect, useRef, useState } from 'react';
+import { times } from 'lodash-es';
+import { motion } from 'motion/react';
+import ReactPlayer from 'react-player';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import ArrowLeftIcon from '../../assets/svg/arrow-left.svg?raw';
+import ArrowRightIcon from '../../assets/svg/arrow-right.svg?raw';
+import ZoomPlusIcon from '../../assets/svg/search-add-plus-middle.svg?raw';
+import ZoomMinusIcon from '../../assets/svg/search-minus.svg?raw';
+import CloseIcon from '../../assets/svg/times-close-delete.svg?raw';
+import { mediaQuery } from '../../theme';
+import { Floating, FloatingClose, FloatingContent, IconButton, Image, Swiper, SwiperSlide, } from '../..';
+import { FLOATING_Z_INDEX } from '../../theme';
+const LightboxIconButton = (props) => {
+    return (<IconButton color="neutral" css={{
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            color: 'white',
+            borderRadius: '50%',
+            ':hover': {
+                backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            },
+        }} {...props}/>);
+};
+const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
+    const [mainApi, setMainApi] = useState();
+    const zoomPanPinchRef = useRef(null);
+    const contentElementRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
+    const activeSlide = slides.at(activeIndex);
+    const handlePrevious = () => {
+        mainApi?.scrollPrev();
+    };
+    const handleNext = () => {
+        mainApi?.scrollNext();
+    };
+    useEffect(() => {
+        const onSelect = () => {
+            if (!mainApi)
+                return;
+            setActiveIndex(mainApi.selectedScrollSnap());
+        };
+        mainApi?.on('select', onSelect);
+        return () => {
+            mainApi?.off('select', onSelect);
+        };
+    }, [mainApi]);
+    return (<div css={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div css={{
+            position: 'relative',
+            width: '100%',
+            flex: 1,
+            overflow: 'hidden',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingTop: 24,
+            paddingBottom: 24,
+            paddingLeft: 16,
+            paddingRight: 16,
+            [mediaQuery('md')]: { paddingLeft: 32, paddingRight: 32 },
+        }}>
+        <div css={{
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            paddingTop: 20,
+            paddingBottom: 20,
+            paddingLeft: 0,
+            paddingRight: 0,
+            [mediaQuery('md')]: { paddingLeft: 20, paddingRight: 20 },
+        }}>
+          <div css={{ width: '100%', height: '100%' }}>
+            <Swiper options={{
+            loop: true,
+            startIndex: defaultActiveIndex,
+            watchDrag: (_, event) => {
+                return !contentElementRef.current?.contains(event.target);
+            },
+        }} onApi={setMainApi} xs={{ slidesPerView: 1 }} css={{ width: '100%', height: '100%' }}>
+              {times(slides.length).map((index) => (<SwiperSlide key={index}>
+                  {activeIndex === index && (<motion.div css={{
+                    display: 'flex',
+                    width: '100%',
+                    height: '100%',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+                      <div ref={contentElementRef}>
+                        {activeSlide?.source.type === 'image' && (<TransformWrapper ref={zoomPanPinchRef} wheel={{
+                        smoothStep: 0.02,
+                    }}>
+                            <TransformComponent>
+                              <Image src={activeSlide?.source.src} alt={activeSlide?.title} xs={{
+                        css: {
+                            maxWidth: '100%',
+                            maxHeight: '100%',
+                            objectFit: 'contain',
+                            userSelect: 'none',
+                        },
+                    }}/>
+                            </TransformComponent>
+                          </TransformWrapper>)}
+                        {activeSlide?.source.type === 'video' && (<div css={{ aspectRatio: '16/9', width: '100%' }}>
+                            <ReactPlayer light={activeSlide.source.thumbnail} src={activeSlide.source.src} width="100%" height="100%" controls/>
+                          </div>)}
+                      </div>
+                    </motion.div>)}
+                </SwiperSlide>))}
+            </Swiper>
+          </div>
+          {slides.length > 1 && (<div css={{ display: 'none', [mediaQuery('md')]: { display: 'contents' } }}>
+              <div css={{ position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%) translateX(-50%)' }}>
+                <LightboxIconButton xs={{ size: 'sm' }} onClick={handlePrevious} icon={{ source: ArrowLeftIcon }}/>
+              </div>
+              <div css={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%) translateX(50%)' }}>
+                <LightboxIconButton xs={{ size: 'sm' }} onClick={handleNext} icon={{ source: ArrowRightIcon }}/>
+              </div>
+            </div>)}
+          <div css={{
+            position: 'absolute',
+            left: -4,
+            top: 0,
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            [mediaQuery('md')]: { left: -10 },
+        }}>
+            {slides.length > 0 && (<div>
+                {activeIndex + 1} / {slides.length}
+              </div>)}
+          </div>
+          <div css={{
+            position: 'absolute',
+            right: -4,
+            top: 0,
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            [mediaQuery('md')]: { right: -10 },
+        }}>
+            {slides.length > 1 && (<div css={{ display: 'contents', [mediaQuery('md')]: { display: 'none' } }}>
+                <LightboxIconButton xs={{ size: 'sm' }} onClick={handlePrevious} icon={{ source: ArrowLeftIcon }}/>
+                <LightboxIconButton xs={{ size: 'sm' }} onClick={handleNext} icon={{ source: ArrowRightIcon }}/>
+              </div>)}
+            {activeSlide?.source.type === 'image' && (<>
+                <LightboxIconButton xs={{ size: 'sm' }} onClick={() => zoomPanPinchRef.current?.zoomOut(0.5)} icon={{ source: ZoomMinusIcon }}/>
+                <LightboxIconButton xs={{ size: 'sm' }} onClick={() => zoomPanPinchRef.current?.zoomIn(0.5)} icon={{ source: ZoomPlusIcon }}/>
+              </>)}
+            <FloatingClose>
+              <LightboxIconButton xs={{ size: 'sm' }} icon={{ source: CloseIcon }}/>
+            </FloatingClose>
+          </div>
+          {activeSlide?.title && (<div css={{
+                position: 'absolute',
+                bottom: 0,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                borderRadius: 8,
+                fontSize: '0.75rem',
+                lineHeight: '1rem',
+                textAlign: 'center',
+            }}>
+              {activeSlide.title}
+            </div>)}
+        </div>
+
+        {/* Image title */}
+      </div>
+    </div>);
+};
+export const Lightbox = ({ slides, defaultActiveIndex, ...props }) => {
+    return (<Floating dismissProps={{
+            enabled: true,
+        }} {...props}>
+      <FloatingContent floatingOverlayProps={{
+            disabled: false,
+            lockScroll: true,
+            style: {
+                zIndex: FLOATING_Z_INDEX,
+                backdropFilter: 'blur(4px)',
+            },
+            css: {
+                position: 'fixed',
+                inset: 0,
+                backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                color: 'white',
+            },
+        }} css={{ width: '100%', height: '100%' }}>
+        <LightboxContent slides={slides} defaultActiveIndex={defaultActiveIndex}/>
+      </FloatingContent>
+    </Floating>);
+};

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

@@ -18,4 +18,3 @@ export type LightboxProps = ShallowMerge<FloatingProps, {
     defaultActiveIndex?: number;
 }>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/lightbox/types.js

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

package/dist/lib/linear-progress/helpers.d.ts

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

package/dist/lib/linear-progress/helpers.js

@@ -1,13 +1,10 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    size: 4,
-    color: "primary"
-  }
+    xs: {
+        size: 4,
+        color: 'primary',
+    },
 };
-const getLinearProgressProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getLinearProgressProps
+export const getLinearProgressProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/linear-progress/index.d.ts

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

package/dist/lib/linear-progress/index.js

@@ -0,0 +1 @@
+export * from './linear-progress';

package/dist/lib/linear-progress/linear-progress.d.ts

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

package/dist/lib/linear-progress/linear-progress.jsx

@@ -0,0 +1,50 @@
+import { isNil, isNumber } from 'lodash-es';
+import { motion } from 'motion/react';
+import { getLinearProgressProps } from './helpers';
+import { mediaQuery } from '../../theme';
+import { getColorShadesByVariant } from '../../utils';
+export const LinearProgress = (_props) => {
+    const { xs, sm, md, value, variant: _variant, ...props } = getLinearProgressProps(_props);
+    const fallbackVariant = isNil(value) ? 'indeterminate' : 'determinate';
+    const variant = _variant ?? fallbackVariant;
+    const rootInterpolation = [
+        {
+            position: 'relative',
+            width: '100%',
+            overflow: 'hidden',
+            [`& > *`]: {
+                position: 'absolute',
+                height: '100%',
+            },
+        },
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+        },
+    ];
+    return (<div css={rootInterpolation} {...props}>
+      {variant === 'indeterminate' && (<motion.div initial={{ left: '-25%', width: '25%' }} animate={{ left: '100%', width: '50%' }} transition={{
+                repeat: Infinity,
+                ease: 'linear',
+                duration: 1.5,
+            }}/>)}
+      {variant === 'determinate' && (<motion.div initial={{
+                width: `${value ?? 0}%`,
+            }} animate={{ width: `${value ?? 0}%` }}/>)}
+    </div>);
+};
+const createStyle = ({ color, size } = {}) => {
+    const palette = getColorShadesByVariant(color);
+    return [
+        {
+            height: size,
+            borderRadius: isNumber(size) ? size / 2 : undefined,
+            backgroundColor: palette.light,
+            [`& > *`]: {
+                backgroundColor: palette.main,
+                borderRadius: isNumber(size) ? size / 2 : undefined,
+            },
+        },
+    ];
+};

package/dist/lib/linear-progress/types.d.ts

@@ -11,4 +11,3 @@ type LinearProgressExtendedProps = ResponsiveDesign<LinearProgressResponsiveProp
 };
 export type LinearProgressProps = ShallowMerge<JSX.IntrinsicElements['div'], LinearProgressExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/linear-progress/types.js

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

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

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

package/dist/lib/link/helpers.js

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

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

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

package/dist/lib/link/index.js

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

package/dist/lib/link/link.d.ts

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

package/dist/lib/link/link.jsx

@@ -0,0 +1,40 @@
+import { isNil } from 'lodash-es';
+import { Link as ReactRouterLink } from 'react-router';
+import { getLinkProps } from './helpers';
+import { useHoverLineEffect } from '../../hooks';
+import { Booleanish } from '../../constants';
+import { cn } from '../../utils';
+import { getTypographyVar, mediaQuery } from '../../theme';
+export const Link = ({ children, ref, ..._props }) => {
+    const { xs, sm, md, lg, dangerouslySetInnerHTML, to, underline = false, className, ...rest } = getLinkProps(_props);
+    const hoverLineEffectProps = useHoverLineEffect({ enabled: underline });
+    const onClick = (e) => {
+        if (e.currentTarget.getAttribute('aria-disabled') === Booleanish.True) {
+            e.preventDefault();
+        }
+        if (isNil(to)) {
+            e.preventDefault();
+        }
+        rest.onClick?.(e);
+    };
+    return (<ReactRouterLink to={to ?? '#'} css={[
+            createStyle(xs),
+            {
+                [mediaQuery('sm')]: createStyle(sm),
+                [mediaQuery('md')]: createStyle(md),
+                [mediaQuery('lg')]: createStyle(lg),
+            },
+            rest['aria-disabled'] && { pointerEvents: 'none' },
+        ]} dangerouslySetInnerHTML={isNil(children) ? dangerouslySetInnerHTML : undefined} {...hoverLineEffectProps} className={cn(className, hoverLineEffectProps.className)} {...rest} onClick={onClick} ref={ref}>
+      {isNil(dangerouslySetInnerHTML) ? children : null}
+    </ReactRouterLink>);
+};
+const createStyle = ({ css, textVariant } = {}) => {
+    return [
+        textVariant && {
+            fontSize: getTypographyVar(textVariant).fontSize,
+            lineHeight: getTypographyVar(textVariant).lineHeight,
+        },
+        css,
+    ];
+};

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

@@ -12,4 +12,3 @@ type LinkExtendedProps = ResponsiveDesign<LinkResponsiveProps> & {
 };
 export type LinkProps = ShallowMerge<ReactRouterLinkProps, LinkExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/link/types.js

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

package/dist/lib/loading/block-skeleton/block-skeleton.d.ts

@@ -1,4 +1,3 @@
 import { JSX } from 'react';
 export type BlockSkeletonProps = JSX.IntrinsicElements['div'];
 export declare const BlockSkeleton: (props: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=block-skeleton.d.ts.map

package/dist/lib/loading/block-skeleton/block-skeleton.jsx

@@ -0,0 +1,5 @@
+import { animatePulseStyle } from '../../../constants/emotion';
+import { getColorVar } from '../../../theme';
+export const BlockSkeleton = (props) => {
+    return <div css={[animatePulseStyle, { borderRadius: 4, backgroundColor: getColorVar('neutral.200') }]} {...props}/>;
+};

package/dist/lib/loading/block-skeleton/index.d.ts

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

package/dist/lib/loading/block-skeleton/index.js

@@ -0,0 +1 @@
+export * from './block-skeleton';

package/dist/lib/loading/image-skeleton/image-skeleton.d.ts

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

package/dist/lib/loading/image-skeleton/image-skeleton.jsx

@@ -0,0 +1,20 @@
+import { animatePulseStyle } from '../../../constants/emotion';
+import { getColorVar } from '../../../theme';
+export const ImageSkeleton = (props) => {
+    return (<div css={[
+            animatePulseStyle,
+            {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                height: '100%',
+                borderRadius: '0.25rem',
+                backgroundColor: getColorVar('neutral.200'),
+            },
+        ]} {...props}>
+      <svg css={{ width: '25%', height: '25%', color: getColorVar('neutral.400') }} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+        <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
+      </svg>
+    </div>);
+};

package/dist/lib/loading/image-skeleton/index.d.ts

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

package/dist/lib/loading/image-skeleton/index.js

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

package/dist/lib/loading/image-skeleton/types.d.ts

@@ -1,3 +1,2 @@
 import { JSX } from 'react';
 export type ImageSkeletonProps = JSX.IntrinsicElements['div'];
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/loading/image-skeleton/types.js

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

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

@@ -2,4 +2,3 @@ export * from './image-skeleton';
 export * from './text-skeleton';
 export * from './loading-overlay';
 export * from './block-skeleton';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/loading/index.js

@@ -0,0 +1,4 @@
+export * from './image-skeleton';
+export * from './text-skeleton';
+export * from './loading-overlay';
+export * from './block-skeleton';

package/dist/lib/loading/loading-overlay/index.d.ts

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

package/dist/lib/loading/loading-overlay/index.js

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

package/dist/lib/loading/loading-overlay/loading-overlay.d.ts

@@ -1,3 +1,2 @@
 import { LoadingOverlayProps } from './types';
 export declare const LoadingOverlay: ({ isLoading, iconProps, color, style, size, children, ...props }: LoadingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=loading-overlay.d.ts.map

package/dist/lib/loading/loading-overlay/loading-overlay.jsx

@@ -0,0 +1,27 @@
+import { SvgLoader } from '../../../components';
+import { animateSpinStyle } from '../../../constants/emotion';
+import LoadingIcon from '@/assets/svg/loading-waiting.svg?raw';
+import { getColorShadesByVariant } from '../../../utils';
+export const LoadingOverlay = ({ isLoading = false, iconProps, color = 'primary', style, size = 32, children, ...props }) => {
+    const { main } = getColorShadesByVariant(color);
+    return (<div style={{
+            minWidth: size,
+            minHeight: size,
+            ...style,
+        }} css={{ position: 'relative' }} {...props}>
+      {children}
+      {isLoading && (<div {...iconProps} css={{
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                zIndex: 10,
+                display: 'grid',
+                placeItems: 'center',
+                cursor: 'progress',
+            }}>
+          <SvgLoader source={LoadingIcon} width={size} height={size} css={animateSpinStyle} style={{ color: main }}/>
+        </div>)}
+    </div>);
+};

package/dist/lib/loading/loading-overlay/types.d.ts

@@ -6,4 +6,3 @@ export type LoadingOverlayProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     color?: ColorVariant;
     iconProps?: JSX.IntrinsicElements['div'];
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/loading/loading-overlay/types.js

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

package/dist/lib/loading/text-skeleton/index.d.ts

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

package/dist/lib/loading/text-skeleton/index.js

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

package/dist/lib/loading/text-skeleton/text-skeleton.d.ts

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