@os-design/core 1.0.303 → 1.0.305

package/src/Gallery/index.tsx

@@ -63,7 +63,7 @@ const RightButton = styled(NavButton)`
   right: 0.2em;
 `;
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface GalleryProps extends JsxDivProps {
   /**
    * The image urls.
@@ -125,6 +125,7 @@ const Gallery = forwardRef<HTMLDivElement, GalleryProps>(
 
     // Update the image if the index was changed
     useEffect(() => {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
     }, [imageIndex, urls]);
 

package/src/GlobalStyles/index.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
 import * as Stories from './index.stories';
 
 <Meta title='Global styles' />

package/src/Image/index.tsx

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { omitEmotionProps } from '@os-design/utils';
-import { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 
 const EMPTY_IMAGE =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';
 
-type JsxImgProps = Omit<JSX.IntrinsicElements['img'], 'sizes' | 'ref'>;
+type JsxImgProps = Omit<React.JSX.IntrinsicElements['img'], 'sizes' | 'ref'>;
 export interface ImageProps extends JsxImgProps {
   /**
    * The image URL.

package/src/Input/index.tsx

@@ -21,7 +21,7 @@ import React, {
 import getFocusableElements from './utils/getFocusableElements.js';
 
 type JsxInputProps = Omit<
-  JSX.IntrinsicElements['input'],
+  React.JSX.IntrinsicElements['input'],
   'value' | 'onChange' | 'size' | 'ref'
 >;
 export interface InputProps extends JsxInputProps, WithSize {
@@ -71,7 +71,7 @@ export interface InputProps extends JsxInputProps, WithSize {
    * The props of the input container.
    * @default undefined
    */
-  containerProps?: JSX.IntrinsicElements['div'];
+  containerProps?: React.JSX.IntrinsicElements['div'];
   /**
    * The input value.
    * @default undefined

package/src/InputDateUnstyled/index.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   forwardRef,
   useCallback,
   useEffect,
@@ -37,7 +37,7 @@ export interface Selection {
 }
 
 type JsxInputProps = Omit<
-  JSX.IntrinsicElements['input'],
+  React.JSX.IntrinsicElements['input'],
   'value' | 'defaultValue' | 'onChange' | 'ref'
 >;
 
@@ -432,7 +432,7 @@ const InputDateUnstyled = forwardRef<HTMLInputElement, InputDateUnstyledProps>(
           const prev = prevToken(start, formatRef.current, tokens);
           if (!prev) return;
 
-          let substr = '_';
+          let substr;
           if (prev.token === 'aa') {
             // Move the caret to the start of the meridiem token and erase
             // all the characters of this token.

package/src/InputNumber/index.tsx

@@ -12,8 +12,10 @@ import defaultLocale, {
   type InputNumberLocale,
 } from './utils/defaultLocale.js';
 
-export interface InputNumberProps
-  extends Omit<InputProps, 'type' | 'value' | 'onChange'> {
+export interface InputNumberProps extends Omit<
+  InputProps,
+  'type' | 'value' | 'onChange'
+> {
   /**
    * The minimum value.
    * @default 0

package/src/InputSearch/index.tsx

@@ -10,8 +10,10 @@ import defaultLocale, {
   type InputSearchLocale,
 } from './utils/defaultLocale.js';
 
-export interface InputSearchProps
-  extends Omit<InputProps, 'type' | 'onChange'> {
+export interface InputSearchProps extends Omit<
+  InputProps,
+  'type' | 'onChange'
+> {
   /**
    * The locale.
    * @default undefined

package/src/Link/index.tsx

@@ -15,7 +15,7 @@ export interface ReactRouterLinkProps {
   replace?: boolean;
 }
 
-type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+type JsxAProps = Omit<React.JSX.IntrinsicElements['a'], 'ref'>;
 export interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {
   /**
    * Type of the underline styles.

package/src/LinkButton/index.tsx

@@ -7,14 +7,14 @@ import {
 } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import {
   DisabledWrapper,
   underlineAlwaysStyles,
   underlineHoverStyles,
 } from '../Link/index.js';
 
-type JsxButtonProps = Omit<JSX.IntrinsicElements['button'], 'ref'>;
+type JsxButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'ref'>;
 
 export interface LinkButtonProps extends JsxButtonProps, WithSize {
   /**

package/src/List/WindowScroller.tsx

@@ -25,7 +25,7 @@ const WindowScroller: React.FC<WindowScrollerProps> = ({
   onScroll = () => {},
   children,
 }) => {
-  const onScrollRef = useRef<WindowScrollerProps['onScroll']>();
+  const onScrollRef = useRef<WindowScrollerProps['onScroll']>(undefined);
 
   useEffect(() => {
     onScrollRef.current = onScroll;

package/src/ListItemActions/index.tsx

@@ -21,7 +21,7 @@ export interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {
   icon: React.ReactElement;
 }
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface ListItemActionsProps extends JsxDivProps, WithSize {
   /**
    * Buttons to control the item.
@@ -158,6 +158,7 @@ const ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(
       if (actions.length === 0) return null;
       const items = actions.map(
         ({ icon, onClick = () => {}, ...actionRest }) => {
+          // eslint-disable-next-line react-hooks/globals
           actionIndex += 1;
           return (
             <Button

package/src/ListItemLink/index.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 import { resetFocusStyles } from '@os-design/styles';
 import { clr, type Color } from '@os-design/theming';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import type { LinkProps, ReactRouterLinkProps } from '../Link/index.js';
 import ListItem, { type ListItemProps } from '../ListItem/index.js';
 
-type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+type JsxAProps = Omit<React.JSX.IntrinsicElements['a'], 'ref'>;
 export type ListItemLinkProps = JsxAProps &
   ReactRouterLinkProps &
   Pick<LinkProps, 'as'> &

package/src/ListItemSkeleton/index.tsx

@@ -3,8 +3,10 @@ import { forwardRef } from 'react';
 import ListItem, { type ListItemProps } from '../ListItem/index.js';
 import Skeleton from '../Skeleton/index.js';
 
-export interface ListItemSkeletonProps
-  extends Omit<ListItemProps, 'title' | 'description' | 'actions'> {
+export interface ListItemSkeletonProps extends Omit<
+  ListItemProps,
+  'title' | 'description' | 'actions'
+> {
   /**
    * The description placeholder.
    * @default false

package/src/ListSkeleton/index.tsx

@@ -6,7 +6,8 @@ import ListItemSkeleton, {
 } from '../ListItemSkeleton/index.js';
 
 export interface ListSkeletonProps
-  extends Omit<ListProps, 'itemCount' | 'itemRenderer' | 'children'>,
+  extends
+    Omit<ListProps, 'itemCount' | 'itemRenderer' | 'children'>,
     Pick<
       ListItemSkeletonProps,
       | 'hasDescription'

package/src/LogoLink/index.tsx

@@ -8,15 +8,12 @@ import {
 } from '@os-design/styles';
 import { useTheme } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import type { LinkProps, ReactRouterLinkProps } from '../Link/index.js';
 
-type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+type JsxAProps = Omit<React.JSX.IntrinsicElements['a'], 'ref'>;
 export interface LogoLinkProps
-  extends JsxAProps,
-    ReactRouterLinkProps,
-    Pick<LinkProps, 'as'>,
-    WithSize {
+  extends JsxAProps, ReactRouterLinkProps, Pick<LinkProps, 'as'>, WithSize {
   /**
    * The source of the logo image.
    */

package/src/Menu/index.tsx

@@ -68,6 +68,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(
     const isMinXs = useIsMinWidth('xs');
 
     const menuId = useMemo(
+      // eslint-disable-next-line react-hooks/purity
       () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,
       [id]
     );

package/src/MenuDivider/index.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { clr } from '@os-design/theming';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 
-export type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export type MenuDividerProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 
 const Container = styled.div`
   padding-top: 0.4em;

package/src/MenuGroup/index.tsx

@@ -5,10 +5,10 @@ import { ellipsisStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { useForwardedState } from '@os-design/utils';
 import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
-import MenuItem from '../MenuItem/index.js';
+import MenuItem, { type MenuItemProps } from '../MenuItem/index.js';
 
 type JsxDivProps = Omit<
-  JSX.IntrinsicElements['div'],
+  React.JSX.IntrinsicElements['div'],
   'defaultValue' | 'value' | 'onChange' | 'ref'
 >;
 interface BaseMenuGroupProps<T> extends JsxDivProps {
@@ -138,7 +138,8 @@ const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(
         React.Children.map(children, (child) => {
           if (!React.isValidElement(child) || child.type !== MenuItem)
             return child;
-          const { value: childValue, onClick: childOnClick } = child.props;
+          const { value: childValue, onClick: childOnClick } =
+            child.props as MenuItemProps;
           const selected =
             (multiple && (forwardedValue || []).includes(childValue)) ||
             (!multiple && forwardedValue === childValue);

package/src/MenuItem/index.tsx

@@ -8,8 +8,10 @@ import { omitEmotionProps } from '@os-design/utils';
 import { forwardRef, useCallback, useContext, useEffect, useRef } from 'react';
 import Button, { type ButtonProps } from '../Button/index.js';
 
-export interface MenuItemProps
-  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {
+export interface MenuItemProps extends Omit<
+  ButtonProps,
+  'type' | 'wide' | 'size'
+> {
   /**
    * Whether the menu item is selected.
    * @default false
@@ -63,7 +65,7 @@ const SelectedIcon = styled(Check)`
 const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
   ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {
     const { closeOnSelect, onClose } = useContext(MenuContext);
-    const onClickRef = useRef<MenuItemProps['onClick']>();
+    const onClickRef = useRef<MenuItemProps['onClick']>(undefined);
 
     useEffect(() => {
       onClickRef.current = onClick;

package/src/Modal/index.tsx

@@ -24,7 +24,7 @@ import FocusLock from 'react-focus-lock';
 import Button from '../Button/index.js';
 import defaultLocale, { type ModalLocale } from './utils/defaultLocale.js';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface ModalProps extends JsxDivProps, WithSize {
   /**
    * The title of the modal.
@@ -312,10 +312,12 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
     useBodyScroll(!visible);
 
     const titleId = useMemo(
+      // eslint-disable-next-line react-hooks/purity
       () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,
       []
     );
     const bodyId = useMemo(
+      // eslint-disable-next-line react-hooks/purity
       () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,
       [id]
     );

package/src/Navigation/index.tsx

@@ -7,7 +7,7 @@ import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef, useRef } from 'react';
 import useScrollFlags from './utils/useScrollFlags.js';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface NavigationProps extends JsxDivProps {
   /**
    * The top component in the side navigator.

package/src/Navigation/utils/useScrollFlags.ts

@@ -7,7 +7,7 @@ interface UseScrollFlagsRes {
   hasNext: boolean;
 }
 
-const useScrollFlags = (ref: RefObject<Element>): UseScrollFlagsRes => {
+const useScrollFlags = (ref: RefObject<Element | null>): UseScrollFlagsRes => {
   const [hasPrev, setHasPrev] = useState(false);
   const [hasNext, setHasNext] = useState(false);
   const isMinMd = useIsMinWidth('md');

package/src/NavigationItem/index.tsx

@@ -7,11 +7,9 @@ import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef } from 'react';
 import type { LinkProps, ReactRouterLinkProps } from '../Link/index.js';
 
-type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+type JsxAProps = Omit<React.JSX.IntrinsicElements['a'], 'ref'>;
 export interface NavigationItemProps
-  extends JsxAProps,
-    ReactRouterLinkProps,
-    Pick<LinkProps, 'as'> {
+  extends JsxAProps, ReactRouterLinkProps, Pick<LinkProps, 'as'> {
   /**
    * The icon of the item.
    * @default undefined

package/src/PageContent/index.tsx

@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 import { m } from '@os-design/media';
 import { horizontalPaddingStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
-import { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import LayoutContext from '../Layout/LayoutContext.js';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface PageContentProps extends JsxDivProps {
   /**
    * Whether there is the list in the page content.

package/src/PageHeader/index.tsx

@@ -10,7 +10,7 @@ import Button from '../Button/index.js';
 import LayoutContext from '../Layout/LayoutContext.js';
 import defaultLocale, { type PageHeaderLocale } from './utils/defaultLocale.js';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface PageHeaderProps extends JsxDivProps {
   /**
    * The title of the page.

package/src/PageHeaderInputSearch/index.tsx

@@ -12,8 +12,10 @@ import defaultLocale, {
   type PageHeaderInputSearchLocale,
 } from './utils/defaultLocale.js';
 
-export interface PageHeaderInputSearchProps
-  extends Omit<InputSearchProps, 'size' | 'locale'> {
+export interface PageHeaderInputSearchProps extends Omit<
+  InputSearchProps,
+  'size' | 'locale'
+> {
   /**
    * The locale.
    * @default undefined

package/src/ParagraphSkeleton/index.tsx

@@ -48,6 +48,7 @@ const ParagraphSkeleton = forwardRef<HTMLDivElement, ParagraphSkeletonProps>(
       {Array(rows)
         .fill(0)
         .map((_, index) => {
+          // eslint-disable-next-line react-hooks/globals
           key += 1;
           return (
             <Skeleton key={key} width={index < rows - 1 ? '100%' : width} />

package/src/Popover/index.tsx

@@ -12,7 +12,7 @@ import {
   useForwardedRef,
   useResizeObserver,
 } from '@os-design/utils';
-import {
+import React, {
   forwardRef,
   type RefCallback,
   type RefObject,
@@ -28,18 +28,18 @@ import usePopoverPosition, {
   type Size,
 } from './utils/usePopoverPosition.js';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface PopoverProps extends JsxDivProps, WithSize {
   /**
    * Where the popover will be rendered.
    * @default document.body
    */
-  container?: RefObject<Element> | Element | null;
+  container?: RefObject<Element | null> | Element | null;
   /**
    * The element next to which the popover appears.
    * @default undefined
    */
-  trigger?: RefObject<Element> | Element | Rect | null;
+  trigger?: RefObject<Element | null> | Element | Rect | null;
   /**
    * On which side of the element the popover will appear.
    * @default top
@@ -185,7 +185,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     }, [popoverRef]);
     useResizeObserver(popoverRef.current, popoverResizeListener);
 
-    const containerRef = useMemo<RefObject<Element>>(() => {
+    const containerRef = useMemo<RefObject<Element | null>>(() => {
       if (typeof window === 'undefined') {
         return { current: null };
       }
@@ -249,7 +249,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       containerListener
     );
 
-    const triggerRef = useMemo<RefObject<Element>>(() => {
+    const triggerRef = useMemo<RefObject<Element | null>>(() => {
       if (!trigger || 'top' in trigger) {
         return { current: null };
       }
@@ -283,6 +283,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     // Set the aria tags to support accessibility features
     const popoverId = useMemo(
+      // eslint-disable-next-line react-hooks/purity
       () => id || `popover-${Math.random().toString(36).slice(2, 11)}`,
       [id]
     );

package/src/Progress/index.tsx

@@ -2,9 +2,9 @@ import styled from '@emotion/styled';
 import { type WithSize, sizeStyles, transitionStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface ProgressProps extends JsxDivProps, WithSize {
   /**
    * The percentage of completion.
@@ -71,6 +71,7 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>(
     }, [percent]);
 
     const textId = useMemo(
+      // eslint-disable-next-line react-hooks/purity
       () => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`,
       []
     );

package/src/RadioGroup/index.tsx

@@ -4,11 +4,13 @@ import { m } from '@os-design/media';
 import type { WithSize } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps, useForwardedState } from '@os-design/utils';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import Button, { type ButtonProps } from '../Button/index.js';
 
-export interface RadioGroupOption
-  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {
+export interface RadioGroupOption extends Omit<
+  ButtonProps,
+  'type' | 'wide' | 'size'
+> {
   /**
    * The title of the option.
    */
@@ -20,7 +22,7 @@ export interface RadioGroupOption
 }
 
 type JsxDivProps = Omit<
-  JSX.IntrinsicElements['div'],
+  React.JSX.IntrinsicElements['div'],
   'value' | 'defaultValue' | 'onChange' | 'ref'
 >;
 export interface RadioGroupProps extends JsxDivProps, WithSize {

package/src/Result/index.tsx

@@ -5,7 +5,7 @@ import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef } from 'react';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface ResultProps extends JsxDivProps, WithSize {
   /**
    * The title of the result.

package/src/ScrollButton/utils/useVisibility.ts

@@ -19,6 +19,7 @@ const useVisibility = ({
 
   // Update the visibility of the button when the user scrolls the container
   const updateVisibility = useCallback(() => {
+    // eslint-disable-next-line no-useless-assignment
     let offset = 0;
 
     if (!container) {

package/src/Select/index.tsx

@@ -42,13 +42,11 @@ export interface Option extends MenuItemProps {
 }
 
 type JsxDivProps = Omit<
-  JSX.IntrinsicElements['div'],
+  React.JSX.IntrinsicElements['div'],
   'value' | 'defaultValue' | 'onChange' | 'ref'
 >;
 interface BaseSelectProps<T>
-  extends JsxDivProps,
-    WithSize,
-    Pick<PopoverProps, 'placement'> {
+  extends JsxDivProps, WithSize, Pick<PopoverProps, 'placement'> {
   /**
    * Options of the select.
    * @default undefined
@@ -523,6 +521,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
     }, []);
 
     const listBoxId = useMemo(
+      // eslint-disable-next-line react-hooks/purity
       () => `listbox-${Math.random().toString(36).slice(2, 11)}`,
       []
     );

package/src/Skeleton/index.tsx

@@ -2,9 +2,9 @@ import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface SkeletonProps extends JsxDivProps {
   /**
    * The width of the skeleton.

package/src/Switch/index.tsx

@@ -8,10 +8,10 @@ import {
 } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps, useForwardedState } from '@os-design/utils';
-import { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 
 type JsxButtonProps = Omit<
-  JSX.IntrinsicElements['button'],
+  React.JSX.IntrinsicElements['button'],
   'value' | 'defaultValue' | 'onChange' | 'onClick' | 'ref'
 >;
 export interface SwitchProps extends JsxButtonProps, WithSize {

package/src/Tag/index.tsx

@@ -9,7 +9,7 @@ import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef } from 'react';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 
 export interface BaseTagProps extends WithSize {
   /**

package/src/TagLink/index.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import type { LinkProps, ReactRouterLinkProps } from '../Link/index.js';
 import {
   type BaseTagProps,
@@ -10,7 +10,7 @@ import {
   TagContainer,
 } from '../Tag/index.js';
 
-type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+type JsxAProps = Omit<React.JSX.IntrinsicElements['a'], 'ref'>;
 export type TagLinkProps = JsxAProps &
   ReactRouterLinkProps &
   Pick<LinkProps, 'as'> &

package/src/TagList/index.tsx

@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 import { Down, Up } from '@os-design/icons';
 import { type WithSize, sizeStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
-import { forwardRef, useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import Button from '../Button/index.js';
 
-type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+type JsxDivProps = Omit<React.JSX.IntrinsicElements['div'], 'ref'>;
 export interface TagListProps extends JsxDivProps, WithSize {
   /**
    * Whether the tag list is collapsible.

package/src/TagListSkeleton/index.tsx

@@ -26,6 +26,7 @@ const TagListSkeleton = forwardRef<HTMLDivElement, TagListSkeletonProps>(
       {Array(tagsCount)
         .fill(0)
         .map(() => {
+          // eslint-disable-next-line react-hooks/globals
           tagIndex += 1;
           return <TagSkeleton key={tagIndex} width={width} />;
         })}

package/src/TagSkeleton/index.tsx

@@ -5,8 +5,7 @@ import { forwardRef } from 'react';
 import Skeleton, { type SkeletonProps } from '../Skeleton/index.js';
 
 export interface TagSkeletonProps
-  extends Omit<SkeletonProps, 'width'>,
-    WithSize {
+  extends Omit<SkeletonProps, 'width'>, WithSize {
   /**
    * The width of the skeleton.
    * @default 6em