@astral/ui 4.110.0 → 4.112.0

package/components/DataGrid/Body/styles.js

@@ -1,11 +1,10 @@
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { dataGridClassnames, MIN_ROW_HEIGHT } from '../constants';
 import { bodyClassnames } from './constants';
 export const Wrapper = styled.ul `
   --min-display-rows: 0;
 
-  scrollbar-gutter: stable;
-
   overflow-y: auto;
 
   width: fit-content;
@@ -17,6 +16,10 @@ export const Wrapper = styled.ul `
 
   list-style-type: none;
 
+  ${HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+  }
+
   &.${bodyClassnames.disableMinHeight} {
     min-height: unset;
   }
@@ -28,7 +31,7 @@ export const Wrapper = styled.ul `
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     scrollbar-gutter: unset;
-
+    
     overflow: initial;
 
     width: 100%;

package/components/DataGrid/Head/styles.js

@@ -1,4 +1,4 @@
-import { SCROLLBAR_SIZE } from '../../constants/scrollbar';
+import { HOVER_MEDIA, SCROLLBAR_SIZE } from '../../constants';
 import { styled } from '../../styled';
 export const Wrapper = styled('header', {
     shouldForwardProp: (prop) => !['$gridColumns'].includes(prop),
@@ -8,10 +8,13 @@ export const Wrapper = styled('header', {
 
   width: fit-content;
   min-width: 100%;
-  padding-right: ${SCROLLBAR_SIZE};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
+  ${HOVER_MEDIA} {
+    padding-right: ${SCROLLBAR_SIZE};
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }

package/components/GlobalStyles/GlobalStyles.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Global } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
 import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
-import { SCROLLBAR_SIZE } from '../constants';
+import { HOVER_MEDIA, SCROLLBAR_SIZE } from '../constants';
 import { useTheme } from '../theme/hooks/useTheme';
 export const GlobalStyles = ({ children, withScopedStyles = false, ...props }) => {
     const theme = useTheme();
@@ -25,20 +25,22 @@ export const GlobalStyles = ({ children, withScopedStyles = false, ...props }) =
                             fontSize: 16,
                         },
                     },
-                    '*::-webkit-scrollbar': {
-                        width: SCROLLBAR_SIZE,
-                        height: SCROLLBAR_SIZE,
-                        backgroundColor: theme.palette.grey[100],
-                        borderRadius: theme.shape.small,
-                    },
-                    '*::-webkit-scrollbar-thumb': {
-                        borderRadius: theme.shape.small,
-                        backgroundColor: theme.palette.grey[400],
-                    },
-                    '@-moz-document url-prefix()': {
-                        '*': {
-                            scrollbarWidth: 'thin',
-                            scrollbarColor: `${theme.palette.grey[400]} ${theme.palette.grey[100]}`,
+                    [HOVER_MEDIA]: {
+                        '*::-webkit-scrollbar': {
+                            width: SCROLLBAR_SIZE,
+                            height: SCROLLBAR_SIZE,
+                            backgroundColor: theme.palette.grey[100],
+                            borderRadius: theme.shape.small,
+                        },
+                        '*::-webkit-scrollbar-thumb': {
+                            borderRadius: theme.shape.small,
+                            backgroundColor: theme.palette.grey[400],
+                        },
+                        '@supports (-moz-appearance: none)': {
+                            '*': {
+                                scrollbarWidth: 'thin',
+                                scrollbarColor: `${theme.palette.grey[400]} ${theme.palette.grey[100]}`,
+                            },
                         },
                     },
                 } })] }));

package/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import type { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { type ComponentPropsWithRef, type ElementType } from 'react';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href' | 'className' | 'classes' | 'style' | 'children' | 'key' | 'target'> & {
+export type LinkProps<TComponent extends ElementType = ElementType> = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href' | 'className' | 'classes' | 'style' | 'children' | 'key' | 'target'> & {
     /**
      * Добавление иконки
      */
@@ -20,8 +20,18 @@ export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href
      * Позволяет переключить цвета ссылки на более контрастные
      */
     isContrast?: boolean;
-};
-export declare const Link: import("react").ForwardRefExoticComponent<Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
+    /**
+     * Тип элемента
+     *
+     * @example
+     * <Link component={RouterLink} to="/documents">
+     *   Документы
+     * </Link>
+     * @default 'a'
+     */
+    component?: TComponent;
+} & (ElementType extends TComponent ? {} : ComponentPropsWithRef<TComponent>);
+export declare const Link: <TComponent extends ElementType>(props: Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
     /**
      * Добавление иконки
      */
@@ -40,4 +50,14 @@ export declare const Link: import("react").ForwardRefExoticComponent<Pick<Withou
      * Позволяет переключить цвета ссылки на более контрастные
      */
     isContrast?: boolean | undefined;
-} & import("react").RefAttributes<HTMLAnchorElement>>;
+    /**
+     * Тип элемента
+     *
+     * @example
+     * <Link component={RouterLink} to="/documents">
+     *   Документы
+     * </Link>
+     * @default 'a'
+     */
+    component?: TComponent | undefined;
+} & (ElementType extends TComponent ? {} : ComponentPropsWithRef<TComponent>) & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/components/Link/Link.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { DownloadVOutlineSm } from '../../icons/DownloadVOutlineSm';
 import { OpenLinkOutlineSm } from '../../icons/OpenLinkOutlineSm';
+import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
 import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { linkClassnames } from './constants';
@@ -13,7 +13,8 @@ const linkCva = cva(linkClassnames.root, {
         },
     },
 });
-export const Link = forwardRef(({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
+const UnwrappedLink = ({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
     const icon = isDownload ? _jsx(DownloadVOutlineSm, {}) : _jsx(OpenLinkOutlineSm, {});
     return (_jsxs(StyledLink, { download: downloadFilename ?? isDownload, className: cn(linkCva({ isContrast }), className), ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && _jsx(DownloadVOutlineSm, {})] }));
-});
+};
+export const Link = forwardRefWithGeneric(UnwrappedLink);

package/components/NotificationList/styles.js

@@ -1,6 +1,6 @@
 import { drawerClasses } from '@mui/material/Drawer';
 import { bottomDrawerClassnames, OFFSET_TOP_SCREEN, } from '../BottomDrawer/constants';
-import { SCROLLBAR_SIZE } from '../constants';
+import { HOVER_MEDIA, SCROLLBAR_SIZE } from '../constants';
 import { SideDialog } from '../SideDialog';
 import { SideDialogActions } from '../SideDialogActions';
 import { SideDialogContent } from '../SideDialogContent';
@@ -24,12 +24,16 @@ export const TabsWrapper = styled(SideDialogContent) `
   }
 `;
 export const ContentWrapper = styled(SideDialogContent) `
-  scrollbar-gutter: stable;
-
   padding-top: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => `calc(${theme.spacing(6)} - ${SCROLLBAR_SIZE})`};
+  padding-right: ${({ theme }) => theme.spacing(6)};
   padding-bottom: ${({ theme }) => theme.spacing(1)};
 
+  ${HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+
+    padding-right: ${({ theme }) => `calc(${theme.spacing(6)} - ${SCROLLBAR_SIZE})`};
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(0)};
   }

package/components/PageContent/styles.js

@@ -1,4 +1,4 @@
-import { selfContainedClassname } from '../constants';
+import { HOVER_MEDIA, selfContainedClassname } from '../constants';
 import { pdfViewerClassnames } from '../PdfViewer/constants';
 import { styled } from '../styled';
 import { PAGE_CONTENT_ANIMATION, pageContentClassnames } from './constants';
@@ -52,13 +52,16 @@ export const Wrapper = styled('article', {
 `;
 export const Content = styled.div `
   scroll-behavior: smooth;
-  scrollbar-gutter: stable;
 
   overflow: auto;
   flex-grow: 1;
 
   padding: ${({ theme }) => theme.spacing(0, 6, 4)};
 
+  ${HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+  }
+
   &.${pageContentClassnames.contentHasHeader}, &.${pageContentClassnames.hasAside} {
     padding: ${({ theme }) => theme.spacing(4, 6, 4)};
   }
@@ -75,7 +78,7 @@ export const Content = styled.div `
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     scrollbar-gutter: unset;
-
+    
     overflow: hidden;
 
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};

package/components/PdfViewer/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { RESERVED_CONTROL_BAR_SPACE } from './constants';
 export const Wrapper = styled.div `
@@ -14,12 +15,15 @@ export const PDFViewerContainer = styled.div `
   }
 `;
 export const ScrollContainer = styled.div `
-  scrollbar-gutter: stable;
 
   overflow: ${({ $isViewerLite, $enabledZoom }) => $isViewerLite || !$enabledZoom ? 'unset' : 'auto'};
 
   height: 100%;
-
+  
+  ${HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+  }
+  
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     scrollbar-gutter: unset;
   }

package/components/theme/components/MuiOutlinedInput.js

@@ -15,6 +15,9 @@ export const MuiOutlinedInput = {
                     '&:hover': {
                         background: theme.palette.background.elementHover,
                     },
+                    '&:hover .MuiOutlinedInput-input:autofill': {
+                        boxShadow: `0 0 0 1000px ${theme.palette.background.elementHover} inset`,
+                    },
                     '&:hover .MuiOutlinedInput-notchedOutline': {
                         borderColor: theme.palette.grey[800],
                         transition: theme.transitions.create(['border-color'], {
@@ -50,7 +53,7 @@ export const MuiOutlinedInput = {
                     ? theme.spacing(1)
                     : theme.spacing(3),
                 '&:autofill': {
-                    boxShadow: '0 0 0 1000px white inset',
+                    boxShadow: `0 0 0 1000px ${theme.palette.common.white} inset`,
                 },
                 '&::placeholder': {
                     opacity: 1,

package/hook-form/FormPageLayoutBase/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../components/constants';
 import { PageContent, pageContentClassnames, } from '../../components/PageContent';
 import { PageHeader, pageHeaderClassnames } from '../../components/PageHeader';
 import { styled } from '../../components/styled';
@@ -17,13 +18,15 @@ export const MobileAlertWrapper = styled.div `
   }
 `;
 export const StyledPageContent = styled(PageContent) `
-  scrollbar-gutter: stable;
 
   overflow: auto;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 
   border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  ${HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+  }
 
   ${({ theme }) => theme.breakpoints.up('mobile')} {
     .${pageContentClassnames.content} {

package/node/components/DataGrid/Body/styles.js

@@ -1,37 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
-const constants_1 = require("../constants");
-const constants_2 = require("./constants");
+const constants_2 = require("../constants");
+const constants_3 = require("./constants");
 exports.Wrapper = styled_1.styled.ul `
   --min-display-rows: 0;
 
-  scrollbar-gutter: stable;
-
   overflow-y: auto;
 
   width: fit-content;
   min-width: 100%;
   height: 100%;
-  min-height: calc(var(--min-display-rows) * ${constants_1.MIN_ROW_HEIGHT}px);
+  min-height: calc(var(--min-display-rows) * ${constants_2.MIN_ROW_HEIGHT}px);
   margin: 0;
   padding: 0;
 
   list-style-type: none;
 
-  &.${constants_2.bodyClassnames.disableMinHeight} {
+  ${constants_1.HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+  }
+
+  &.${constants_3.bodyClassnames.disableMinHeight} {
     min-height: unset;
   }
 
-  &.${constants_1.dataGridClassnames.bodyEmpty} {
+  &.${constants_2.dataGridClassnames.bodyEmpty} {
     display: flex;
     align-items: center;
   }
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     scrollbar-gutter: unset;
-
+    
     overflow: initial;
 
     width: 100%;

package/node/components/DataGrid/Head/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const scrollbar_1 = require("../../constants/scrollbar");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 exports.Wrapper = (0, styled_1.styled)('header', {
     shouldForwardProp: (prop) => !['$gridColumns'].includes(prop),
@@ -11,10 +11,13 @@ exports.Wrapper = (0, styled_1.styled)('header', {
 
   width: fit-content;
   min-width: 100%;
-  padding-right: ${scrollbar_1.SCROLLBAR_SIZE};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
+  ${constants_1.HOVER_MEDIA} {
+    padding-right: ${constants_1.SCROLLBAR_SIZE};
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }

package/node/components/GlobalStyles/GlobalStyles.js

@@ -31,20 +31,22 @@ const GlobalStyles = ({ children, withScopedStyles = false, ...props }) => {
                             fontSize: 16,
                         },
                     },
-                    '*::-webkit-scrollbar': {
-                        width: constants_1.SCROLLBAR_SIZE,
-                        height: constants_1.SCROLLBAR_SIZE,
-                        backgroundColor: theme.palette.grey[100],
-                        borderRadius: theme.shape.small,
-                    },
-                    '*::-webkit-scrollbar-thumb': {
-                        borderRadius: theme.shape.small,
-                        backgroundColor: theme.palette.grey[400],
-                    },
-                    '@-moz-document url-prefix()': {
-                        '*': {
-                            scrollbarWidth: 'thin',
-                            scrollbarColor: `${theme.palette.grey[400]} ${theme.palette.grey[100]}`,
+                    [constants_1.HOVER_MEDIA]: {
+                        '*::-webkit-scrollbar': {
+                            width: constants_1.SCROLLBAR_SIZE,
+                            height: constants_1.SCROLLBAR_SIZE,
+                            backgroundColor: theme.palette.grey[100],
+                            borderRadius: theme.shape.small,
+                        },
+                        '*::-webkit-scrollbar-thumb': {
+                            borderRadius: theme.shape.small,
+                            backgroundColor: theme.palette.grey[400],
+                        },
+                        '@supports (-moz-appearance: none)': {
+                            '*': {
+                                scrollbarWidth: 'thin',
+                                scrollbarColor: `${theme.palette.grey[400]} ${theme.palette.grey[100]}`,
+                            },
                         },
                     },
                 } })] }));

package/node/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import type { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { type ComponentPropsWithRef, type ElementType } from 'react';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href' | 'className' | 'classes' | 'style' | 'children' | 'key' | 'target'> & {
+export type LinkProps<TComponent extends ElementType = ElementType> = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href' | 'className' | 'classes' | 'style' | 'children' | 'key' | 'target'> & {
     /**
      * Добавление иконки
      */
@@ -20,8 +20,18 @@ export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href
      * Позволяет переключить цвета ссылки на более контрастные
      */
     isContrast?: boolean;
-};
-export declare const Link: import("react").ForwardRefExoticComponent<Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
+    /**
+     * Тип элемента
+     *
+     * @example
+     * <Link component={RouterLink} to="/documents">
+     *   Документы
+     * </Link>
+     * @default 'a'
+     */
+    component?: TComponent;
+} & (ElementType extends TComponent ? {} : ComponentPropsWithRef<TComponent>);
+export declare const Link: <TComponent extends ElementType>(props: Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
     /**
      * Добавление иконки
      */
@@ -40,4 +50,14 @@ export declare const Link: import("react").ForwardRefExoticComponent<Pick<Withou
      * Позволяет переключить цвета ссылки на более контрастные
      */
     isContrast?: boolean | undefined;
-} & import("react").RefAttributes<HTMLAnchorElement>>;
+    /**
+     * Тип элемента
+     *
+     * @example
+     * <Link component={RouterLink} to="/documents">
+     *   Документы
+     * </Link>
+     * @default 'a'
+     */
+    component?: TComponent | undefined;
+} & (ElementType extends TComponent ? {} : ComponentPropsWithRef<TComponent>) & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/components/Link/Link.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const DownloadVOutlineSm_1 = require("../../icons/DownloadVOutlineSm");
 const OpenLinkOutlineSm_1 = require("../../icons/OpenLinkOutlineSm");
+const forwardRefWithGeneric_1 = require("../forwardRefWithGeneric");
 const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
@@ -16,7 +16,8 @@ const linkCva = (0, cva_1.cva)(constants_1.linkClassnames.root, {
         },
     },
 });
-exports.Link = (0, react_1.forwardRef)(({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
+const UnwrappedLink = ({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
     const icon = isDownload ? (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {}) : (0, jsx_runtime_1.jsx)(OpenLinkOutlineSm_1.OpenLinkOutlineSm, {});
     return ((0, jsx_runtime_1.jsxs)(styles_1.StyledLink, { download: downloadFilename ?? isDownload, className: (0, cn_1.cn)(linkCva({ isContrast }), className), ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {})] }));
-});
+};
+exports.Link = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(UnwrappedLink);

package/node/components/NotificationList/styles.js

@@ -27,12 +27,16 @@ exports.TabsWrapper = (0, styled_1.styled)(SideDialogContent_1.SideDialogContent
   }
 `;
 exports.ContentWrapper = (0, styled_1.styled)(SideDialogContent_1.SideDialogContent) `
-  scrollbar-gutter: stable;
-
   padding-top: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => `calc(${theme.spacing(6)} - ${constants_2.SCROLLBAR_SIZE})`};
+  padding-right: ${({ theme }) => theme.spacing(6)};
   padding-bottom: ${({ theme }) => theme.spacing(1)};
 
+  ${constants_2.HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+
+    padding-right: ${({ theme }) => `calc(${theme.spacing(6)} - ${constants_2.SCROLLBAR_SIZE})`};
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(0)};
   }

package/node/components/PageContent/styles.js

@@ -55,13 +55,16 @@ exports.Wrapper = (0, styled_1.styled)('article', {
 `;
 exports.Content = styled_1.styled.div `
   scroll-behavior: smooth;
-  scrollbar-gutter: stable;
 
   overflow: auto;
   flex-grow: 1;
 
   padding: ${({ theme }) => theme.spacing(0, 6, 4)};
 
+  ${constants_1.HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+  }
+
   &.${constants_3.pageContentClassnames.contentHasHeader}, &.${constants_3.pageContentClassnames.hasAside} {
     padding: ${({ theme }) => theme.spacing(4, 6, 4)};
   }
@@ -78,7 +81,7 @@ exports.Content = styled_1.styled.div `
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     scrollbar-gutter: unset;
-
+    
     overflow: hidden;
 
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};

package/node/components/PdfViewer/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollContainer = exports.PDFViewerContainer = exports.Wrapper = void 0;
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   position: relative;
 
@@ -10,19 +11,22 @@ exports.Wrapper = styled_1.styled.div `
 `;
 exports.PDFViewerContainer = styled_1.styled.div `
   height: 100%;
-  padding-right: ${({ $isViewerLite, $enabledZoom }) => $isViewerLite || !$enabledZoom ? '0' : `${constants_1.RESERVED_CONTROL_BAR_SPACE}px`};
+  padding-right: ${({ $isViewerLite, $enabledZoom }) => $isViewerLite || !$enabledZoom ? '0' : `${constants_2.RESERVED_CONTROL_BAR_SPACE}px`};
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding-right: 0;
   }
 `;
 exports.ScrollContainer = styled_1.styled.div `
-  scrollbar-gutter: stable;
 
   overflow: ${({ $isViewerLite, $enabledZoom }) => $isViewerLite || !$enabledZoom ? 'unset' : 'auto'};
 
   height: 100%;
-
+  
+  ${constants_1.HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+  }
+  
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     scrollbar-gutter: unset;
   }

package/node/components/theme/components/MuiOutlinedInput.js

@@ -18,6 +18,9 @@ exports.MuiOutlinedInput = {
                     '&:hover': {
                         background: theme.palette.background.elementHover,
                     },
+                    '&:hover .MuiOutlinedInput-input:autofill': {
+                        boxShadow: `0 0 0 1000px ${theme.palette.background.elementHover} inset`,
+                    },
                     '&:hover .MuiOutlinedInput-notchedOutline': {
                         borderColor: theme.palette.grey[800],
                         transition: theme.transitions.create(['border-color'], {
@@ -53,7 +56,7 @@ exports.MuiOutlinedInput = {
                     ? theme.spacing(1)
                     : theme.spacing(3),
                 '&:autofill': {
-                    boxShadow: '0 0 0 1000px white inset',
+                    boxShadow: `0 0 0 1000px ${theme.palette.common.white} inset`,
                 },
                 '&::placeholder': {
                     opacity: 1,

package/node/hook-form/FormPageLayoutBase/styles.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledPageHeader = exports.StyledPageContent = exports.MobileAlertWrapper = exports.DesktopAlertWrapper = void 0;
+const constants_1 = require("../../components/constants");
 const PageContent_1 = require("../../components/PageContent");
 const PageHeader_1 = require("../../components/PageHeader");
 const styled_1 = require("../../components/styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.DesktopAlertWrapper = styled_1.styled.div `
   display: block;
 
@@ -20,13 +21,15 @@ exports.MobileAlertWrapper = styled_1.styled.div `
   }
 `;
 exports.StyledPageContent = (0, styled_1.styled)(PageContent_1.PageContent) `
-  scrollbar-gutter: stable;
 
   overflow: auto;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 
   border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  ${constants_1.HOVER_MEDIA} {
+    scrollbar-gutter: stable;
+  }
 
   ${({ theme }) => theme.breakpoints.up('mobile')} {
     .${PageContent_1.pageContentClassnames.content} {
@@ -45,10 +48,10 @@ exports.StyledPageContent = (0, styled_1.styled)(PageContent_1.PageContent) `
     margin-bottom: ${({ theme }) => theme.spacing(20)};
     padding-top: 0;
 
-    &.${constants_1.formPageContentClassnames.formPageContentSecondaryActions} {
+    &.${constants_2.formPageContentClassnames.formPageContentSecondaryActions} {
       margin-bottom: ${({ theme }) => theme.spacing(32)};
 
-      &.${constants_1.formPageContentClassnames.formWizardPageContentActions} {
+      &.${constants_2.formPageContentClassnames.formWizardPageContentActions} {
         margin-bottom: ${({ theme }) => theme.spacing(50)};
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.110.0",
+  "version": "4.112.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {