@databricks/design-system 1.9.1 → 1.9.3

package/dist/index.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import React__default, { useRef, useMemo, forwardRef, useImperativeHandle, Children, useCallback, useContext, useState, useEffect, createContext } from 'react';
-import { u as useDesignSystemTheme, a as useDesignSystemFlags, I as Icon, D as DesignSystemAntDConfigProvider, R as RestoreAntDDefaultClsPrefix, g as getAnimationCss, i as importantify, b as useDesignSystemContext, A as ApplyDesignSystemContextOverrides, T as Typography, c as getValidationStateColor, C as Checkbox, d as Title$2, e as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, l as lightColorList } from './Typography-84a00e02.js';
-export { A as ApplyDesignSystemContextOverrides, k as ApplyDesignSystemFlags, C as Checkbox, e as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, D as DesignSystemAntDConfigProvider, h as DesignSystemContext, j as DesignSystemProvider, I as Icon, N as NewWindowIcon, R as RestoreAntDDefaultClsPrefix, S as SortAscendingIcon, n as SortDescendingIcon, o as SortUnsortedIcon, T as Typography, W as WithDesignSystemThemeHoc, _ as __INTERNAL_DO_NOT_USE__Group, g as getAnimationCss, f as getWrapperStyle, m as useAntDConfigProviderContext, a as useDesignSystemFlags, u as useDesignSystemTheme } from './Typography-84a00e02.js';
+import { u as useDesignSystemTheme, a as useDesignSystemFlags, I as Icon, D as DesignSystemAntDConfigProvider, R as RestoreAntDDefaultClsPrefix, C as ChevronDownIcon, g as getAnimationCss, b as CloseIcon, c as useDesignSystemContext, A as ApplyDesignSystemContextOverrides, T as Typography, B as Button, d as CheckIcon, e as Tooltip, i as importantify, X as XCircleFillIcon, L as LoadingIcon, f as getValidationStateColor, h as Input, j as Checkbox, k as Title$2, S as Spinner, l as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, m as getDefaultStyles, n as getPrimaryStyles, o as getDisabledStyles, p as lightColorList } from './Spinner-140f57ac.js';
+export { A as ApplyDesignSystemContextOverrides, v as ApplyDesignSystemFlags, B as Button, d as CheckIcon, j as Checkbox, C as ChevronDownIcon, b as CloseIcon, l as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, D as DesignSystemAntDConfigProvider, s as DesignSystemContext, t as DesignSystemProvider, I as Icon, h as Input, L as LoadingIcon, N as NewWindowIcon, R as RestoreAntDDefaultClsPrefix, x as SearchIcon, y as SortAscendingIcon, z as SortDescendingIcon, E as SortUnsortedIcon, S as Spinner, e as Tooltip, T as Typography, W as WithDesignSystemThemeHoc, X as XCircleFillIcon, H as __INTERNAL_DO_NOT_USE_DEDUPE__Group, _ as __INTERNAL_DO_NOT_USE__Group, G as __INTERNAL_DO_NOT_USE__Password, F as __INTERNAL_DO_NOT_USE__TextArea, g as getAnimationCss, q as getButtonEmotionStyles, r as getWrapperStyle, w as useAntDConfigProviderContext, a as useDesignSystemFlags, u as useDesignSystemTheme } from './Spinner-140f57ac.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { css, keyframes, ClassNames } from '@emotion/react';
-import { Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Button as Button$1, DatePicker, Dropdown as Dropdown$1, Tooltip as Tooltip$1, Form as Form$1, Input as Input$1, Radio as Radio$1, Select as Select$1, Switch as Switch$1, Col as Col$1, Row as Row$1, Space as Space$1, Layout as Layout$1, Menu as Menu$1, Modal as Modal$1, notification, Pagination as Pagination$1, Popover as Popover$2, Skeleton as Skeleton$1, Table as Table$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
+import { Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, DatePicker, Dropdown as Dropdown$1, Form as Form$1, Radio as Radio$1, Select as Select$1, Col as Col$1, Row as Row$1, Space as Space$1, Layout as Layout$1, Pagination as Pagination$1, Table as Table$1, Menu as Menu$1, Modal as Modal$1, notification, Popover as Popover$2, Skeleton as Skeleton$1, Button as Button$1, Switch as Switch$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
 import classnames from 'classnames';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenu$1 from '@radix-ui/react-dropdown-menu';
@@ -14,7 +14,7 @@ import * as Popover$1 from '@radix-ui/react-popover';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import { ResizableBox } from 'react-resizable';
 import AntDIcon from '@ant-design/icons';
-import 'chroma-js';
+import * as Toggle from '@radix-ui/react-toggle';
 import 'lodash/isNil';
 import 'lodash/endsWith';
 import 'lodash/isBoolean';
@@ -22,6 +22,7 @@ import 'lodash/isNumber';
 import 'lodash/isString';
 import 'lodash/mapValues';
 import '@emotion/unitless';
+import 'chroma-js';
 
 /**
  * A helper hook that allows quick creation of theme-dependent styles. 
@@ -969,47 +970,6 @@ function CheckCircleIcon(props) {
   });
 }
 
-function SvgCheckIconV1(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      d: "M8.795 15.875l-3.47-3.47a.996.996 0 00-1.41 0 .996.996 0 000 1.41l4.18 4.18c.39.39 1.02.39 1.41 0l10.58-10.58a.996.996 0 10-1.41-1.41l-9.88 9.87z",
-      fill: "currentColor"
-    })
-  });
-}
-function SvgCheckIconV2(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M15.06 3.56l-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5l1.06 1.06z",
-      fill: "currentColor"
-    })
-  });
-}
-function CheckIcon(props) {
-  const {
-    USE_NEW_ICONS
-  } = useDesignSystemFlags();
-  const component = USE_NEW_ICONS ? SvgCheckIconV2 : SvgCheckIconV1;
-  return jsx(Icon, {
-    ...props,
-    component: component
-  });
-}
-
 function SvgCheckLineIconV1(props) {
   return jsx("svg", {
     width: "1em",
@@ -1268,47 +1228,6 @@ function ChevronDoubleUpIcon(props) {
   });
 }
 
-function SvgChevronDownIconV1(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      d: "M15.875 9l-3.88 3.88L8.115 9a.996.996 0 10-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41c-.39-.38-1.03-.39-1.42 0z",
-      fill: "currentColor"
-    })
-  });
-}
-function SvgChevronDownIconV2(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M8 8.917L10.947 6 12 7.042 8 11 4 7.042 5.053 6 8 8.917z",
-      fill: "currentColor"
-    })
-  });
-}
-function ChevronDownIcon(props) {
-  const {
-    USE_NEW_ICONS
-  } = useDesignSystemFlags();
-  const component = USE_NEW_ICONS ? SvgChevronDownIconV2 : SvgChevronDownIconV1;
-  return jsx(Icon, {
-    ...props,
-    component: component
-  });
-}
-
 function SvgChevronLeftIconV1(props) {
   return jsx("svg", {
     width: "1em",
@@ -1560,47 +1479,6 @@ function ClockIcon(props) {
   });
 }
 
-function SvgCloseIconV1(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      d: "M7.707 6.293a1 1 0 00-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 101.414 1.414L12 13.414l4.293 4.293a1 1 0 001.414-1.414L13.414 12l4.293-4.293a1 1 0 00-1.414-1.414L12 10.586 7.707 6.293z",
-      fill: "currentColor"
-    })
-  });
-}
-function SvgCloseIconV2(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M6.97 8.03L2 3.06 3.06 2l4.97 4.97L13 2l1.06 1.06-4.969 4.97 4.97 4.97L13 14.06 8.03 9.092l-4.97 4.97L2 13l4.97-4.97z",
-      fill: "currentColor"
-    })
-  });
-}
-function CloseIcon(props) {
-  const {
-    USE_NEW_ICONS
-  } = useDesignSystemFlags();
-  const component = USE_NEW_ICONS ? SvgCloseIconV2 : SvgCloseIconV1;
-  return jsx(Icon, {
-    ...props,
-    component: component
-  });
-}
-
 function SvgCloudDownloadIconV1(props) {
   return jsx("svg", {
     width: "1em",
@@ -1940,7 +1818,7 @@ function SvgDangerFillIconV2(props) {
     children: jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M8 0a8 8 0 100 16A8 8 0 008 0zm-.75 10.75a.75.75 0 101.5 0 .75.75 0 00-1.5 0zM8.75 5v4h-1.5V5h1.5z",
+      d: "M15.78 11.533l-4.242 4.243a.75.75 0 01-.53.22H4.996a.75.75 0 01-.53-.22L.224 11.533a.75.75 0 01-.22-.53v-6.01a.75.75 0 01.22-.53L4.467.22a.75.75 0 01.53-.22h6.01a.75.75 0 01.53.22l4.243 4.242c.141.141.22.332.22.53v6.011a.75.75 0 01-.22.53zm-8.528-.785a.75.75 0 101.5 0 .75.75 0 00-1.5 0zm1.5-5.75v4h-1.5v-4h1.5z",
       fill: "currentColor"
     })
   });
@@ -1981,12 +1859,12 @@ function SvgDangerIconV2(props) {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [jsx("path", {
-      d: "M7.25 10.75a.75.75 0 101.5 0 .75.75 0 00-1.5 0zM8.75 5v4h-1.5V5h1.5z",
+      d: "M7.248 10.748a.75.75 0 101.5 0 .75.75 0 00-1.5 0zM8.748 4.998v4h-1.5v-4h1.5z",
       fill: "currentColor"
     }), jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M8 16A8 8 0 108 0a8 8 0 000 16zm6.5-8a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z",
+      d: "M11.533 15.776l4.243-4.243a.75.75 0 00.22-.53v-6.01a.75.75 0 00-.22-.53L11.533.22a.75.75 0 00-.53-.22h-6.01a.75.75 0 00-.53.22L.22 4.462a.75.75 0 00-.22.53v6.011c0 .199.079.39.22.53l4.242 4.243c.141.14.332.22.53.22h6.011a.75.75 0 00.53-.22zm2.963-10.473v5.39l-3.804 3.803H5.303L1.5 10.692V5.303L5.303 1.5h5.39l3.803 3.803z",
       fill: "currentColor"
     })]
   });
@@ -3808,49 +3686,6 @@ function ListIcon(props) {
   });
 }
 
-function SvgLoadingIconV1(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M23.212 12a.788.788 0 01-.789-.788 9.57 9.57 0 00-.757-3.751 9.662 9.662 0 00-5.129-5.129 9.587 9.587 0 00-3.749-.755.788.788 0 010-1.577c1.513 0 2.983.296 4.365.882a11.128 11.128 0 013.562 2.403 11.157 11.157 0 013.283 7.927.785.785 0 01-.786.788z",
-      fill: "currentColor"
-    })
-  });
-}
-function SvgLoadingIconV2(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M23.212 12a.788.788 0 01-.789-.788 9.57 9.57 0 00-.757-3.751 9.662 9.662 0 00-5.129-5.129 9.587 9.587 0 00-3.749-.755.788.788 0 010-1.577c1.513 0 2.983.296 4.365.882a11.128 11.128 0 013.562 2.403 11.157 11.157 0 013.283 7.927.785.785 0 01-.786.788z",
-      fill: "currentColor"
-    })
-  });
-}
-function LoadingIcon(props) {
-  const {
-    USE_NEW_ICONS
-  } = useDesignSystemFlags();
-  const component = USE_NEW_ICONS ? SvgLoadingIconV2 : SvgLoadingIconV1;
-  return jsx(Icon, {
-    ...props,
-    component: component
-  });
-}
-
 function SvgLockFillIconV1(props) {
   return jsx("svg", {
     width: "1em",
@@ -5536,60 +5371,6 @@ function SchoolIcon(props) {
   });
 }
 
-function SvgSearchIconV1(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M15.187 14.472h.79l4.24 4.26c.41.41.41 1.08 0 1.49-.41.41-1.08.41-1.49 0l-4.25-4.25v-.79l-.27-.28a6.5 6.5 0 01-5.34 1.48c-2.78-.47-5-2.79-5.34-5.59a6.505 6.505 0 017.27-7.27c2.8.34 5.12 2.56 5.59 5.34a6.5 6.5 0 01-1.48 5.34l.28.27zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5z",
-      fill: "currentColor"
-    })
-  });
-}
-function SvgSearchIconV2(props) {
-  return jsxs("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: [jsx("g", {
-      clipPath: "url(#SearchIcon_svg__clip0_13123_34883)",
-      children: jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M8 1a7 7 0 104.39 12.453l2.55 2.55 1.06-1.06-2.55-2.55A7 7 0 008 1zM2.5 8a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0z",
-        fill: "currentColor"
-      })
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        id: "SearchIcon_svg__clip0_13123_34883",
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M0 0h16v16H0z"
-        })
-      })
-    })]
-  });
-}
-function SearchIcon(props) {
-  const {
-    USE_NEW_ICONS
-  } = useDesignSystemFlags();
-  const component = USE_NEW_ICONS ? SvgSearchIconV2 : SvgSearchIconV1;
-  return jsx(Icon, {
-    ...props,
-    component: component
-  });
-}
-
 function SvgSecurityIconV1(props) {
   return jsx("svg", {
     width: "1em",
@@ -6934,49 +6715,6 @@ function WarningIcon(props) {
   });
 }
 
-function SvgXCircleFillIconV1(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm11.414 0l2.122-2.121a1.003 1.003 0 000-1.415 1.003 1.003 0 00-1.415 0L12 10.586 9.879 8.464a1.003 1.003 0 00-1.415 0 1.003 1.003 0 000 1.415L10.586 12l-2.122 2.121a1.003 1.003 0 000 1.415 1.003 1.003 0 001.415 0L12 13.414l2.121 2.122a1.003 1.003 0 001.415 0 1.003 1.003 0 000-1.415L13.414 12z",
-      fill: "currentColor"
-    })
-  });
-}
-function SvgXCircleFillIconV2(props) {
-  return jsx("svg", {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M8 16A8 8 0 108 0a8 8 0 000 16zm1.97-4.97L8 9.06l-1.97 1.97-1.06-1.06L6.94 8 4.97 6.03l1.06-1.06L8 6.94l1.97-1.97 1.06 1.06L9.06 8l1.97 1.97-1.06 1.06z",
-      fill: "currentColor"
-    })
-  });
-}
-function XCircleFillIcon(props) {
-  const {
-    USE_NEW_ICONS
-  } = useDesignSystemFlags();
-  const component = USE_NEW_ICONS ? SvgXCircleFillIconV2 : SvgXCircleFillIconV1;
-  return jsx(Icon, {
-    ...props,
-    component: component
-  });
-}
-
 function SvgXCircleIconV1(props) {
   return jsx("svg", {
     width: "1em",
@@ -7228,6 +6966,40 @@ function BracketsSquareIcon(props) {
   });
 }
 
+function SvgBracketsXIcon(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsxs("g", {
+      clipPath: "url(#BracketsXIcon_svg__clip0_14891_29556)",
+      fill: "currentColor",
+      children: [jsx("path", {
+        d: "M1.75 4.75A2.75 2.75 0 014.5 2H5v1.5h-.5c-.69 0-1.25.56-1.25 1.25v1c0 .93-.462 1.752-1.168 2.25a2.747 2.747 0 011.168 2.25v1c0 .69.56 1.25 1.25 1.25H5V14h-.5a2.75 2.75 0 01-2.75-2.75v-1C1.75 9.56 1.19 9 .5 9H0V7h.5c.69 0 1.25-.56 1.25-1.25v-1zM11.5 2a2.75 2.75 0 012.75 2.75v1c0 .69.56 1.25 1.25 1.25h.5v2h-.5c-.69 0-1.25.56-1.25 1.25v1A2.75 2.75 0 0111.5 14H11v-1.5h.5c.69 0 1.25-.56 1.25-1.25v-1c0-.93.462-1.752 1.168-2.25a2.747 2.747 0 01-1.168-2.25v-1c0-.69-.56-1.25-1.25-1.25H11V2h.5z"
+      }), jsx("path", {
+        d: "M4.97 6.03L6.94 8 4.97 9.97l1.06 1.06L8 9.06l1.97 1.97 1.06-1.06L9.06 8l1.97-1.97-1.06-1.06L8 6.94 6.03 4.97 4.97 6.03z"
+      })]
+    }), jsx("defs", {
+      children: jsx("clipPath", {
+        id: "BracketsXIcon_svg__clip0_14891_29556",
+        children: jsx("path", {
+          fill: "#fff",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+function BracketsXIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgBracketsXIcon
+  });
+}
+
 function SvgCatalogIcon(props) {
   return jsx("svg", {
     width: "1em",
@@ -7298,8 +7070,34 @@ function CloudKeyIcon(props) {
   });
 }
 
-function SvgColorFillIcon(props) {
-  return jsx("svg", {
+function SvgCloudModelIcon(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsx("path", {
+      d: "M3.394 5.586a4.752 4.752 0 019.351.946A3.754 3.754 0 0115.787 9H14.12a2.248 2.248 0 00-1.871-1H12a.75.75 0 01-.75-.75v-.5a3.25 3.25 0 00-6.476-.402.75.75 0 01-.697.657A2.75 2.75 0 004 12.49V14a.75.75 0 01-.179-.021 4.25 4.25 0 01-.427-8.393z",
+      fill: "currentColor"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8 7a2.25 2.25 0 012.03 3.22l.5.5a2.25 2.25 0 11-1.06 1.06l-.5-.5A2.25 2.25 0 118 7zm.75 2.25a.75.75 0 10-1.5 0 .75.75 0 001.5 0zm3.5 3.5a.75.75 0 10-1.5 0 .75.75 0 001.5 0z",
+      fill: "currentColor"
+    })]
+  });
+}
+function CloudModelIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgCloudModelIcon
+  });
+}
+
+function SvgColorFillIcon(props) {
+  return jsx("svg", {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -7347,6 +7145,126 @@ function ConnectIcon(props) {
   });
 }
 
+function SvgCursorIcon(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsx("g", {
+      clipPath: "url(#CursorIcon_svg__clip0_14914_35410)",
+      children: jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M1.22 1.22a.75.75 0 01.802-.169l13.5 5.25a.75.75 0 01-.043 1.413L9.597 9.597l-1.883 5.882a.75.75 0 01-1.413.043l-5.25-13.5a.75.75 0 01.169-.802zm1.847 1.847l3.864 9.937 1.355-4.233a.75.75 0 01.485-.485l4.233-1.355-9.937-3.864z",
+        fill: "currentColor"
+      })
+    }), jsx("defs", {
+      children: jsx("clipPath", {
+        id: "CursorIcon_svg__clip0_14914_35410",
+        children: jsx("path", {
+          fill: "#fff",
+          transform: "matrix(-1 0 0 1 16 0)",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+function CursorIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgCursorIcon
+  });
+}
+
+function SvgDagIcon(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8 1.75A.75.75 0 018.75 1h5.5a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-5.5A.75.75 0 018 5.25v-1H5.5c-.69 0-1.25.56-1.25 1.25h2a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-2c0 .69.56 1.25 1.25 1.25H8v-1a.75.75 0 01.75-.75h5.5a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-5.5a.75.75 0 01-.75-.75v-1H5.5a2.75 2.75 0 01-2.75-2.75h-2A.75.75 0 010 9.75v-3.5a.75.75 0 01.75-.75h2A2.75 2.75 0 015.5 2.75H8v-1zm1.5.75v2h4v-2h-4zM1.5 9V7h4v2h-4zm8 4.5v-2h4v2h-4z",
+      fill: "currentColor"
+    })
+  });
+}
+function DagIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgDagIcon
+  });
+}
+
+function SvgDecimalIcon(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3 10a3 3 0 106 0V6a3 3 0 00-6 0v4zm3 1.5A1.5 1.5 0 014.5 10V6a1.5 1.5 0 113 0v4A1.5 1.5 0 016 11.5zM10 10a3 3 0 106 0V6a3 3 0 10-6 0v4zm3 1.5a1.5 1.5 0 01-1.5-1.5V6a1.5 1.5 0 013 0v4a1.5 1.5 0 01-1.5 1.5z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "M1 13a1 1 0 100-2 1 1 0 000 2z",
+      fill: "currentColor"
+    })]
+  });
+}
+function DecimalIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgDecimalIcon
+  });
+}
+
+function SvgDotsCircleIcon(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsxs("g", {
+      clipPath: "url(#DotsCircleIcon_svg__clip0_14891_29603)",
+      fill: "currentColor",
+      children: [jsx("path", {
+        d: "M6 8a.75.75 0 11-1.5 0A.75.75 0 016 8zM8 8.75a.75.75 0 100-1.5.75.75 0 000 1.5zM10.75 8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
+      }), jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
+      })]
+    }), jsx("defs", {
+      children: jsx("clipPath", {
+        id: "DotsCircleIcon_svg__clip0_14891_29603",
+        children: jsx("path", {
+          fill: "#fff",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+function DotsCircleIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgDotsCircleIcon
+  });
+}
+
 function SvgFontIcon(props) {
   return jsxs("svg", {
     width: "1em",
@@ -7427,6 +7345,32 @@ function ItalicIcon(props) {
   });
 }
 
+function SvgLettersIcon(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.25 1h2.174a2.126 2.126 0 011.81 3.243 2.126 2.126 0 01-1.36 3.761H6.25a.75.75 0 01-.75-.75V1.75A.75.75 0 016.25 1zM7 6.504V5.252h1.874a.626.626 0 110 1.252H7zm2.05-3.378c0 .345-.28.625-.625.626H7.001L7 2.5h1.424c.346 0 .626.28.626.626zM3.307 6a.75.75 0 01.697.473L6.596 13H4.982l-.238-.6H1.855l-.24.6H0l2.61-6.528A.75.75 0 013.307 6zm-.003 2.776l.844 2.124H2.455l.85-2.124z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "M12.5 15a2.5 2.5 0 002.5-2.5h-1.5a1 1 0 11-2 0v-1.947c0-.582.472-1.053 1.053-1.053.523 0 .947.424.947.947v.053H15v-.053A2.447 2.447 0 0012.553 8 2.553 2.553 0 0010 10.553V12.5a2.5 2.5 0 002.5 2.5z",
+      fill: "currentColor"
+    })]
+  });
+}
+function LettersIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgLettersIcon
+  });
+}
+
 function SvgMenuIcon(props) {
   return jsx("svg", {
     width: "1em",
@@ -7473,7 +7417,7 @@ function NotificationOffIcon(props) {
   });
 }
 
-function SvgPlugIcon(props) {
+function SvgNumbersIcon(props) {
   return jsx("svg", {
     width: "1em",
     height: "1em",
@@ -7482,21 +7426,19 @@ function SvgPlugIcon(props) {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M14.168 2.953l.893-.892L14 1l-.893.893a4.001 4.001 0 00-5.077.48l-.884.884a.75.75 0 000 1.061l4.597 4.596a.75.75 0 001.06 0l.884-.884a4.001 4.001 0 00.48-5.077zM12.627 6.97l-.354.353-3.536-3.535.354-.354a2.5 2.5 0 113.536 3.536zM7.323 10.152L5.91 8.737l1.414-1.414-1.06-1.06-1.415 1.414-.53-.53a.75.75 0 00-1.06 0l-.885.883a4.001 4.001 0 00-.48 5.077L1 14l1.06 1.06.893-.892a4.001 4.001 0 005.077-.48l.884-.885a.75.75 0 000-1.06l-.53-.53 1.414-1.415-1.06-1.06-1.415 1.414zm-3.889 2.475a2.5 2.5 0 003.536 0l.353-.354-3.535-3.536-.354.354a2.5 2.5 0 000 3.536z",
+      d: "M7.889 1A2.389 2.389 0 005.5 3.389H7c0-.491.398-.889.889-.889h.371a.74.74 0 01.292 1.42l-1.43.613A2.675 2.675 0 005.5 6.992V8h5V6.5H7.108c.12-.26.331-.472.604-.588l1.43-.613A2.24 2.24 0 008.26 1H7.89zM2.75 6a1.5 1.5 0 01-1.5 1.5H1V9h.25c.546 0 1.059-.146 1.5-.401V11.5H1V13h5v-1.5H4.25V6h-1.5zM10 12.85A2.15 2.15 0 0012.15 15h.725a2.125 2.125 0 001.617-3.504 2.138 2.138 0 00-1.656-3.521l-.713.008A2.15 2.15 0 0010 10.133v.284h1.5v-.284a.65.65 0 01.642-.65l.712-.009a.638.638 0 11.008 1.276H12v1.5h.875a.625.625 0 110 1.25h-.725a.65.65 0 01-.65-.65v-.267H10v.267z",
       fill: "currentColor"
     })
   });
 }
-function PlugIcon(props) {
+function NumbersIcon(props) {
   return jsx(Icon, {
     ...props,
-    component: SvgPlugIcon
+    component: SvgNumbersIcon
   });
 }
 
-function SvgRefresh(props) {
+function SvgPlugIcon(props) {
   return jsx("svg", {
     width: "1em",
     height: "1em",
@@ -7505,15 +7447,17 @@ function SvgRefresh(props) {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: jsx("path", {
-      d: "M8 2.5a5.48 5.48 0 013.817 1.54l.009.009.5.451H11V6h4V2h-1.5v1.539l-.651-.588a7 7 0 10.114 9.985l-1.064-1.057A5.5 5.5 0 118 2.5z",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.168 2.953l.893-.892L14 1l-.893.893a4.001 4.001 0 00-5.077.48l-.884.884a.75.75 0 000 1.061l4.597 4.596a.75.75 0 001.06 0l.884-.884a4.001 4.001 0 00.48-5.077zM12.627 6.97l-.354.353-3.536-3.535.354-.354a2.5 2.5 0 113.536 3.536zM7.323 10.152L5.91 8.737l1.414-1.414-1.06-1.06-1.415 1.414-.53-.53a.75.75 0 00-1.06 0l-.885.883a4.001 4.001 0 00-.48 5.077L1 14l1.06 1.06.893-.892a4.001 4.001 0 005.077-.48l.884-.885a.75.75 0 000-1.06l-.53-.53 1.414-1.415-1.06-1.06-1.415 1.414zm-3.889 2.475a2.5 2.5 0 003.536 0l.353-.354-3.535-3.536-.354.354a2.5 2.5 0 000 3.536z",
       fill: "currentColor"
     })
   });
 }
-function Refresh(props) {
+function PlugIcon(props) {
   return jsx(Icon, {
     ...props,
-    component: SvgRefresh
+    component: SvgPlugIcon
   });
 }
 
@@ -7770,7 +7714,7 @@ const Accordion = /* #__PURE__ */(() => {
 // TODO: Replace with custom icons
 // TODO: Reuse in Alert
 const filledIconsMap = {
-  error: DangerIcon,
+  error: DangerFillIcon,
   warning: WarningFillIcon,
   success: CheckCircleFillIcon,
   info: InfoFillIcon
@@ -7923,6 +7867,9 @@ const AutoComplete = /* #__PURE__ */(() => {
     } = useDesignSystemTheme();
     return jsx(DesignSystemAntDConfigProvider, {
       children: jsx(AutoComplete$1, {
+        dropdownStyle: {
+          boxShadow: theme.general.shadowLow
+        },
         ...props,
         ...dangerouslySetAntdProps,
         css: /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:AutoComplete;")
@@ -7993,484 +7940,51 @@ const Breadcrumb = /* #__PURE__ */(() => {
   return Breadcrumb;
 })();
 
-function getDefaultStyles(theme) {
-  return {
-    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
-    borderColor: theme.colors.actionDefaultBorderDefault,
-    color: theme.colors.actionDefaultTextDefault,
-    lineHeight: theme.typography.lineHeightBase,
-    '&:hover': {
-      backgroundColor: theme.colors.actionDefaultBackgroundHover,
-      borderColor: theme.colors.actionDefaultBorderHover,
-      color: theme.colors.actionDefaultTextHover
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionDefaultBackgroundPress,
-      borderColor: theme.colors.actionDefaultBorderPress,
-      color: theme.colors.actionDefaultTextPress
-    }
-  };
-}
-function getPrimaryStyles(theme) {
-  return {
-    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
-    borderColor: 'transparent',
-    color: theme.colors.actionPrimaryTextDefault,
-    textShadow: 'none',
-    '&:hover': {
-      backgroundColor: theme.colors.actionPrimaryBackgroundHover,
-      borderColor: 'transparent',
-      color: theme.colors.actionPrimaryTextHover
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionPrimaryBackgroundPress,
-      borderColor: 'transparent',
-      color: theme.colors.actionPrimaryTextPress
-    }
-  };
-}
-function getLinkStyles(theme) {
-  return {
-    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-    borderColor: theme.colors.actionTertiaryBackgroundDefault,
-    color: theme.colors.actionTertiaryTextDefault,
-    '&:hover': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
-      borderColor: 'transparent',
-      color: theme.colors.actionTertiaryTextHover
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundPress,
-      borderColor: 'transparent',
-      color: theme.colors.actionTertiaryTextPress
-    },
-    '&[disabled]:hover': {
-      background: 'none'
-    }
-  };
-}
-function getPrimaryDangerStyles(theme) {
-  return {
-    backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
-    borderColor: 'transparent',
-    color: theme.colors.white,
-    '&:hover': {
-      backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
-      borderColor: 'transparent',
-      color: theme.colors.white
+function getEmotionStyles(clsPrefix, theme) {
+  const classFocused = ".".concat(clsPrefix, "-focused");
+  const classActiveBar = ".".concat(clsPrefix, "-active-bar");
+  const classSeparator = ".".concat(clsPrefix, "-separator");
+  const classSuffix = ".".concat(clsPrefix, "-suffix");
+  const styles = {
+    height: 32,
+    borderRadius: theme.borders.borderRadiusMd,
+    borderColor: theme.colors.border,
+    color: theme.colors.textPrimary,
+    transition: 'border 0s, box-shadow 0s',
+    ["&".concat(classFocused, ",:hover")]: {
+      borderColor: theme.colors.actionDefaultBorderHover
     },
     '&:active': {
-      backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
-      borderColor: 'transparent',
-      color: theme.colors.white
-    },
-    '&:focus-visible': {
-      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
-    }
-  };
-}
-function getSecondaryDangerStyles(theme) {
-  return {
-    backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
-    borderColor: theme.colors.actionDangerDefaultBorderDefault,
-    color: theme.colors.actionDangerDefaultTextDefault,
-    '&:hover': {
-      backgroundColor: theme.colors.actionDangerDefaultBackgroundHover,
-      borderColor: theme.colors.actionDangerDefaultBorderHover,
-      color: theme.colors.actionDangerDefaultTextHover
+      borderColor: theme.colors.actionDefaultBorderPress
     },
-    '&:active': {
-      backgroundColor: theme.colors.actionDangerDefaultBackgroundPress,
-      borderColor: theme.colors.actionDangerDefaultBorderPress,
-      color: theme.colors.actionDangerDefaultTextPress
+    ["&".concat(classFocused)]: {
+      boxShadow: "none !important",
+      outline: "".concat(theme.colors.actionDefaultBorderFocus, " solid 2px !important"),
+      borderColor: 'transparent !important'
     },
-    '&:focus-visible': {
-      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
-    }
-  };
-}
-function getDisabledStyles(theme) {
-  return {
-    backgroundColor: theme.colors.actionDisabledBackground,
-    borderColor: 'transparent',
-    color: theme.colors.actionDisabledText,
-    '&:hover': {
-      backgroundColor: theme.colors.actionDisabledBackground,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
+    ["& ".concat(classActiveBar)]: {
+      background: "".concat(theme.colors.actionDefaultBorderPress, " !important")
     },
-    '&:active': {
-      backgroundColor: theme.colors.actionDisabledBackground,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
+    ["& input::placeholder, & ".concat(classSeparator, ", & ").concat(classSuffix)]: {
+      color: theme.colors.textPrimary
     }
   };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEmotionStyles;");
 }
-function getDisabledTertiaryStyles(theme) {
+const getDropdownStyles$1 = theme => {
   return {
-    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-    borderColor: 'transparent',
-    color: theme.colors.actionDisabledText,
-    '&:hover': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
-    }
+    zIndex: theme.options.zIndexBase + 50
   };
-}
-
-function getEndIconClsName(theme) {
-  return "".concat(theme.general.iconfontCssPrefix, "-btn-end-icon");
-}
-const getButtonEmotionStyles = _ref => {
-  let {
-    theme,
-    classNamePrefix,
-    loading,
-    withIcon,
-    onlyIcon,
-    isAnchor,
-    enableAnimation,
-    size,
-    type,
-    isFlex,
-    useNewIcons
-  } = _ref;
-  const clsIcon = ".".concat(theme.general.iconfontCssPrefix);
-  const clsEndIcon = ".".concat(getEndIconClsName(theme));
-  const clsLoadingIcon = ".".concat(classNamePrefix, "-btn-loading-icon");
-  const clsIconOnly = ".".concat(classNamePrefix, "-btn-icon-only");
-  const classPrimary = ".".concat(classNamePrefix, "-btn-primary");
-  const classLink = ".".concat(classNamePrefix, "-btn-link");
-  const classDangerous = ".".concat(classNamePrefix, "-btn-dangerous");
-  const SMALL_BUTTON_HEIGHT = 24;
-  const tertiaryColors = {
-    background: theme.colors.actionTertiaryBackgroundDefault,
-    color: theme.colors.actionTertiaryTextDefault,
-    '&:hover': {
-      background: theme.colors.actionTertiaryBackgroundHover,
-      color: theme.colors.actionTertiaryTextHover
-    },
-    '&:active': {
-      background: theme.colors.actionTertiaryBackgroundPress,
-      color: theme.colors.actionTertiaryTextPress
-    }
-  };
-  const iconCss = {
-    fontSize: useNewIcons ? theme.general.iconFontSizeNew : theme.general.buttonInnerHeight - 4,
-    ...(!isFlex && {
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      verticalAlign: useNewIcons ? -4 : -5,
-      ...(onlyIcon && {
-        verticalAlign: -3
-      }),
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      // Need to make sure not to apply this to regular buttons as it will offset the icons
-      ...(!onlyIcon && {
-        verticalAlign: useNewIcons ? -3 : -4
-      })
-    }),
-    lineHeight: 0,
-    ...(size === 'small' && {
-      lineHeight: theme.typography.lineHeightSm,
-      ...(onlyIcon && {
-        fontSize: 16,
-        ...(isFlex && {
-          height: 16
-        })
-      })
-    })
-  };
-  const inactiveIconCss = {
-    color: theme.colors.grey600
-  };
-  const endIconCssSelector = "span > ".concat(clsEndIcon, " > ").concat(clsIcon);
-  const styles = {
-    lineHeight: theme.typography.lineHeightBase,
-    boxShadow: 'none',
-    height: theme.general.heightSm,
-    ...(isFlex && {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      verticalAlign: 'middle'
-    }),
-    ...(!onlyIcon && {
-      '&&': {
-        padding: '4px 12px',
-        ...(size === 'small' && {
-          padding: '0 8px'
-        })
-      }
-    }),
-    ...(onlyIcon && {
-      width: theme.general.heightSm
-    }),
-    ...(size === 'small' && {
-      height: SMALL_BUTTON_HEIGHT,
-      lineHeight: theme.typography.lineHeightBase,
-      ...(onlyIcon && {
-        width: SMALL_BUTTON_HEIGHT,
-        paddingTop: 0,
-        paddingBottom: 0,
-        verticalAlign: 'middle'
-      })
-    }),
-    '&:focus-visible': {
-      outlineStyle: 'solid',
-      outlineWidth: '2px',
-      outlineOffset: '1px',
-      outlineColor: theme.themeName === 'dark' ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
-    },
-    ...getDefaultStyles(theme),
-    ["&".concat(classPrimary)]: {
-      ...getPrimaryStyles(theme)
-    },
-    ["&".concat(classLink)]: {
-      ...getLinkStyles(theme),
-      ...(type === 'link' && {
-        padding: 'unset',
-        height: 'auto',
-        border: 'none',
-        boxShadow: 'none',
-        '&[disabled],&:hover': {
-          background: 'none'
-        }
-      })
-    },
-    ["&".concat(classDangerous).concat(classPrimary)]: {
-      ...getPrimaryDangerStyles(theme)
-    },
-    ["&".concat(classDangerous)]: {
-      ...getSecondaryDangerStyles(theme)
-    },
-    ["&[disabled], &".concat(classDangerous, ":disabled")]: {
-      ...getDisabledStyles(theme),
-      ...(onlyIcon ? {
-        backgroundColor: 'transparent'
-      } : {
-        backgroundColor: theme.colors.actionDisabledBackground
-      })
-    },
-    // Loading styles
-    ...(loading && {
-      '::before': {
-        opacity: 0
-      },
-      ["".concat(clsLoadingIcon)]: {
-        ...(onlyIcon ? {
-          // In case of only icon, the icon is already centered but vertically not aligned, this fixes that
-          verticalAlign: 'middle'
-        } : {
-          // Position loading indicator in center
-          // This would break vertical centering of loading circle when onlyIcon is true
-          position: 'absolute'
-        }),
-        ...(!isFlex && {
-          // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
-          left: 'calc(50% - 7px)'
-        }),
-        // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
-        svg: {
-          animationDuration: '1s !important'
-        }
-      },
-      ["> :not(".concat(clsLoadingIcon, ")")]: {
-        // Hide all content except loading icon
-        opacity: 0,
-        visibility: 'hidden',
-        // Add horizontal space for icon
-        ...(withIcon && {
-          paddingLeft: theme.spacing.sm * 2 + 14
-        })
-      }
-    }),
-    // Icon styles
-    ["> ".concat(clsIcon, " + span, > span + ").concat(clsIcon)]: {
-      marginRight: 0
-    },
-    ["> ".concat(clsIcon)]: iconCss,
-    ["> ".concat(endIconCssSelector)]: {
-      ...iconCss,
-      marginLeft: size === 'small' ? 8 : 12
-    },
-    ...(!type && {
-      ["&:enabled:not(:hover):not(:active) > ".concat(clsIcon)]: inactiveIconCss
-    }),
-    ...(!type && {
-      ["&:enabled:not(:hover):not(:active) > ".concat(endIconCssSelector)]: inactiveIconCss
-    }),
-    // Disable animations
-    ["&[".concat(classNamePrefix, "-click-animating-without-extra-node='true']::after")]: {
-      display: 'none'
-    },
-    ["&".concat(clsIconOnly)]: {
-      border: 'none',
-      ["&:enabled:not(".concat(classLink, ")")]: {
-        ...tertiaryColors,
-        color: theme.colors.textSecondary
-      },
-      ...(isAnchor && {
-        lineHeight: "".concat(theme.general.heightSm, "px"),
-        ...getLinkStyles(theme),
-        '&:disabled': {
-          color: theme.colors.actionDisabledText
-        }
-      }),
-      '&[disabled]:hover': {
-        backgroundColor: 'transparent'
-      }
-    },
-    ["&:focus"]: {
-      ["".concat(clsLoadingIcon)]: {
-        ...(onlyIcon && {
-          // Mitigate wrong left offset for loading state with onlyIcon
-          left: 0
-        })
-      }
-    },
-    ...getAnimationCss(enableAnimation)
-  };
-
-  // Moved outside main style object because state & selector matching in the already existing object keys can create bugs and unwanted overwrites
-  const typeStyles = {
-    ...(type === 'tertiary' && {
-      ["&:enabled:not(".concat(clsIconOnly, ")")]: tertiaryColors,
-      ["&".concat(classLink, "[disabled]")]: {
-        ...getDisabledTertiaryStyles(theme)
-      }
-    })
-  };
-  const importantStyles = importantify(styles);
-  const importantTypeStyles = importantify(typeStyles);
-  return /*#__PURE__*/css(importantStyles, importantTypeStyles, process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;");
-};
-const Button = /* #__PURE__ */(() => {
-  const Button = /*#__PURE__*/forwardRef(function Button( // Keep size out of props passed to AntD to make deprecation and eventual removal have 0 impact
-  _ref2, ref) {
-    let {
-      dangerouslySetAntdProps,
-      children,
-      size,
-      type,
-      endIcon,
-      ...props
-    } = _ref2;
-    const {
-      theme,
-      classNamePrefix
-    } = useDesignSystemTheme();
-    const {
-      USE_FLEX_BUTTON: isFlex,
-      USE_NEW_ICONS: useNewIcons
-    } = useDesignSystemFlags();
-    const clsEndIcon = getEndIconClsName(theme);
-    return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Button$1, {
-        ...props,
-        css: getButtonEmotionStyles({
-          theme,
-          classNamePrefix,
-          loading: Boolean(props.loading),
-          withIcon: Boolean(props.icon),
-          onlyIcon: Boolean((props.icon || endIcon) && !children),
-          isAnchor: Boolean(props.href && !type),
-          danger: Boolean(props.danger),
-          enableAnimation: theme.options.enableAnimation,
-          size: size || 'middle',
-          type,
-          isFlex,
-          useNewIcons
-        }),
-        href: props.disabled ? undefined : props.href,
-        ...dangerouslySetAntdProps,
-        ref: ref,
-        type: type === 'tertiary' ? 'link' : type,
-        children: children && jsxs("span", {
-          style: {
-            visibility: props !== null && props !== void 0 && props.loading ? 'hidden' : 'visible',
-            ...(isFlex && {
-              display: 'inline-flex',
-              alignItems: 'center'
-            })
-          },
-          children: [children, endIcon && jsx("span", {
-            className: clsEndIcon,
-            style: {
-              ...(isFlex && {
-                display: 'inline-flex',
-                alignItems: 'center'
-              })
-            },
-            children: endIcon
-          })]
-        })
-      })
-    });
-  });
-
-  // This is needed for other Ant components that wrap Button, such as Tooltip, to correctly
-  // identify it as an Ant button.
-  // This should be removed if the component is rewritten to no longer be a wrapper around Ant.
-  // See: https://github.com/ant-design/ant-design/blob/6dd39c1f89b4d6632e6ed022ff1bc275ca1e0f1f/components/button/button.tsx#L291
-  Button.__ANT_BUTTON = true;
-  return Button;
-})();
-
-function getEmotionStyles(clsPrefix, theme) {
-  const classFocused = ".".concat(clsPrefix, "-focused");
-  const classActiveBar = ".".concat(clsPrefix, "-active-bar");
-  const classSeparator = ".".concat(clsPrefix, "-separator");
-  const classSuffix = ".".concat(clsPrefix, "-suffix");
-  const styles = {
-    height: 32,
-    borderRadius: theme.borders.borderRadiusMd,
-    borderColor: theme.colors.border,
-    color: theme.colors.textPrimary,
-    transition: 'border 0s, box-shadow 0s',
-    ["&".concat(classFocused, ",:hover")]: {
-      borderColor: theme.colors.actionDefaultBorderHover
-    },
-    '&:active': {
-      borderColor: theme.colors.actionDefaultBorderPress
-    },
-    ["&".concat(classFocused)]: {
-      boxShadow: "none !important",
-      outline: "".concat(theme.colors.actionDefaultBorderFocus, " solid 2px !important"),
-      borderColor: 'transparent !important'
-    },
-    ["& ".concat(classActiveBar)]: {
-      background: "".concat(theme.colors.actionDefaultBorderPress, " !important")
-    },
-    ["& input::placeholder, & ".concat(classSeparator, ", & ").concat(classSuffix)]: {
-      color: theme.colors.textPrimary
-    }
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEmotionStyles;");
-}
-const getDropdownStyles$1 = theme => {
-  return {
-    zIndex: theme.options.zIndexBase + 50
-  };
-};
-function useDatePickerStyles() {
-  const {
+};
+function useDatePickerStyles() {
+  const {
     theme,
     getPrefixedClassName
   } = useDesignSystemTheme();
   const clsPrefix = getPrefixedClassName('picker');
   return getEmotionStyles(clsPrefix, theme);
 }
-const DuboisDatePicker = props => {
+const DuboisDatePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8478,6 +7992,7 @@ const DuboisDatePicker = props => {
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(DatePicker, {
       css: styles,
+      ref: ref,
       ...props,
       popupStyle: {
         ...getDropdownStyles$1(theme),
@@ -8485,8 +8000,8 @@ const DuboisDatePicker = props => {
       }
     })
   });
-};
-const RangePicker = props => {
+});
+const RangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8495,14 +8010,15 @@ const RangePicker = props => {
     children: jsx(DatePicker.RangePicker, {
       css: styles,
       ...props,
+      ref: ref,
       popupStyle: {
         ...getDropdownStyles$1(theme),
         ...(props.popupStyle || {})
       }
     })
   });
-};
-const TimePicker = props => {
+});
+const TimePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8511,14 +8027,15 @@ const TimePicker = props => {
     children: jsx(DatePicker.TimePicker, {
       css: styles,
       ...props,
+      ref: ref,
       popupStyle: {
         ...getDropdownStyles$1(theme),
         ...(props.popupStyle || {})
       }
     })
   });
-};
-const QuarterPicker = props => {
+});
+const QuarterPicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8527,14 +8044,15 @@ const QuarterPicker = props => {
     children: jsx(DatePicker.QuarterPicker, {
       css: styles,
       ...props,
+      ref: ref,
       popupStyle: {
         ...getDropdownStyles$1(theme),
         ...(props.popupStyle || {})
       }
     })
   });
-};
-const WeekPicker = props => {
+});
+const WeekPicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8543,14 +8061,15 @@ const WeekPicker = props => {
     children: jsx(DatePicker.WeekPicker, {
       css: styles,
       ...props,
+      ref: ref,
       popupStyle: {
         ...getDropdownStyles$1(theme),
         ...(props.popupStyle || {})
       }
     })
   });
-};
-const MonthPicker = props => {
+});
+const MonthPicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8559,14 +8078,15 @@ const MonthPicker = props => {
     children: jsx(DatePicker.MonthPicker, {
       css: styles,
       ...props,
+      ref: ref,
       popupStyle: {
         ...getDropdownStyles$1(theme),
         ...(props.popupStyle || {})
       }
     })
   });
-};
-const YearPicker = props => {
+});
+const YearPicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8575,13 +8095,14 @@ const YearPicker = props => {
     children: jsx(DatePicker.YearPicker, {
       css: styles,
       ...props,
+      ref: ref,
       popupStyle: {
         ...getDropdownStyles$1(theme),
         ...(props.popupStyle || {})
       }
     })
   });
-};
+});
 
 /**
  * `LegacyDatePicker` was added as a temporary solution pending an
@@ -8643,20 +8164,20 @@ const Spacer = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$6() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const DEFAULT_WIDTH$1 = 320;
 const MIN_WIDTH = 320;
 const MAX_WIDTH = '90vw';
 const DEFAULT_POSITION = 'right';
 const ZINDEX_OVERLAY = 10;
 const ZINDEX_CONTENT = ZINDEX_OVERLAY + 10;
-var _ref2$2 = process.env.NODE_ENV === "production" ? {
+var _ref2$1 = process.env.NODE_ENV === "production" ? {
   name: "zh83op",
   styles: "flex-grow:1;margin-bottom:0;margin-top:0;white-space:nowrap;overflow:hidden"
 } : {
   name: "h5yqvj-Content",
   styles: "flex-grow:1;margin-bottom:0;margin-top:0;white-space:nowrap;overflow:hidden;label:Content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
 };
 const Content$4 = _ref => {
   let {
@@ -8665,7 +8186,9 @@ const Content$4 = _ref => {
     title,
     width,
     position: positionOverride,
-    useCustomScrollBehavior
+    useCustomScrollBehavior,
+    expandContentToFullHeight,
+    disableOpenAutoFocus
   } = _ref;
   const {
     getPopupContainer
@@ -8735,6 +8258,11 @@ const Content$4 = _ref => {
         justifyContent: 'flex-start'
       },
       ref: contentContainerRef,
+      onOpenAutoFocus: event => {
+        if (disableOpenAutoFocus) {
+          event.preventDefault();
+        }
+      },
       children: jsxs(ApplyDesignSystemContextOverrides, {
         getPopupContainer: () => {
           var _contentContainerRef$;
@@ -8755,7 +8283,7 @@ const Content$4 = _ref => {
           children: [jsx(DialogPrimitive.Title, {
             title: typeof title === 'string' ? title : undefined,
             asChild: typeof title === 'string',
-            css: _ref2$2,
+            css: _ref2$1,
             children: typeof title === 'string' ? jsx(Typography.Title, {
               level: 2,
               withoutMargins: true,
@@ -8781,6 +8309,7 @@ const Content$4 = _ref => {
             paddingRight: useCustomScrollBehavior ? 0 : horizontalContentPadding,
             paddingLeft: horizontalContentPadding,
             overflowY: useCustomScrollBehavior ? 'hidden' : 'auto',
+            height: expandContentToFullHeight ? '100%' : undefined,
             ...(theme.themeName === 'default' && !useCustomScrollBehavior ? {
               // Achieves an inner shadow on the content, but only when there is more left to scroll. When the content fits
               // in the container without scrolling, no shadow will be shown.
@@ -8853,51 +8382,6 @@ const Dropdown = _ref => {
   });
 };
 
-const Tooltip = _ref => {
-  let {
-    children,
-    title,
-    placement = 'top',
-    dataTestId,
-    dangerouslySetAntdProps,
-    ...props
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  if (!title) {
-    return jsx(React__default.Fragment, {
-      children: children
-    });
-  }
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Tooltip$1
-    // eslint-disable-next-line react/forbid-dom-props -- FEINF-1337 - this should turn into data-testid
-    , {
-      title: jsx("span", {
-        "data-test-id": dataTestId,
-        children: title
-      }),
-      placement: placement
-      // Always trigger on hover and focus
-      ,
-      trigger: ['hover', 'focus'],
-      overlayInnerStyle: {
-        backgroundColor: '#2F3941',
-        lineHeight: '22px',
-        padding: '4px 8px'
-      },
-      overlayStyle: {
-        zIndex: theme.options.zIndexBase + 70
-      },
-      css: getAnimationCss(theme.options.enableAnimation),
-      ...dangerouslySetAntdProps,
-      ...props,
-      children: children
-    })
-  });
-};
-
 const Root$2 = DropdownMenu$1.Root; // Behavioral component only
 
 const Content$3 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
@@ -9130,7 +8614,7 @@ const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
 });
 
 // UNWRAPPED RADIX-UI-COMPONENTS
-const Group$2 = DropdownMenu$1.Group;
+const Group$1 = DropdownMenu$1.Group;
 const RadioGroup = DropdownMenu$1.RadioGroup;
 const Sub = DropdownMenu$1.Sub;
 
@@ -9259,7 +8743,7 @@ const dropdownContentStyles = theme => ({
   border: "1px solid ".concat(theme.colors.borderDecorative),
   borderRadius: theme.borders.borderRadiusMd,
   padding: "".concat(theme.spacing.xs, "px 0"),
-  boxShadow: theme.themeName !== 'dark' ? "0px 4px 16px 0px rgba(205, 218, 229, 1)" : undefined,
+  boxShadow: theme.general.shadowLow,
   userSelect: 'none',
   // Ant Design uses 1000s for their zIndex space; this ensures Radix works with that, but
   // we'll likely need to be sure that all Radix components are using the same zIndex going forward.
@@ -9333,7 +8817,7 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   ItemIndicator: ItemIndicator,
   Arrow: Arrow$1,
   RadioItem: RadioItem,
-  Group: Group$2,
+  Group: Group$1,
   RadioGroup: RadioGroup,
   Sub: Sub,
   HintColumn: HintColumn,
@@ -9342,7 +8826,7 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   dropdownContentStyles: dropdownContentStyles
 });
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const {
   Title: Title$1,
   Paragraph
@@ -9383,13 +8867,13 @@ function getEmptyDescriptionStyles(theme, clsPrefix) {
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEmptyDescriptionStyles;");
 }
-var _ref$3 = process.env.NODE_ENV === "production" ? {
+var _ref$2 = process.env.NODE_ENV === "production" ? {
   name: "zl1inp",
   styles: "display:flex;justify-content:center"
 } : {
   name: "11tid6c-Empty",
   styles: "display:flex;justify-content:center;label:Empty;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
 };
 const Empty = props => {
   const {
@@ -9406,7 +8890,7 @@ const Empty = props => {
   } = props;
   return jsx("div", {
     ...dataProps,
-    css: _ref$3,
+    css: _ref$2,
     children: jsxs("div", {
       css: [getEmptyStyles(theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Empty;"],
       children: [image, title && jsx(Title$1, {
@@ -9526,7 +9010,9 @@ const getMessageStyles = (clsPrefix, theme) => {
     '&&': {
       lineHeight: theme.typography.lineHeightSm,
       fontSize: theme.typography.fontSizeSm,
-      marginTop: theme.spacing.sm
+      marginTop: theme.spacing.sm,
+      display: 'flex',
+      alignItems: 'center'
     },
     ["&".concat(errorClass)]: {
       color: theme.colors.actionDangerPrimaryBackgroundDefault
@@ -9563,7 +9049,7 @@ function FormMessage(_ref) {
   return jsxs("div", {
     className: wrapperClass,
     css: [getMessageStyles(classNamePrefix, theme), css, process.env.NODE_ENV === "production" ? "" : ";label:FormMessage;"],
-    children: [jsx(StateIcon, {}), " ", message]
+    children: [jsx(StateIcon, {}), "\xA0", message]
   });
 }
 
@@ -9633,258 +9119,41 @@ const Label = props => {
   });
 };
 
-const getInputEmotionStyles = (clsPrefix, theme, _ref, useNewIcons, useTransparent) => {
+const getRadioInputStyles = _ref => {
   let {
-    validationState
+    clsPrefix,
+    theme,
+    useNewStyles
   } = _ref;
-  const inputClass = ".".concat(clsPrefix, "-input");
-  const affixClass = ".".concat(clsPrefix, "-input-affix-wrapper");
-  const affixClassFocused = ".".concat(clsPrefix, "-input-affix-wrapper-focused");
-  const clearIcon = ".".concat(clsPrefix, "-input-clear-icon");
-  const prefixIcon = ".".concat(clsPrefix, "-input-prefix");
-  const suffixIcon = ".".concat(clsPrefix, "-input-suffix");
-  const validationColor = getValidationStateColor(theme, validationState);
-  const styles = {
-    '&&': {
-      lineHeight: theme.typography.lineHeightBase,
-      minHeight: theme.general.heightSm,
-      ...(validationState && {
-        borderColor: validationColor
-      }),
-      '&:hover': {
-        borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
+  return {
+    [".".concat(clsPrefix)]: {
+      alignSelf: 'start',
+      // Unchecked Styles
+      ["> .".concat(clsPrefix, "-input + .").concat(clsPrefix, "-inner")]: {
+        width: theme.spacing.md,
+        height: theme.spacing.md,
+        background: useNewStyles ? theme.colors.actionDefaultBackgroundDefault : theme.colors.radioDefaultBackground,
+        borderStyle: 'solid',
+        borderColor: useNewStyles ? theme.colors.actionDefaultBorderDefault : theme.colors.radioDefaultBorder,
+        boxShadow: 'unset',
+        transform: 'unset',
+        // This prevents an awkward jitter on the border
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '50%',
+        '&:after': {
+          all: 'unset'
+        }
       },
-      '&:focus': {
-        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
+      // Hover
+      ["&:not(.".concat(clsPrefix, "-disabled) > .").concat(clsPrefix, "-input:hover + .").concat(clsPrefix, "-inner")]: {
+        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundHover : theme.colors.radioInteractiveHover,
+        background: useNewStyles ? theme.colors.actionDefaultBackgroundHover : theme.colors.radioInteractiveHoverSecondary
       },
-      '&:disabled': {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        color: theme.colors.actionDisabledText
-      }
-    },
-    ["&".concat(inputClass, ", ").concat(inputClass)]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      })
-    },
-    ["&".concat(affixClass)]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      }),
-      lineHeight: theme.typography.lineHeightBase,
-      paddingTop: 5,
-      paddingBottom: 5,
-      minHeight: theme.general.heightSm,
-      '::before': {
-        lineHeight: theme.typography.lineHeightBase
-      },
-      '&:hover': {
-        borderColor: theme.colors.actionPrimaryBackgroundHover
-      },
-      ["input.".concat(clsPrefix, "-input")]: {
-        borderRadius: 0
-      }
-    },
-    ["&".concat(affixClassFocused)]: {
-      boxShadow: 'none',
-      '&&, &:focus': {
-        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
-      }
-    },
-    ...(useNewIcons && {
-      [clearIcon]: {
-        fontSize: theme.general.iconFontSizeNew
-      },
-      [prefixIcon]: {
-        marginRight: theme.spacing.sm
-      },
-      [suffixIcon]: {
-        marginLeft: theme.spacing.sm
-      }
-    }),
-    ...getAnimationCss(theme.options.enableAnimation)
-  };
-  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
-};
-const getInputGroupStyling = clsPrefix => {
-  const inputClass = ".".concat(clsPrefix, "-input");
-  const buttonClass = ".".concat(clsPrefix, "-btn");
-  return /*#__PURE__*/css({
-    ["& > ".concat(inputClass)]: {
-      '&:disabled': {
-        border: 'none'
-      }
-    },
-    ["& > ".concat(buttonClass, " > span")]: {
-      verticalAlign: 'middle'
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
-};
-const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref2, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    ...props
-  } = _ref2;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  const {
-    USE_NEW_ICONS: useNewIcons,
-    USE_TRANSPARENT_INPUT: useTransparent
-  } = useDesignSystemFlags();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1.TextArea, {
-      ref: ref,
-      autoComplete: autoComplete,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useNewIcons, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
-      ...props,
-      ...dangerouslySetAntdProps
-    })
-  });
-});
-const Password = /*#__PURE__*/forwardRef(function Password(_ref3, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    ...props
-  } = _ref3;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  const {
-    USE_NEW_ICONS: useNewIcons,
-    USE_TRANSPARENT_INPUT: useTransparent
-  } = useDesignSystemFlags();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1.Password, {
-      visibilityToggle: false,
-      ref: ref,
-      autoComplete: autoComplete,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useNewIcons, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
-      ...props,
-      ...dangerouslySetAntdProps
-    })
-  });
-});
-const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    ...props
-  } = _ref4;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  const {
-    USE_NEW_ICONS: useNewIcons,
-    USE_TRANSPARENT_INPUT: useTransparent
-  } = useDesignSystemFlags();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1, {
-      autoComplete: autoComplete,
-      ref: ref,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useNewIcons, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:DuboisInput;"],
-      ...props,
-      ...dangerouslySetAntdProps
-    })
-  });
-});
-const Group$1 = _ref5 => {
-  let {
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    compact = true,
-    ...props
-  } = _ref5;
-  const {
-    classNamePrefix
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1.Group, {
-      css: [getInputGroupStyling(classNamePrefix), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
-      compact: compact,
-      ...props,
-      ...dangerouslySetAntdProps
-    })
-  });
-};
-
-// Properly creates the namespace and dot-notation components with correct types.
-const InputNamespace = /* #__PURE__ */Object.assign(DuboisInput, {
-  TextArea,
-  Password,
-  Group: Group$1
-});
-const Input = InputNamespace;
-
-// TODO: I'm doing this to support storybook's docgen;
-// We should remove this once we have a better storybook integration,
-// since these will be exposed in the library's exports.
-const __INTERNAL_DO_NOT_USE__TextArea = TextArea;
-const __INTERNAL_DO_NOT_USE__Password = Password;
-const __INTERNAL_DO_NOT_USE_DEDUPE__Group = Group$1;
-
-const getRadioInputStyles = _ref => {
-  let {
-    clsPrefix,
-    theme,
-    useNewStyles
-  } = _ref;
-  return {
-    [".".concat(clsPrefix)]: {
-      alignSelf: 'start',
-      // Unchecked Styles
-      ["> .".concat(clsPrefix, "-input + .").concat(clsPrefix, "-inner")]: {
-        width: theme.spacing.md,
-        height: theme.spacing.md,
-        background: useNewStyles ? theme.colors.actionDefaultBackgroundDefault : theme.colors.radioDefaultBackground,
-        borderStyle: 'solid',
-        borderColor: useNewStyles ? theme.colors.actionDefaultBorderDefault : theme.colors.radioDefaultBorder,
-        boxShadow: 'unset',
-        transform: 'unset',
-        // This prevents an awkward jitter on the border
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: '50%',
-        '&:after': {
-          all: 'unset'
-        }
-      },
-      // Hover
-      ["&:not(.".concat(clsPrefix, "-disabled) > .").concat(clsPrefix, "-input:hover + .").concat(clsPrefix, "-inner")]: {
-        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundHover : theme.colors.radioInteractiveHover,
-        background: useNewStyles ? theme.colors.actionDefaultBackgroundHover : theme.colors.radioInteractiveHoverSecondary
-      },
-      // Focus
-      ["&:not(.".concat(clsPrefix, "-disabled)> .").concat(clsPrefix, "-input:focus + .").concat(clsPrefix, "-inner")]: {
-        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundDefault : theme.colors.primary
+      // Focus
+      ["&:not(.".concat(clsPrefix, "-disabled)> .").concat(clsPrefix, "-input:focus + .").concat(clsPrefix, "-inner")]: {
+        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundDefault : theme.colors.primary
       },
       // Active
       ["&:not(.".concat(clsPrefix, "-disabled)> .").concat(clsPrefix, "-input:active + .").concat(clsPrefix, "-inner")]: {
@@ -10048,6 +9317,7 @@ const getRadioStyles = _ref5 => {
 };
 const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref6, ref) {
   let {
+    children,
     dangerouslySetAntdProps,
     ...props
   } = _ref6;
@@ -10068,12 +9338,16 @@ const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref6, ref) {
       }),
       ...props,
       ...dangerouslySetAntdProps,
-      ref: ref
+      ref: ref,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
     })
   });
 });
 const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(_ref7, ref) {
   let {
+    children,
     dangerouslySetAntdProps,
     ...props
   } = _ref7;
@@ -10096,7 +9370,10 @@ const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(_ref7
         useNewStyles: USE_NEW_RADIO_STYLES
       }),
       ...dangerouslySetAntdProps,
-      ref: ref
+      ref: ref,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
     })
   });
 });
@@ -10449,7 +9726,8 @@ function getDropdownStyles(clsPrefix, theme) {
       borderColor: theme.colors.borderDecorative,
       borderWidth: 1,
       borderStyle: 'solid',
-      zIndex: theme.options.zIndexBase + 50
+      zIndex: theme.options.zIndexBase + 50,
+      boxShadow: theme.general.shadowLow
     }),
     [classItem]: {
       height: theme.general.heightSm,
@@ -10639,145 +9917,12 @@ const Select = /* #__PURE__ */(() => {
   return DuboisRefForwardedSelect;
 })();
 
-const getSwitchWithLabelStyles = _ref => {
+function RHFControlledInput(_ref) {
   let {
-    clsPrefix,
-    theme
-  } = _ref;
-  // Default value
-  const SWITCH_WIDTH = 28;
-  const styles = {
-    display: 'flex',
-    alignItems: 'center',
-    // Switch is Off
-    ["&.".concat(clsPrefix, "-switch")]: {
-      backgroundColor: theme.colors.backgroundPrimary,
-      border: "1px solid ".concat(theme.colors.actionDefaultBorderDefault),
-      [".".concat(clsPrefix, "-switch-handle:before")]: {
-        boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionDefaultBorderDefault),
-        transition: 'none'
-      },
-      ["&:hover:not(.".concat(clsPrefix, "-switch-disabled)")]: {
-        backgroundColor: theme.colors.actionDefaultBackgroundHover,
-        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundHover),
-        [".".concat(clsPrefix, "-switch-handle:before")]: {
-          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundHover)
-        }
-      },
-      ["&:active:not(.".concat(clsPrefix, "-switch-disabled)")]: {
-        backgroundColor: theme.colors.actionDefaultBackgroundPress,
-        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundPress),
-        [".".concat(clsPrefix, "-switch-handle:before")]: {
-          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundHover)
-        }
-      },
-      ["&:focus-visible"]: {
-        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault),
-        boxShadow: 'none',
-        outlineStyle: 'solid',
-        outlineWidth: '1px',
-        outlineOffset: '1px',
-        outlineColor: theme.colors.actionDefaultBorderFocus,
-        [".".concat(clsPrefix, "-switch-handle:before")]: {
-          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundDefault)
-        }
-      },
-      ["&:focus"]: {
-        boxShadow: 'none'
-      }
-    },
-    // Switch is On
-    ["&.".concat(clsPrefix, "-switch-checked")]: {
-      backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
-      border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault),
-      ["&:hover:not(.".concat(clsPrefix, "-switch-disabled)")]: {
-        backgroundColor: theme.colors.actionPrimaryBackgroundHover,
-        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault)
-      },
-      ["&:active:not(.".concat(clsPrefix, "-switch-disabled)")]: {
-        backgroundColor: theme.colors.actionPrimaryBackgroundPress
-      },
-      [".".concat(clsPrefix, "-switch-handle:before")]: {
-        boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundDefault)
-      },
-      ["&.".concat(clsPrefix, "-switch-disabled")]: {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        border: "1px solid ".concat(theme.colors.actionDisabledBackground),
-        [".".concat(clsPrefix, "-switch-handle:before")]: {
-          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionDisabledBackground)
-        }
-      }
-    },
-    [".".concat(clsPrefix, "-switch-handle:before")]: {
-      backgroundColor: theme.colors.backgroundPrimary
-    },
-    ["&& + .".concat(clsPrefix, "-hint, && + .").concat(clsPrefix, "-form-message")]: {
-      paddingLeft: theme.spacing.sm + SWITCH_WIDTH
-    },
-    ["&& + .".concat(clsPrefix, "-form-message")]: {
-      marginTop: 0
-    },
-    [".".concat(clsPrefix, "-click-animating-node")]: {
-      animation: 'none'
-    }
-  };
-  const importantStyles = importantify(styles);
-  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSwitchWithLabelStyles;");
-};
-const Switch = _ref2 => {
-  let {
-    dangerouslySetAntdProps,
-    label,
-    labelProps,
-    ...props
-  } = _ref2;
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
-  return label ? jsx(DesignSystemAntDConfigProvider, {
-    children: jsxs("div", {
-      css: getSwitchWithLabelStyles({
-        clsPrefix: classNamePrefix,
-        theme
-      }),
-      children: [jsx(Switch$1, {
-        ...props,
-        ...dangerouslySetAntdProps,
-        css: /*#__PURE__*/css({
-          ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;"),
-          ...getSwitchWithLabelStyles({
-            clsPrefix: classNamePrefix,
-            theme
-          })
-        }, process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
-      }), jsx(Label, {
-        inline: true,
-        ...labelProps,
-        children: label
-      })]
-    })
-  }) : jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Switch$1, {
-      ...props,
-      ...dangerouslySetAntdProps,
-      css: /*#__PURE__*/css({
-        ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;"),
-        ...getSwitchWithLabelStyles({
-          clsPrefix: classNamePrefix,
-          theme
-        })
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
-    })
-  });
-};
-
-function RHFControlledInput(_ref) {
-  let {
-    name,
-    control,
-    rules,
-    ...restProps
+    name,
+    control,
+    rules,
+    ...restProps
   } = _ref;
   const {
     field
@@ -10876,7 +10021,7 @@ function RHFControlledCheckboxGroup(_ref5) {
     value: field.value
   });
 }
-function RHFControlledRadioGroup(_ref6) {
+function RHFControlledCheckbox(_ref6) {
   let {
     name,
     control,
@@ -10890,12 +10035,21 @@ function RHFControlledRadioGroup(_ref6) {
     control: control,
     rules: rules
   });
-  return jsx(Radio.Group, {
-    ...restProps,
-    ...field
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx("div", {
+    css: /*#__PURE__*/css({
+      marginTop: theme.spacing.sm
+    }, process.env.NODE_ENV === "production" ? "" : ";label:RHFControlledCheckbox;"),
+    children: jsx(Checkbox, {
+      ...restProps,
+      ...field,
+      checked: field.value
+    })
   });
 }
-function RHFControlledSwitch(_ref7) {
+function RHFControlledRadioGroup(_ref7) {
   let {
     name,
     control,
@@ -10903,19 +10057,15 @@ function RHFControlledSwitch(_ref7) {
     ...restProps
   } = _ref7;
   const {
-    field: {
-      value,
-      ...restField
-    }
+    field
   } = useController({
     name: name,
     control: control,
     rules: rules
   });
-  return jsx(Switch, {
+  return jsx(Radio.Group, {
     ...restProps,
-    ...restField,
-    checked: value
+    ...field
   });
 }
 const RHFControlledComponents = {
@@ -10923,9 +10073,9 @@ const RHFControlledComponents = {
   Password: RHFControlledPasswordInput,
   TextArea: RHFControlledTextArea,
   Select: RHFControlledSelect,
+  Checkbox: RHFControlledCheckbox,
   CheckboxGroup: RHFControlledCheckboxGroup,
-  RadioGroup: RHFControlledRadioGroup,
-  Switch: RHFControlledSwitch
+  RadioGroup: RHFControlledRadioGroup
 };
 
 const FormUI = {
@@ -10974,7 +10124,7 @@ const Space = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const getHeaderStyles = (clsPrefix, theme) => {
   const breadcrumbClass = ".".concat(clsPrefix, "-breadcrumb");
   const styles = {
@@ -10984,21 +10134,21 @@ const getHeaderStyles = (clsPrefix, theme) => {
   };
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getHeaderStyles;");
 };
-var _ref$2 = process.env.NODE_ENV === "production" ? {
+var _ref$1 = process.env.NODE_ENV === "production" ? {
   name: "5s4ezj",
   styles: "display:inline-flex;vertical-align:middle;align-items:center;margin-left:8px"
 } : {
   name: "gxikdi-titleAddOnsWrapper",
   styles: "display:inline-flex;vertical-align:middle;align-items:center;margin-left:8px;label:titleAddOnsWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
-var _ref2$1 = process.env.NODE_ENV === "production" ? {
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "1q4vxyr",
   styles: "margin-left:8px"
 } : {
   name: "ozrfom-buttonContainer",
   styles: "margin-left:8px;label:buttonContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
 var _ref3$1 = process.env.NODE_ENV === "production" ? {
   name: "s079uh",
@@ -11006,15 +10156,15 @@ var _ref3$1 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1ky5whb-titleIfOtherElementsPresent",
   styles: "margin-top:2px;label:titleIfOtherElementsPresent;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
-var _ref4 = process.env.NODE_ENV === "production" ? {
+var _ref4$1 = process.env.NODE_ENV === "production" ? {
   name: "18hxk3h",
   styles: "margin-top:0;margin-bottom:0 !important"
 } : {
   name: "abhq57-title",
   styles: "margin-top:0;margin-bottom:0 !important;label:title;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
 var _ref5 = process.env.NODE_ENV === "production" ? {
   name: "1cl2a0e",
@@ -11022,7 +10172,7 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "m9gz0x-titleWrapper",
   styles: "display:flex;align-items:flex-start;justify-content:space-between;label:titleWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
 const Header$1 = props => {
   const {
@@ -11037,11 +10187,11 @@ const Header$1 = props => {
       marginBottom: 2,
       lineHeight: theme.typography.lineHeightBase
     }, process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbWrapper;"),
-    title: _ref4,
+    title: _ref4$1,
     // TODO: Look into a more emotion-idomatic way of doing this.
     titleIfOtherElementsPresent: _ref3$1,
-    buttonContainer: _ref2$1,
-    titleAddOnsWrapper: _ref$2
+    buttonContainer: _ref2,
+    titleAddOnsWrapper: _ref$1
   };
   return jsxs("div", {
     css: [getHeaderStyles(clsPrefix, theme), props.dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Header;"],
@@ -11151,6 +10301,225 @@ const Layout = /* #__PURE__ */(() => {
   return Layout;
 })();
 
+function getPaginationEmotionStyles(clsPrefix, theme) {
+  const classRoot = ".".concat(clsPrefix, "-pagination");
+  const classItem = ".".concat(clsPrefix, "-pagination-item");
+  const classLink = ".".concat(clsPrefix, "-pagination-item-link");
+  const classActive = ".".concat(clsPrefix, "-pagination-item-active");
+  const classEllipsis = ".".concat(clsPrefix, "-pagination-item-ellipsis");
+  const classNext = ".".concat(clsPrefix, "-pagination-next");
+  const classPrev = ".".concat(clsPrefix, "-pagination-prev");
+  const classJumpNext = ".".concat(clsPrefix, "-pagination-jump-next");
+  const classJumpPrev = ".".concat(clsPrefix, "-pagination-jump-prev");
+  const classSizeChanger = ".".concat(clsPrefix, "-pagination-options-size-changer");
+  const classOptions = ".".concat(clsPrefix, "-pagination-options");
+  const styles = {
+    'span[role=img]': {
+      color: theme.colors.textSecondary,
+      '> *': {
+        color: 'inherit'
+      }
+    },
+    [classItem]: {
+      backgroundColor: 'none',
+      border: 'none',
+      color: theme.colors.textSecondary,
+      '&:focus-visible': {
+        outline: 'auto'
+      },
+      '> a': {
+        color: theme.colors.textSecondary,
+        '&:hover': {
+          color: theme.colors.actionDefaultTextHover
+        },
+        '&:active': {
+          color: theme.colors.actionDefaultTextPress
+        }
+      },
+      '&:hover': {
+        backgroundColor: theme.colors.actionDefaultBackgroundHover
+      },
+      '&:active': {
+        backgroundColor: theme.colors.actionDefaultBackgroundPress
+      }
+    },
+    [classActive]: {
+      backgroundColor: theme.colors.actionDefaultBackgroundPress,
+      color: theme.colors.actionDefaultTextPress,
+      border: 'none',
+      '> a': {
+        color: theme.colors.actionDefaultTextPress
+      },
+      '&:focus-visible': {
+        outline: 'auto'
+      },
+      '&:hover': {
+        backgroundColor: theme.colors.actionDefaultBackgroundPress,
+        color: theme.colors.actionDefaultTextPress
+      }
+    },
+    [classLink]: {
+      border: 'none',
+      color: theme.colors.textSecondary,
+      '&[disabled]': {
+        display: 'none'
+      },
+      '&:hover': {
+        backgroundColor: theme.colors.actionDefaultBackgroundHover
+      },
+      '&:active': {
+        backgroundColor: theme.colors.actionDefaultBackgroundPress
+      },
+      '&:focus-visible': {
+        outline: 'auto'
+      }
+    },
+    [classEllipsis]: {
+      color: 'inherit'
+    },
+    ["".concat(classNext, ", ").concat(classPrev, ", ").concat(classJumpNext, ", ").concat(classJumpPrev)]: {
+      color: theme.colors.textSecondary,
+      '&:hover': {
+        backgroundColor: theme.colors.actionDefaultBackgroundHover
+      },
+      '&:active': {
+        backgroundColor: theme.colors.actionDefaultBackgroundPress
+      },
+      '&:focus-visible': {
+        outline: 'auto'
+      }
+    },
+    ["&".concat(classRoot, ".mini, ").concat(classRoot, ".mini")]: {
+      ["".concat(classItem, ", ").concat(classNext, ", ").concat(classPrev, ", ").concat(classJumpNext, ", ").concat(classJumpPrev)]: {
+        height: '32px',
+        width: '32px',
+        lineHeight: '32px'
+      },
+      [classSizeChanger]: {
+        marginLeft: 4
+      },
+      ["input,  ".concat(classOptions)]: {
+        height: '32px'
+      }
+    }
+  };
+  const importantStyles = importantify(styles);
+  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getPaginationEmotionStyles;");
+}
+const Pagination = function Pagination(_ref) {
+  let {
+    currentPageIndex,
+    pageSize = 10,
+    numTotal,
+    onChange,
+    dangerouslySetAntdProps
+  } = _ref;
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Pagination$1, {
+      css: getPaginationEmotionStyles(classNamePrefix, theme),
+      current: currentPageIndex,
+      pageSize: pageSize,
+      responsive: false,
+      total: numTotal,
+      onChange: onChange,
+      showSizeChanger: false,
+      showQuickJumper: true,
+      size: 'small',
+      ...dangerouslySetAntdProps
+    })
+  });
+};
+
+const getTableEmotionStyles = (classNamePrefix, theme, scrollableInFlexibleContainer) => {
+  const styles = [/*#__PURE__*/css({
+    [".".concat(classNamePrefix, "-table-pagination")]: {
+      ...getPaginationEmotionStyles(classNamePrefix, theme)
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:styles;")];
+  if (scrollableInFlexibleContainer) {
+    styles.push(getScrollableInFlexibleContainerStyles(classNamePrefix));
+  }
+  return styles;
+};
+const getScrollableInFlexibleContainerStyles = clsPrefix => {
+  const styles = {
+    minHeight: 0,
+    [".".concat(clsPrefix, "-spin-nested-loading")]: {
+      height: '100%'
+    },
+    [".".concat(clsPrefix, "-spin-container")]: {
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    [".".concat(clsPrefix, "-table-container")]: {
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    [".".concat(clsPrefix, "-table")]: {
+      minHeight: 0
+    },
+    [".".concat(clsPrefix, "-table-header")]: {
+      flexShrink: 0
+    },
+    [".".concat(clsPrefix, "-table-body")]: {
+      minHeight: 0
+    }
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getScrollableInFlexibleContainerStyles;");
+};
+const DEFAULT_LOADING_SPIN_PROPS = {
+  indicator: jsx(Spinner, {})
+};
+
+/**
+ * `LegacyTable` is deprecated in favor of the new `Table` component
+ * For more information please join #dubois-table-early-adopters in Slack.
+ * @deprecated
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+const LegacyTable = props => {
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
+  const {
+    loading,
+    scrollableInFlexibleContainer,
+    children,
+    ...tableProps
+  } = props;
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Table$1
+    // NOTE(FEINF-1273): The default loading indicator from AntD does not animate
+    // and the design system spinner is recommended over the AntD one. Therefore,
+    // if `loading` is `true`, render the design system <Spinner/> component.
+    , {
+      loading: loading === true ? DEFAULT_LOADING_SPIN_PROPS : loading,
+      scroll: scrollableInFlexibleContainer ? {
+        y: 'auto'
+      } : undefined,
+      ...tableProps,
+      css: getTableEmotionStyles(classNamePrefix, theme, Boolean(scrollableInFlexibleContainer)),
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
+    })
+  });
+};
+
+/**
+ * `LegacyTable` is deprecated in favor of the new `Table` component
+ * For more information please join #dubois-table-early-adopters in Slack.
+ * @deprecated
+ */
+const Table = LegacyTable;
+
 /**
  * @deprecated Use `DropdownMenu` instead.
  */
@@ -11196,7 +10565,7 @@ const Menu = /* #__PURE__ */(() => {
   return Menu;
 })();
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const SIZE_PRESETS = {
   normal: 640,
   wide: 880
@@ -11297,7 +10666,8 @@ const getModalEmotionStyles = args => {
       overflow: 'hidden',
       paddingBottom: MODAL_PADDING,
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      boxShadow: theme.general.shadowHigh
     },
     [classNameBody]: {
       overflowY: 'auto',
@@ -11319,7 +10689,46 @@ const getModalEmotionStyles = args => {
     ...getAnimationCss(theme.options.enableAnimation)
   }, process.env.NODE_ENV === "production" ? "" : ";label:getModalEmotionStyles;");
 };
-function Modal(_ref) {
+
+/**
+ * Render default footer with our buttons. Copied from AntD.
+ */
+function DefaultFooter(_ref) {
+  let {
+    onOk,
+    onCancel,
+    confirmLoading,
+    okText,
+    cancelText,
+    okButtonProps,
+    cancelButtonProps,
+    autoFocusButton
+  } = _ref;
+  const handleCancel = e => {
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+  };
+  const handleOk = e => {
+    onOk === null || onOk === void 0 ? void 0 : onOk(e);
+  };
+  return jsxs(Fragment, {
+    children: [cancelText && jsx(Button, {
+      onClick: handleCancel,
+      autoFocus: autoFocusButton === 'cancel',
+      dangerouslyUseFocusPseudoClass: true,
+      ...cancelButtonProps,
+      children: cancelText
+    }), okText && jsx(Button, {
+      loading: confirmLoading,
+      onClick: handleOk,
+      type: "primary",
+      autoFocus: autoFocusButton === 'ok',
+      dangerouslyUseFocusPseudoClass: true,
+      ...okButtonProps,
+      children: okText
+    })]
+  });
+}
+function Modal(_ref2) {
   let {
     okButtonProps,
     cancelButtonProps,
@@ -11329,44 +10738,13 @@ function Modal(_ref) {
     footer,
     size = 'normal',
     verticalSizing = 'dynamic',
+    autoFocusButton,
     ...props
-  } = _ref;
+  } = _ref2;
   const {
     theme,
     classNamePrefix
   } = useDesignSystemTheme();
-  const handleCancel = e => {
-    var _props$onCancel;
-    (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 ? void 0 : _props$onCancel.call(props, e);
-  };
-  const handleOk = e => {
-    var _props$onOk;
-    (_props$onOk = props.onOk) === null || _props$onOk === void 0 ? void 0 : _props$onOk.call(props, e);
-  };
-
-  /**
-   * Render default footer with our buttons. Copied from AntD.
-   */
-  const renderDefaultFooter = () => {
-    const {
-      okText,
-      cancelText,
-      confirmLoading
-    } = props;
-    return jsxs(Fragment, {
-      children: [cancelText && jsx(Button, {
-        onClick: handleCancel,
-        ...cancelButtonProps,
-        children: cancelText
-      }), okText && jsx(Button, {
-        loading: confirmLoading,
-        onClick: handleOk,
-        type: "primary",
-        ...okButtonProps,
-        children: okText
-      })]
-    });
-  };
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Modal$1, {
       css: getModalEmotionStyles({
@@ -11379,7 +10757,16 @@ function Modal(_ref) {
         children: title
       }),
       footer: jsx(RestoreAntDDefaultClsPrefix, {
-        children: footer === undefined ? renderDefaultFooter() : footer
+        children: footer === undefined ? jsx(DefaultFooter, {
+          onOk: props.onOk,
+          onCancel: props.onCancel,
+          confirmLoading: props.confirmLoading,
+          okText: props.okText,
+          cancelText: props.cancelText,
+          okButtonProps: okButtonProps,
+          cancelButtonProps: cancelButtonProps,
+          autoFocusButton: autoFocusButton
+        }) : footer
       }),
       width: size ? SIZE_PRESETS[size] : undefined,
       closeIcon: jsx(CloseIcon, {}),
@@ -11393,21 +10780,21 @@ function Modal(_ref) {
     })
   });
 }
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "b9hrb",
   styles: "position:relative;display:inline-flex;align-items:center"
 } : {
   name: "1jkwrsj-titleComp",
   styles: "position:relative;display:inline-flex;align-items:center;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1o6wc9k",
   styles: "padding-left:6px"
 } : {
   name: "i303lp-titleComp",
   styles: "padding-left:6px;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 function DangerModal(props) {
   const {
@@ -11429,7 +10816,7 @@ function DangerModal(props) {
   const iconSize = useNewIcons ? 18 : 20;
   const iconFontSize = useNewIcons ? 18 : 22;
   const titleComp = jsxs("div", {
-    css: _ref2,
+    css: _ref3,
     children: [jsx(DangerIcon, {
       css: /*#__PURE__*/css({
         color: theme.colors.textValidationDanger,
@@ -11439,7 +10826,7 @@ function DangerModal(props) {
         fontSize: iconFontSize
       }, process.env.NODE_ENV === "production" ? "" : ";label:titleComp;")
     }), jsx("div", {
-      css: _ref3,
+      css: _ref4,
       children: title
     })]
   });
@@ -11480,7 +10867,8 @@ function useNotification() {
       ...defaultProps,
       ...args,
       style: {
-        zIndex: theme.options.zIndexBase + 30
+        zIndex: theme.options.zIndexBase + 30,
+        boxShadow: theme.general.shadowLow
       }
     };
     const iconClassName = "".concat(clsPrefix, "-notice-icon-").concat(mergedArgs.type);
@@ -11523,6 +10911,8 @@ function useNotification() {
       success
     };
   }, [open]);
+
+  // eslint-disable-next-line react/jsx-key -- TODO(FEINF-1756)
   return [wrappedNotificationAPI, jsx(DesignSystemAntDConfigProvider, {
     children: contextHolder
   })];
@@ -11591,7 +10981,7 @@ const getToastRootStyle = (theme, classNamePrefix) => {
       background: theme.colors.backgroundPrimary,
       padding: 12,
       columnGap: 4,
-      boxShadow: '0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%)',
+      boxShadow: theme.general.shadowLow,
       borderRadius: theme.general.borderRadiusBase,
       lineHeight: '20px',
       gridTemplateRows: '[header] auto [content] auto',
@@ -11731,7 +11121,7 @@ const getCloseStyles = theme => {
     top: 6
   }, process.env.NODE_ENV === "production" ? "" : ";label:getCloseStyles;");
 };
-const Close = /*#__PURE__*/forwardRef(function (props, ref) {
+const Close$1 = /*#__PURE__*/forwardRef(function (props, ref) {
   const {
     theme
   } = useDesignSystemTheme();
@@ -11782,162 +11172,27 @@ var NotificationV2 = /*#__PURE__*/Object.freeze({
   Root: Root$1,
   Title: Title,
   Description: Description,
-  Close: Close,
+  Close: Close$1,
   Provider: Provider,
   Viewport: Viewport
 });
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref$1 = process.env.NODE_ENV === "production" ? {
-  name: "1dw6hj0",
-  styles: "padding-left:16px;padding-right:16px"
-} : {
-  name: "xioo5t-PageWrapper",
-  styles: "padding-left:16px;padding-right:16px;label:PageWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
-};
-const PageWrapper = _ref2 => {
+const PageWrapper = _ref => {
   let {
     children,
     ...props
-  } = _ref2;
-  return jsx("div", {
-    css: _ref$1,
-    ...props,
-    children: children
-  });
-};
-
-function getPaginationEmotionStyles(clsPrefix, theme) {
-  const classRoot = ".".concat(clsPrefix, "-pagination");
-  const classItem = ".".concat(clsPrefix, "-pagination-item");
-  const classLink = ".".concat(clsPrefix, "-pagination-item-link");
-  const classActive = ".".concat(clsPrefix, "-pagination-item-active");
-  const classEllipsis = ".".concat(clsPrefix, "-pagination-item-ellipsis");
-  const classNext = ".".concat(clsPrefix, "-pagination-next");
-  const classPrev = ".".concat(clsPrefix, "-pagination-prev");
-  const classJumpNext = ".".concat(clsPrefix, "-pagination-jump-next");
-  const classJumpPrev = ".".concat(clsPrefix, "-pagination-jump-prev");
-  const classSizeChanger = ".".concat(clsPrefix, "-pagination-options-size-changer");
-  const classOptions = ".".concat(clsPrefix, "-pagination-options");
-  const styles = {
-    'span[role=img]': {
-      color: theme.colors.textSecondary,
-      '> *': {
-        color: 'inherit'
-      }
-    },
-    [classItem]: {
-      backgroundColor: 'none',
-      border: 'none',
-      color: theme.colors.textSecondary,
-      '&:focus-visible': {
-        outline: 'auto'
-      },
-      '> a': {
-        color: theme.colors.textSecondary,
-        '&:hover': {
-          color: theme.colors.actionDefaultTextHover
-        },
-        '&:active': {
-          color: theme.colors.actionDefaultTextPress
-        }
-      },
-      '&:hover': {
-        backgroundColor: theme.colors.actionDefaultBackgroundHover
-      },
-      '&:active': {
-        backgroundColor: theme.colors.actionDefaultBackgroundPress
-      }
-    },
-    [classActive]: {
-      backgroundColor: theme.colors.actionDefaultBackgroundPress,
-      color: theme.colors.actionDefaultTextPress,
-      border: 'none',
-      '> a': {
-        color: theme.colors.actionDefaultTextPress
-      },
-      '&:focus-visible': {
-        outline: 'auto'
-      },
-      '&:hover': {
-        backgroundColor: theme.colors.actionDefaultBackgroundPress,
-        color: theme.colors.actionDefaultTextPress
-      }
-    },
-    [classLink]: {
-      border: 'none',
-      color: theme.colors.textSecondary,
-      '&[disabled]': {
-        display: 'none'
-      },
-      '&:hover': {
-        backgroundColor: theme.colors.actionDefaultBackgroundHover
-      },
-      '&:active': {
-        backgroundColor: theme.colors.actionDefaultBackgroundPress
-      },
-      '&:focus-visible': {
-        outline: 'auto'
-      }
-    },
-    [classEllipsis]: {
-      color: 'inherit'
-    },
-    ["".concat(classNext, ", ").concat(classPrev, ", ").concat(classJumpNext, ", ").concat(classJumpPrev)]: {
-      color: theme.colors.textSecondary,
-      '&:hover': {
-        backgroundColor: theme.colors.actionDefaultBackgroundHover
-      },
-      '&:active': {
-        backgroundColor: theme.colors.actionDefaultBackgroundPress
-      },
-      '&:focus-visible': {
-        outline: 'auto'
-      }
-    },
-    ["&".concat(classRoot, ".mini, ").concat(classRoot, ".mini")]: {
-      ["".concat(classItem, ", ").concat(classNext, ", ").concat(classPrev, ", ").concat(classJumpNext, ", ").concat(classJumpPrev)]: {
-        height: '32px',
-        width: '32px',
-        lineHeight: '32px'
-      },
-      [classSizeChanger]: {
-        marginLeft: 4
-      },
-      ["input,  ".concat(classOptions)]: {
-        height: '32px'
-      }
-    }
-  };
-  const importantStyles = importantify(styles);
-  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getPaginationEmotionStyles;");
-}
-const Pagination = function Pagination(_ref) {
-  let {
-    currentPageIndex,
-    pageSize = 10,
-    numTotal,
-    onChange,
-    dangerouslySetAntdProps
-  } = _ref;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Pagination$1, {
-      css: getPaginationEmotionStyles(classNamePrefix, theme),
-      current: currentPageIndex,
-      pageSize: pageSize,
-      responsive: false,
-      total: numTotal,
-      onChange: onChange,
-      showSizeChanger: false,
-      showQuickJumper: true,
-      size: 'small',
-      ...dangerouslySetAntdProps
-    })
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx("div", {
+    css: /*#__PURE__*/css({
+      paddingLeft: 16,
+      paddingRight: 16,
+      backgroundColor: theme.isDarkMode ? theme.colors.backgroundPrimary : 'transparent'
+    }, process.env.NODE_ENV === "production" ? "" : ";label:PageWrapper;"),
+    ...props,
+    children: children
   });
 };
 
@@ -11996,11 +11251,22 @@ const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref2, ref) {
     children: children
   });
 });
-const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref3, ref) {
+const Close = /*#__PURE__*/forwardRef(function Close(_ref3, ref) {
   let {
     children,
     ...props
   } = _ref3;
+  return jsx(Popover$1.Close, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref4, ref) {
+  let {
+    children,
+    ...props
+  } = _ref4;
   const {
     theme
   } = useDesignSystemTheme();
@@ -12051,7 +11317,7 @@ const popoverContentStyles = theme => ({
   border: "1px solid ".concat(theme.colors.borderDecorative),
   borderRadius: theme.borders.borderRadiusMd,
   padding: "".concat(theme.spacing.sm, "px"),
-  boxShadow: theme.themeName !== 'dark' ? "0px 4px 16px 0px rgba(205, 218, 229, 1)" : undefined,
+  boxShadow: theme.general.shadowLow,
   userSelect: 'none',
   zIndex: theme.options.zIndexBase + 30,
   a: importantify({
@@ -12077,6 +11343,7 @@ var PopoverV2 = /*#__PURE__*/Object.freeze({
   Root: Root,
   Content: Content$1,
   Trigger: Trigger,
+  Close: Close,
   Arrow: Arrow
 });
 
@@ -12381,7 +11648,8 @@ function Panel(_ref4) {
   let {
     panelId,
     children,
-    dangerouslyAppendEmotionCSS
+    dangerouslyAppendEmotionCSS,
+    ...delegated
   } = _ref4;
   const {
     openPanelId,
@@ -12394,6 +11662,7 @@ function Panel(_ref4) {
       display: 'none'
     }, process.env.NODE_ENV === "production" ? "" : ";label:Panel;"],
     "aria-hidden": !isPanelOpen,
+    ...delegated,
     children: children
   });
 }
@@ -12417,7 +11686,7 @@ function PanelHeader(_ref5) {
   return jsxs("div", {
     css: [{
       display: 'flex',
-      paddingLeft: 16,
+      paddingLeft: 8,
       paddingRight: 4,
       alignItems: 'center',
       height: theme.general.heightBase,
@@ -12470,7 +11739,7 @@ function PanelBody(_ref9) {
     dangerouslyAppendEmotionCSS
   } = _ref9;
   return jsx("div", {
-    css: ["height:100%;overflow-x:hidden;overflow-y:auto;padding:0 16px;", dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:PanelBody;"],
+    css: ["height:100%;overflow-x:hidden;overflow-y:auto;padding:0 8px;", dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:PanelBody;"],
     children: children
   });
 }
@@ -12535,56 +11804,6 @@ const Skeleton = /* #__PURE__ */(() => {
   return Skeleton;
 })();
 
-const rotate = keyframes({
-  '0%': {
-    transform: 'rotate(0deg) translate3d(0, 0, 0)'
-  },
-  '100%': {
-    transform: 'rotate(360deg) translate3d(0, 0, 0)'
-  }
-});
-const cssSpinner = function (theme) {
-  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
-  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  const styles = {
-    animation: "".concat(rotate, " 1s steps(").concat(frameRate, ", end) infinite"),
-    color: theme.colors.textSecondary,
-    animationDelay: "".concat(delay, "s")
-  };
-  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
-};
-const Spinner = _ref => {
-  let {
-    frameRate,
-    size = 'default',
-    delay,
-    className: propClass,
-    ...props
-  } = _ref;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-
-  // We use Antd classes to keep styling unchanged
-  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
-  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
-  const sizeClass = sizeSuffix ? "".concat(classNamePrefix, "-spin").concat(sizeSuffix) : '';
-  const wrapperClass = "".concat(propClass || '', " ").concat(classNamePrefix, "-spin ").concat(sizeClass, " ").concat(classNamePrefix, "-spin-spinning ").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME).trim();
-  const className = "".concat(classNamePrefix, "-spin-dot ").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME).trim();
-  return (
-    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
-    jsx("div", {
-      ...props,
-      className: wrapperClass,
-      children: jsx(LoadingIcon, {
-        css: cssSpinner(theme, frameRate, delay),
-        className: className
-      })
-    })
-  );
-};
-
 const defaultGetPrefixCls = (suffixCls, customizePrefixCls) => {
   if (customizePrefixCls) return customizePrefixCls;
   return suffixCls ? "ant-".concat(suffixCls) : 'ant';
@@ -12629,6 +11848,7 @@ const DropdownButton = props => {
     menuButtonLabel = 'Open dropdown',
     menu,
     leftButtonIcon,
+    dropdownMenuRootProps,
     ...restProps
   } = props;
   const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
@@ -12681,7 +11901,7 @@ const DropdownButton = props => {
       overlay: overlay,
       children: rightButtonToRender
     }) : jsxs(Root$2, {
-      ...props.dropdownMenuRootProps,
+      ...dropdownMenuRootProps,
       children: [jsx(Trigger$1, {
         disabled: disabled,
         asChild: true,
@@ -12836,76 +12056,135 @@ const SplitButton = props => {
   });
 };
 
-const getTableEmotionStyles = (classNamePrefix, theme, scrollableInFlexibleContainer) => {
-  const styles = [/*#__PURE__*/css({
-    [".".concat(classNamePrefix, "-table-pagination")]: {
-      ...getPaginationEmotionStyles(classNamePrefix, theme)
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:styles;")];
-  if (scrollableInFlexibleContainer) {
-    styles.push(getScrollableInFlexibleContainerStyles(classNamePrefix));
-  }
-  return styles;
-};
-const getScrollableInFlexibleContainerStyles = clsPrefix => {
+const getSwitchWithLabelStyles = _ref => {
+  let {
+    clsPrefix,
+    theme
+  } = _ref;
+  // Default value
+  const SWITCH_WIDTH = 28;
   const styles = {
-    minHeight: 0,
-    [".".concat(clsPrefix, "-spin-nested-loading")]: {
-      height: '100%'
+    display: 'flex',
+    alignItems: 'center',
+    // Switch is Off
+    ["&.".concat(clsPrefix, "-switch")]: {
+      backgroundColor: theme.colors.backgroundPrimary,
+      border: "1px solid ".concat(theme.colors.actionDefaultBorderDefault),
+      [".".concat(clsPrefix, "-switch-handle:before")]: {
+        boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionDefaultBorderDefault),
+        transition: 'none'
+      },
+      ["&:hover:not(.".concat(clsPrefix, "-switch-disabled)")]: {
+        backgroundColor: theme.colors.actionDefaultBackgroundHover,
+        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundHover),
+        [".".concat(clsPrefix, "-switch-handle:before")]: {
+          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundHover)
+        }
+      },
+      ["&:active:not(.".concat(clsPrefix, "-switch-disabled)")]: {
+        backgroundColor: theme.colors.actionDefaultBackgroundPress,
+        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundPress),
+        [".".concat(clsPrefix, "-switch-handle:before")]: {
+          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundHover)
+        }
+      },
+      ["&:focus-visible"]: {
+        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault),
+        boxShadow: 'none',
+        outlineStyle: 'solid',
+        outlineWidth: '1px',
+        outlineOffset: '1px',
+        outlineColor: theme.colors.actionDefaultBorderFocus,
+        [".".concat(clsPrefix, "-switch-handle:before")]: {
+          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundDefault)
+        }
+      },
+      ["&:focus"]: {
+        boxShadow: 'none'
+      }
     },
-    [".".concat(clsPrefix, "-spin-container")]: {
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column'
+    // Switch is On
+    ["&.".concat(clsPrefix, "-switch-checked")]: {
+      backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+      border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault),
+      ["&:hover:not(.".concat(clsPrefix, "-switch-disabled)")]: {
+        backgroundColor: theme.colors.actionPrimaryBackgroundHover,
+        border: "1px solid ".concat(theme.colors.actionPrimaryBackgroundDefault)
+      },
+      ["&:active:not(.".concat(clsPrefix, "-switch-disabled)")]: {
+        backgroundColor: theme.colors.actionPrimaryBackgroundPress
+      },
+      [".".concat(clsPrefix, "-switch-handle:before")]: {
+        boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionPrimaryBackgroundDefault)
+      },
+      ["&.".concat(clsPrefix, "-switch-disabled")]: {
+        backgroundColor: theme.colors.actionDisabledBackground,
+        border: "1px solid ".concat(theme.colors.actionDisabledBackground),
+        [".".concat(clsPrefix, "-switch-handle:before")]: {
+          boxShadow: "0px 0px 0px 1px ".concat(theme.colors.actionDisabledBackground)
+        }
+      }
     },
-    [".".concat(clsPrefix, "-table-container")]: {
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column'
+    [".".concat(clsPrefix, "-switch-handle:before")]: {
+      backgroundColor: theme.colors.backgroundPrimary
     },
-    [".".concat(clsPrefix, "-table")]: {
-      minHeight: 0
+    ["&& + .".concat(clsPrefix, "-hint, && + .").concat(clsPrefix, "-form-message")]: {
+      paddingLeft: theme.spacing.sm + SWITCH_WIDTH
     },
-    [".".concat(clsPrefix, "-table-header")]: {
-      flexShrink: 0
+    ["&& + .".concat(clsPrefix, "-form-message")]: {
+      marginTop: 0
     },
-    [".".concat(clsPrefix, "-table-body")]: {
-      minHeight: 0
+    [".".concat(clsPrefix, "-click-animating-node")]: {
+      animation: 'none'
     }
   };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getScrollableInFlexibleContainerStyles;");
-};
-const DEFAULT_LOADING_SPIN_PROPS = {
-  indicator: jsx(Spinner, {})
+  const importantStyles = importantify(styles);
+  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSwitchWithLabelStyles;");
 };
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-const Table = props => {
+const Switch = _ref2 => {
+  let {
+    dangerouslySetAntdProps,
+    label,
+    labelProps,
+    ...props
+  } = _ref2;
   const {
-    classNamePrefix,
-    theme
+    theme,
+    classNamePrefix
   } = useDesignSystemTheme();
-  const {
-    loading,
-    scrollableInFlexibleContainer,
-    children,
-    ...tableProps
-  } = props;
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Table$1
-    // NOTE(FEINF-1273): The default loading indicator from AntD does not animate
-    // and the design system spinner is recommended over the AntD one. Therefore,
-    // if `loading` is `true`, render the design system <Spinner/> component.
-    , {
-      loading: loading === true ? DEFAULT_LOADING_SPIN_PROPS : loading,
-      scroll: scrollableInFlexibleContainer ? {
-        y: 'auto'
-      } : undefined,
-      ...tableProps,
-      css: getTableEmotionStyles(classNamePrefix, theme, Boolean(scrollableInFlexibleContainer)),
-      children: jsx(RestoreAntDDefaultClsPrefix, {
-        children: children
-      })
+  return label ? jsx(DesignSystemAntDConfigProvider, {
+    children: jsxs("div", {
+      css: getSwitchWithLabelStyles({
+        clsPrefix: classNamePrefix,
+        theme
+      }),
+      children: [jsx(Switch$1, {
+        ...props,
+        ...dangerouslySetAntdProps,
+        css: /*#__PURE__*/css({
+          ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;"),
+          ...getSwitchWithLabelStyles({
+            clsPrefix: classNamePrefix,
+            theme
+          })
+        }, process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
+      }), jsx(Label, {
+        inline: true,
+        ...labelProps,
+        children: label
+      })]
+    })
+  }) : jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Switch$1, {
+      ...props,
+      ...dangerouslySetAntdProps,
+      css: /*#__PURE__*/css({
+        ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;"),
+        ...getSwitchWithLabelStyles({
+          clsPrefix: classNamePrefix,
+          theme
+        })
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
     })
   });
 };
@@ -13259,6 +12538,70 @@ function Tag(props) {
   });
 }
 
+const getStyles = theme => {
+  return /*#__PURE__*/css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: "1px solid ".concat(theme.colors.actionDefaultBorderDefault),
+    borderRadius: theme.general.borderRadiusBase,
+    backgroundColor: 'transparent',
+    color: theme.colors.actionDefaultTextDefault,
+    height: theme.general.heightSm,
+    padding: '0 12px',
+    fontSize: theme.typography.fontSizeBase,
+    lineHeight: "".concat(theme.typography.lineHeightBase, "px"),
+    '&[data-state="on"]': {
+      backgroundColor: theme.colors.actionDefaultBackgroundPress,
+      color: theme.colors.actionDefaultTextPress,
+      borderColor: theme.colors.actionDefaultBorderPress
+    },
+    '&:hover': {
+      cursor: 'pointer',
+      color: theme.colors.actionDefaultTextHover,
+      backgroundColor: theme.colors.actionDefaultBackgroundHover,
+      borderColor: theme.colors.actionDefaultBorderHover
+    },
+    '&:disabled': {
+      cursor: 'default',
+      border: 'transparent',
+      color: theme.colors.actionDisabledText,
+      backgroundColor: theme.colors.actionDisabledBackground
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStyles;");
+};
+const ToggleButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    pressed,
+    defaultPressed,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const [isPressed, setIsPressed] = React__default.useState(defaultPressed);
+  useEffect(() => {
+    setIsPressed(pressed);
+  }, [pressed]);
+  return jsxs(Toggle.Root, {
+    css: getStyles(theme),
+    ...props,
+    pressed: isPressed,
+    onPressedChange: pressed => {
+      var _props$onPressedChang;
+      (_props$onPressedChang = props.onPressedChange) === null || _props$onPressedChang === void 0 ? void 0 : _props$onPressedChang.call(props, pressed);
+      setIsPressed(pressed);
+    },
+    ref: ref,
+    children: [isPressed && jsx(CheckIcon, {
+      css: /*#__PURE__*/css({
+        marginRight: theme.spacing.xs
+      }, process.env.NODE_ENV === "production" ? "" : ";label:ToggleButton;")
+    }), children]
+  });
+});
+
 /**
  * These styles share some aspects with the styles in the main `Checkbox.tsx` component.
  * However, due to significant differences in the internal implementation and DOM structure of the Tree Checkbox and the
@@ -13542,5 +12885,5 @@ const Tree = /*#__PURE__*/forwardRef(function Tree(_ref, ref) {
   });
 });
 
-export { Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkFillIcon, BookmarkIcon, BracketsCurlyIcon, BracketsSquareIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, CheckLineIcon, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudOffIcon, CloudUploadIcon, CodeIcon, Col, ColorFillIcon, ConnectIcon, Content, CopyIcon, DIcon, DangerFillIcon, DangerIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DownloadIcon, DragIcon, Drawer, Dropdown, DropdownMenu, DuboisDatePicker, Empty, ExpandLessIcon, ExpandMoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, FolderFillIcon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, GearFillIcon, GearIcon, GiftIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoFillIcon, InfoIcon, Input, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LightningIcon, LinkIcon, LinkOffIcon, ListBorderIcon, ListIcon, LoadingIcon, LockFillIcon, LockIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleFillIcon, MinusCircleIcon, Modal, ModelsIcon, Nav, NavButton, NoIcon, NotebookIcon, NotificationIcon, NotificationOffIcon, NotificationV2, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinCancelIcon, PinFillIcon, PinIcon, PlayCircleFillIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusCircleFillIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, Popover, PopoverV2, QueryEditorIcon, QueryIcon, QuestionMarkFillIcon, QuestionMarkIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, RedoIcon, Refresh, RefreshIcon, ReposIcon, Row, SaveIcon, SchoolIcon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarFillIcon, StarIcon, StopCircleFillIcon, StopCircleIcon, StopIcon, StorefrontIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, UnderlineIcon, UndoIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VariableIcon, VisibleIcon, VisibleOffIcon, WarningFillIcon, WarningIcon, WorkspacesIcon, XCircleFillIcon, XCircleIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE_DEDUPE__Group, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getButtonEmotionStyles, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, useNotification, useThemedStyles, withNotifications };
+export { Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkFillIcon, BookmarkIcon, BracketsCurlyIcon, BracketsSquareIcon, BracketsXIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleFillIcon, CheckCircleIcon, CheckLineIcon, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudModelIcon, CloudOffIcon, CloudUploadIcon, CodeIcon, Col, ColorFillIcon, ConnectIcon, Content, CopyIcon, CursorIcon, DIcon, DagIcon, DangerFillIcon, DangerIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DecimalIcon, DotsCircleIcon, DownloadIcon, DragIcon, Drawer, Dropdown, DropdownMenu, DuboisDatePicker, Empty, ExpandLessIcon, ExpandMoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, FolderFillIcon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, GearFillIcon, GearIcon, GiftIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoFillIcon, InfoIcon, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LegacyTable, LettersIcon, LightningIcon, LinkIcon, LinkOffIcon, ListBorderIcon, ListIcon, LockFillIcon, LockIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleFillIcon, MinusCircleIcon, Modal, ModelsIcon, Nav, NavButton, NoIcon, NotebookIcon, NotificationIcon, NotificationOffIcon, NotificationV2, NumbersIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinCancelIcon, PinFillIcon, PinIcon, PlayCircleFillIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusCircleFillIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, Popover, PopoverV2, QueryEditorIcon, QueryIcon, QuestionMarkFillIcon, QuestionMarkIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, RedoIcon, RefreshIcon, ReposIcon, Row, SaveIcon, SchoolIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, SplitButton, StarFillIcon, StarIcon, StopCircleFillIcon, StopCircleIcon, StopIcon, StorefrontIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, ToggleButton, TrashIcon, Tree, TreeIcon, UnderlineIcon, UndoIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VariableIcon, VisibleIcon, VisibleOffIcon, WarningFillIcon, WarningIcon, WorkspacesIcon, XCircleIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__VerticalGroup, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, useNotification, useThemedStyles, withNotifications };
 //# sourceMappingURL=index.js.map