@databricks/design-system 1.9.2 → 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-74e19785.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-74e19785.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",
@@ -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",
@@ -8202,455 +7940,22 @@ 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
+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.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
-    },
-    '&: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
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionDangerDefaultBackgroundPress,
-      borderColor: theme.colors.actionDangerDefaultBorderPress,
-      color: theme.colors.actionDangerDefaultTextPress
-    },
-    '&: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
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionDisabledBackground,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
-    }
-  };
-}
-function getDisabledTertiaryStyles(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
-    }
-  };
-}
-
-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
+      borderColor: theme.colors.actionDefaultBorderPress
     },
     ["&".concat(classFocused)]: {
       boxShadow: "none !important",
@@ -8679,7 +7984,7 @@ function useDatePickerStyles() {
   const clsPrefix = getPrefixedClassName('picker');
   return getEmotionStyles(clsPrefix, theme);
 }
-const DuboisDatePicker = props => {
+const DuboisDatePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8687,6 +7992,7 @@ const DuboisDatePicker = props => {
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(DatePicker, {
       css: styles,
+      ref: ref,
       ...props,
       popupStyle: {
         ...getDropdownStyles$1(theme),
@@ -8694,8 +8000,8 @@ const DuboisDatePicker = props => {
       }
     })
   });
-};
-const RangePicker = props => {
+});
+const RangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
@@ -8704,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
@@ -8720,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
@@ -8736,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
@@ -8752,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
@@ -8768,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
@@ -8784,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
@@ -8852,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 {
@@ -8875,7 +8187,8 @@ const Content$4 = _ref => {
     width,
     position: positionOverride,
     useCustomScrollBehavior,
-    expandContentToFullHeight
+    expandContentToFullHeight,
+    disableOpenAutoFocus
   } = _ref;
   const {
     getPopupContainer
@@ -8945,6 +8258,11 @@ const Content$4 = _ref => {
         justifyContent: 'flex-start'
       },
       ref: contentContainerRef,
+      onOpenAutoFocus: event => {
+        if (disableOpenAutoFocus) {
+          event.preventDefault();
+        }
+      },
       children: jsxs(ApplyDesignSystemContextOverrides, {
         getPopupContainer: () => {
           var _contentContainerRef$;
@@ -8965,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,
@@ -9064,61 +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
-    });
-  }
-  const {
-    overlayInnerStyle,
-    overlayStyle,
-    ...delegatedDangerouslySetAntdProps
-  } = dangerouslySetAntdProps || {};
-  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',
-        boxShadow: theme.general.shadowLow,
-        ...overlayInnerStyle
-      },
-      overlayStyle: {
-        zIndex: theme.options.zIndexBase + 70,
-        ...overlayStyle
-      },
-      css: /*#__PURE__*/css({
-        ...getAnimationCss(theme.options.enableAnimation)
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
-      ...delegatedDangerouslySetAntdProps,
-      ...props,
-      children: children
-    })
-  });
-};
-
 const Root$2 = DropdownMenu$1.Root; // Behavioral component only
 
 const Content$3 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
@@ -9351,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;
 
@@ -9554,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,
@@ -9563,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
@@ -9604,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 {
@@ -9627,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, {
@@ -9856,228 +9119,11 @@ const Label = props => {
   });
 };
 
-const getInputEmotionStyles = (clsPrefix, theme, _ref, useNewIcons, useTransparent) => {
+const getRadioInputStyles = _ref => {
   let {
-    validationState
-  } = _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
-      },
-      '&:focus': {
-        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
-      },
-      '&: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
+    clsPrefix,
+    theme,
+    useNewStyles
   } = _ref;
   return {
     [".".concat(clsPrefix)]: {
@@ -10271,6 +9317,7 @@ const getRadioStyles = _ref5 => {
 };
 const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref6, ref) {
   let {
+    children,
     dangerouslySetAntdProps,
     ...props
   } = _ref6;
@@ -10291,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;
@@ -10319,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
+      })
     })
   });
 });
@@ -10863,166 +9917,33 @@ const Select = /* #__PURE__ */(() => {
   return DuboisRefForwardedSelect;
 })();
 
-const getSwitchWithLabelStyles = _ref => {
+function RHFControlledInput(_ref) {
   let {
-    clsPrefix,
-    theme
+    name,
+    control,
+    rules,
+    ...restProps
   } = _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 => {
+  const {
+    field
+  } = useController({
+    name: name,
+    control: control,
+    rules: rules
+  });
+  return jsx(Input, {
+    ...restProps,
+    ...field,
+    value: field.value,
+    defaultValue: restProps.defaultValue
+  });
+}
+function RHFControlledPasswordInput(_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
-  } = _ref;
-  const {
-    field
-  } = useController({
-    name: name,
-    control: control,
-    rules: rules
-  });
-  return jsx(Input, {
-    ...restProps,
-    ...field,
-    value: field.value,
-    defaultValue: restProps.defaultValue
-  });
-}
-function RHFControlledPasswordInput(_ref2) {
-  let {
-    name,
-    control,
-    rules,
-    ...restProps
+    name,
+    control,
+    rules,
+    ...restProps
   } = _ref2;
   const {
     field
@@ -11100,7 +10021,7 @@ function RHFControlledCheckboxGroup(_ref5) {
     value: field.value
   });
 }
-function RHFControlledRadioGroup(_ref6) {
+function RHFControlledCheckbox(_ref6) {
   let {
     name,
     control,
@@ -11114,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,
@@ -11127,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 = {
@@ -11147,9 +10073,9 @@ const RHFControlledComponents = {
   Password: RHFControlledPasswordInput,
   TextArea: RHFControlledTextArea,
   Select: RHFControlledSelect,
+  Checkbox: RHFControlledCheckbox,
   CheckboxGroup: RHFControlledCheckboxGroup,
-  RadioGroup: RHFControlledRadioGroup,
-  Switch: RHFControlledSwitch
+  RadioGroup: RHFControlledRadioGroup
 };
 
 const FormUI = {
@@ -11198,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 = {
@@ -11208,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",
@@ -11230,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",
@@ -11246,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 {
@@ -11261,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;"],
@@ -11375,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.
  */
@@ -11420,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
@@ -11544,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,
@@ -11554,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({
@@ -11604,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, {}),
@@ -11618,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 {
@@ -11654,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,
@@ -11664,7 +10826,7 @@ function DangerModal(props) {
         fontSize: iconFontSize
       }, process.env.NODE_ENV === "production" ? "" : ";label:titleComp;")
     }), jsx("div", {
-      css: _ref3,
+      css: _ref4,
       children: title
     })]
   });
@@ -11749,6 +10911,8 @@ function useNotification() {
       success
     };
   }, [open]);
+
+  // eslint-disable-next-line react/jsx-key -- TODO(FEINF-1756)
   return [wrappedNotificationAPI, jsx(DesignSystemAntDConfigProvider, {
     children: contextHolder
   })];
@@ -11957,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();
@@ -12008,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 => {
-  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) {
+const PageWrapper = _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
-    })
+    children,
+    ...props
+  } = _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
   });
 };
 
@@ -12222,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();
@@ -12303,6 +11343,7 @@ var PopoverV2 = /*#__PURE__*/Object.freeze({
   Root: Root,
   Content: Content$1,
   Trigger: Trigger,
+  Close: Close,
   Arrow: Arrow
 });
 
@@ -12645,7 +11686,7 @@ function PanelHeader(_ref5) {
   return jsxs("div", {
     css: [{
       display: 'flex',
-      paddingLeft: 16,
+      paddingLeft: 8,
       paddingRight: 4,
       alignItems: 'center',
       height: theme.general.heightBase,
@@ -12698,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
   });
 }
@@ -12763,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';
@@ -12857,6 +11848,7 @@ const DropdownButton = props => {
     menuButtonLabel = 'Open dropdown',
     menu,
     leftButtonIcon,
+    dropdownMenuRootProps,
     ...restProps
   } = props;
   const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
@@ -12909,7 +11901,7 @@ const DropdownButton = props => {
       overlay: overlay,
       children: rightButtonToRender
     }) : jsxs(Root$2, {
-      ...props.dropdownMenuRootProps,
+      ...dropdownMenuRootProps,
       children: [jsx(Trigger$1, {
         disabled: disabled,
         asChild: true,
@@ -13064,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;")
     })
   });
 };
@@ -13487,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
@@ -13770,5 +12885,5 @@ const Tree = /*#__PURE__*/forwardRef(function Tree(_ref, ref) {
   });
 });
 
-export { Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, BracketsSquareIcon as ArrayIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkIcon as BookmarkBorderIcon, BookmarkFillIcon, BookmarkIcon, BracketsCurlyIcon, BracketsCurlyIcon as BracketsIcon, BracketsSquareIcon, BracketsXIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleIcon as CheckCircleBorderIcon, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, CheckLineIcon, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudModelIcon, CloudOffIcon, CloudUploadIcon, TreeIcon as ClusterIcon, TreeIcon as ClustersIcon, CodeIcon, Col, ColorFillIcon, ConnectIcon, Content, CopyIcon, CursorIcon, DIcon, DagIcon, DangerFillIcon, DangerIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, StorefrontIcon as DataMarketplace, DatabaseIcon, DecimalIcon, DotsCircleIcon, DownloadIcon, DragIcon, Drawer, Dropdown, DropdownMenu, DuboisDatePicker, Empty, DangerIcon as ErrorBorderIcon, DangerFillIcon as ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, BeakerIcon as ExperimentIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, FolderIcon as Folder1Icon, FolderFillIcon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, GearIcon as Gear1Icon, GearFillIcon, GearIcon, GiftIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoIcon as InfoBorderIcon, InfoFillIcon, InfoIcon, Input, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LettersIcon, QuestionMarkIcon as LifesaverIcon, LightningIcon, LinkIcon, LinkOffIcon, LinkOffIcon as LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockIcon as LockBorderIcon, LockFillIcon, LockIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleIcon as MinusCircleBorderIcon, MinusCircleFillIcon, MinusCircleIcon, Modal, ModelsIcon, Nav, NavButton, NoIcon, NotebookIcon, NotificationIcon, NotificationOffIcon, NotificationV2, NotificationOffIcon as NotificationsOffIcon, NumbersIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinIcon as PinBorderIcon, PinCancelIcon, PinFillIcon, PinIcon, PlayCircleIcon as PlayCircleBorderIcon, PlayCircleFillIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusCircleIcon as PlusCircleBorderIcon, PlusCircleFillIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, Popover, PopoverV2, QueryEditorIcon, QueryIcon, QueryIcon as QueryListViewIcon, QueryIcon as QueryNavIcon, QuestionMarkIcon as QuestionMarkBorderIcon, QuestionMarkFillIcon, QuestionMarkIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, RedoIcon as Redo, RedoIcon, RefreshIcon as Refresh, RefreshIcon, ReposIcon, Row, SaveIcon, SchoolIcon, SearchIcon as Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarIcon as StarBorderIcon, StarFillIcon, StarIcon, StopCircleIcon as StopCircleBorderIcon, StopCircleFillIcon, StopCircleIcon, StopCircleFillIcon as StopCricleFillIcon, StopIcon, StorefrontIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, UnderlineIcon, UndoIcon as Undo, UndoIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VariableIcon, VisibleIcon as Visible, VisibleIcon, VisibleOffIcon as VisibleOff, VisibleOffIcon, WarningIcon as WarningBorderIcon, WarningFillIcon, WarningIcon, WorkspacesIcon, XCircleIcon as XCircleBorderIcon, 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