Merge branch 'master' into master-merge-feature

2024-11-24 02:59:58 +08:00 · 2024-07-29 01:39:20 +08:00 · 2024-07-29 01:39:20 +08:00 · 049915566d
commit 049915566d
parent 65496b5845 2e4b9cb098
103 changed files with 444 additions and 386 deletions
--- a/.dumi/components/SemanticPreview.tsx
+++ b/.dumi/components/SemanticPreview.tsx
@ -43,7 +43,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb
    z-index: 999999;
    box-shadow: 0 0 0 1px #fff;
    pointer-events: none;
-    left: ${markPos[0] - MARK_BORDER_SIZE}px;
+    inset-inline-start: ${markPos[0] - MARK_BORDER_SIZE}px;
    top: ${markPos[1] - MARK_BORDER_SIZE}px;
    width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;
    height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Badge, Carousel, Skeleton, Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { Badge, Carousel, Flex, Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
 import classNames from 'classnames';

 import useLocale from '../../../hooks/useLocale';
@ -57,6 +57,9 @@ const useStyle = createStyles(({ token, css, cx }) => {
      }
    `,
    carousel,
+    bannerBg: css`
+      height: ${token.fontSize}px;
+    `,
  };
 });

@ -66,8 +69,8 @@ interface RecommendItemProps {
  icons: Icon[];
  className?: string;
 }
+
 const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, className }) => {
-  const token = useTheme();
  const { styles } = useStyle();

  if (!extra) {
@ -87,10 +90,10 @@ const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, clas
      <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
        {extra.description}
      </Typography.Paragraph>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <Flex justify="space-between" align="center">
        <Typography.Text>{extra.date}</Typography.Text>
-        {icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
-      </div>
+        {icon && <img src={icon.href} draggable={false} className={styles.bannerBg} alt="banner" />}
+      </Flex>
    </a>
  );

--- a/.dumi/pages/index/components/ComponentsList.tsx
+++ b/.dumi/pages/index/components/ComponentsList.tsx
@ -12,7 +12,7 @@ import {
  Tour,
  Typography,
 } from 'antd';
-import { createStyles, css, useTheme } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
 import dayjs from 'dayjs';

@ -104,6 +104,13 @@ const useStyle = () => {
        justify-content: center;
      `,
      carousel,
+      componentsList: css`
+        width: 100%;
+        overflow: hidden;
+      `,
+      mobileComponentsList: css`
+        margin: 0 ${token.margin}px;
+      `,
    };
  })();
 };
@ -119,7 +126,7 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index
      {/* Decorator */}
      <div
        className={styles.cardCircle}
-        style={{ right: (index % 2) * -20 - 20, bottom: (index % 3) * -40 - 20 }}
+        style={{ insetInlineEnd: (index % 2) * -20 - 20, bottom: (index % 3) * -40 - 20 }}
      />

      {/* Title */}
@ -142,7 +149,6 @@ interface ComponentItemProps {
 }

 const ComponentsList: React.FC = () => {
-  const token = useTheme();
  const { styles } = useStyle();
  const [locale] = useLocale(locales);
  const { isMobile } = useContext(SiteContext);
@ -260,21 +266,33 @@ const ComponentsList: React.FC = () => {
  );

  return isMobile ? (
-    <div style={{ margin: '0 16px' }}>
+    <div className={styles.mobileComponentsList}>
      <Carousel className={styles.carousel}>
        {COMPONENTS.map<React.ReactNode>(({ title, node, type }, index) => (
-          <ComponentItem title={title} node={node} type={type} index={index} key={index} />
+          <ComponentItem
+            title={title}
+            node={node}
+            type={type}
+            index={index}
+            key={`mobile-item-${index}`}
+          />
        ))}
      </Carousel>
    </div>
  ) : (
-    <div style={{ width: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center' }}>
-      <div style={{ display: 'flex', alignItems: 'stretch', columnGap: token.paddingLG }}>
+    <Flex justify="center" className={styles.componentsList}>
+      <Flex align="stretch" gap="large">
        {COMPONENTS.map<React.ReactNode>(({ title, node, type }, index) => (
-          <ComponentItem title={title} node={node} type={type} index={index} key={index} />
+          <ComponentItem
+            title={title}
+            node={node}
+            type={type}
+            index={index}
+            key={`desktop-item-${index}`}
+          />
        ))}
-      </div>
-    </div>
+      </Flex>
+    </Flex>
  );
 };

--- a/.dumi/pages/index/components/DesignFramework.tsx
+++ b/.dumi/pages/index/components/DesignFramework.tsx
@ -134,7 +134,7 @@ const DesignFramework: React.FC = () => {
          <Col key={index} span={colSpan}>
            <Link to={path}>
              <div className={styles.card}>
-                <img alt={title} src={img} />
+                <img draggable={false} alt={title} src={img} />

                <Typography.Title
                  level={4}
@ -158,7 +158,12 @@ const DesignFramework: React.FC = () => {
        return (
          <Col key={index} span={colSpan}>
            <a className={styles.cardMini} target="_blank" href={url} rel="noreferrer">
-              <img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
+              <img
+                draggable={false}
+                alt={title}
+                src={img}
+                style={{ transform: `scale(${imgScale})` }}
+              />

              <Typography.Title
                level={4}
--- a/.dumi/pages/index/components/PreviewBanner/index.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/index.tsx
@ -1,7 +1,9 @@
 import React, { Suspense } from 'react';
 import { ConfigProvider, Flex, Typography } from 'antd';
 import { createStyles } from 'antd-style';
+import classNames from 'classnames';
 import { useLocation } from 'dumi';
+
 import useLocale from '../../../../hooks/useLocale';
 import LinkButton from '../../../../theme/common/LinkButton';
 import SiteContext from '../../../../theme/slots/SiteContext';
@ -26,6 +28,7 @@ const locales = {

 const useStyle = () => {
  const { direction } = React.useContext(ConfigProvider.ConfigContext);
+  const { isMobile } = React.useContext(SiteContext);
  const isRTL = direction === 'rtl';
  return createStyles(({ token, css, cx }) => {
    const textShadow = `0 0 4px ${token.colorBgContainer}`;
@ -101,11 +104,23 @@ const useStyle = () => {
      btnWrap: css`
        margin-bottom: ${token.marginXL}px;
      `,
+      bgImg: css`
+        position: absolute;
+        width: 240px;
+      `,
+      bgImgTop: css`
+        top: 0;
+        inset-inline-start: ${isMobile ? '-120px' : 0};
+      `,
+      bgImgBottom: css`
+        bottom: 120px;
+        inset-inline-end: ${isMobile ? 0 : '40%'};
+      `,
    };
  })();
 };

-const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
+const PreviewBanner: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
  const { children } = props;
  const [locale] = useLocale(locales);
  const { styles } = useStyle();
@ -117,15 +132,17 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
    <GroupMaskLayer>
      {/* Image Left Top */}
      <img
-        style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
-        src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
        alt="bg"
+        src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
+        draggable={false}
+        className={classNames(styles.bgImg, styles.bgImgTop)}
      />
      {/* Image Right Top */}
      <img
-        style={{ position: 'absolute', right: isMobile ? 0 : '40%', bottom: 120, width: 240 }}
-        src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
        alt="bg"
+        src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
+        draggable={false}
+        className={classNames(styles.bgImg, styles.bgImgBottom)}
      />

      <div className={styles.holder}>
--- a/.dumi/pages/index/components/Theme/BackgroundImage.tsx
+++ b/.dumi/pages/index/components/Theme/BackgroundImage.tsx
@ -14,7 +14,7 @@ const useStyle = createStyles(({ token }) => ({
  image: css`
    transition: all ${token.motionDurationSlow};
    position: absolute;
-    left: 0;
+    inset-inline-start: 0;
    top: 0;
    height: 100%;
    width: 100%;
@ -64,10 +64,11 @@ const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight
            <source srcSet={entity.webp} type="image/webp" />
            <source srcSet={entity.url} type="image/jpeg" />
            <img
+              draggable={false}
              className={cls}
              style={{ ...style, opacity: isLight ? opacity : 0 }}
              src={entity.url}
-              alt=""
+              alt="bg"
            />
          </picture>
        );
--- a/.dumi/pages/index/components/Theme/MobileCarousel.tsx
+++ b/.dumi/pages/index/components/Theme/MobileCarousel.tsx
@ -113,7 +113,7 @@ const MobileCarousel: React.FC<MobileCarouselProps> = (props) => {
      <Carousel className={styles.carousel} afterChange={setCurrentSlider}>
        {mobileImageConfigList.map((item, index) => (
          <div key={index}>
-            <img src={item.imageSrc} className={styles.img} alt="" />
+            <img draggable={false} src={item.imageSrc} className={styles.img} alt="carousel" />
          </div>
        ))}
      </Carousel>
--- a/.dumi/pages/index/components/Theme/index.tsx
+++ b/.dumi/pages/index/components/Theme/index.tsx
@ -7,7 +7,7 @@ import {
  QuestionCircleOutlined,
 } from '@ant-design/icons';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { MenuProps, ThemeConfig, GetProp, ColorPickerProps } from 'antd';
+import type { ColorPickerProps, GetProp, MenuProps, ThemeConfig } from 'antd';
 import {
  Breadcrumb,
  Card,
@ -195,23 +195,23 @@ const useStyle = createStyles(({ token, css, cx }) => {
      position: absolute;
    `,
    leftTopImagePos: css`
-      left: 0;
+      inset-inline-start: 0;
      top: -100px;
      height: 500px;
    `,
    rightBottomPos: css`
-      right: 0;
+      inset-inline-end: 0;
      bottom: -100px;
      height: 287px;
    `,
    leftTopImage: css`
-      left: 50%;
+      inset-inline-start: 50%;
      transform: translate3d(-900px, 0, 0);
      top: -100px;
      height: 500px;
    `,
    rightBottomImage: css`
-      right: 50%;
+      inset-inline-end: 50%;
      transform: translate3d(750px, 0, 0);
      bottom: -100px;
      height: 287px;
--- a/.dumi/pages/index/index.tsx
+++ b/.dumi/pages/index/index.tsx
@ -15,7 +15,7 @@ const Theme = React.lazy(() => import('./components/Theme'));
 const useStyle = createStyles(() => ({
  image: css`
    position: absolute;
-    left: 0;
+    inset-inline-start: 0;
    top: -50px;
    height: 160px;
  `,
@ -78,12 +78,13 @@ const Homepage: React.FC = () => {
        <Group
          title={locale.designTitle}
          description={locale.designDesc}
-          background={isRootDark ? 'rgb(57, 63, 74)' : '#F5F8FF'}
+          background={isRootDark ? '#393F4A' : '#F5F8FF'}
          decoration={
            <img
+              draggable={false}
              className={styles.image}
              src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
-              alt=""
+              alt="bg"
            />
          }
        >
--- a/.dumi/scripts/mirror-modal.js
+++ b/.dumi/scripts/mirror-modal.js
@ -50,8 +50,8 @@
  .mirror-modal-dialog {
    position: fixed;
    top: 120px;
-    left: 0;
-    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
    margin: 0 auto;
    width: 420px;
    display: flex;
--- a/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
+++ b/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import * as AntdIcons from '@ant-design/icons';
-import { Badge, App } from 'antd';
+import { App, Badge } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import CopyToClipboard from 'react-copy-to-clipboard';
@ -33,7 +33,7 @@ const useStyle = createStyles(({ token, css }) => {
        content: 'Copied!';
        position: absolute;
        top: 0;
-        left: 0;
+        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        color: #fff;
--- a/.dumi/theme/builtins/ResourceCards/index.tsx
+++ b/.dumi/theme/builtins/ResourceCards/index.tsx
@ -9,23 +9,23 @@ const { Paragraph } = Typography;

 const useStyle = createStyles(({ token, css }) => ({
  card: css`
-      position: relative;
+    position: relative;
+    overflow: hidden;
+    .${token.antCls}-card-cover {
      overflow: hidden;
-
-      .ant-card-cover {
-        overflow: hidden;
-      }
-      img {
-        transition: all ${token.motionDurationSlow} ease-out;
-      }
-
-      &:hover img {
-        transform: scale(1.3);
-        `,
+    }
+    img {
+      display: block;
+      transition: all ${token.motionDurationSlow} ease-out;
+    }
+    &:hover img {
+      transform: scale(1.3);
+    }
+  `,
  badge: css`
    position: absolute;
    top: 8px;
-    right: 8px;
+    inset-inline-end: 8px;
    padding: ${token.paddingXXS}px ${token.paddingXS}px;
    color: #fff;
    font-size: ${token.fontSizeSM}px;
--- a/.dumi/theme/builtins/VideoPlayer/index.tsx
+++ b/.dumi/theme/builtins/VideoPlayer/index.tsx
@ -6,7 +6,7 @@ import classNames from 'classnames';
 const useStyles = createStyles(({ cx, token }) => {
  const play = css`
    position: absolute;
-    right: ${token.paddingLG}px;
+    inset-inline-end: ${token.paddingLG}px;
    bottom: ${token.paddingLG}px;
    font-size: 64px;
    display: flex;
--- a/.dumi/theme/common/BehaviorMap/BehaviorMap.tsx
+++ b/.dumi/theme/common/BehaviorMap/BehaviorMap.tsx
@ -227,14 +227,14 @@ const useStyle = createStyles(({ token }) => ({
  title: css`
    position: absolute;
    top: 20px;
-    left: 20px;
+    inset-inline-start: 20px;
    font-size: ${token.fontSizeLG}px;
  `,
  tips: css`
    display: flex;
    position: absolute;
    bottom: 20px;
-    right: 20px;
+    inset-inline-end: 20px;
  `,
  mvp: css`
    margin-inline-end: ${token.marginMD}px;
--- a/.dumi/theme/common/BrowserFrame.tsx
+++ b/.dumi/theme/common/BrowserFrame.tsx
@ -10,7 +10,7 @@ const useStyle = createStyles(({ token, css }) => ({
    &::before {
      position: absolute;
      top: -1.25em;
-      left: 1em;
+      inset-inline-start: 1em;
      display: block;
      width: 0.5em;
      height: 0.5em;
@ -27,7 +27,7 @@ const useStyle = createStyles(({ token, css }) => ({
      display: block;
      position: absolute;
      top: -1.6em;
-      left: 5.5em;
+      inset-inline-start: 5.5em;
      width: calc(100% - 6em);
      height: 1.2em;
      background-color: #fff;
--- a/.dumi/theme/common/CodePreview.tsx
+++ b/.dumi/theme/common/CodePreview.tsx
@ -40,9 +40,9 @@ const useStyle = createStyles(({ token, css }) => {
          display: block;
          position: absolute;
          top: -5px;
-          left: -9px;
+          inset-inline-start: -9px;
          bottom: -5px;
-          right: -9px;
+          inset-inline-end: -9px;
        }
      }
      ${antCls}-typography-copy:not(${antCls}-typography-copy-success) {
--- a/.dumi/theme/common/Color/ColorStyle.tsx
+++ b/.dumi/theme/common/Color/ColorStyle.tsx
@ -176,7 +176,7 @@ ${makeGrayPalette(index + 1)}

          &-item &-value {
            position: relative;
-            left: 3px;
+            inset-inline-start: 3px;
            float: right;
            transform: scale(0.85);
            transform-origin: 100% 50%;
@ -203,7 +203,7 @@ ${makeGrayPalette(index + 1)}

        .main-color:hover {
          .main-color-value {
-            left: 0;
+            inset-inline-start: 0;
            opacity: 0.7;
          }
        }
@ -264,7 +264,7 @@ ${makeGrayPalette(index + 1)}
            &-value {
              position: absolute;
              bottom: 0;
-              left: 0;
+              inset-inline-start: 0;
              width: 100%;
              text-align: center;
              transform-origin: unset;
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@ -28,7 +28,7 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
 }

 const useStyle = createStyles(({ token, css }) => ({
-  ref: css`
+  linkRef: css`
    margin-inline-start: ${token.marginXS}px;
  `,
  bug: css`
@ -57,6 +57,16 @@ const useStyle = createStyles(({ token, css }) => ({
      }
    }
  `,
+  extraLink: css`
+    font-size: ${token.fontSize}px;
+  `,
+  drawerContent: {
+    position: 'relative',
+    [`> ${token.antCls}-drawer-body`]: {
+      scrollbarWidth: 'thin',
+      scrollbarColor: 'unset',
+    },
+  },
 }));

 export interface ComponentChangelogProps {
@ -117,7 +127,7 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any
      <span>{parsedChangelog}</span>
      {/* Refs */}
      {refs?.map((ref) => (
-        <a className={styles.ref} key={ref} href={ref} target="_blank" rel="noreferrer">
+        <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
          #{ref.match(/^.*\/(\d+)$/)?.[1]}
        </a>
      ))}
@ -223,27 +233,21 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {

  return (
    <>
-      <Button
-        icon={<HistoryOutlined />}
-        onClick={() => {
-          setShow(true);
-        }}
-      >
+      <Button icon={<HistoryOutlined />} onClick={() => setShow(true)}>
        {locale.changelog}
      </Button>
      <Drawer
+        destroyOnClose
+        className={styles.drawerContent}
        title={locale.changelog}
        extra={
-          <Link style={{ fontSize: 14 }} to={`/changelog${lang === 'cn' ? '-cn' : ''}`}>
+          <Link className={styles.extraLink} to={`/changelog${lang === 'cn' ? '-cn' : ''}`}>
            {locale.full}
          </Link>
        }
        open={show}
        width={width}
-        onClose={() => {
-          setShow(false);
-        }}
-        destroyOnClose
+        onClose={() => setShow(false)}
      >
        <Timeline items={timelineItems} />
      </Drawer>
--- a/.dumi/theme/common/ThemeSwitch/index.tsx
+++ b/.dumi/theme/common/ThemeSwitch/index.tsx
@ -35,7 +35,6 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
      icon={<ThemeIcon />}
      aria-label="Theme Switcher"
      badge={{ dot: true }}
-      style={{ zIndex: 1010 }}
    >
      <Link
        to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@ -108,7 +108,7 @@ const GlobalDemoStyles: React.FC = () => {
          a.edit-button {
            position: absolute;
            top: 7px;
-            right: -16px;
+            inset-inline-end: -16px;
            font-size: ${token.fontSizeSM}px;
            text-decoration: none;
            background: inherit;
@ -125,8 +125,8 @@ const GlobalDemoStyles: React.FC = () => {
            }

            ${antCls}-row${antCls}-row-rtl & {
-              right: auto;
-              left: -22px;
+              inset-inline-end: auto;
+              inset-inline-start: -22px;
            }
          }

@ -184,7 +184,7 @@ const GlobalDemoStyles: React.FC = () => {
          .code-expand-icon-hide {
            position: absolute;
            top: 0;
-            left: 0;
+            inset-inline-start: 0;
            width: 100%;
            max-width: 100%;
            margin: 0;
@ -193,8 +193,8 @@ const GlobalDemoStyles: React.FC = () => {
            user-select: none;

            ${antCls}-row-rtl & {
-              right: 0;
-              left: auto;
+              inset-inline-end: 0;
+              inset-inline-start: auto;
            }
          }

--- a/.dumi/theme/common/styles/Markdown.tsx
+++ b/.dumi/theme/common/styles/Markdown.tsx
@ -24,6 +24,7 @@ const GlobalStyle: React.FC = () => {
        }

        .markdown img {
+          display: block;
          max-width: calc(100% - 32px);
          max-height: 100%;
        }
@ -183,6 +184,8 @@ const GlobalStyle: React.FC = () => {
          background-color: ${token.siteMarkdownCodeBg};
          border-radius: ${token.borderRadius}px;
          > pre.prism-code {
+            scrollbar-width: thin;
+            scrollbar-color: unset;
            padding: ${token.paddingSM}px ${token.paddingMD}px;
            font-size: ${token.fontSize}px;
            line-height: 2;
--- a/.dumi/theme/common/styles/PreviewImage.tsx
+++ b/.dumi/theme/common/styles/PreviewImage.tsx
@ -70,14 +70,14 @@ export default () => {
          + svg {
            position: absolute;
            top: 0;
-            left: 0;
+            inset-inline-start: 0;
          }
        }

        .preview-image-wrapper.good::after {
          position: absolute;
          bottom: 0;
-          left: 0;
+          inset-inline-start: 0;
          display: block;
          width: 100%;
          height: 3px;
@ -88,7 +88,7 @@ export default () => {
        .preview-image-wrapper.bad::after {
          position: absolute;
          bottom: 0;
-          left: 0;
+          inset-inline-start: 0;
          display: block;
          width: 100%;
          height: 3px;
--- a/.dumi/theme/common/styles/Responsive.tsx
+++ b/.dumi/theme/common/styles/Responsive.tsx
@ -11,7 +11,7 @@ export default () => {
        .nav-phone-icon {
          position: absolute;
          bottom: 17px;
-          right: 30px;
+          inset-inline-end: 30px;
          z-index: 1;
          display: none;
          width: 16px;
@ -98,8 +98,8 @@ export default () => {
          .drawer {
            .ant-menu-inline .ant-menu-item::after,
            .ant-menu-vertical .ant-menu-item::after {
-              right: auto;
-              left: 0;
+              inset-inline-end: auto;
+              inset-inline-start: 0;
            }
          }

--- a/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
+++ b/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
@ -15,8 +15,8 @@ const useStyle = createStyles(({ token, css }) => {
    affixTabs: css`
      position: fixed;
      top: 0;
-      right: 0;
-      left: 0;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
      z-index: 1001;
      padding: 0 40px;
      background: #fff;
--- a/.dumi/theme/slots/Content/ColumnCard.tsx
+++ b/.dumi/theme/slots/Content/ColumnCard.tsx
@ -28,7 +28,7 @@ const useStyle = createStyles(({ token, css }) => ({
    justify-content: space-between;
    align-items: center;
  `,
-  left: css`
+  leftCard: css`
    display: flex;
    justify-content: flex-start;
    align-items: center;
@ -117,7 +117,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
      card,
      bigTitle,
      cardBody,
-      left,
+      leftCard,
      title,
      subTitle,
      logo,
@ -136,7 +136,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
        <>
          <Divider />
          <div className={cardBody}>
-            <div className={left}>
+            <div className={leftCard}>
              <img draggable={false} src={ANTD_IMG_URL} alt="antd" />
              <div>
                <p className={title}>Ant Design</p>
@ -170,7 +170,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
        <>
          <Divider />
          <div className={cardBody}>
-            <div className={left}>
+            <div className={leftCard}>
              <img draggable={false} src={ANTD_IMG_URL} alt="antd" />
              <div>
                <p className={title}>Ant Design</p>
@ -204,7 +204,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
        <>
          <Divider />
          <div className={cardBody}>
-            <div className={left}>
+            <div className={leftCard}>
              <img draggable={false} src={ANTD_IMG_URL} alt="antd" />
              <div>
                <p className={title}>Ant Design</p>
--- a/.dumi/theme/slots/Footer/AdditionalInfo.tsx
+++ b/.dumi/theme/slots/Footer/AdditionalInfo.tsx
@ -23,8 +23,8 @@ const locales = {
 const useStyle = createStyles(({ css, token }) => ({
  container: css`
    position: fixed;
-    left: 0;
-    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    z-index: 99999999;
--- a/.dumi/theme/slots/Header/SwitchBtn.tsx
+++ b/.dumi/theme/slots/Header/SwitchBtn.tsx
@ -69,7 +69,7 @@ const useStyle = createStyles(({ token, css }) => {
      color: ${colorText};
    `,
    label1Style: css`
-      left: -5%;
+      inset-inline-start: -5%;
      top: 0;
      z-index: 1;
      background-color: ${colorText};
@ -78,7 +78,7 @@ const useStyle = createStyles(({ token, css }) => {
      transform-origin: 0 0;
    `,
    label2Style: css`
-      right: -5%;
+      inset-inline-end: -5%;
      bottom: 0;
      z-index: 0;
      transform: scale(0.5);
--- a/.github/workflows/visual-regression-diff-finish.yml
+++ b/.github/workflows/visual-regression-diff-finish.yml
@ -145,7 +145,7 @@ jobs:
              - `current workflow` summary:
                - `download report artifact` status: ${{ steps.download_report.outcome }}
                - `report upload` status: ${{ steps.report.outcome }}
-                - job url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/jobs/${{ github.job }}
+                - workflow url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
            <!-- VISUAL_DIFF_REGRESSION_HOOK -->
          body-include: '<!-- VISUAL_DIFF_REGRESSION_HOOK -->'
          number: ${{ steps.pr.outputs.id }}
--- a/components/affix/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/affix/tests/snapshots/demo-extend.test.ts.snap
@ -90,7 +90,7 @@ exports[`renders components/affix/demo/on-change.tsx extend context correctly 2`

 exports[`renders components/affix/demo/target.tsx extend context correctly 1`] = `
 <div
-  style="width: 100%; height: 100px; overflow: auto; box-shadow: 0 0 0 1px #40a9ff;"
+  style="width: 100%; height: 100px; overflow: auto; box-shadow: 0 0 0 1px #1677ff;"
 >
  <div
    style="width: 100%; height: 1000px;"
--- a/components/affix/tests/snapshots/demo.test.tsx.snap
+++ b/components/affix/tests/snapshots/demo.test.tsx.snap
@ -84,7 +84,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `

 exports[`renders components/affix/demo/target.tsx correctly 1`] = `
 <div
-  style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #40a9ff"
+  style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-color:unset"
 >
  <div
    style="width:100%;height:1000px"
--- a/components/affix/demo/target.tsx
+++ b/components/affix/demo/target.tsx
@ -5,7 +5,9 @@ const containerStyle: React.CSSProperties = {
  width: '100%',
  height: 100,
  overflow: 'auto',
-  boxShadow: '0 0 0 1px #40a9ff',
+  boxShadow: '0 0 0 1px #1677ff',
+  scrollbarWidth: 'thin',
+  scrollbarColor: 'unset',
 };

 const style: React.CSSProperties = {
--- a/components/anchor/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/anchor/tests/snapshots/demo-extend.test.ts.snap
@ -770,7 +770,7 @@ exports[`renders components/anchor/demo/targetOffset.tsx extend context correctl
    </div>
  </div>
  <div
-    style="height: 30vh; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; left: 0px; width: 75%; color: rgb(255, 255, 255);"
+    style="height: 30vh; background-color: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; inset-inline-start: 0; width: 75%; color: rgb(255, 255, 255);"
  >
    <div>
      Fixed Top Block
--- a/components/anchor/tests/snapshots/demo.test.tsx.snap
+++ b/components/anchor/tests/snapshots/demo.test.tsx.snap
@ -742,7 +742,7 @@ exports[`renders components/anchor/demo/targetOffset.tsx correctly 1`] = `
    </div>
  </div>
  <div
-    style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
+    style="height:30vh;background-color:rgba(0, 0, 0, 0.85);position:fixed;top:0;inset-inline-start:0;width:75%;color:#fff"
  >
    <div>
      Fixed Top Block
--- a/components/anchor/demo/targetOffset.tsx
+++ b/components/anchor/demo/targetOffset.tsx
@ -1,6 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { Anchor, Col, Row } from 'antd';

+const style: React.CSSProperties = {
+  height: '30vh',
+  backgroundColor: 'rgba(0, 0, 0, 0.85)',
+  position: 'fixed',
+  top: 0,
+  insetInlineStart: 0,
+  width: '75%',
+  color: '#fff',
+};
+
 const App: React.FC = () => {
  const topRef = React.useRef<HTMLDivElement>(null);
  const [targetOffset, setTargetOffset] = useState<number>();
@ -30,38 +40,14 @@ const App: React.FC = () => {
          <Anchor
            targetOffset={targetOffset}
            items={[
-              {
-                key: 'part-1',
-                href: '#part-1',
-                title: 'Part 1',
-              },
-              {
-                key: 'part-2',
-                href: '#part-2',
-                title: 'Part 2',
-              },
-              {
-                key: 'part-3',
-                href: '#part-3',
-                title: 'Part 3',
-              },
+              { key: 'part-1', href: '#part-1', title: 'Part 1' },
+              { key: 'part-2', href: '#part-2', title: 'Part 2' },
+              { key: 'part-3', href: '#part-3', title: 'Part 3' },
            ]}
          />
        </Col>
      </Row>
-
-      <div
-        style={{
-          height: '30vh',
-          background: 'rgba(0,0,0,0.85)',
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '75%',
-          color: '#FFF',
-        }}
-        ref={topRef}
-      >
+      <div style={style} ref={topRef}>
        <div>Fixed Top Block</div>
      </div>
    </div>
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@ -17,7 +17,7 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
 }

 .certain-category-search-dropdown .ant-select-dropdown-menu-item {
-  padding-left: 16px;
+  padding-inline-start: 16px;
 }

 .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
--- a/components/badge/SingleNumber.tsx
+++ b/components/badge/SingleNumber.tsx
@ -8,28 +8,18 @@ export interface UnitNumberProps {
  current?: boolean;
 }

-function UnitNumber({ prefixCls, value, current, offset = 0 }: UnitNumberProps) {
+const UnitNumber: React.FC<Readonly<UnitNumberProps>> = (props) => {
+  const { prefixCls, value, current, offset = 0 } = props;
  let style: React.CSSProperties | undefined;
-
  if (offset) {
-    style = {
-      position: 'absolute',
-      top: `${offset}00%`,
-      left: 0,
-    };
+    style = { position: 'absolute', top: `${offset}00%`, left: 0 };
  }
-
  return (
-    <span
-      style={style}
-      className={classNames(`${prefixCls}-only-unit`, {
-        current,
-      })}
-    >
+    <span style={style} className={classNames(`${prefixCls}-only-unit`, { current })}>
      {value}
    </span>
  );
-}
+};

 export interface SingleNumberProps {
  prefixCls: string;
@ -49,7 +39,7 @@ function getOffset(start: number, end: number, unit: -1 | 1) {
  return offset;
 }

-export default function SingleNumber(props: SingleNumberProps) {
+const SingleNumber: React.FC<Readonly<SingleNumberProps>> = (props) => {
  const { prefixCls, count: originCount, value: originValue } = props;
  const value = Number(originValue);
  const count = Math.abs(originCount);
@ -57,20 +47,15 @@ export default function SingleNumber(props: SingleNumberProps) {
  const [prevCount, setPrevCount] = React.useState(count);

  // ============================= Events =============================
-  const onTransitionEnd = () => {
+  const onTransitionEnd: React.TransitionEventHandler<HTMLSpanElement> = () => {
    setPrevValue(value);
    setPrevCount(count);
  };

  // Fallback if transition events are not supported
  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      onTransitionEnd();
-    }, 1000);
-
-    return () => {
-      clearTimeout(timeout);
-    };
+    const timer = setTimeout(onTransitionEnd, 1000);
+    return () => clearTimeout(timer);
  }, [value]);

  // ============================= Render =============================
@ -121,4 +106,6 @@ export default function SingleNumber(props: SingleNumberProps) {
      {unitNodes}
    </span>
  );
-}
+};
+
+export default SingleNumber;
--- a/components/calendar/demo/lunar.tsx
+++ b/components/calendar/demo/lunar.tsx
@ -24,15 +24,15 @@ const useStyle = createStyles(({ token, css, cx }) => {
      &:before {
        content: '';
        position: absolute;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        max-width: 40px;
        max-height: 40px;
        background: transparent;
-        transition: background 300ms;
+        transition: background-color 300ms;
        border-radius: ${token.borderRadiusOuter}px;
        border: 1px solid transparent;
        box-sizing: border-box;
--- a/components/cascader/hooks/useBase.ts
+++ b/components/cascader/hooks/useBase.ts
@ -1,15 +1,15 @@
 import * as React from 'react';

 import { ConfigContext } from '../../config-provider';
-import type { RenderEmptyHandler } from '../../config-provider';
+import type { DirectionType, RenderEmptyHandler } from '../../config-provider';

-export default function useBase(
+function useBase(
  customizePrefixCls?: string,
-  direction?: 'ltr' | 'rtl',
+  direction?: DirectionType,
 ): [
  prefixCls: string,
  cascaderPrefixCls: string,
-  direction?: 'ltr' | 'rtl',
+  direction?: DirectionType,
  renderEmpty?: RenderEmptyHandler,
 ] {
  const { getPrefixCls, direction: rootDirection, renderEmpty } = React.useContext(ConfigContext);
@ -21,3 +21,5 @@ export default function useBase(

  return [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty];
 }
+
+export default useBase;
--- a/components/cascader/hooks/useColumnIcons.tsx
+++ b/components/cascader/hooks/useColumnIcons.tsx
@ -3,11 +3,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';

-export default function useColumnIcons(
-  prefixCls: string,
-  rtl: boolean,
-  expandIcon?: React.ReactNode,
-) {
+const useColumnIcons = (prefixCls: string, rtl: boolean, expandIcon?: React.ReactNode) => {
  let mergedExpandIcon = expandIcon;
  if (!expandIcon) {
    mergedExpandIcon = rtl ? <LeftOutlined /> : <RightOutlined />;
@ -19,5 +15,10 @@ export default function useColumnIcons(
    </span>
  );

-  return [mergedExpandIcon, loadingIcon];
-}
+  return React.useMemo<Readonly<[React.ReactNode, React.ReactNode]>>(
+    () => [mergedExpandIcon, loadingIcon] as const,
+    [mergedExpandIcon],
+  );
+};
+
+export default useColumnIcons;
--- a/components/collapse/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo-extend.test.ts.snap
@ -324,7 +324,7 @@ exports[`renders components/collapse/demo/borderless.tsx extend context correctl
        class="ant-collapse-content-box"
      >
        <p
-          style="padding-left: 24px;"
+          style="padding-inline-start: 24px;"
        >
          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
        </p>
--- a/components/collapse/tests/snapshots/demo.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo.test.ts.snap
@ -320,7 +320,7 @@ exports[`renders components/collapse/demo/borderless.tsx correctly 1`] = `
        class="ant-collapse-content-box"
      >
        <p
-          style="padding-left:24px"
+          style="padding-inline-start:24px"
        >
          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
        </p>
--- a/components/collapse/demo/borderless.tsx
+++ b/components/collapse/demo/borderless.tsx
@ -3,7 +3,7 @@ import type { CollapseProps } from 'antd';
 import { Collapse } from 'antd';

 const text = (
-  <p style={{ paddingLeft: 24 }}>
+  <p style={{ paddingInlineStart: 24 }}>
    A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found
    as a welcome guest in many households across the world.
  </p>
--- a/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
@ -6077,7 +6077,7 @@ exports[`renders components/color-picker/demo/presets.tsx extend context correct

 exports[`renders components/color-picker/demo/pure-panel.tsx extend context correctly 1`] = `
 <div
-  style="padding-left: 100px;"
+  style="padding-inline-start: 100px;"
 >
  <div
    style="padding-bottom: 0px; position: relative; min-width: 0;"
--- a/components/color-picker/tests/snapshots/demo.test.tsx.snap
+++ b/components/color-picker/tests/snapshots/demo.test.tsx.snap
@ -292,7 +292,7 @@ exports[`renders components/color-picker/demo/presets.tsx correctly 1`] = `

 exports[`renders components/color-picker/demo/pure-panel.tsx correctly 1`] = `
 <div
-  style="padding-left:100px"
+  style="padding-inline-start:100px"
 >
  <div
    style="padding-bottom:0;position:relative;min-width:0"
--- a/components/color-picker/demo/pure-panel.tsx
+++ b/components/color-picker/demo/pure-panel.tsx
@ -9,7 +9,7 @@ type Color = GetProp<ColorPickerProps, 'value'>;
 const Demo: React.FC = () => {
  const [color, setColor] = useState<Color>('#1677ff');
  return (
-    <div style={{ paddingLeft: 100 }}>
+    <div style={{ paddingInlineStart: 100 }}>
      <PureRenderColorPicker value={color} onChange={setColor} />
    </div>
  );
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@ -9,13 +9,13 @@ Components which support rtl direction are listed here, you can toggle the direc
 ```css
 .button-demo .ant-btn,
 .button-demo .ant-btn-group {
-  margin-right: 8px;
+  margin-inline-end: 8px;
  margin-bottom: 12px;
 }
 .button-demo .ant-btn-group > .ant-btn,
 .button-demo .ant-btn-group > span > .ant-btn {
-  margin-right: 0;
-  margin-left: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
 }

 .head-example {
@ -28,10 +28,11 @@ Components which support rtl direction are listed here, you can toggle the direc
 }

 .ant-badge:not(.ant-badge-not-a-wrapper) {
-  margin-right: 20px;
+  margin-inline-end: 20px;
 }
+
 .ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
-  margin-right: 0;
-  margin-left: 20px;
+  margin-inline-end: 0;
+  margin-inline-start: 20px;
 }
 ```
--- a/components/config-provider/demo/direction.tsx
+++ b/components/config-provider/demo/direction.tsx
@ -492,17 +492,13 @@ const App: React.FC = () => {
  const changeDirection = (e: RadioChangeEvent) => {
    const directionValue = e.target.value;
    setDirection(directionValue);
-    if (directionValue === 'rtl') {
-      setPlacement('bottomRight');
-    } else {
-      setPlacement('bottomLeft');
-    }
+    setPlacement(directionValue === 'rtl' ? 'bottomRight' : 'bottomLeft');
  };

  return (
    <>
      <div style={{ marginBottom: 16 }}>
-        <span style={{ marginRight: 16 }}>Change direction of components:</span>
+        <span style={{ marginInlineEnd: 16 }}>Change direction of components:</span>
        <Radio.Group defaultValue="ltr" onChange={changeDirection}>
          <Radio.Button key="ltr" value="ltr">
            LTR
--- a/components/config-provider/demo/locale.tsx
+++ b/components/config-provider/demo/locale.tsx
@ -223,7 +223,7 @@ const App: React.FC = () => {
  return (
    <>
      <div style={{ marginBottom: 16 }}>
-        <span style={{ marginRight: 16 }}>Change locale of components:</span>
+        <span style={{ marginInlineEnd: 16 }}>Change locale of components:</span>
        <Radio.Group value={locale} onChange={changeLocale}>
          <Radio.Button key="en" value={enUS}>
            English
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -28,9 +28,9 @@ import { TIME } from './constant';
 import type { RangePickerProps } from './interface';
 import useComponents from './useComponents';

-export default function generateRangePicker<DateType extends AnyObject>(
+const generateRangePicker = <DateType extends AnyObject = AnyObject>(
  generateConfig: GenerateConfig<DateType>,
-) {
+) => {
  type DateRangePickerProps = RangePickerProps<DateType>;

  const RangePicker = forwardRef<PickerRef, DateRangePickerProps>((props, ref) => {
@ -179,4 +179,6 @@ export default function generateRangePicker<DateType extends AnyObject>(
  }

  return RangePicker;
-}
+};
+
+export default generateRangePicker;
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -39,7 +39,9 @@ import {
 import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface';
 import useComponents from './useComponents';

-const generatePicker = <DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) => {
+const generatePicker = <DateType extends AnyObject = AnyObject>(
+  generateConfig: GenerateConfig<DateType>,
+) => {
  type DatePickerProps = PickerProps<DateType>;
  type TimePickerProps = GenericTimePickerProps<DateType>;

--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@ -6,7 +6,9 @@ import generateSinglePicker from './generateSinglePicker';

 export type { PickerLocale, PickerProps } from './interface';

-function generatePicker<DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) {
+const generatePicker = <DateType extends AnyObject = AnyObject>(
+  generateConfig: GenerateConfig<DateType>,
+) => {
  // =========================== Picker ===========================
  const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } =
    generateSinglePicker(generateConfig);
@ -39,6 +41,6 @@ function generatePicker<DateType extends AnyObject>(generateConfig: GenerateConf
  }

  return MergedDatePicker;
-}
+};

 export default generatePicker;
--- a/components/date-picker/locale/pl_PL.ts
+++ b/components/date-picker/locale/pl_PL.ts
@ -8,6 +8,27 @@ const locale: PickerLocale = {
  lang: {
    placeholder: 'Wybierz datę',
    rangePlaceholder: ['Data początkowa', 'Data końcowa'],
+    yearFormat: 'YYYY',
+    dateFormat: 'M/D/YYYY',
+    dayFormat: 'D',
+    dateTimeFormat: 'M/D/YYYY HH:mm:ss',
+    monthFormat: 'MMMM',
+    monthBeforeYear: true,
+    shortWeekDays: ['Niedz', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
+    shortMonths: [
+      'Sty',
+      'Lut',
+      'Mar',
+      'Kwi',
+      'Maj',
+      'Cze',
+      'Lip',
+      'Sie',
+      'Wrz',
+      'Paź',
+      'Lis',
+      'Gru',
+    ],
    ...CalendarLocale,
  },
  timePickerLocale: {
--- a/components/drawer/tests/MultiDrawer.test.tsx
+++ b/components/drawer/tests/MultiDrawer.test.tsx
@ -86,7 +86,7 @@ const MultiDrawer: React.FC<DrawerPropsType> = (props) => {
            borderRadius: '0 0 4px 4px',
          }}
        >
-          <Button style={{ marginRight: 8 }} onClick={onClose}>
+          <Button style={{ marginInlineEnd: 8 }} onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={onClose} type="primary">
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@ -9,8 +9,8 @@ Use a form in Drawer with a submit button.
 ```css
 .site-form-in-drawer-wrapper {
  position: absolute;
-  right: 0px;
-  bottom: 0px;
+  inset-inline-end: 0;
+  bottom: 0;
  width: 100%;
  padding: 10px 16px;
  text-align: right;
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@ -24,7 +24,7 @@ Use Drawer to quickly preview details of an object, such as those in a list.

 .site-description-item-profile-p-label {
  display: inline-block;
-  margin-right: 8px;
+  margin-inline-end: 8px;
  color: rgba(0, 0, 0, 0.85);
 }
 ```
--- a/components/float-button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/float-button/tests/snapshots/demo-extend.test.ts.snap
@ -34,7 +34,7 @@ exports[`renders components/float-button/demo/badge.tsx extend context correctly
 Array [
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
-    style="right: 164px;"
+    style="inset-inline-end: 164px;"
    type="button"
  >
    <span
@ -79,7 +79,7 @@ Array [
  </button>,
  <div
    class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
-    style="right: 94px;"
+    style="inset-inline-end: 94px;"
  >
    <a
      class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -554,7 +554,7 @@ exports[`renders components/float-button/demo/controlled.tsx extend context corr
 Array [
  <div
    class="ant-float-btn-group ant-float-btn-group-circle"
-    style="right: 24px;"
+    style="inset-inline-end: 24px;"
  >
    <div
      class="ant-float-btn-group-wrap-appear ant-float-btn-group-wrap-appear-start ant-float-btn-group-wrap ant-float-btn-group-wrap"
@ -709,7 +709,7 @@ exports[`renders components/float-button/demo/description.tsx extend context cor
 Array [
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 24px;"
+    style="inset-inline-end: 24px;"
    type="button"
  >
    <div
@ -751,7 +751,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 94px;"
+    style="inset-inline-end: 94px;"
    type="button"
  >
    <div
@ -770,7 +770,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 164px;"
+    style="inset-inline-end: 164px;"
    type="button"
  >
    <div
@ -819,7 +819,7 @@ exports[`renders components/float-button/demo/group.tsx extend context correctly
 Array [
  <div
    class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
-    style="right: 24px;"
+    style="inset-inline-end: 24px;"
  >
    <button
      class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -935,7 +935,7 @@ Array [
  </div>,
  <div
    class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
-    style="right: 94px;"
+    style="inset-inline-end: 94px;"
  >
    <button
      class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@ -1094,7 +1094,7 @@ exports[`renders components/float-button/demo/group-menu.tsx extend context corr
 Array [
  <div
    class="ant-float-btn-group ant-float-btn-group-circle"
-    style="right: 24px;"
+    style="inset-inline-end: 24px;"
  >
    <button
      class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1135,7 +1135,7 @@ Array [
  </div>,
  <div
    class="ant-float-btn-group ant-float-btn-group-circle"
-    style="right: 94px;"
+    style="inset-inline-end: 94px;"
  >
    <button
      class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1579,7 +1579,7 @@ exports[`renders components/float-button/demo/shape.tsx extend context correctly
 Array [
  <button
    class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
-    style="right: 94px;"
+    style="inset-inline-end: 94px;"
    type="button"
  >
    <div
@ -1616,7 +1616,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
-    style="right: 24px;"
+    style="inset-inline-end: 24px;"
    type="button"
  >
    <div
@ -1722,7 +1722,7 @@ exports[`renders components/float-button/demo/type.tsx extend context correctly
 Array [
  <button
    class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
-    style="right: 24px;"
+    style="inset-inline-end: 24px;"
    type="button"
  >
    <div
@ -1762,7 +1762,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
-    style="right: 94px;"
+    style="inset-inline-end: 94px;"
    type="button"
  >
    <div
--- a/components/float-button/tests/snapshots/demo.test.ts.snap
+++ b/components/float-button/tests/snapshots/demo.test.ts.snap
@ -32,7 +32,7 @@ exports[`renders components/float-button/demo/badge.tsx correctly 1`] = `
 Array [
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
-    style="right:164px"
+    style="inset-inline-end:164px"
    type="button"
  >
    <span
@ -77,7 +77,7 @@ Array [
  </button>,
  <div
    class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
-    style="right:94px"
+    style="inset-inline-end:94px"
  >
    <a
      class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -506,7 +506,7 @@ exports[`renders components/float-button/demo/controlled.tsx correctly 1`] = `
 Array [
  <div
    class="ant-float-btn-group ant-float-btn-group-circle"
-    style="right:24px"
+    style="inset-inline-end:24px"
  >
    <div
      class="ant-float-btn-group-wrap"
@ -659,7 +659,7 @@ exports[`renders components/float-button/demo/description.tsx correctly 1`] = `
 Array [
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right:24px"
+    style="inset-inline-end:24px"
    type="button"
  >
    <div
@ -701,7 +701,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right:94px"
+    style="inset-inline-end:94px"
    type="button"
  >
    <div
@ -720,7 +720,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right:164px"
+    style="inset-inline-end:164px"
    type="button"
  >
    <div
@ -767,7 +767,7 @@ exports[`renders components/float-button/demo/group.tsx correctly 1`] = `
 Array [
  <div
    class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
-    style="right:24px"
+    style="inset-inline-end:24px"
  >
    <button
      class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -883,7 +883,7 @@ Array [
  </div>,
  <div
    class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
-    style="right:94px"
+    style="inset-inline-end:94px"
  >
    <button
      class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@ -1040,7 +1040,7 @@ exports[`renders components/float-button/demo/group-menu.tsx correctly 1`] = `
 Array [
  <div
    class="ant-float-btn-group ant-float-btn-group-circle"
-    style="right:24px"
+    style="inset-inline-end:24px"
  >
    <button
      class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1081,7 +1081,7 @@ Array [
  </div>,
  <div
    class="ant-float-btn-group ant-float-btn-group-circle"
-    style="right:94px"
+    style="inset-inline-end:94px"
  >
    <button
      class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@ -1521,7 +1521,7 @@ exports[`renders components/float-button/demo/shape.tsx correctly 1`] = `
 Array [
  <button
    class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
-    style="right:94px"
+    style="inset-inline-end:94px"
    type="button"
  >
    <div
@ -1558,7 +1558,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
-    style="right:24px"
+    style="inset-inline-end:24px"
    type="button"
  >
    <div
@ -1639,7 +1639,7 @@ exports[`renders components/float-button/demo/type.tsx correctly 1`] = `
 Array [
  <button
    class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
-    style="right:24px"
+    style="inset-inline-end:24px"
    type="button"
  >
    <div
@ -1679,7 +1679,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
-    style="right:94px"
+    style="inset-inline-end:94px"
    type="button"
  >
    <div
--- a/components/float-button/demo/badge.tsx
+++ b/components/float-button/demo/badge.tsx
@ -4,8 +4,8 @@ import { FloatButton } from 'antd';

 const App: React.FC = () => (
  <>
-    <FloatButton shape="circle" badge={{ dot: true }} style={{ right: 24 + 70 + 70 }} />
-    <FloatButton.Group shape="circle" style={{ right: 24 + 70 }}>
+    <FloatButton shape="circle" style={{ insetInlineEnd: 24 + 70 + 70 }} badge={{ dot: true }} />
+    <FloatButton.Group shape="circle" style={{ insetInlineEnd: 24 + 70 }}>
      <FloatButton
        href="https://ant.design/index-cn"
        tooltip={<div>custom badge color</div>}
--- a/components/float-button/demo/controlled.tsx
+++ b/components/float-button/demo/controlled.tsx
@ -14,7 +14,7 @@ const App: React.FC = () => {
      <FloatButton.Group
        open={open}
        trigger="click"
-        style={{ right: 24 }}
+        style={{ insetInlineEnd: 24 }}
        icon={<CustomerServiceOutlined />}
      >
        <FloatButton />
--- a/components/float-button/demo/description.tsx
+++ b/components/float-button/demo/description.tsx
@ -8,14 +8,14 @@ const App: React.FC = () => (
      icon={<FileTextOutlined />}
      description="HELP INFO"
      shape="square"
-      style={{ right: 24 }}
+      style={{ insetInlineEnd: 24 }}
    />
-    <FloatButton description="HELP INFO" shape="square" style={{ right: 94 }} />
+    <FloatButton description="HELP INFO" shape="square" style={{ insetInlineEnd: 94 }} />
    <FloatButton
      icon={<FileTextOutlined />}
      description="HELP"
      shape="square"
-      style={{ right: 164 }}
+      style={{ insetInlineEnd: 164 }}
    />
  </>
 );
--- a/components/float-button/demo/group-menu.tsx
+++ b/components/float-button/demo/group-menu.tsx
@ -7,7 +7,7 @@ const App: React.FC = () => (
    <FloatButton.Group
      trigger="click"
      type="primary"
-      style={{ right: 24 }}
+      style={{ insetInlineEnd: 24 }}
      icon={<CustomerServiceOutlined />}
    >
      <FloatButton />
@ -16,7 +16,7 @@ const App: React.FC = () => (
    <FloatButton.Group
      trigger="hover"
      type="primary"
-      style={{ right: 94 }}
+      style={{ insetInlineEnd: 94 }}
      icon={<CustomerServiceOutlined />}
    >
      <FloatButton />
--- a/components/float-button/demo/group.tsx
+++ b/components/float-button/demo/group.tsx
@ -4,12 +4,12 @@ import { FloatButton } from 'antd';

 const App: React.FC = () => (
  <>
-    <FloatButton.Group shape="circle" style={{ right: 24 }}>
+    <FloatButton.Group shape="circle" style={{ insetInlineEnd: 24 }}>
      <FloatButton icon={<QuestionCircleOutlined />} />
      <FloatButton />
      <FloatButton.BackTop visibilityHeight={0} />
    </FloatButton.Group>
-    <FloatButton.Group shape="square" style={{ right: 94 }}>
+    <FloatButton.Group shape="square" style={{ insetInlineEnd: 94 }}>
      <FloatButton icon={<QuestionCircleOutlined />} />
      <FloatButton />
      <FloatButton icon={<SyncOutlined />} />
--- a/components/float-button/demo/shape.tsx
+++ b/components/float-button/demo/shape.tsx
@ -7,13 +7,13 @@ const App: React.FC = () => (
    <FloatButton
      shape="circle"
      type="primary"
-      style={{ right: 94 }}
+      style={{ insetInlineEnd: 94 }}
      icon={<CustomerServiceOutlined />}
    />
    <FloatButton
      shape="square"
      type="primary"
-      style={{ right: 24 }}
+      style={{ insetInlineEnd: 24 }}
      icon={<CustomerServiceOutlined />}
    />
  </>
--- a/components/float-button/demo/type.tsx
+++ b/components/float-button/demo/type.tsx
@ -4,8 +4,8 @@ import { FloatButton } from 'antd';

 const App: React.FC = () => (
  <>
-    <FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ right: 24 }} />
-    <FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ right: 94 }} />
+    <FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ insetInlineEnd: 24 }} />
+    <FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ insetInlineEnd: 94 }} />
  </>
 );

--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -21589,7 +21589,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
            </div>
            <span
              class="ant-form-text"
-              style="margin-left: 8px;"
+              style="margin-inline-start: 8px;"
            >
              machines
            </span>
--- a/components/form/tests/snapshots/demo.test.tsx.snap
+++ b/components/form/tests/snapshots/demo.test.tsx.snap
@ -9012,7 +9012,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
            </div>
            <span
              class="ant-form-text"
-              style="margin-left:8px"
+              style="margin-inline-start:8px"
            >
              machines
            </span>
--- a/components/form/demo/validate-other.tsx
+++ b/components/form/demo/validate-other.tsx
@ -80,7 +80,7 @@ const App: React.FC = () => (
      <Form.Item name="input-number" noStyle>
        <InputNumber min={1} max={10} />
      </Form.Item>
-      <span className="ant-form-text" style={{ marginLeft: 8 }}>
+      <span className="ant-form-text" style={{ marginInlineStart: 8 }}>
        machines
      </span>
    </Form.Item>
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@ -10,7 +10,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA
 ## Design concept

 <div class="grid-demo">
-  <img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
+  <img draggable="false" src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
 </div>

 In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@ -11,7 +11,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA
 ## 设计理念

 <div class="grid-demo">
-  <img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
+  <img draggable="false" src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
 </div>

 在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
--- a/components/image/demo/toolbarRender.md
+++ b/components/image/demo/toolbarRender.md
@ -10,7 +10,7 @@ You can customize the toolbar and add a button for downloading the original imag
 .toolbar-wrapper {
  position: fixed;
  bottom: 32px;
-  left: 50%;
+  inset-inline-start: 50%;
  padding: 0px 24px;
  color: #fff;
  font-size: 20px;
--- a/components/layout/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/layout/tests/snapshots/demo-extend.test.ts.snap
@ -155,7 +155,7 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
      class="demo-logo"
    />
    <div
-      style="margin-left: 24px; font-size: 24px;"
+      style="margin-inline-start: 24px; font-size: 24px;"
    >
      Ant Design
    </div>
@ -1353,7 +1353,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
 >
  <aside
    class="ant-layout-sider ant-layout-sider-dark"
-    style="overflow: auto; height: 100vh; position: fixed; left: 0px; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
+    style="overflow: auto; height: 100vh; position: fixed; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
  >
    <div
      class="ant-layout-sider-children"
@ -1768,7 +1768,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
  </aside>
  <div
    class="ant-layout"
-    style="margin-left: 200px;"
+    style="margin-inline-start: 200px;"
  >
    <header
      class="ant-layout-header"
--- a/components/layout/tests/snapshots/demo.test.ts.snap
+++ b/components/layout/tests/snapshots/demo.test.ts.snap
@ -153,7 +153,7 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
      class="demo-logo"
    />
    <div
-      style="margin-left:24px;font-size:24px"
+      style="margin-inline-start:24px;font-size:24px"
    >
      Ant Design
    </div>
@ -747,7 +747,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
 >
  <aside
    class="ant-layout-sider ant-layout-sider-dark"
-    style="overflow:auto;height:100vh;position:fixed;left:0;top:0;bottom:0;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+    style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-color:unset;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
  >
    <div
      class="ant-layout-sider-children"
@ -1018,7 +1018,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
  </aside>
  <div
    class="ant-layout"
-    style="margin-left:200px"
+    style="margin-inline-start:200px"
  >
    <header
      class="ant-layout-header"
--- a/components/layout/demo/component-token.tsx
+++ b/components/layout/demo/component-token.tsx
@ -48,7 +48,7 @@ const App: React.FC = () => {
      <Layout>
        <Header style={{ display: 'flex', alignItems: 'center' }}>
          <div className="demo-logo" />
-          <div style={{ marginLeft: 24, fontSize: 24 }}>Ant Design</div>
+          <div style={{ marginInlineStart: 24, fontSize: 24 }}>Ant Design</div>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: colorBgContainer }}>
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@ -14,6 +14,17 @@ import { Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer, Sider } = Layout;

+const siderStyle: React.CSSProperties = {
+  overflow: 'auto',
+  height: '100vh',
+  position: 'fixed',
+  insetInlineStart: 0,
+  top: 0,
+  bottom: 0,
+  scrollbarWidth: 'thin',
+  scrollbarColor: 'unset',
+};
+
 const items: MenuProps['items'] = [
  UserOutlined,
  VideoCameraOutlined,
@ -36,13 +47,11 @@ const App: React.FC = () => {

  return (
    <Layout hasSider>
-      <Sider
-        style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }}
-      >
+      <Sider style={siderStyle}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
      </Sider>
-      <Layout style={{ marginLeft: 200 }}>
+      <Layout style={{ marginInlineStart: 200 }}>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
          <div
--- a/components/locale/tests/snapshots/index.test.tsx.snap
+++ b/components/locale/tests/snapshots/index.test.tsx.snap
@ -262107,7 +262107,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                    tabindex="-1"
                    type="button"
                  >
-                    wrz
+                    wrzesień
                  </button>
                  <button
                    aria-label="year panel"
@ -262148,7 +262148,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                  <thead>
                    <tr>
                      <th>
-                        Pn
+                        Pon
                      </th>
                      <th>
                        Wt
@ -262157,16 +262157,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
                        Śr
                      </th>
                      <th>
-                        Cz
+                        Czw
                      </th>
                      <th>
                        Pt
                      </th>
                      <th>
-                        So
+                        Sob
                      </th>
                      <th>
-                        Nd
+                        Niedz
                      </th>
                    </tr>
                  </thead>
@ -264332,7 +264332,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                        tabindex="-1"
                        type="button"
                      >
-                        wrz
+                        wrzesień
                      </button>
                      <button
                        aria-label="year panel"
@ -264375,7 +264375,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                      <thead>
                        <tr>
                          <th>
-                            Pn
+                            Pon
                          </th>
                          <th>
                            Wt
@ -264384,16 +264384,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
                            Śr
                          </th>
                          <th>
-                            Cz
+                            Czw
                          </th>
                          <th>
                            Pt
                          </th>
                          <th>
-                            So
+                            Sob
                          </th>
                          <th>
-                            Nd
+                            Niedz
                          </th>
                        </tr>
                      </thead>
@ -264876,7 +264876,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                        tabindex="-1"
                        type="button"
                      >
-                        paź
+                        październik
                      </button>
                      <button
                        aria-label="year panel"
@ -264917,7 +264917,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                      <thead>
                        <tr>
                          <th>
-                            Pn
+                            Pon
                          </th>
                          <th>
                            Wt
@ -264926,16 +264926,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
                            Śr
                          </th>
                          <th>
-                            Cz
+                            Czw
                          </th>
                          <th>
                            Pt
                          </th>
                          <th>
-                            So
+                            Sob
                          </th>
                          <th>
-                            Nd
+                            Niedz
                          </th>
                        </tr>
                      </thead>
@ -265980,9 +265980,9 @@ exports[`Locale Provider should display the text as pl 1`] = `
          </span>
          <span
            class="ant-select-selection-item"
-            title="wrz"
+            title="Wrz"
          >
-            wrz
+            Wrz
          </span>
        </div>
        <span
@ -266072,7 +266072,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
            <thead>
              <tr>
                <th>
-                  Pn
+                  Pon
                </th>
                <th>
                  Wt
@ -266081,16 +266081,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
                  Śr
                </th>
                <th>
-                  Cz
+                  Czw
                </th>
                <th>
                  Pt
                </th>
                <th>
-                  So
+                  Sob
                </th>
                <th>
-                  Nd
+                  Niedz
                </th>
              </tr>
            </thead>
--- a/components/mentions/demo/async.md
+++ b/components/mentions/demo/async.md
@ -10,6 +10,6 @@ async.
 .antd-demo-dynamic-option img {
  width: 20px;
  height: 20px;
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 </style>
--- a/components/modal/demo/modal-render.tsx
+++ b/components/modal/demo/modal-render.tsx
@ -43,10 +43,7 @@ const App: React.FC = () => {
      <Modal
        title={
          <div
-            style={{
-              width: '100%',
-              cursor: 'move',
-            }}
+            style={{ width: '100%', cursor: 'move' }}
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false);
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@ -8,15 +8,16 @@ There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }`

 <style>
 #popconfirm-demo-placement .ant-btn {
-  margin-left: 0;
-  margin-right: 8px;
+  margin-inline-start: 0;
+  margin-inline-end: 8px;
  margin-bottom: 8px;
  width: 70px;
  text-align: center;
  padding: 0;
 }
+
 #popconfirm-demo-placement .ant-btn-rtl {
-  margin-left: 8px;
-  margin-right: 0;
+  margin-inline-start: 8px;
+  margin-inline-end: 0;
 }
 </style>
--- a/components/radio/demo/radiogroup-more.tsx
+++ b/components/radio/demo/radiogroup-more.tsx
@ -18,7 +18,7 @@ const App: React.FC = () => {
        <Radio value={3}>Option C</Radio>
        <Radio value={4}>
          More...
-          {value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
+          {value === 4 ? <Input style={{ width: 100, marginInlineStart: 10 }} /> : null}
        </Radio>
      </Space>
    </Radio.Group>
--- a/components/segmented/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo-extend.test.ts.snap
@ -1153,7 +1153,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
  <div>
    <div
      class="ant-segmented ant-segmented-lg"
-      style="margin-right: 6px;"
+      style="margin-inline-end: 6px;"
    >
      <div
        class="ant-segmented-group"
@ -1215,7 +1215,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
  <div>
    <div
      class="ant-segmented"
-      style="margin-right: 6px;"
+      style="margin-inline-end: 6px;"
    >
      <div
        class="ant-segmented-group"
@ -1276,7 +1276,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
  <div>
    <div
      class="ant-segmented ant-segmented-sm"
-      style="margin-right: 6px;"
+      style="margin-inline-end: 6px;"
    >
      <div
        class="ant-segmented-group"
--- a/components/segmented/tests/snapshots/demo.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo.test.ts.snap
@ -1133,7 +1133,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
  <div>
    <div
      class="ant-segmented ant-segmented-lg"
-      style="margin-right:6px"
+      style="margin-inline-end:6px"
    >
      <div
        class="ant-segmented-group"
@ -1195,7 +1195,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
  <div>
    <div
      class="ant-segmented"
-      style="margin-right:6px"
+      style="margin-inline-end:6px"
    >
      <div
        class="ant-segmented-group"
@ -1256,7 +1256,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
  <div>
    <div
      class="ant-segmented ant-segmented-sm"
-      style="margin-right:6px"
+      style="margin-inline-end:6px"
    >
      <div
        class="ant-segmented-group"
--- a/components/segmented/demo/size-consistent.tsx
+++ b/components/segmented/demo/size-consistent.tsx
@ -4,17 +4,29 @@ import { Button, Flex, Input, Segmented, Select } from 'antd';
 const App: React.FC = () => (
  <Flex gap="small" vertical>
    <div>
-      <Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
+      <Segmented
+        size="large"
+        style={{ marginInlineEnd: 6 }}
+        options={['Daily', 'Weekly', 'Monthly']}
+      />
      <Button type="primary" size="large">
        Button
      </Button>
    </div>
    <div>
-      <Segmented style={{ marginRight: 6 }} options={['Daily', 'Weekly', 'Monthly']} />
+      <Segmented
+        size="middle"
+        style={{ marginInlineEnd: 6 }}
+        options={['Daily', 'Weekly', 'Monthly']}
+      />
      <Input placeholder="default size" style={{ width: 150 }} />
    </div>
    <div>
-      <Segmented style={{ marginRight: 6 }} size="small" options={['Daily', 'Weekly', 'Monthly']} />
+      <Segmented
+        size="small"
+        style={{ marginInlineEnd: 6 }}
+        options={['Daily', 'Weekly', 'Monthly']}
+      />
      <Select size="small" defaultValue="lucy" style={{ width: 150 }}>
        <Select.Option value="lucy">Lucy</Select.Option>
      </Select>
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/select/tests/snapshots/demo-extend.test.ts.snap
@ -9134,7 +9134,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre
 >
  <div
    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
-    style="position: absolute; top: 0px; left: 50%; transform: translateX(-50%);"
+    style="position: absolute; top: 0px; inset-inline-start: 50%; transform: translateX(-50%);"
  >
    <div
      class="ant-space-item"
--- a/components/select/tests/snapshots/demo.test.tsx.snap
+++ b/components/select/tests/snapshots/demo.test.tsx.snap
@ -3150,7 +3150,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = `
 >
  <div
    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
-    style="position:absolute;top:0;left:50%;transform:translateX(-50%)"
+    style="position:absolute;top:0;inset-inline-start:50%;transform:translateX(-50%)"
  >
    <div
      class="ant-space-item"
--- a/components/select/demo/placement-debug.tsx
+++ b/components/select/demo/placement-debug.tsx
@ -35,7 +35,14 @@ const App: React.FC = () => {
        position: 'relative',
      }}
    >
-      <Space style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)' }}>
+      <Space
+        style={{
+          position: 'absolute',
+          top: 0,
+          insetInlineStart: '50%',
+          transform: 'translateX(-50%)',
+        }}
+      >
        <Radio.Group value={placement} onChange={placementChange}>
          <Radio.Button value="topLeft">TL</Radio.Button>
          <Radio.Button value="topRight">TR</Radio.Button>
--- a/components/skeleton/demo/list.tsx
+++ b/components/skeleton/demo/list.tsx
@ -20,7 +20,7 @@ const listData = Array.from({ length: 3 }).map((_, i) => ({

 const IconText: React.FC<IconTextProps> = ({ icon, text }) => (
  <>
-    {React.createElement(icon, { style: { marginRight: 8 } })}
+    {React.createElement(icon, { style: { marginInlineEnd: 8 } })}
    {text}
  </>
 );
--- a/components/slider/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/slider/tests/snapshots/demo-extend.test.ts.snap
@ -190,7 +190,7 @@ Array [
    />
  </div>,
  <div
-    style="display: inline-block; height: 300px; margin-left: 70px;"
+    style="display: inline-block; height: 300px; margin-inline-start: 70px;"
  >
    <div
      class="ant-slider ant-slider-vertical"
@ -238,7 +238,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display: inline-block; height: 300px; margin-left: 70px;"
+    style="display: inline-block; height: 300px; margin-inline-start: 70px;"
  >
    <div
      class="ant-slider ant-slider-vertical"
@ -278,7 +278,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display: inline-block; height: 300px; margin-left: 70px;"
+    style="display: inline-block; height: 300px; margin-inline-start: 70px;"
  >
    <div
      class="ant-slider ant-slider-vertical ant-slider-with-marks"
@ -1688,7 +1688,7 @@ exports[`renders components/slider/demo/tip-formatter.tsx extend context correct
 exports[`renders components/slider/demo/vertical.tsx extend context correctly 1`] = `
 Array [
  <div
-    style="display: inline-block; height: 300px; margin-left: 70px;"
+    style="display: inline-block; height: 300px; margin-inline-start: 70px;"
  >
    <div
      class="ant-slider ant-slider-vertical"
@ -1736,7 +1736,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display: inline-block; height: 300px; margin-left: 70px;"
+    style="display: inline-block; height: 300px; margin-inline-start: 70px;"
  >
    <div
      class="ant-slider ant-slider-vertical"
@ -1776,7 +1776,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display: inline-block; height: 300px; margin-left: 70px;"
+    style="display: inline-block; height: 300px; margin-inline-start: 70px;"
  >
    <div
      class="ant-slider ant-slider-vertical ant-slider-with-marks"
--- a/components/slider/tests/snapshots/demo.test.ts.snap
+++ b/components/slider/tests/snapshots/demo.test.ts.snap
@ -150,7 +150,7 @@ Array [
    />
  </div>,
  <div
-    style="display:inline-block;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-inline-start:70px"
  >
    <div
      class="ant-slider ant-slider-vertical"
@ -179,7 +179,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display:inline-block;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-inline-start:70px"
  >
    <div
      class="ant-slider ant-slider-vertical"
@ -219,7 +219,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display:inline-block;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-inline-start:70px"
  >
    <div
      class="ant-slider ant-slider-vertical ant-slider-with-marks"
@ -1353,7 +1353,7 @@ Array [
 exports[`renders components/slider/demo/vertical.tsx correctly 1`] = `
 Array [
  <div
-    style="display:inline-block;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-inline-start:70px"
  >
    <div
      class="ant-slider ant-slider-vertical"
@ -1382,7 +1382,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display:inline-block;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-inline-start:70px"
  >
    <div
      class="ant-slider ant-slider-vertical"
@ -1422,7 +1422,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display:inline-block;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-inline-start:70px"
  >
    <div
      class="ant-slider ant-slider-vertical ant-slider-with-marks"
--- a/components/slider/demo/component-token.tsx
+++ b/components/slider/demo/component-token.tsx
@ -4,7 +4,7 @@ import { ConfigProvider, Slider } from 'antd';
 const style: React.CSSProperties = {
  display: 'inline-block',
  height: 300,
-  marginLeft: 70,
+  marginInlineStart: 70,
 };

 const marks = {
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@ -9,7 +9,7 @@ You can add an icon beside the slider to make it meaningful.
 ```css
 .icon-wrapper {
  position: relative;
-  padding: 0px 30px;
+  padding: 0 30px;
 }

 .icon-wrapper .anticon {
@ -27,10 +27,10 @@ You can add an icon beside the slider to make it meaningful.
 }

 .icon-wrapper .anticon:first-child {
-  left: 0;
+  inset-inline-start: 0;
 }

 .icon-wrapper .anticon:last-child {
-  right: 0;
+  inset-inline-end: 0;
 }
 ```
--- a/components/slider/demo/vertical.tsx
+++ b/components/slider/demo/vertical.tsx
@ -5,7 +5,7 @@ import type { SliderSingleProps } from 'antd';
 const style: React.CSSProperties = {
  display: 'inline-block',
  height: 300,
-  marginLeft: 70,
+  marginInlineStart: 70,
 };

 const marks: SliderSingleProps['marks'] = {
--- a/components/table/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/table/tests/snapshots/demo-extend.test.ts.snap
@ -8003,7 +8003,7 @@ exports[`renders components/table/demo/edit-cell.tsx extend context correctly 1`
                    >
                      <div
                        class="editable-cell-value-wrap"
-                        style="padding-right: 24px;"
+                        style="padding-inline-end: 24px;"
                      >
                        Edward King 0
                      </div>
@ -8117,7 +8117,7 @@ exports[`renders components/table/demo/edit-cell.tsx extend context correctly 1`
                    >
                      <div
                        class="editable-cell-value-wrap"
-                        style="padding-right: 24px;"
+                        style="padding-inline-end: 24px;"
                      >
                        Edward King 1
                      </div>
--- a/components/table/tests/snapshots/demo.test.ts.snap
+++ b/components/table/tests/snapshots/demo.test.ts.snap
@ -7149,7 +7149,7 @@ exports[`renders components/table/demo/edit-cell.tsx correctly 1`] = `
                    >
                      <div
                        class="editable-cell-value-wrap"
-                        style="padding-right:24px"
+                        style="padding-inline-end:24px"
                      >
                        Edward King 0
                      </div>
@ -7181,7 +7181,7 @@ exports[`renders components/table/demo/edit-cell.tsx correctly 1`] = `
                    >
                      <div
                        class="editable-cell-value-wrap"
-                        style="padding-right:24px"
+                        style="padding-inline-end:24px"
                      >
                        Edward King 1
                      </div>
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@ -8,7 +8,7 @@ Select different settings to see the result.

 <style>
 .table-demo-control-bar .ant-form-item {
-  margin-right: 16px !important;
+  margin-inline-end: 16px !important;
  margin-bottom: 8px !important;
 }
 </style>
--- a/components/table/demo/edit-cell.tsx
+++ b/components/table/demo/edit-cell.tsx
@ -78,17 +78,16 @@ const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
      <Form.Item
        style={{ margin: 0 }}
        name={dataIndex}
-        rules={[
-          {
-            required: true,
-            message: `${title} is required.`,
-          },
-        ]}
+        rules={[{ required: true, message: `${title} is required.` }]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
-      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
+      <div
+        className="editable-cell-value-wrap"
+        style={{ paddingInlineEnd: 24 }}
+        onClick={toggleEdit}
+      >
        {children}
      </div>
    );
--- a/components/table/demo/edit-row.tsx
+++ b/components/table/demo/edit-row.tsx
@ -127,7 +127,7 @@ const App: React.FC = () => {
        const editable = isEditing(record);
        return editable ? (
          <span>
-            <Typography.Link onClick={() => save(record.key)} style={{ marginRight: 8 }}>
+            <Typography.Link onClick={() => save(record.key)} style={{ marginInlineEnd: 8 }}>
              Save
            </Typography.Link>
            <Popconfirm title="Sure to cancel?" onConfirm={cancel}>
--- a/components/table/demo/resizable-column.md
+++ b/components/table/demo/resizable-column.md
@ -14,7 +14,7 @@ Implement resizable column by integrate with [react-resizable](https://github.co

 #table-demo-resizable-column .react-resizable-handle {
  position: absolute;
-  right: -5px;
+  inset-inline-end: -5px;
  bottom: 0;
  z-index: 1;
  width: 10px;
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@ -8,11 +8,11 @@ You can add extra actions to the right or left or even both side of Tabs.

 ```css
 .tabs-extra-demo-button {
-  margin-right: 16px;
+  margin-inline-end: 16px;
 }

 .ant-row-rtl .tabs-extra-demo-button {
-  margin-right: 0;
-  margin-left: 16px;
+  margin-inline-end: 0;
+  margin-inline-start: 16px;
 }
 ```
--- a/components/theme/util/genStyleUtils.ts
+++ b/components/theme/util/genStyleUtils.ts
@ -1,22 +1,14 @@
 import { useContext } from 'react';
 import { genStyleUtils } from '@ant-design/cssinjs-utils';
+import type { GetCompUnitless } from '@ant-design/cssinjs-utils/es/util/genStyleUtils';

 import { ConfigContext } from '../../config-provider/context';
 import { genCommonStyle, genLinkStyle } from '../../style';
-import type {
-  AliasToken,
-  ComponentTokenMap,
-  SeedToken,
-} from '../interface';
-
-import localUseToken, { unitless } from '../useToken';
+import type { AliasToken, ComponentTokenMap, SeedToken } from '../interface';
+import useLocalToken, { unitless } from '../useToken';
 import useResetIconStyle from './useResetIconStyle';

-export const {
-  genStyleHooks,
-  genComponentStyleHook,
-  genSubStyleComponent,
-} = genStyleUtils<
+export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = genStyleUtils<
  ComponentTokenMap,
  AliasToken,
  SeedToken
@ -29,18 +21,11 @@ export const {
    return {
      rootPrefixCls,
      iconPrefixCls,
-    }
+    };
  },
  useToken: () => {
-    const [theme, realToken, hashId, token, cssVar] = localUseToken();
-
-    return {
-      theme,
-      realToken,
-      hashId,
-      token,
-      cssVar,
-    };
+    const [theme, realToken, hashId, token, cssVar] = useLocalToken();
+    return { theme, realToken, hashId, token, cssVar };
  },
  useCSP: () => {
    const { csp, iconPrefixCls } = useContext(ConfigContext);
@ -50,14 +35,7 @@ export const {

    return csp ?? {};
  },
-  getResetStyles: (token) =>
-    [
-      {
-        // Link
-        '&': genLinkStyle(token),
-      },
-    ]
-  ,
+  getResetStyles: (token) => [{ '&': genLinkStyle(token) }],
  getCommonStyle: genCommonStyle,
-  getCompUnitless: () => unitless as any,
-})
+  getCompUnitless: (() => unitless) as GetCompUnitless<ComponentTokenMap, AliasToken>,
+});
--- a/components/tree/utils/dropIndicator.tsx
+++ b/components/tree/utils/dropIndicator.tsx
@ -1,13 +1,15 @@
 import React from 'react';

+import type { DirectionType } from '../../config-provider';
+
 export const offset = 4;

-export default function dropIndicatorRender(props: {
+function dropIndicatorRender(props: {
  dropPosition: -1 | 0 | 1;
  dropLevelOffset: number;
  indent: number;
  prefixCls: string;
-  direction: 'ltr' | 'rtl';
+  direction: DirectionType;
 }) {
  const { dropPosition, dropLevelOffset, prefixCls, indent, direction = 'ltr' } = props;
  const startPosition = direction === 'ltr' ? 'left' : 'right';
@ -31,3 +33,5 @@ export default function dropIndicatorRender(props: {
  }
  return <div style={style} className={`${prefixCls}-drop-indicator`} />;
 }
+
+export default dropIndicatorRender;
--- a/Show More
+++ b/Show More