@teamturing/react-kit 2.28.0 → 2.29.0

package/dist/core/Drawer/index.d.ts

@@ -8,11 +8,13 @@ import { UnstyledDrawerBodyProps } from './_UnstyledDrawerBody';
 import { UnstyledDrawerFooterProps } from './_UnstyledDrawerFooter';
 import { UnstyledDrawerHeaderProps } from './_UnstyledDrawerHeader';
 type DrawerSizeType = 'full' | 'l' | 'm' | 's';
+type DrawerDirectionType = 'right' | 'bottom';
 type Props = {
     isOpen?: boolean;
     onDismiss?: () => void;
     isOutsideClickDismissable?: boolean;
     size?: DrawerSizeType;
+    direction?: DrawerDirectionType;
     initialFocusRef?: RefObject<HTMLElement>;
 } & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
@@ -20,6 +22,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     onDismiss?: (() => void) | undefined;
     isOutsideClickDismissable?: boolean | undefined;
     size?: DrawerSizeType | undefined;
+    direction?: DrawerDirectionType | undefined;
     initialFocusRef?: RefObject<HTMLElement> | undefined;
 } & SxProp & {
     children?: import("react").ReactNode;

package/dist/index.js

@@ -16951,8 +16951,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/inverse']
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/primary/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/primary/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/primary/pressed']
@@ -16977,8 +16979,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/primary']
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/secondary/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/secondary/pressed']
@@ -17003,8 +17007,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/accent/gray']
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/neutral/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/neutral/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/neutral/pressed']
@@ -17042,8 +17048,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
         borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -17071,10 +17079,12 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/neutral/bolder']
       },
-      '&:hover:not(:disabled)': {
-        'color': theme.colors['text/neutral'],
-        '& svg': {
-          color: theme.colors['icon/accent/gray']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          'color': theme.colors['text/neutral'],
+          '& svg': {
+            color: theme.colors['icon/accent/gray']
+          }
         }
       },
       '&:active:not(:disabled)': {
@@ -17103,8 +17113,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/inverse']
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/danger/bold/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/danger/bold/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/danger/bold/pressed']
@@ -17901,8 +17913,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'primary': {
       'backgroundColor': theme.colors['bg/primary'],
       'color': theme.colors['icon/inverse'],
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/primary/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/primary/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/primary/pressed']
@@ -17915,8 +17929,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'secondary': {
       'backgroundColor': theme.colors['bg/secondary'],
       'color': theme.colors['icon/primary'],
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/secondary/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/secondary/pressed']
@@ -17929,8 +17945,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'neutral': {
       'backgroundColor': theme.colors['bg/neutral'],
       'color': theme.colors['icon/accent/gray'],
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/neutral/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/neutral/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/neutral/pressed']
@@ -17956,8 +17974,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
         borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -17973,8 +17993,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain-bold': {
       'backgroundColor': theme.colors['bg/neutral/subtler'],
       'color': theme.colors['icon/neutral/bolder'],
-      '&:hover:not(:disabled)': {
-        color: theme.colors['icon/accent/gray']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          color: theme.colors['icon/accent/gray']
+        }
       },
       '&:active:not(:disabled)': {
         color: theme.colors['icon/accent/gray']
@@ -17987,8 +18009,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain': {
       'backgroundColor': theme.colors['bg/neutral/subtler'],
       'color': theme.colors['icon/neutral/bold'],
-      '&:hover:not(:disabled)': {
-        color: theme.colors['icon/neutral/bolder']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          color: theme.colors['icon/neutral/bolder']
+        }
       },
       '&:active:not(:disabled)': {
         color: theme.colors['icon/neutral/bolder']
@@ -18001,8 +18025,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain-subtle': {
       'backgroundColor': theme.colors['bg/neutral/subtler'],
       'color': theme.colors['icon/neutral'],
-      '&:hover:not(:disabled)': {
-        color: theme.colors['icon/neutral/bold']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          color: theme.colors['icon/neutral/bold']
+        }
       },
       '&:active:not(:disabled)': {
         color: theme.colors['icon/neutral/bold']
@@ -18015,8 +18041,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'danger': {
       'backgroundColor': theme.colors['bg/danger/bold'],
       'color': theme.colors['icon/inverse'],
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/danger/bold/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/danger/bold/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/danger/bold/pressed']
@@ -19053,6 +19081,7 @@ const Drawer = ({
   onDismiss,
   isOutsideClickDismissable = true,
   size = 'm',
+  direction = 'right',
   initialFocusRef,
   sx
 }, ref) => {
@@ -19115,15 +19144,27 @@ const Drawer = ({
           ref: blanketRef
         })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
-        initial: {
-          x: '100%'
-        },
-        animate: {
-          x: 0
-        },
-        exit: {
-          x: '100%'
-        },
+        ...(direction === 'right' ? {
+          initial: {
+            x: '100%'
+          },
+          animate: {
+            x: 0
+          },
+          exit: {
+            x: '100%'
+          }
+        } : direction === 'bottom' ? {
+          initial: {
+            y: '100%'
+          },
+          animate: {
+            y: 0
+          },
+          exit: {
+            y: '100%'
+          }
+        } : {}),
         transition: {
           duration: 0.25,
           ease: easeInOut
@@ -19131,29 +19172,27 @@ const Drawer = ({
         sx: {
           position: 'fixed',
           display: 'flex',
-          top: 0,
-          right: 0,
-          bottom: 0,
           zIndex: 9999,
-          width: ['100%', '100%', 'fit-content']
+          ...(direction === 'right' ? {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: ['100%', '100%', 'fit-content']
+          } : direction === 'bottom' ? {
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%'
+          } : {})
         },
         children: /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDrawer, {
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
           tabIndex: -1,
-          sx: {
-            ...(size === 's' ? {
-              width: ['calc(100% - 32px)', 400, 400]
-            } : size === 'm' ? {
-              width: ['100%', '100%', 640]
-            } : size === 'l' ? {
-              width: ['100%', '100%', 860]
-            } : size === 'full' ? {
-              width: ['100%', '100%', 'calc(100vw - 80px)']
-            } : {}),
-            ...sx
-          },
+          size: size,
+          direction: direction,
+          sx: sx,
           onKeyDown: handleKeyDown,
           children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
             sx: {
@@ -19203,6 +19242,52 @@ const BaseDrawer = styled__default.default.div(({
   margin: 'auto',
   height: '100%',
   marginRight: 0
+}), ({
+  direction
+}) => direction === 'right' ? variant({
+  prop: 'size',
+  variants: {
+    s: {
+      width: ['calc(100% - 32px)', 400, 400]
+    },
+    m: {
+      width: ['100%', '100%', 640]
+    },
+    l: {
+      width: ['100%', '100%', 860]
+    },
+    full: {
+      width: ['100%', '100%', 'calc(100vw - 80px)']
+    }
+  }
+}) : variant({
+  prop: 'size',
+  variants: {
+    s: {
+      height: '40dvh',
+      maxHeight: '40dvh'
+    },
+    m: {
+      height: '60dvh',
+      maxHeight: '60dvh'
+    },
+    l: {
+      height: '80dvh',
+      maxHeight: '80dvh'
+    },
+    full: {
+      height: 'calc(100dvh - 80px)',
+      maxHeight: 'calc(100dvh - 80px)'
+    }
+  }
+}), variant({
+  prop: 'direction',
+  variants: {
+    right: {},
+    bottom: {
+      width: '100% !important'
+    }
+  }
 }), sx);
 var index$7 = Object.assign( /*#__PURE__*/React.forwardRef(Drawer), {
   UnstyledHeader: UnstyledDrawerHeader,
@@ -34657,7 +34742,9 @@ const OverlayPopper = ({
   } = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(theme.space[1]), flip(), shift()],
+    middleware: [offset(theme.space[1]), flip(), shift({
+      crossAxis: true
+    })],
     strategy: 'fixed'
   });
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({

package/esm/core/Button/index.js

@@ -136,8 +136,10 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/inverse']
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/primary/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/primary/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/primary/pressed']
@@ -162,8 +164,10 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/primary']
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/secondary/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/secondary/pressed']
@@ -188,8 +192,10 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/accent/gray']
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/neutral/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/neutral/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/neutral/pressed']
@@ -227,8 +233,10 @@ const BaseButton = styled(UnstyledButton)(({
         borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -256,10 +264,12 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/neutral/bolder']
       },
-      '&:hover:not(:disabled)': {
-        'color': theme.colors['text/neutral'],
-        '& svg': {
-          color: theme.colors['icon/accent/gray']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          'color': theme.colors['text/neutral'],
+          '& svg': {
+            color: theme.colors['icon/accent/gray']
+          }
         }
       },
       '&:active:not(:disabled)': {
@@ -288,8 +298,10 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: theme.colors['icon/inverse']
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/danger/bold/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/danger/bold/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/danger/bold/pressed']

package/esm/core/Drawer/index.js

@@ -1,6 +1,7 @@
 import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
 import SvgClose from '../../packages/icons/esm/Close.js';
 import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
 import IconButton from '../IconButton/index.js';
@@ -14,6 +15,7 @@ import UnstyledDrawerBody from './_UnstyledDrawerBody.js';
 import UnstyledDrawerFooter from './_UnstyledDrawerFooter.js';
 import UnstyledDrawerHeader from './_UnstyledDrawerHeader.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 import { AnimatePresence } from '../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 import { easeInOut } from '../../node_modules/framer-motion/dist/es/easing/ease.js';
 
@@ -23,6 +25,7 @@ const Drawer = ({
   onDismiss,
   isOutsideClickDismissable = true,
   size = 'm',
+  direction = 'right',
   initialFocusRef,
   sx
 }, ref) => {
@@ -85,15 +88,27 @@ const Drawer = ({
           ref: blanketRef
         })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
-        initial: {
-          x: '100%'
-        },
-        animate: {
-          x: 0
-        },
-        exit: {
-          x: '100%'
-        },
+        ...(direction === 'right' ? {
+          initial: {
+            x: '100%'
+          },
+          animate: {
+            x: 0
+          },
+          exit: {
+            x: '100%'
+          }
+        } : direction === 'bottom' ? {
+          initial: {
+            y: '100%'
+          },
+          animate: {
+            y: 0
+          },
+          exit: {
+            y: '100%'
+          }
+        } : {}),
         transition: {
           duration: 0.25,
           ease: easeInOut
@@ -101,29 +116,27 @@ const Drawer = ({
         sx: {
           position: 'fixed',
           display: 'flex',
-          top: 0,
-          right: 0,
-          bottom: 0,
           zIndex: 9999,
-          width: ['100%', '100%', 'fit-content']
+          ...(direction === 'right' ? {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: ['100%', '100%', 'fit-content']
+          } : direction === 'bottom' ? {
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%'
+          } : {})
         },
         children: /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDrawer, {
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
           tabIndex: -1,
-          sx: {
-            ...(size === 's' ? {
-              width: ['calc(100% - 32px)', 400, 400]
-            } : size === 'm' ? {
-              width: ['100%', '100%', 640]
-            } : size === 'l' ? {
-              width: ['100%', '100%', 860]
-            } : size === 'full' ? {
-              width: ['100%', '100%', 'calc(100vw - 80px)']
-            } : {}),
-            ...sx
-          },
+          size: size,
+          direction: direction,
+          sx: sx,
           onKeyDown: handleKeyDown,
           children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
             sx: {
@@ -173,6 +186,52 @@ const BaseDrawer = styled.div(({
   margin: 'auto',
   height: '100%',
   marginRight: 0
+}), ({
+  direction
+}) => direction === 'right' ? variant({
+  prop: 'size',
+  variants: {
+    s: {
+      width: ['calc(100% - 32px)', 400, 400]
+    },
+    m: {
+      width: ['100%', '100%', 640]
+    },
+    l: {
+      width: ['100%', '100%', 860]
+    },
+    full: {
+      width: ['100%', '100%', 'calc(100vw - 80px)']
+    }
+  }
+}) : variant({
+  prop: 'size',
+  variants: {
+    s: {
+      height: '40dvh',
+      maxHeight: '40dvh'
+    },
+    m: {
+      height: '60dvh',
+      maxHeight: '60dvh'
+    },
+    l: {
+      height: '80dvh',
+      maxHeight: '80dvh'
+    },
+    full: {
+      height: 'calc(100dvh - 80px)',
+      maxHeight: 'calc(100dvh - 80px)'
+    }
+  }
+}), variant({
+  prop: 'direction',
+  variants: {
+    right: {},
+    bottom: {
+      width: '100% !important'
+    }
+  }
 }), sx);
 var index = Object.assign( /*#__PURE__*/forwardRef(Drawer), {
   UnstyledHeader: UnstyledDrawerHeader,

package/esm/core/IconButton/index.js

@@ -82,8 +82,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'primary': {
       'backgroundColor': theme.colors['bg/primary'],
       'color': theme.colors['icon/inverse'],
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/primary/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/primary/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/primary/pressed']
@@ -96,8 +98,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'secondary': {
       'backgroundColor': theme.colors['bg/secondary'],
       'color': theme.colors['icon/primary'],
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/secondary/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/secondary/pressed']
@@ -110,8 +114,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'neutral': {
       'backgroundColor': theme.colors['bg/neutral'],
       'color': theme.colors['icon/accent/gray'],
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/neutral/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/neutral/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/neutral/pressed']
@@ -137,8 +143,10 @@ const BaseIconButton = styled(UnstyledButton)(({
         borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       },
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -154,8 +162,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'plain-bold': {
       'backgroundColor': theme.colors['bg/neutral/subtler'],
       'color': theme.colors['icon/neutral/bolder'],
-      '&:hover:not(:disabled)': {
-        color: theme.colors['icon/accent/gray']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          color: theme.colors['icon/accent/gray']
+        }
       },
       '&:active:not(:disabled)': {
         color: theme.colors['icon/accent/gray']
@@ -168,8 +178,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'plain': {
       'backgroundColor': theme.colors['bg/neutral/subtler'],
       'color': theme.colors['icon/neutral/bold'],
-      '&:hover:not(:disabled)': {
-        color: theme.colors['icon/neutral/bolder']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          color: theme.colors['icon/neutral/bolder']
+        }
       },
       '&:active:not(:disabled)': {
         color: theme.colors['icon/neutral/bolder']
@@ -182,8 +194,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'plain-subtle': {
       'backgroundColor': theme.colors['bg/neutral/subtler'],
       'color': theme.colors['icon/neutral'],
-      '&:hover:not(:disabled)': {
-        color: theme.colors['icon/neutral/bold']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          color: theme.colors['icon/neutral/bold']
+        }
       },
       '&:active:not(:disabled)': {
         color: theme.colors['icon/neutral/bold']
@@ -196,8 +210,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'danger': {
       'backgroundColor': theme.colors['bg/danger/bold'],
       'color': theme.colors['icon/inverse'],
-      '&:hover:not(:disabled)': {
-        backgroundColor: theme.colors['bg/danger/bold/hovered']
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover:not(:disabled)': {
+          backgroundColor: theme.colors['bg/danger/bold/hovered']
+        }
       },
       '&:active:not(:disabled)': {
         backgroundColor: theme.colors['bg/danger/bold/pressed']

package/esm/core/OverlayPopper/index.js

@@ -29,7 +29,9 @@ const OverlayPopper = ({
   } = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(theme.space[1]), flip(), shift()],
+    middleware: [offset(theme.space[1]), flip(), shift({
+      crossAxis: true
+    })],
     strategy: 'fixed'
   });
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "56bd9e11df60092d7bad4459c2ce79a7d8fe0039"
+  "gitHead": "b7418ad2dcfc8309263758233b2711bac6812586"
 }