elements.\n // source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element\n if (component === 'td') {\n scope = undefined;\n } else if (!scope && isHeadCell) {\n scope = 'col';\n }\n const variant = variantProp || tablelvl2 && tablelvl2.variant;\n const ownerState = _extends({}, props, {\n align,\n component,\n padding: paddingProp || (table && table.padding ? table.padding : 'normal'),\n size: sizeProp || (table && table.size ? table.size : 'medium'),\n sortDirection,\n stickyHeader: variant === 'head' && table && table.stickyHeader,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n let ariaSort = null;\n if (sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n return /*#__PURE__*/_jsx(TableCellRoot, _extends({\n as: component,\n ref: ref,\n className: clsx(classes.root, className),\n \"aria-sort\": ariaSort,\n scope: scope,\n ownerState: ownerState\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableCell.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * Set the text-align on the table cell content.\n *\n * Monetary or generally number fields **should be right aligned** as that allows\n * you to add them up quickly in your head without having to worry about decimals.\n * @default 'inherit'\n */\n align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * Sets the padding applied to the cell.\n * The prop defaults to the value (`'default'`) inherited from the parent Table component.\n */\n padding: PropTypes.oneOf(['checkbox', 'none', 'normal']),\n /**\n * Set scope attribute.\n */\n scope: PropTypes.string,\n /**\n * Specify the size of the cell.\n * The prop defaults to the value (`'medium'`) inherited from the parent Table component.\n */\n size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),\n /**\n * Set aria-sort direction.\n */\n sortDirection: PropTypes.oneOf(['asc', 'desc', false]),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * Specify the cell type.\n * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.\n */\n variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['body', 'footer', 'head']), PropTypes.string])\n} : void 0;\nexport default TableCell;","import { useEffect, useState, useRef, useCallback } from 'react';\n\n/**\n * Custom hook to observe the intersection of a target element with the viewport.\n * It uses the Intersection Observer API to determine if the target element is in view.\n *\n * @param {number} threshold - A number between 0 and 1 indicating the percentage of the target's visibility required to trigger the observer.\n * @returns {[boolean, React.RefObject, React.RefObject]} - Returns a tuple containing:\n * - A boolean indicating if the target element is intersecting or has been rendered.\n * - A ref object to attach to the target element.\n * - A ref object to attach to a buffer element.\n *\n * Example usage:\n * const [isVisible, targetRef, bufferRef] = useIntersectionObserver(0.5);\n */\nexport const useIntersectionObserver = (\n threshold = 0,\n): [\n boolean,\n React.RefObject,\n React.RefObject,\n] => {\n // State to track if the target element is intersecting\n const [isIntersecting, setIsIntersecting] = useState(false);\n // State to track if the target element has been rendered\n const [hasRendered, setHasRendered] = useState(false);\n // State to count the number of times the target has intersected\n const [count, setCount] = useState(0);\n\n // Ref to attach to the target element\n const targetRef = useRef(null);\n // Ref to attach to the buffer element\n const bufferRef = useRef(null);\n\n /**\n * Callback function to update the intersection state.\n * It is triggered whenever the intersection state of the target element changes.\n *\n * @param {IntersectionObserverEntry[]} entries - Array of intersection observer entries.\n */\n const updateIntersection = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const entry = entries[0];\n setIsIntersecting(entry.isIntersecting);\n\n if (entry.isIntersecting && !hasRendered) {\n if (count > 1) {\n setHasRendered(true);\n return;\n }\n\n setCount(prevCount => prevCount + 1);\n }\n },\n [count, hasRendered],\n );\n\n /**\n * Callback function to handle the observation of the buffer element.\n * Sets up the Intersection Observer and starts observing the buffer element.\n *\n * @returns {Function} - A cleanup function to unobserve the buffer element.\n */\n const handleObserve = useCallback(() => {\n const observer = new IntersectionObserver(updateIntersection, {\n threshold,\n rootMargin: '100px 0px 100px 0px',\n });\n\n const bufferElement = bufferRef.current;\n if (bufferElement) {\n observer.observe(bufferElement);\n }\n\n return () => {\n if (bufferElement) {\n observer.unobserve(bufferElement);\n }\n };\n }, [threshold, updateIntersection]);\n\n // Effect to start observing the buffer element when the component mounts and clean up when it unmounts\n useEffect(handleObserve, [threshold, handleObserve]);\n\n // Return the intersection state and refs for the target and buffer elements\n return [isIntersecting || hasRendered, targetRef, bufferRef];\n};\n","/* eslint-disable react/display-name */\nimport React, { ComponentType } from 'react';\nimport styles from './styles.module.scss';\nimport { useIntersectionObserver } from '@starsoft/common/hooks';\n\n/**\n * Higher-Order Component (HOC) for lazy loading a component based on its visibility in the viewport.\n *\n * @template T - Type of the props that the wrapped component accepts.\n * @param {ComponentType} WrappedComponent - The component to be lazy-loaded.\n * @param {number} [threshold=0] - The threshold for the intersection observer. Default is 0.\n * @returns {React.FC} A functional component that wraps the given component and lazy loads it.\n *\n * @example\n * // Usage example:\n * const LazyLoadedComponent = withLazyLoad(MyComponent, 0.5);\n *\n * function App() {\n * return (\n *