@janbox/storefront-ui 1.0.17 → 1.0.19

package/dist/lib/input-range/input-range.jsx

@@ -0,0 +1,117 @@
+/** @jsxImportSource @emotion/react */
+import { Fragment, useRef } from 'react';
+import { getInputRangeProps } from './helpers';
+import classes from './input-range.module.scss';
+import { getSizeVariantState, cn } from '../../utils';
+import { FormHelperText } from '../form-helper-text';
+import { Icon } from '../icon';
+import { InputNumber } from '../input-number';
+import LongArrowRightIcon from '@/assets/svg/long-arrow-right.svg?raw';
+import { mediaQuery } from '../../theme';
+export const InputRange = (_props) => {
+    const { error, helperText, inputs, xs, md, sm, lg, className, onChange, prefix, suffix, startIcon, endIcon, ...props } = getInputRangeProps(_props);
+    const containerRef = useRef(null);
+    const inputRefs = useRef([]);
+    const iconProps = {
+        xs: {
+            size: getSizeVariantState(xs?.size).iconSize,
+        },
+        sm: {
+            size: getSizeVariantState(sm?.size).iconSize,
+        },
+        md: {
+            size: getSizeVariantState(md?.size).iconSize,
+        },
+        lg: {
+            size: getSizeVariantState(lg?.size).iconSize,
+        },
+    };
+    const onInputFocus = (e) => {
+        e.target.select();
+        inputs?.at(Number(e.currentTarget.dataset.index))?.onFocus?.(e);
+    };
+    const onInputChange = (e) => {
+        const edge = e.currentTarget.dataset.edge;
+        onChange?.(e, edge);
+        inputs?.at(Number(e.currentTarget.dataset.index))?.onChange?.(e);
+    };
+    const css = [
+        createStyle(xs),
+        {
+            [mediaQuery('sm')]: createStyle(sm),
+            [mediaQuery('md')]: createStyle(md),
+            [mediaQuery('lg')]: createStyle(lg),
+        },
+    ];
+    return (<div css={{ width: '100%' }}>
+      <div css={css} className={cn(classes.input_range, className)} {...props} ref={containerRef}>
+        {prefix}
+        {!!startIcon && (<Icon {...startIcon} css={{ flexShrink: 0 }} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+                ...startIcon.xs,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+                ...startIcon.sm,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+                ...startIcon.md,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+                ...startIcon.lg,
+            }}/>)}
+
+        {['from', 'to'].map((edge, index, array) => {
+            const inputProps = inputs?.at(index) ?? {};
+            return (<Fragment key={index}>
+              <InputNumber key={index} ref={(el) => {
+                    inputRefs.current[index] = el;
+                }} data-edge={edge} data-index={index} css={{ textAlign: 'center' }} mainProps={{
+                    style: {
+                        borderWidth: 0,
+                        boxShadow: 'none',
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                    },
+                }} mode="onBlur" {...inputProps} onChange={onInputChange} onFocus={onInputFocus} xs={{
+                    size: xs?.size,
+                    ...inputProps.xs,
+                }} sm={{
+                    size: sm?.size,
+                    ...inputProps.sm,
+                }} md={{
+                    size: md?.size,
+                    ...inputProps.md,
+                }} lg={{
+                    size: lg?.size,
+                    ...inputProps.lg,
+                }}/>
+              {index < array.length - 1 && <Icon {...iconProps} css={{ flexShrink: 0 }} source={LongArrowRightIcon}/>}
+            </Fragment>);
+        })}
+        {!!endIcon && (<Icon {...endIcon} css={{ flexShrink: 0 }} xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+                ...endIcon.xs,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+                ...endIcon.sm,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+                ...endIcon.md,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+                ...endIcon.lg,
+            }}/>)}
+        {suffix}
+      </div>
+      <FormHelperText error={error}>{helperText}</FormHelperText>
+    </div>);
+};
+const createStyle = ({ size } = {}) => {
+    const { inputPaddingX } = getSizeVariantState(size);
+    return [
+        {
+            paddingLeft: inputPaddingX,
+            paddingRight: inputPaddingX,
+        },
+    ];
+};

package/dist/lib/input-range/input-range.module.scss

@@ -0,0 +1,17 @@
+.input_range {
+  display: flex;
+  align-items: center;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.5rem;
+  gap: 0.5rem;
+
+  &:has(input:focus) {
+    border-color: var(--color-primary-600);
+    box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
+  }
+
+  &:hover {
+    border-color: var(--color-primary-300);
+  }
+}

package/dist/lib/input-range/types.d.ts

@@ -1,7 +1,7 @@
-import { JSX } from 'react';
-import { IconProps } from '../icon';
-import { InputNumberProps } from '../input-number/types';
-import { SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
+import { JSX } from "react";
+import { IconProps } from "../icon";
+import { InputNumberProps } from "../input-number/types";
+import { SizeVariant, ResponsiveDesign, ShallowMerge } from "../../types";
 export interface InputRangeResponsiveProps {
     size?: SizeVariant;
 }
@@ -18,4 +18,3 @@ interface InputRangeExtendedProps extends ResponsiveDesign<InputRangeResponsiveP
 }
 export type InputRangeProps = ShallowMerge<JSX.IntrinsicElements["div"], InputRangeExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/input-range/types.js

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

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,195 @@
+/** @jsxImportSource @emotion/react */
+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,5 +1,5 @@
+/** @jsxImportSource @emotion/react */
 import { JSX } from 'react';
-import { PrimitiveProps } from '../../primitive';
-export type BlockSkeletonProps = PrimitiveProps<JSX.IntrinsicElements['div'], HTMLDivElement>;
-export declare const BlockSkeleton: (props: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=block-skeleton.d.ts.map
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+export type BlockSkeletonProps = ShallowMerge<JSX.IntrinsicElements['div'], ResponsiveDesign<PropsWithCSS>>;
+export declare const BlockSkeleton: ({ xs, sm, md, lg, ...props }: BlockSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;