diff --git a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
index f9f937b3f2..e28b46c549 100644
--- a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
@@ -17,10 +17,9 @@ import {
   Tooltip,
 } from 'antd';
 import { createStyles } from 'antd-style';
-import classNames from 'classnames';
 
-import Tilt from './Tilt';
 import useLocale from '../../../../hooks/useLocale';
+import Tilt from './Tilt';
 
 const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip;
@@ -73,7 +72,6 @@ const locales = {
 
 const useStyle = createStyles(({ token, css }) => {
   const gap = token.padding;
-
   return {
     holder: css`
       width: 500px;
@@ -82,7 +80,6 @@ const useStyle = createStyles(({ token, css }) => {
       row-gap: ${gap}px;
       opacity: 0.8;
     `,
-
     flex: css`
       display: flex;
       flex-wrap: nowrap;
@@ -106,29 +103,16 @@ const useStyle = createStyles(({ token, css }) => {
   };
 });
 
-export interface ComponentsBlockProps {
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
-  const { className, style } = props;
-
+const ComponentsBlock: React.FC = () => {
   const [locale] = useLocale(locales);
   const { styles } = useStyle();
 
   return (
-    <Tilt
-      options={{ max: 20, glare: true, scale: 1 }}
-      className={classNames(className, styles.holder)}
-      style={style}
-    >
+    <Tilt options={{ max: 20, glare: true, scale: 1 }} className={styles.holder}>
       <ModalPanel title="Ant Design 5.0" width="100%">
         {locale.text}
       </ModalPanel>
-
       <Alert message={locale.infoText} type="info" />
-
       {/* Line */}
       <div className={styles.flex}>
         <ColorPicker style={{ flex: 'none' }} />
@@ -144,57 +128,34 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
             {locale.dropdown}
           </Dropdown.Button>
         </div>
-
         <Select
           style={{ flex: 'auto' }}
           mode="multiple"
           maxTagCount="responsive"
           defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
           options={[
-            {
-              value: 'apple',
-              label: locale.apple,
-            },
-            {
-              value: 'banana',
-              label: locale.banana,
-            },
-            {
-              value: 'orange',
-              label: locale.orange,
-            },
-            {
-              value: 'watermelon',
-              label: locale.watermelon,
-            },
+            { value: 'apple', label: locale.apple },
+            { value: 'banana', label: locale.banana },
+            { value: 'orange', label: locale.orange },
+            { value: 'watermelon', label: locale.watermelon },
           ]}
         />
-
         <Input style={{ flex: 'none', width: 120 }} />
       </div>
-
       <Progress
         style={{ margin: 0 }}
         percent={100}
         strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
       />
       <Progress style={{ margin: 0 }} percent={33} status="exception" />
-
       <Steps
         current={1}
         items={[
-          {
-            title: locale.finished,
-          },
-          {
-            title: locale.inProgress,
-          },
-          {
-            title: locale.waiting,
-          },
+          { title: locale.finished },
+          { title: locale.inProgress },
+          { title: locale.waiting },
         ]}
       />
-
       {/* Line */}
       <div className={styles.block}>
         <Slider
@@ -205,16 +166,13 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
             26: '26°C',
             37: '37°C',
             100: {
-              style: {
-                color: '#f50',
-              },
+              style: { color: '#f50' },
               label: <strong>100°C</strong>,
             },
           }}
           defaultValue={[26, 37]}
         />
       </div>
-
       {/* Line */}
       <div className={styles.flex}>
         <Button className={styles.ptg_20} type="primary">
@@ -231,7 +189,6 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
           {locale.icon}
         </Button>
       </div>
-
       {/* Line */}
       <div className={styles.block}>
         <div className={styles.flex}>
@@ -241,7 +198,6 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
             checkedChildren={<CheckOutlined />}
             unCheckedChildren={<CloseOutlined />}
           />
-
           <Checkbox.Group
             className={styles.ptg_none}
             options={[locale.apple, locale.banana, locale.orange]}
@@ -249,13 +205,10 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
           />
         </div>
       </div>
-
       <div>
         <InternalMessage content={locale.release} type="success" />
       </div>
-
       <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
-
       <Alert message="Ant Design love you!" type="success" />
     </Tilt>
   );
diff --git a/.dumi/pages/index/components/PreviewBanner/Tilt.tsx b/.dumi/pages/index/components/PreviewBanner/Tilt.tsx
index 51f758ab86..ec1213e03f 100644
--- a/.dumi/pages/index/components/PreviewBanner/Tilt.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/Tilt.tsx
@@ -1,12 +1,13 @@
 import React, { useEffect, useRef } from 'react';
-import VanillaTilt, { type TiltOptions } from 'vanilla-tilt';
+import VanillaTilt from 'vanilla-tilt';
+import type { TiltOptions } from 'vanilla-tilt';
 
 interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
   options?: TiltOptions;
 }
 
 // https://micku7zu.github.io/vanilla-tilt.js/index.html
-const defaultTiltOptions = {
+const defaultTiltOptions: TiltOptions = {
   scale: 1.02,
   max: 8,
   speed: 1500,
diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx
index e84689170b..578123430a 100644
--- a/.dumi/pages/index/components/PreviewBanner/index.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/index.tsx
@@ -35,7 +35,7 @@ const useStyle = () => {
       inset: 0;
       backdrop-filter: blur(4px);
       opacity: 1;
-      background: rgba(255, 255, 255, 0.2);
+      background-color: rgba(255, 255, 255, 0.2);
       transition: all 1s ease;
       pointer-events: none;
     `);
diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
index b4b719676d..5d0b7072e6 100644
--- a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -392,219 +392,211 @@ exports[`renders components/segmented/demo/controlled-two.tsx extend context cor
 
 exports[`renders components/segmented/demo/custom.tsx extend context correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding: 4px;"
           >
-            <div
-              style="padding: 4px;"
+            <span
+              class="ant-avatar ant-avatar-circle ant-avatar-image"
             >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-image"
-              >
-                <img
-                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
-                />
-              </span>
-              <div>
-                User 1
-              </div>
+              <img
+                src="https://xsgames.co/randomusers/avatar.php?g=pixel"
+              />
+            </span>
+            <div>
+              User 1
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding: 4px;"
           >
-            <div
-              style="padding: 4px;"
+            <span
+              class="ant-avatar ant-avatar-circle"
+              style="background-color: rgb(245, 106, 0);"
             >
               <span
-                class="ant-avatar ant-avatar-circle"
-                style="background-color: rgb(245, 106, 0);"
+                class="ant-avatar-string"
+                style="transform: scale(1) translateX(-50%);"
               >
-                <span
-                  class="ant-avatar-string"
-                  style="transform: scale(1) translateX(-50%);"
+                K
+              </span>
+            </span>
+            <div>
+              User 2
+            </div>
+          </div>
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+        >
+          <div
+            style="padding: 4px;"
+          >
+            <span
+              class="ant-avatar ant-avatar-circle ant-avatar-icon"
+              style="background-color: rgb(135, 208, 104);"
+            >
+              <span
+                aria-label="user"
+                class="anticon anticon-user"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  K
-                </span>
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
               </span>
-              <div>
-                User 2
-              </div>
+            </span>
+            <div>
+              User 3
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
-        >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-          >
-            <div
-              style="padding: 4px;"
-            >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-icon"
-                style="background-color: rgb(135, 208, 104);"
-              >
-                <span
-                  aria-label="user"
-                  class="anticon anticon-user"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="user"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <div>
-                User 3
-              </div>
-            </div>
-          </div>
-        </label>
-      </div>
+        </div>
+      </label>
     </div>
   </div>
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding: 4px;"
           >
-            <div
-              style="padding: 4px;"
-            >
-              <div>
-                Spring
-              </div>
-              <div>
-                Jan-Mar
-              </div>
+            <div>
+              Spring
+            </div>
+            <div>
+              Jan-Mar
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding: 4px;"
           >
-            <div
-              style="padding: 4px;"
-            >
-              <div>
-                Summer
-              </div>
-              <div>
-                Apr-Jun
-              </div>
+            <div>
+              Summer
+            </div>
+            <div>
+              Apr-Jun
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding: 4px;"
           >
-            <div
-              style="padding: 4px;"
-            >
-              <div>
-                Autumn
-              </div>
-              <div>
-                Jul-Sept
-              </div>
+            <div>
+              Autumn
+            </div>
+            <div>
+              Jul-Sept
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding: 4px;"
           >
-            <div
-              style="padding: 4px;"
-            >
-              <div>
-                Winter
-              </div>
-              <div>
-                Oct-Dec
-              </div>
+            <div>
+              Winter
+            </div>
+            <div>
+              Oct-Dec
             </div>
           </div>
-        </label>
-      </div>
+        </div>
+      </label>
     </div>
   </div>
 </div>
@@ -614,149 +606,141 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 2
 
 exports[`renders components/segmented/demo/disabled.tsx extend context correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-space-item"
+    class="ant-segmented ant-segmented-disabled"
   >
     <div
-      class="ant-segmented ant-segmented-disabled"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Map"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Map"
-          >
-            Map
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item ant-segmented-item-disabled"
+          Map
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-disabled"
+      >
+        <input
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Transit"
         >
-          <input
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Transit"
-          >
-            Transit
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item ant-segmented-item-disabled"
+          Transit
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-disabled"
+      >
+        <input
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Satellite"
         >
-          <input
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Satellite"
-          >
-            Satellite
-          </div>
-        </label>
-      </div>
+          Satellite
+        </div>
+      </label>
     </div>
   </div>
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item ant-segmented-item-disabled"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-disabled"
+      >
+        <input
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item ant-segmented-item-disabled"
+          Monthly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-disabled"
+      >
+        <input
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Quarterly"
         >
-          <input
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Quarterly"
-          >
-            Quarterly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Quarterly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Yearly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Yearly"
-          >
-            Yearly
-          </div>
-        </label>
-      </div>
+          Yearly
+        </div>
+      </label>
     </div>
   </div>
 </div>
@@ -766,75 +750,67 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
 
 exports[`renders components/segmented/demo/dynamic.tsx extend context correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-      </div>
+          Monthly
+        </div>
+      </label>
     </div>
   </div>
-  <div
-    class="ant-space-item"
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
-    >
-      <span>
-        Load more options
-      </span>
-    </button>
-  </div>
+    <span>
+      Load more options
+    </span>
+  </button>
 </div>
 `;
 
@@ -926,255 +902,243 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
 
 exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-space-item"
+    class="ant-segmented ant-segmented-lg"
   >
     <div
-      class="ant-segmented ant-segmented-lg"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Monthly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Quarterly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Quarterly"
-          >
-            Quarterly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Quarterly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Yearly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Yearly"
-          >
-            Yearly
-          </div>
-        </label>
-      </div>
+          Yearly
+        </div>
+      </label>
     </div>
   </div>
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Monthly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Quarterly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Quarterly"
-          >
-            Quarterly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Quarterly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Yearly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Yearly"
-          >
-            Yearly
-          </div>
-        </label>
-      </div>
+          Yearly
+        </div>
+      </label>
     </div>
   </div>
   <div
-    class="ant-space-item"
+    class="ant-segmented ant-segmented-sm"
   >
     <div
-      class="ant-segmented ant-segmented-sm"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Monthly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Quarterly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Quarterly"
-          >
-            Quarterly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Quarterly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Yearly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Yearly"
-          >
-            Yearly
-          </div>
-        </label>
-      </div>
+          Yearly
+        </div>
+      </label>
     </div>
   </div>
 </div>
@@ -1184,311 +1148,299 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 2`]
 
 exports[`renders components/segmented/demo/size-consistent.tsx extend context correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
 >
-  <div
-    class="ant-space-item"
-  >
-    <div>
+  <div>
+    <div
+      class="ant-segmented ant-segmented-lg"
+      style="margin-right: 6px;"
+    >
       <div
-        class="ant-segmented ant-segmented-lg"
-        style="margin-right: 6px;"
+        class="ant-segmented-group"
       >
-        <div
-          class="ant-segmented-group"
+        <label
+          class="ant-segmented-item ant-segmented-item-selected"
         >
-          <label
-            class="ant-segmented-item ant-segmented-item-selected"
+          <input
+            checked=""
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Daily"
           >
-            <input
-              checked=""
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Daily"
-            >
-              Daily
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
+            Daily
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Weekly"
           >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Weekly"
-            >
-              Weekly
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
+            Weekly
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Monthly"
           >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Monthly"
-            >
-              Monthly
-            </div>
-          </label>
-        </div>
+            Monthly
+          </div>
+        </label>
       </div>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-lg"
-        type="button"
+    </div>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-lg"
+      type="button"
+    >
+      <span>
+        Button
+      </span>
+    </button>
+  </div>
+  <div>
+    <div
+      class="ant-segmented"
+      style="margin-right: 6px;"
+    >
+      <div
+        class="ant-segmented-group"
       >
-        <span>
-          Button
+        <label
+          class="ant-segmented-item ant-segmented-item-selected"
+        >
+          <input
+            checked=""
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Daily"
+          >
+            Daily
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Weekly"
+          >
+            Weekly
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Monthly"
+          >
+            Monthly
+          </div>
+        </label>
+      </div>
+    </div>
+    <input
+      class="ant-input"
+      placeholder="default size"
+      style="width: 150px;"
+      type="text"
+      value=""
+    />
+  </div>
+  <div>
+    <div
+      class="ant-segmented ant-segmented-sm"
+      style="margin-right: 6px;"
+    >
+      <div
+        class="ant-segmented-group"
+      >
+        <label
+          class="ant-segmented-item ant-segmented-item-selected"
+        >
+          <input
+            checked=""
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Daily"
+          >
+            Daily
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Weekly"
+          >
+            Weekly
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Monthly"
+          >
+            Monthly
+          </div>
+        </label>
+      </div>
+    </div>
+    <div
+      class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
+      style="width: 150px;"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            readonly=""
+            role="combobox"
+            style="opacity: 0;"
+            type="search"
+            unselectable="on"
+            value=""
+          />
         </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <div>
-      <div
-        class="ant-segmented"
-        style="margin-right: 6px;"
-      >
-        <div
-          class="ant-segmented-group"
+        <span
+          class="ant-select-selection-item"
+          title="Lucy"
         >
-          <label
-            class="ant-segmented-item ant-segmented-item-selected"
-          >
-            <input
-              checked=""
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Daily"
-            >
-              Daily
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
-          >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Weekly"
-            >
-              Weekly
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
-          >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Monthly"
-            >
-              Monthly
-            </div>
-          </label>
-        </div>
-      </div>
-      <input
-        class="ant-input"
-        placeholder="default size"
-        style="width: 150px;"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <div>
-      <div
-        class="ant-segmented ant-segmented-sm"
-        style="margin-right: 6px;"
-      >
-        <div
-          class="ant-segmented-group"
-        >
-          <label
-            class="ant-segmented-item ant-segmented-item-selected"
-          >
-            <input
-              checked=""
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Daily"
-            >
-              Daily
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
-          >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Weekly"
-            >
-              Weekly
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
-          >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Monthly"
-            >
-              Monthly
-            </div>
-          </label>
-        </div>
+          Lucy
+        </span>
       </div>
       <div
-        class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
-        style="width: 150px;"
+        class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
-        <div
-          class="ant-select-selector"
-        >
-          <span
-            class="ant-select-selection-search"
+        <div>
+          <div
+            id="rc_select_TEST_OR_SSR_list"
+            role="listbox"
+            style="height: 0px; width: 0px; overflow: hidden;"
           >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Lucy"
-          >
-            Lucy
-          </span>
-        </div>
-        <div
-          class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-        >
-          <div>
             <div
-              id="rc_select_TEST_OR_SSR_list"
-              role="listbox"
-              style="height: 0px; width: 0px; overflow: hidden;"
+              aria-label="Lucy"
+              aria-selected="true"
+              id="rc_select_TEST_OR_SSR_list_0"
+              role="option"
             >
-              <div
-                aria-label="Lucy"
-                aria-selected="true"
-                id="rc_select_TEST_OR_SSR_list_0"
-                role="option"
-              >
-                lucy
-              </div>
+              lucy
             </div>
+          </div>
+          <div
+            class="rc-virtual-list"
+            style="position: relative;"
+          >
             <div
-              class="rc-virtual-list"
-              style="position: relative;"
+              class="rc-virtual-list-holder"
+              style="max-height: 256px; overflow-y: auto;"
             >
-              <div
-                class="rc-virtual-list-holder"
-                style="max-height: 256px; overflow-y: auto;"
-              >
-                <div>
+              <div>
+                <div
+                  class="rc-virtual-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
                   <div
-                    class="rc-virtual-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
+                    aria-selected="true"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                    title="Lucy"
                   >
                     <div
-                      aria-selected="true"
-                      class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                      title="Lucy"
+                      class="ant-select-item-option-content"
                     >
-                      <div
-                        class="ant-select-item-option-content"
-                      >
-                        Lucy
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-item-option-state"
-                        style="user-select: none;"
-                        unselectable="on"
-                      />
+                      Lucy
                     </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <span
-          aria-hidden="true"
-          class="ant-select-arrow"
-          style="user-select: none;"
-          unselectable="on"
-        >
-          <span
-            aria-label="down"
-            class="anticon anticon-down ant-select-suffix"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
-        </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
diff --git a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
index 1de40e3ee9..6931afba75 100644
--- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
@@ -382,219 +382,211 @@ Array [
 
 exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding:4px"
           >
-            <div
-              style="padding:4px"
+            <span
+              class="ant-avatar ant-avatar-circle ant-avatar-image"
             >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-image"
-              >
-                <img
-                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
-                />
-              </span>
-              <div>
-                User 1
-              </div>
+              <img
+                src="https://xsgames.co/randomusers/avatar.php?g=pixel"
+              />
+            </span>
+            <div>
+              User 1
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding:4px"
           >
-            <div
-              style="padding:4px"
+            <span
+              class="ant-avatar ant-avatar-circle"
+              style="background-color:#f56a00"
             >
               <span
-                class="ant-avatar ant-avatar-circle"
-                style="background-color:#f56a00"
+                class="ant-avatar-string"
+                style="opacity:0"
               >
-                <span
-                  class="ant-avatar-string"
-                  style="opacity:0"
+                K
+              </span>
+            </span>
+            <div>
+              User 2
+            </div>
+          </div>
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+        >
+          <div
+            style="padding:4px"
+          >
+            <span
+              class="ant-avatar ant-avatar-circle ant-avatar-icon"
+              style="background-color:#87d068"
+            >
+              <span
+                aria-label="user"
+                class="anticon anticon-user"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  K
-                </span>
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
               </span>
-              <div>
-                User 2
-              </div>
+            </span>
+            <div>
+              User 3
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
-        >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-          >
-            <div
-              style="padding:4px"
-            >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-icon"
-                style="background-color:#87d068"
-              >
-                <span
-                  aria-label="user"
-                  class="anticon anticon-user"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="user"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <div>
-                User 3
-              </div>
-            </div>
-          </div>
-        </label>
-      </div>
+        </div>
+      </label>
     </div>
   </div>
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding:4px"
           >
-            <div
-              style="padding:4px"
-            >
-              <div>
-                Spring
-              </div>
-              <div>
-                Jan-Mar
-              </div>
+            <div>
+              Spring
+            </div>
+            <div>
+              Jan-Mar
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding:4px"
           >
-            <div
-              style="padding:4px"
-            >
-              <div>
-                Summer
-              </div>
-              <div>
-                Apr-Jun
-              </div>
+            <div>
+              Summer
+            </div>
+            <div>
+              Apr-Jun
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding:4px"
           >
-            <div
-              style="padding:4px"
-            >
-              <div>
-                Autumn
-              </div>
-              <div>
-                Jul-Sept
-              </div>
+            <div>
+              Autumn
+            </div>
+            <div>
+              Jul-Sept
             </div>
           </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
           <div
-            class="ant-segmented-item-label"
+            style="padding:4px"
           >
-            <div
-              style="padding:4px"
-            >
-              <div>
-                Winter
-              </div>
-              <div>
-                Oct-Dec
-              </div>
+            <div>
+              Winter
+            </div>
+            <div>
+              Oct-Dec
             </div>
           </div>
-        </label>
-      </div>
+        </div>
+      </label>
     </div>
   </div>
 </div>
@@ -602,149 +594,141 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
 
 exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-space-item"
+    class="ant-segmented ant-segmented-disabled"
   >
     <div
-      class="ant-segmented ant-segmented-disabled"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Map"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Map"
-          >
-            Map
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item ant-segmented-item-disabled"
+          Map
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-disabled"
+      >
+        <input
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Transit"
         >
-          <input
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Transit"
-          >
-            Transit
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item ant-segmented-item-disabled"
+          Transit
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-disabled"
+      >
+        <input
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Satellite"
         >
-          <input
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Satellite"
-          >
-            Satellite
-          </div>
-        </label>
-      </div>
+          Satellite
+        </div>
+      </label>
     </div>
   </div>
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item ant-segmented-item-disabled"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-disabled"
+      >
+        <input
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item ant-segmented-item-disabled"
+          Monthly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-disabled"
+      >
+        <input
+          class="ant-segmented-item-input"
+          disabled=""
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Quarterly"
         >
-          <input
-            class="ant-segmented-item-input"
-            disabled=""
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Quarterly"
-          >
-            Quarterly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Quarterly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Yearly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Yearly"
-          >
-            Yearly
-          </div>
-        </label>
-      </div>
+          Yearly
+        </div>
+      </label>
     </div>
   </div>
 </div>
@@ -752,75 +736,67 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
 
 exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-      </div>
+          Monthly
+        </div>
+      </label>
     </div>
   </div>
-  <div
-    class="ant-space-item"
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
   >
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
-    >
-      <span>
-        Load more options
-      </span>
-    </button>
-  </div>
+    <span>
+      Load more options
+    </span>
+  </button>
 </div>
 `;
 
@@ -908,255 +884,243 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
 
 exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-space-item"
+    class="ant-segmented ant-segmented-lg"
   >
     <div
-      class="ant-segmented ant-segmented-lg"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Monthly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Quarterly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Quarterly"
-          >
-            Quarterly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Quarterly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Yearly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Yearly"
-          >
-            Yearly
-          </div>
-        </label>
-      </div>
+          Yearly
+        </div>
+      </label>
     </div>
   </div>
   <div
-    class="ant-space-item"
+    class="ant-segmented"
   >
     <div
-      class="ant-segmented"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Monthly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Quarterly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Quarterly"
-          >
-            Quarterly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Quarterly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Yearly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Yearly"
-          >
-            Yearly
-          </div>
-        </label>
-      </div>
+          Yearly
+        </div>
+      </label>
     </div>
   </div>
   <div
-    class="ant-space-item"
+    class="ant-segmented ant-segmented-sm"
   >
     <div
-      class="ant-segmented ant-segmented-sm"
+      class="ant-segmented-group"
     >
-      <div
-        class="ant-segmented-group"
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
       >
-        <label
-          class="ant-segmented-item ant-segmented-item-selected"
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Daily"
         >
-          <input
-            checked=""
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Daily"
-          >
-            Daily
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Daily
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Weekly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Weekly"
-          >
-            Weekly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Weekly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Monthly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Monthly"
-          >
-            Monthly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Monthly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Quarterly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Quarterly"
-          >
-            Quarterly
-          </div>
-        </label>
-        <label
-          class="ant-segmented-item"
+          Quarterly
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Yearly"
         >
-          <input
-            class="ant-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="ant-segmented-item-label"
-            title="Yearly"
-          >
-            Yearly
-          </div>
-        </label>
-      </div>
+          Yearly
+        </div>
+      </label>
     </div>
   </div>
 </div>
@@ -1164,255 +1128,243 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
 
 exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
 >
-  <div
-    class="ant-space-item"
-  >
-    <div>
+  <div>
+    <div
+      class="ant-segmented ant-segmented-lg"
+      style="margin-right:6px"
+    >
       <div
-        class="ant-segmented ant-segmented-lg"
-        style="margin-right:6px"
+        class="ant-segmented-group"
       >
-        <div
-          class="ant-segmented-group"
+        <label
+          class="ant-segmented-item ant-segmented-item-selected"
         >
-          <label
-            class="ant-segmented-item ant-segmented-item-selected"
+          <input
+            checked=""
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Daily"
           >
-            <input
-              checked=""
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Daily"
-            >
-              Daily
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
+            Daily
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Weekly"
           >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Weekly"
-            >
-              Weekly
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
+            Weekly
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Monthly"
           >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Monthly"
-            >
-              Monthly
-            </div>
-          </label>
-        </div>
+            Monthly
+          </div>
+        </label>
       </div>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-lg"
-        type="button"
-      >
-        <span>
-          Button
-        </span>
-      </button>
     </div>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-lg"
+      type="button"
+    >
+      <span>
+        Button
+      </span>
+    </button>
   </div>
-  <div
-    class="ant-space-item"
-  >
-    <div>
+  <div>
+    <div
+      class="ant-segmented"
+      style="margin-right:6px"
+    >
       <div
-        class="ant-segmented"
-        style="margin-right:6px"
+        class="ant-segmented-group"
       >
-        <div
-          class="ant-segmented-group"
+        <label
+          class="ant-segmented-item ant-segmented-item-selected"
         >
-          <label
-            class="ant-segmented-item ant-segmented-item-selected"
+          <input
+            checked=""
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Daily"
           >
-            <input
-              checked=""
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Daily"
-            >
-              Daily
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
+            Daily
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Weekly"
           >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Weekly"
-            >
-              Weekly
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
+            Weekly
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Monthly"
           >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Monthly"
-            >
-              Monthly
-            </div>
-          </label>
-        </div>
+            Monthly
+          </div>
+        </label>
       </div>
-      <input
-        class="ant-input"
-        placeholder="default size"
-        style="width:150px"
-        type="text"
-        value=""
-      />
     </div>
+    <input
+      class="ant-input"
+      placeholder="default size"
+      style="width:150px"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
-  >
-    <div>
+  <div>
+    <div
+      class="ant-segmented ant-segmented-sm"
+      style="margin-right:6px"
+    >
       <div
-        class="ant-segmented ant-segmented-sm"
-        style="margin-right:6px"
+        class="ant-segmented-group"
       >
-        <div
-          class="ant-segmented-group"
+        <label
+          class="ant-segmented-item ant-segmented-item-selected"
         >
-          <label
-            class="ant-segmented-item ant-segmented-item-selected"
+          <input
+            checked=""
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Daily"
           >
-            <input
-              checked=""
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Daily"
-            >
-              Daily
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
+            Daily
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Weekly"
           >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Weekly"
-            >
-              Weekly
-            </div>
-          </label>
-          <label
-            class="ant-segmented-item"
+            Weekly
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="Monthly"
           >
-            <input
-              class="ant-segmented-item-input"
-              type="radio"
-            />
-            <div
-              class="ant-segmented-item-label"
-              title="Monthly"
-            >
-              Monthly
-            </div>
-          </label>
-        </div>
+            Monthly
+          </div>
+        </label>
       </div>
+    </div>
+    <div
+      class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
+      style="width:150px"
+    >
       <div
-        class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
-        style="width:150px"
+        class="ant-select-selector"
       >
-        <div
-          class="ant-select-selector"
-        >
-          <span
-            class="ant-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Lucy"
-          >
-            Lucy
-          </span>
-        </div>
         <span
-          aria-hidden="true"
-          class="ant-select-arrow"
-          style="user-select:none;-webkit-user-select:none"
-          unselectable="on"
+          class="ant-select-selection-search"
         >
-          <span
-            aria-label="down"
-            class="anticon anticon-down ant-select-suffix"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
+          <input
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            readonly=""
+            role="combobox"
+            style="opacity:0"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-item"
+          title="Lucy"
+        >
+          Lucy
         </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
diff --git a/components/segmented/demo/basic.tsx b/components/segmented/demo/basic.tsx
index d8f27da619..b0cfedff2c 100644
--- a/components/segmented/demo/basic.tsx
+++ b/components/segmented/demo/basic.tsx
@@ -1,4 +1,8 @@
 import React from 'react';
 import { Segmented } from 'antd';
 
-export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
+const Demo: React.FC = () => (
+  <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
+);
+
+export default Demo;
diff --git a/components/segmented/demo/block.tsx b/components/segmented/demo/block.tsx
index 321e8ad4f1..dad6456e11 100644
--- a/components/segmented/demo/block.tsx
+++ b/components/segmented/demo/block.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Segmented } from 'antd';
 
-export default () => (
-  <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
+const Demo: React.FC = () => (
+  <Segmented options={[123, 456, 'longtext-longtext-longtext-longtext']} block />
 );
+
+export default Demo;
diff --git a/components/segmented/demo/componentToken.tsx b/components/segmented/demo/componentToken.tsx
index b77d67f0d4..8611bc13d2 100644
--- a/components/segmented/demo/componentToken.tsx
+++ b/components/segmented/demo/componentToken.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ConfigProvider, Segmented } from 'antd';
 
-export default () => (
+const Demo: React.FC = () => (
   <ConfigProvider
     theme={{
       components: {
@@ -19,3 +19,5 @@ export default () => (
     <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
   </ConfigProvider>
 );
+
+export default Demo;
diff --git a/components/segmented/demo/custom.tsx b/components/segmented/demo/custom.tsx
index 8e983ccb3f..cbbd8f62cd 100644
--- a/components/segmented/demo/custom.tsx
+++ b/components/segmented/demo/custom.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Segmented, Space } from 'antd';
+import { Avatar, Flex, Segmented } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Flex gap="small" align="flex-start" vertical>
     <Segmented
       options={[
         {
@@ -75,7 +75,7 @@ const App: React.FC = () => (
         },
       ]}
     />
-  </Space>
+  </Flex>
 );
 
 export default App;
diff --git a/components/segmented/demo/disabled.tsx b/components/segmented/demo/disabled.tsx
index 7217842d3d..17c8cf0d8e 100644
--- a/components/segmented/demo/disabled.tsx
+++ b/components/segmented/demo/disabled.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Segmented, Space } from 'antd';
+import { Flex, Segmented } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Flex gap="small" align="flex-start" vertical>
     <Segmented options={['Map', 'Transit', 'Satellite']} disabled />
     <Segmented
       options={[
@@ -13,7 +13,7 @@ const App: React.FC = () => (
         'Yearly',
       ]}
     />
-  </Space>
+  </Flex>
 );
 
 export default App;
diff --git a/components/segmented/demo/dynamic.tsx b/components/segmented/demo/dynamic.tsx
index e731ccaaf2..faaf57d251 100644
--- a/components/segmented/demo/dynamic.tsx
+++ b/components/segmented/demo/dynamic.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Segmented, Button, Space } from 'antd';
+import { Button, Flex, Segmented } from 'antd';
 
 const Demo: React.FC = () => {
   const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']);
@@ -11,12 +11,12 @@ const Demo: React.FC = () => {
   };
 
   return (
-    <Space direction="vertical">
+    <Flex gap="small" align="flex-start" vertical>
       <Segmented options={options} />
       <Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}>
         Load more options
       </Button>
-    </Space>
+    </Flex>
   );
 };
 
diff --git a/components/segmented/demo/icon-only.tsx b/components/segmented/demo/icon-only.tsx
index 41620774d6..09b2d09bce 100644
--- a/components/segmented/demo/icon-only.tsx
+++ b/components/segmented/demo/icon-only.tsx
@@ -2,17 +2,13 @@ import React from 'react';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 import { Segmented } from 'antd';
 
-export default () => (
+const Demo: React.FC = () => (
   <Segmented
     options={[
-      {
-        value: 'List',
-        icon: <BarsOutlined />,
-      },
-      {
-        value: 'Kanban',
-        icon: <AppstoreOutlined />,
-      },
+      { value: 'List', icon: <BarsOutlined /> },
+      { value: 'Kanban', icon: <AppstoreOutlined /> },
     ]}
   />
 );
+
+export default Demo;
diff --git a/components/segmented/demo/size-consistent.tsx b/components/segmented/demo/size-consistent.tsx
index b1f23471d9..9bd7dce83f 100644
--- a/components/segmented/demo/size-consistent.tsx
+++ b/components/segmented/demo/size-consistent.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button, Input, Select, Segmented, Space } from 'antd';
+import { Button, Flex, Input, Segmented, Select } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Flex gap="small" vertical>
     <div>
       <Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
       <Button type="primary" size="large">
@@ -19,7 +19,7 @@ const App: React.FC = () => (
         <Select.Option value="lucy">Lucy</Select.Option>
       </Select>
     </div>
-  </Space>
+  </Flex>
 );
 
 export default App;
diff --git a/components/segmented/demo/size.tsx b/components/segmented/demo/size.tsx
index 735d967b68..d956cc9f33 100644
--- a/components/segmented/demo/size.tsx
+++ b/components/segmented/demo/size.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Segmented, Space } from 'antd';
+import { Flex, Segmented } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Flex gap="small" align="flex-start" vertical>
     <Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
-  </Space>
+  </Flex>
 );
 
 export default App;
diff --git a/components/segmented/demo/with-icon.tsx b/components/segmented/demo/with-icon.tsx
index d242be7fde..cbb1f77aeb 100644
--- a/components/segmented/demo/with-icon.tsx
+++ b/components/segmented/demo/with-icon.tsx
@@ -2,19 +2,13 @@ import React from 'react';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 import { Segmented } from 'antd';
 
-export default () => (
+const Demo: React.FC = () => (
   <Segmented
     options={[
-      {
-        label: 'List',
-        value: 'List',
-        icon: <BarsOutlined />,
-      },
-      {
-        label: 'Kanban',
-        value: 'Kanban',
-        icon: <AppstoreOutlined />,
-      },
+      { label: 'List', value: 'List', icon: <BarsOutlined /> },
+      { label: 'Kanban', value: 'Kanban', icon: <AppstoreOutlined /> },
     ]}
   />
 );
+
+export default Demo;
diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.ts
similarity index 99%
rename from components/segmented/style/index.tsx
rename to components/segmented/style/index.ts
index 09b3bf0392..8bd35554f6 100644
--- a/components/segmented/style/index.tsx
+++ b/components/segmented/style/index.ts
@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';