@janbox/storefront-ui 1.0.19 → 1.0.21

package/dist/lib/tabs/tab-panel/tab-panel.jsx

@@ -1,6 +1,6 @@
-import { useTabsContext } from '../tabs';
-import { mediaQuery } from '../../../theme';
-import { mergeComponentProps } from '../../../utils';
+import { useTabsContext } from '../tabs/index.js';
+import { mediaQuery } from '../../../theme/index.js';
+import { mergeComponentProps } from '../../../utils/index.js';
 export const TabPanel = ({ children, ref, ..._props }) => {
     const { tabPanelProps: defaultTabPanelProps = {} } = useTabsContext();
     const { xs, sm, md, lg, ...props } = mergeComponentProps(defaultTabPanelProps, _props);

package/dist/lib/tabs/tab-panel/types.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types/index.js';
 interface TabPanelExtendedProps extends ResponsiveDesign<PropsWithCSS> {
 }
 export type TabPanelProps = ShallowMerge<JSX.IntrinsicElements['div'], TabPanelExtendedProps>;

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

@@ -1,4 +1,4 @@
-import { TabsProps } from './types';
+import { TabsProps } from './types.js';
 export declare const getTabsProps: (extended: TabsProps) => TabsProps;
 export type TabsContextValue = {
     activeIndex: number;

package/dist/lib/tabs/tabs/helpers.js

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
-import { getColorVar } from '../../../theme';
-import { mergeComponentProps } from '../../../utils';
+import { getColorVar } from '../../../theme/index.js';
+import { mergeComponentProps } from '../../../utils/index.js';
 const defaultProps = {
     tabProps: {
         color: 'neutral',

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

@@ -1,3 +1,3 @@
-export * from './tabs';
-export * from './types';
-export * from './helpers';
+export * from './tabs.jsx';
+export * from './types.js';
+export * from './helpers.js';

package/dist/lib/tabs/tabs/index.js

@@ -1,3 +1,3 @@
-export * from './tabs';
-export * from './types';
-export * from './helpers';
+export * from './tabs.jsx';
+export * from './types.js';
+export * from './helpers.js';

package/dist/lib/tabs/tabs/tabs.d.ts

@@ -1,2 +1,2 @@
-import { TabsProps } from './types';
+import { TabsProps } from './types.js';
 export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib/tabs/tabs/tabs.jsx

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { forwardRef, useMemo, useRef } from 'react';
-import { TabsContext, getTabsProps } from './helpers';
-import { useControllableState } from '../../../hooks';
-import { mediaQuery } from '../../../theme';
+import { TabsContext, getTabsProps } from './helpers.js';
+import { useControllableState } from '../../../hooks/index.js';
+import { mediaQuery } from '../../../theme/index.js';
 export const Tabs = forwardRef((_props, ref) => {
     const { defaultActiveIndex, xs, sm, md, lg, activeIndex, children, onTabChange, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange = true, ...rest } = getTabsProps(_props);
     const [activeTabIndex, setActiveTabIndex] = useControllableState({

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

@@ -1,8 +1,8 @@
 import { JSX } from "react";
-import { TabProps } from "../tab";
-import { TabIndicatorProps } from "../tab-indicator";
-import { TabPanelProps } from "../tab-panel";
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types";
+import { TabProps } from "../tab/index.js";
+import { TabIndicatorProps } from "../tab-indicator/index.js";
+import { TabPanelProps } from "../tab-panel/index.js";
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types/index.js";
 export type TabsResponsiveProps = PropsWithCSS;
 export interface TabsExtendedProps extends ResponsiveDesign<TabsResponsiveProps> {
     activeIndex?: number;

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

@@ -1,5 +1,5 @@
-import { TextProps, TextVariant } from './types';
-import { Screen } from '../../theme';
+import { TextProps, TextVariant } from './types.js';
+import { Screen } from '../../theme/index.js';
 import { CSSObject } from '@emotion/react';
 export declare const getTextCssByVariant: (variant?: TextVariant) => Partial<Record<Screen, CSSObject>>;
 export declare const getTextProps: (extended: TextProps) => TextProps;

package/dist/lib/text/helpers.js

@@ -1,5 +1,5 @@
-import { getTypographyVar } from '../../theme';
-import { mergeComponentProps } from '../../utils';
+import { getTypographyVar } from '../../theme/index.js';
+import { mergeComponentProps } from '../../utils/index.js';
 export const getTextCssByVariant = (variant) => {
     switch (variant) {
         case 'heading-1':

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

@@ -1,3 +1,3 @@
-export * from './text';
-export * from './types';
-export * from './helpers';
+export * from './text.jsx';
+export * from './types.js';
+export * from './helpers.js';

package/dist/lib/text/index.js

@@ -1,3 +1,3 @@
-export * from './text';
-export * from './types';
-export * from './helpers';
+export * from './text.jsx';
+export * from './types.js';
+export * from './helpers.js';

package/dist/lib/text/text.d.ts

@@ -1,2 +1,2 @@
-import { TextProps } from './types';
+import { TextProps } from './types.js';
 export declare const Text: ({ children, ref, ..._props }: TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/lib/text/text.jsx

@@ -1,7 +1,7 @@
 import { isNil } from 'lodash-es';
-import { getTextProps } from './helpers';
-import { getTypographyVar, mediaQuery } from '../../theme';
-import { Primitive } from '../primitive';
+import { getTextProps } from './helpers.js';
+import { getTypographyVar, mediaQuery } from '../../theme/index.js';
+import { Primitive } from '../primitive/index.js';
 export const Text = ({ children, ref, ..._props }) => {
     const { xs, sm, md, lg, element = 'p', dangerouslySetInnerHTML, ...rest } = getTextProps(_props);
     const css = [

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes, HTMLElementType, Ref } from 'react';
-import { TypographySizeVariant } from '../../theme';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
+import { TypographySizeVariant } from '../../theme/index.js';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types/index.js';
 export type TextVariant = 'extra-small' | 'small' | 'base' | 'large' | 'heading-6' | 'heading-5' | 'heading-4' | 'heading-3' | 'heading-2' | 'heading-1';
 export interface TextResponsiveProps extends PropsWithCSS {
     sizeVariant?: TypographySizeVariant;

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

@@ -1,2 +1,2 @@
-import { TextareaProps } from './types';
+import { TextareaProps } from './types.js';
 export declare const getTextareaProps: (extended: TextareaProps) => TextareaProps;

package/dist/lib/textarea/helpers.js

@@ -1,4 +1,4 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from '../../utils/index.js';
 const defaultProps = {
     xs: {
         size: 'md',

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

@@ -1,3 +1,3 @@
-export * from './textarea';
-export * from './types';
-export * from './helpers';
+export * from './textarea.jsx';
+export * from './types.js';
+export * from './helpers.js';

package/dist/lib/textarea/index.js

@@ -1,3 +1,3 @@
-export * from './textarea';
-export * from './types';
-export * from './helpers';
+export * from './textarea.jsx';
+export * from './types.js';
+export * from './helpers.js';

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

@@ -1,2 +1,2 @@
-import { TextareaProps } from './types';
+import { TextareaProps } from './types.js';
 export declare const Textarea: ({ ref, ..._props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/lib/textarea/textarea.jsx

@@ -2,12 +2,12 @@
 import { useRef, useState } from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 import { isString } from 'lodash-es';
-import { getTextareaProps } from './helpers';
+import { getTextareaProps } from './helpers.js';
 import classes from './textarea.module.scss';
-import { getSizeVariantState } from '../../utils';
-import { FormHelperText } from '../form-helper-text';
-import { cn } from '../../utils';
-import { getTypographyVar, mediaQuery } from '../../theme';
+import { getSizeVariantState } from '../../utils/index.js';
+import { FormHelperText } from '../form-helper-text/index.js';
+import { cn } from '../../utils/index.js';
+import { getTypographyVar, mediaQuery } from '../../theme/index.js';
 export const Textarea = ({ ref, ..._props }) => {
     const { xs, sm, md, lg, containerProps, className, helperText, error, onChange: onChangeProp, debounce = 0, mode = 'onChange', value, ...rest } = getTextareaProps(_props);
     const textareaRef = useRef(null);

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, JSX } from 'react';
-import { PropsWithCSS, SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
+import { PropsWithCSS, SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types/index.js';
 export interface TextareaResponsiveProps extends PropsWithCSS {
     size?: SizeVariant;
 }

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

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

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

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

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

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

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

@@ -2,15 +2,15 @@
 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 { useWindowScreen } from '../../hooks/index.js';
+import { getResponsiveProp, getSizeVariantState } from '../../utils/index.js';
+import { Floating, FloatingContent, FloatingTrigger } from '../floating/index.js';
+import { Icon } from '../icon/index.js';
+import { VirtualizedList } from '../../components/index.js';
+import { useControllableState } from '../../hooks/index.js';
 import CloseIcon from '@/assets/svg/times-close-delete.svg?raw';
 import ClockIcon from '@/assets/svg/clock-time.svg?raw';
-import { mediaQuery, getTypographyVar } from '../../theme';
+import { mediaQuery, getTypographyVar } from '../../theme/index.js';
 const TIME_FORMAT = 'HH:mm';
 // const ITEM_SIZE = 28;
 // const DISPLAY_ITEMS = 5;

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

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
-import { PropsWithCSS, ResponsiveDesign, SizeVariant } from '../../types';
+import { PropsWithCSS, ResponsiveDesign, SizeVariant } from '../../types/index.js';
 export interface TimeResponsiveProps extends PropsWithCSS {
     size?: Exclude<SizeVariant, 'lg'>;
 }

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

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

package/dist/lib/tooltip/index.js

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

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

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { ReactNode } from 'react';
-import { TooltipOptions } from './types';
+import { TooltipOptions } from './types.js';
 export declare function Tooltip({ children, defaultOpen, placement, open, onOpenChange, content, contentWidth, enable, handleClose, arrowProps, }: {
     children: ReactNode;
 } & TooltipOptions): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/lib/tooltip/tooltip.jsx

@@ -2,8 +2,8 @@
 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';
+import { useControllableState } from '../../hooks/index.js';
+import { getTypographyVar } from '../../theme/index.js';
 export function Tooltip({ children, defaultOpen = false, placement = 'top', open, onOpenChange, content, contentWidth, enable = true, handleClose, arrowProps, }) {
     const [visible, setVisible] = useControllableState({
         defaultValue: defaultOpen,

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

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

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

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

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

@@ -1,2 +1,2 @@
-import { ListItemProps } from './types';
+import { ListItemProps } from './types.js';
 export declare const getListItemProps: (extended: ListItemProps) => ListItemProps;

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

@@ -1,4 +1,4 @@
-import { mergeComponentProps } from '../../../utils';
+import { mergeComponentProps } from '../../../utils/index.js';
 const defaultProps = {
     xs: {
         css: {

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

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

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

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

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

@@ -1,2 +1,2 @@
-import { ListItemProps } from './types';
+import { ListItemProps } from './types.js';
 export declare const ListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

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

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { forwardRef } from 'react';
 import { isNil } from 'lodash-es';
-import { getListItemProps } from './helpers';
-import { mediaQuery } from '../../../theme';
+import { getListItemProps } from './helpers.js';
+import { mediaQuery } from '../../../theme/index.js';
 export const ListItem = forwardRef((_props, ref) => {
     const { xs, sm, md, children, dangerouslySetInnerHTML, ...rest } = getListItemProps(_props);
     const css = [

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

@@ -1,4 +1,4 @@
 import { JSX } from "react";
-import { PropsWithCSS, ResponsiveDesign } from "../../../types";
+import { PropsWithCSS, ResponsiveDesign } from "../../../types/index.js";
 export type ListItemResponsiveProps = PropsWithCSS;
 export type ListItemProps = JSX.IntrinsicElements["li"] & ResponsiveDesign<ListItemResponsiveProps>;

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

@@ -1,2 +1,2 @@
-import { UnorderedListProps } from './types';
+import { UnorderedListProps } from './types.js';
 export declare const getUnorderedListProps: (extended: UnorderedListProps) => UnorderedListProps;

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

@@ -1,4 +1,4 @@
-import { mergeComponentProps } from '../../../utils';
+import { mergeComponentProps } from '../../../utils/index.js';
 const defaultProps = {
     xs: {
         css: {

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

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

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

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

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

@@ -1,4 +1,4 @@
 import { JSX } from "react";
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types";
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types/index.js";
 export type UnorderedListResponsiveProps = PropsWithCSS;
 export type UnorderedListProps = ShallowMerge<JSX.IntrinsicElements["ul"], ResponsiveDesign<UnorderedListResponsiveProps>>;

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

@@ -1,2 +1,2 @@
-import { UnorderedListProps } from './types';
+import { UnorderedListProps } from './types.js';
 export declare const UnorderedList: import("react").ForwardRefExoticComponent<Omit<UnorderedListProps, "ref"> & import("react").RefAttributes<HTMLUListElement>>;

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { forwardRef } from 'react';
-import { getUnorderedListProps } from './helpers';
-import { mediaQuery } from '../../../theme';
+import { getUnorderedListProps } from './helpers.js';
+import { mediaQuery } from '../../../theme/index.js';
 export const UnorderedList = forwardRef((_props, ref) => {
     const { xs, sm, md, ...rest } = getUnorderedListProps(_props);
     const css = [

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

@@ -1,2 +1,2 @@
-import { VideoProps } from './types';
+import { VideoProps } from './types.js';
 export declare const getVideoProps: (extended: VideoProps) => VideoProps;

package/dist/lib/video/helpers.js

@@ -1,4 +1,4 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from '../../utils/index.js';
 const defaultProps = {
     controls: true,
 };

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

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

package/dist/lib/video/index.js

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

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

@@ -1,6 +1,6 @@
 import { ComponentType, JSX } from 'react';
 import { ReactPlayerProps } from 'react-player/types';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types/index.js';
 type VideoExtendedProps = ResponsiveDesign<PropsWithCSS> & {
     containerProps?: JSX.IntrinsicElements['div'];
     PlayerComponent?: ComponentType<ReactPlayerProps>;

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

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

package/dist/lib/video/video.jsx

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { createElement } from 'react';
 import ReactPlayer from 'react-player';
-import { getVideoProps } from './helpers';
-import { mediaQuery } from '../../theme';
+import { getVideoProps } from './helpers.js';
+import { mediaQuery } from '../../theme/index.js';
 export const Video = ({ ref, containerProps, PlayerComponent, ..._props }) => {
     const { xs, sm, md, lg, ...rest } = getVideoProps(_props);
     const css = [

package/dist/theme/index.d.ts

@@ -1,5 +1,5 @@
-export * from './screens';
-export * from './palette';
-export * from './typography';
-export * from './provider';
+export * from './screens.js';
+export * from './palette.js';
+export * from './typography.js';
+export * from './provider.jsx';
 export declare const FLOATING_Z_INDEX = 9999;

package/dist/theme/index.js

@@ -1,5 +1,5 @@
-export * from './screens';
-export * from './palette';
-export * from './typography';
-export * from './provider';
+export * from './screens.js';
+export * from './palette.js';
+export * from './typography.js';
+export * from './provider.jsx';
 export const FLOATING_Z_INDEX = 9999;

package/dist/theme/provider.jsx

@@ -1,8 +1,8 @@
 import { Global, ThemeProvider as EmotionThemeProvider } from '@emotion/react';
-import { getColorVar } from './palette';
+import { getColorVar } from './palette.js';
 import { flatten } from 'flat';
 import { flatMap } from 'lodash-es';
-import { getTypographyVar } from './typography';
+import { getTypographyVar } from './typography.js';
 export const ThemeProvider = ({ theme, children }) => {
     return (<EmotionThemeProvider theme={theme}>
       <Global styles={createGlobalStyle(theme)}/>

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@emotion/react';
 import type * as CSS from 'csstype';
-import { Screen } from '../theme';
+import { Screen } from '../theme/index.js';
 export type Nullable<T> = T | null;
 export type Dict<T> = Record<string, T>;
 export type ShallowMerge<T1, T2> = Omit<T1, keyof T2> & T2;

package/dist/utils/common.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Dict } from '../types';
+import { Dict } from '../types/index.js';
 export declare const ensureArray: <T>(val: T | T[]) => T[];
 export declare const ensureBoolean: <T extends boolean | string | undefined | null>(val: T) => boolean;
 export declare const normalizeSearchText: (str?: string, options?: {

package/dist/utils/common.js

@@ -1,7 +1,7 @@
 import { isValidElement } from 'react';
 import parse from 'html-react-parser';
 import { isArray, isBoolean, isNil, isString, omitBy, parseInt } from 'lodash-es';
-import { Booleanish } from '../constants';
+import { Booleanish } from '../constants/index.js';
 export const ensureArray = (val) => {
     if (isNil(val)) {
         return [];

package/dist/utils/index.d.ts

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
-import { Screen, TypographySizeVariant } from '../theme';
-import { SizeVariant, ColorVariant, ResponsiveDesign } from '../types';
+import { Screen, TypographySizeVariant } from '../theme/index.js';
+import { SizeVariant, ColorVariant, ResponsiveDesign } from '../types/index.js';
 import { Get, Paths } from 'type-fest';
-export * from './common';
-export * from './stylesheet';
-export * from './query-params';
+export * from './common.js';
+export * from './stylesheet.js';
+export * from './query-params.js';
 export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     main: string;
     contrastText: string;

package/dist/utils/index.js

@@ -1,9 +1,9 @@
 import { Children, Fragment, isValidElement } from 'react';
 import { mergeWith, omit, isUndefined, get } from 'lodash-es';
-import { getColorVar, screens, getSmallerScreens } from '../theme';
-export * from './common';
-export * from './stylesheet';
-export * from './query-params';
+import { getColorVar, screens, getSmallerScreens } from '../theme/index.js';
+export * from './common.js';
+export * from './stylesheet.js';
+export * from './query-params.js';
 export const getColorShadesByVariant = (variant) => {
     switch (variant) {
         case 'primary':

package/dist/utils/query-params.d.ts

@@ -1,4 +1,4 @@
-import { Nullable, Dict } from '../types';
+import { Nullable, Dict } from '../types/index.js';
 declare abstract class QueryParamParser<T> {
     value?: Nullable<string>;
     constructor(value?: Nullable<string>);

package/dist/utils/query-params.js

@@ -1,6 +1,6 @@
 import { flatten } from 'flat';
 import { isArray, isBoolean, isDate, isNil, isNumber, isPlainObject, isString, trim } from 'lodash-es';
-import { getEnumValues } from './common';
+import { getEnumValues } from './common.js';
 class QueryParamParser {
     constructor(value) {
         this.value = value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [
@@ -94,6 +94,7 @@
     "csstype": "^3.1.3",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",