@databricks/design-system 1.12.18 → 1.12.19

package/dist/Stepper-BevE-qWg.js

@@ -0,0 +1,4379 @@
+import React__default, { createContext, useContext, useMemo, useEffect, useState, forwardRef, useRef, useLayoutEffect, useCallback, useImperativeHandle } from 'react';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
+import { notification, ConfigProvider, Button as Button$1, Typography as Typography$1 } from 'antd';
+import * as Popover$1 from '@radix-ui/react-popover';
+import _isUndefined from 'lodash/isUndefined';
+import AntDIcon from '@ant-design/icons';
+import _memoize from 'lodash/memoize';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { useMergeRefs } from '@floating-ui/react';
+import _isNil from 'lodash/isNil';
+import _endsWith from 'lodash/endsWith';
+import _isBoolean from 'lodash/isBoolean';
+import _isNumber from 'lodash/isNumber';
+import _isString from 'lodash/isString';
+import _mapValues from 'lodash/mapValues';
+import unitless from '@emotion/unitless';
+import _uniqueId from 'lodash/uniqueId';
+
+/**
+ * Used to hide text visually, but still be readable by screen-readers
+ * and other assistive devices.
+ *
+ * https://www.tpgi.com/the-anatomy-of-visually-hidden/
+ */
+const visuallyHidden = {
+  '&:not(:focus):not(:active)': {
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+  }
+};
+
+const DEFAULT_SPACING_UNIT = 8;
+const MODAL_PADDING = 40;
+const spacing = {
+  xs: DEFAULT_SPACING_UNIT / 2,
+  sm: DEFAULT_SPACING_UNIT,
+  md: DEFAULT_SPACING_UNIT * 2,
+  lg: DEFAULT_SPACING_UNIT * 3
+};
+
+// Less variables that are used by AntD
+({
+  defaultPaddingLg: spacing.lg,
+  defaultPaddingMd: spacing.md,
+  defaultPaddingSm: spacing.sm,
+  defaultPaddingXs: spacing.sm,
+  defaultPaddingXss: spacing.xs,
+  paddingLg: spacing.md,
+  // TODO: Check if there is a better alternative with team
+  paddingMd: spacing.sm,
+  paddingSm: spacing.sm,
+  paddingXs: spacing.xs,
+  paddingXss: 0,
+  marginSm: 12,
+  marginLg: spacing.lg,
+  // Button
+  btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,
+  btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,
+  btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,
+  // Input
+  inputPaddingHorizontal: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingVertical: spacing.xs + 1,
+  inputPaddingVerticalBase: spacing.xs + 1,
+  inputPaddingVerticalSm: spacing.xs + 1,
+  inputPaddingVerticalLg: spacing.xs + 1,
+  // Modal
+  modalPadding: MODAL_PADDING,
+  modalLessPadding: MODAL_PADDING - 20,
+  modalHeaderPadding: `${MODAL_PADDING}px ${MODAL_PADDING}px ${MODAL_PADDING - 20}px`,
+  modalHeaderCloseSize: MODAL_PADDING * 2 + 22,
+  modalHeaderBorderWidth: 0,
+  modalBodyPadding: `0 ${MODAL_PADDING}px`,
+  modalFooterPaddingVertical: 0,
+  modalFooterPaddingHorizontal: 0,
+  modalFooterBorderWidth: 0,
+  // Switch
+  switchPadding: 0,
+  switchHeight: 16,
+  switchMinWidth: 28,
+  switchPinSize: 14
+});
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var antdVars = {
+  // IMPORTANT: Do not read this directly from components. Use `React.useContext`.
+  'ant-prefix': 'du-bois'
+};
+
+const heightBase = 40;
+const borderWidth = 1;
+const antdGeneralVariables = {
+  classnamePrefix: antdVars['ant-prefix'],
+  iconfontCssPrefix: 'anticon',
+  borderRadiusBase: 4,
+  borderWidth: borderWidth,
+  heightSm: 32,
+  heightBase: heightBase,
+  iconSize: 24,
+  iconFontSize: 16,
+  buttonHeight: heightBase,
+  // Height available within button (for label and icon). Same for middle and small buttons.
+  buttonInnerHeight: heightBase - spacing.sm * 2 - borderWidth * 2
+};
+const shadowLightRgb = '31, 39, 45';
+const shadowDarkRgb = '0, 0, 0';
+const getShadowVariables = isDarkMode => {
+  if (isDarkMode) {
+    return {
+      /**
+       * @deprecated Use new shadow variables under theme.shadows.*, check out go/dubois-elevation-doc decision doc for guidance on choosing the new shadow variable
+       */
+      shadowLow: `0px 4px 16px rgba(${shadowDarkRgb}, 0.12)`,
+      /**
+       * @deprecated Use new shadow variables under theme.shadows.*, check out go/dubois-elevation-doc decision doc for guidance on choosing the new shadow variable
+       */
+      shadowHigh: `0px 8px 24px rgba(${shadowDarkRgb}, 0.2);`
+    };
+  } else {
+    return {
+      /**
+       * @deprecated Use new shadow variables under theme.shadows.*, check out go/dubois-elevation-doc decision doc for guidance on choosing the new shadow variable
+       */
+      shadowLow: `0px 4px 16px rgba(${shadowLightRgb}, 0.12)`,
+      /**
+       * @deprecated Use new shadow variables under theme.shadows.*, check out go/dubois-elevation-doc decision doc for guidance on choosing the new shadow variable
+       */
+      shadowHigh: `0px 8px 24px rgba(${shadowLightRgb}, 0.2)`
+    };
+  }
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+const borderRadii = {
+  borderRadius0: 0,
+  borderRadiusSm: 4,
+  borderRadiusMd: 8,
+  borderRadiusLg: 12,
+  borderRadiusFull: 999
+};
+
+// Border variables
+const borders = {
+  borderRadiusMd: 4,
+  borderRadiusLg: 8
+};
+const getLegacyBorders = () => {
+  return borders;
+};
+const getBorders = () => {
+  return borderRadii;
+};
+
+/**
+ * These values are based on AntD's breakpoints which follow BootStrap 4 media query rules.
+ * The numerical values represent the min-width of the given size.
+ * AntD values: https://ant.design/components/grid#col
+ * Bootstrap: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
+ */
+
+const breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600
+};
+const mediaQueries = {
+  xs: '@media (max-width: 575.98px)',
+  sm: `@media (min-width: ${breakpoints.sm}px)`,
+  md: `@media (min-width: ${breakpoints.md}px)`,
+  lg: `@media (min-width: ${breakpoints.lg}px)`,
+  xl: `@media (min-width: ${breakpoints.xl}px)`,
+  xxl: `@media (min-width: ${breakpoints.xxl}px)`
+};
+const responsive = {
+  breakpoints,
+  mediaQueries
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+const primitiveColors = {
+  blue100: '#F0F8FF',
+  blue200: '#D7EDFE',
+  blue300: '#BAE1FC',
+  blue400: '#8ACAFF',
+  blue500: '#4299E0',
+  blue600: '#2272B4',
+  blue700: '#0E538B',
+  blue800: '#04355D',
+  brown: '#A6630C',
+  coral: '#C83243',
+  green100: '#F3FCF6',
+  green200: '#D4F7DF',
+  green300: '#B1ECC5',
+  green400: '#8DDDA8',
+  green500: '#3CAA60',
+  green600: '#277C43',
+  green700: '#115026',
+  green800: '#093919',
+  grey050: '#F6F7F9',
+  grey100: '#E8ECF0',
+  grey200: '#D1D9E1',
+  grey300: '#C0CDD8',
+  grey350: '#92A4B3',
+  grey400: '#8396A5',
+  grey500: '#5F7281',
+  grey600: '#445461',
+  grey650: '#37444F',
+  grey700: '#1F272D',
+  grey800: '#11171C',
+  indigo: '#434A93',
+  lemon: '#FACB66',
+  lime: '#308613',
+  pink: '#B45091',
+  purple: '#8A63BF',
+  red100: '#FFF5F7',
+  red200: '#FDE2E8',
+  red300: '#FBD0D8',
+  red400: '#F792A6',
+  red500: '#E65B77',
+  red600: '#C82D4C',
+  red700: '#9E102C',
+  red800: '#630316',
+  teal: '#04867D',
+  turquoise: '#137DAE',
+  white: '#FFFFFF',
+  yellow100: '#FFF9EB',
+  yellow200: '#FCEACA',
+  yellow300: '#F8D4A5',
+  yellow400: '#F2BE88',
+  yellow500: '#DE7921',
+  yellow600: '#BE501E',
+  yellow700: '#93320B',
+  yellow800: '#5F1B02'
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+const darkProtectedColorList = {
+  tagBackgroundBrown: 'rgba(171, 86, 2, 0.1000)',
+  tagBackgroundCharcoal: primitiveColors.grey300,
+  tagBackgroundCoral: 'rgba(240, 0, 64, 0.1000)',
+  tagBackgroundDefault: 'rgba(232, 236, 240, 0.0800)',
+  tagBackgroundIndigo: 'rgba(1, 68, 255, 0.1200)',
+  tagBackgroundLemon: 'rgba(255, 191, 1, 0.1800)',
+  tagBackgroundLime: 'rgba(2, 179, 2, 0.0800)',
+  tagBackgroundPink: 'rgba(240, 1, 150, 0.1200)',
+  tagBackgroundPurple: 'rgba(59, 0, 255, 0.1200)',
+  tagBackgroundTeal: 'rgba(2, 192, 150, 0.1200)',
+  tagBackgroundTurquoise: 'rgba(2, 192, 213, 0.1200)',
+  tagIconBrown: '#DAB594',
+  tagIconCharcoal: primitiveColors.grey650,
+  tagIconCoral: '#FF859D',
+  tagIconDefault: primitiveColors.grey350,
+  tagIconIndigo: '#99A2FF',
+  tagIconLemon: '#FFCD4D',
+  tagIconLime: '#70D083',
+  tagIconPink: '#F986C9',
+  tagIconPurple: '#B399FF',
+  tagIconTeal: '#0AD8B6',
+  tagIconTurquoise: '#1FD0F3',
+  tagTextBrown: '#DAB594',
+  tagTextCharcoal: primitiveColors.grey800,
+  tagTextCoral: '#FF859D',
+  tagTextDefault: primitiveColors.grey100,
+  tagTextIndigo: '#99A2FF',
+  tagTextLemon: '#FFCD4D',
+  tagTextLime: '#70D083',
+  tagTextPink: '#F986C9',
+  tagTextPurple: '#B399FF',
+  tagTextTeal: '#0AD8B6',
+  tagTextTurquoise: '#1FD0F3'
+};
+const lightProtectedColorList = {
+  tagBackgroundBrown: 'rgba(171, 86, 2, 0.0800)',
+  tagBackgroundCharcoal: primitiveColors.grey650,
+  tagBackgroundCoral: 'rgba(240, 0, 64, 0.0600)',
+  tagBackgroundDefault: 'rgba(0, 0, 59, 0.0500)',
+  tagBackgroundIndigo: 'rgba(1, 68, 255, 0.0600)',
+  tagBackgroundLemon: 'rgba(255, 191, 1, 0.1800)',
+  tagBackgroundLime: 'rgba(2, 179, 2, 0.0800)',
+  tagBackgroundPink: 'rgba(240, 1, 150, 0.0600)',
+  tagBackgroundPurple: 'rgba(59, 0, 255, 0.0500)',
+  tagBackgroundTeal: 'rgba(2, 192, 150, 0.0900)',
+  tagBackgroundTurquoise: 'rgba(2, 192, 213, 0.0900)',
+  tagIconBrown: '#815E46',
+  tagIconCharcoal: primitiveColors.grey350,
+  tagIconCoral: '#CA244E',
+  tagIconDefault: primitiveColors.grey600,
+  tagIconIndigo: '#3451B2',
+  tagIconLemon: '#915830',
+  tagIconLime: '#297C3B',
+  tagIconPink: '#C41C87',
+  tagIconPurple: '#5746AF',
+  tagIconTeal: '#067A6F',
+  tagIconTurquoise: '#0C7792',
+  tagTextBrown: '#815E46',
+  tagTextCharcoal: primitiveColors.grey100,
+  tagTextCoral: '#CA244E',
+  tagTextDefault: primitiveColors.grey800,
+  tagTextIndigo: '#3451B2',
+  tagTextLemon: '#915830',
+  tagTextLime: '#227534',
+  tagTextPink: '#C41C87',
+  tagTextPurple: '#5746AF',
+  tagTextTeal: '#00776B',
+  tagTextTurquoise: '#00708D'
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+const darkColorList = {
+  actionDangerDefaultBackgroundDefault: 'rgba(247, 146, 166, 0.0000)',
+  actionDangerDefaultBackgroundHover: 'rgba(247, 146, 166, 0.0800)',
+  actionDangerDefaultBackgroundPress: 'rgba(247, 146, 166, 0.1600)',
+  actionDangerDefaultBorderDefault: primitiveColors.red500,
+  actionDangerDefaultBorderHover: primitiveColors.red400,
+  actionDangerDefaultBorderPress: primitiveColors.red300,
+  actionDangerDefaultTextDefault: primitiveColors.red500,
+  actionDangerDefaultTextHover: primitiveColors.red400,
+  actionDangerDefaultTextPress: primitiveColors.red300,
+  actionDangerPrimaryBackgroundDefault: primitiveColors.red500,
+  actionDangerPrimaryBackgroundHover: primitiveColors.red400,
+  actionDangerPrimaryBackgroundPress: primitiveColors.red300,
+  actionDangerPrimaryText: primitiveColors.grey800,
+  actionDefaultBackgroundDefault: 'rgba(138, 202, 255, 0.0000)',
+  actionDefaultBackgroundHover: 'rgba(138, 202, 255, 0.0800)',
+  actionDefaultBackgroundPress: 'rgba(138, 202, 255, 0.1600)',
+  actionDefaultBorderDefault: primitiveColors.grey650,
+  actionDefaultBorderFocus: primitiveColors.blue400,
+  actionDefaultBorderHover: primitiveColors.blue400,
+  actionDefaultBorderPress: primitiveColors.blue300,
+  actionDefaultIconDefault: primitiveColors.grey350,
+  actionDefaultIconHover: primitiveColors.blue400,
+  actionDefaultIconPress: primitiveColors.blue300,
+  actionDefaultTextDefault: primitiveColors.grey100,
+  actionDefaultTextHover: primitiveColors.blue400,
+  actionDefaultTextPress: primitiveColors.blue300,
+  actionDisabledBackground: primitiveColors.grey650,
+  actionDisabledBorder: primitiveColors.grey600,
+  actionDisabledText: primitiveColors.grey500,
+  actionIconBackgroundDefault: 'rgba(255, 255, 255, 0.0000)',
+  actionIconBackgroundHover: 'rgba(255, 255, 255, 0.0800)',
+  actionIconBackgroundPress: 'rgba(255, 255, 255, 0.1600)',
+  actionIconIconDefault: primitiveColors.grey350,
+  actionIconIconHover: primitiveColors.grey300,
+  actionIconIconPress: primitiveColors.grey200,
+  actionLinkDefault: primitiveColors.blue500,
+  actionLinkHover: primitiveColors.blue400,
+  actionLinkPress: primitiveColors.blue300,
+  actionPrimaryBackgroundDefault: primitiveColors.blue500,
+  actionPrimaryBackgroundHover: primitiveColors.blue400,
+  actionPrimaryBackgroundPress: primitiveColors.blue300,
+  actionPrimaryIcon: primitiveColors.grey800,
+  actionPrimaryTextDefault: primitiveColors.grey800,
+  actionPrimaryTextHover: primitiveColors.grey800,
+  actionPrimaryTextPress: primitiveColors.grey800,
+  actionTertiaryBackgroundDefault: 'rgba(143, 205, 255, 0.0000)',
+  actionTertiaryBackgroundHover: 'rgba(143, 205, 255, 0.0800)',
+  actionTertiaryBackgroundPress: 'rgba(143, 205, 255, 0.1600)',
+  actionTertiaryIconDefault: primitiveColors.blue500,
+  actionTertiaryIconHover: primitiveColors.blue400,
+  actionTertiaryIconPress: primitiveColors.blue300,
+  actionTertiaryTextDefault: primitiveColors.blue500,
+  actionTertiaryTextHover: primitiveColors.blue400,
+  actionTertiaryTextPress: primitiveColors.blue300,
+  backgroundDanger: 'rgba(200, 45, 76, 0.1600)',
+  backgroundPrimary: primitiveColors.grey800,
+  backgroundSecondary: primitiveColors.grey700,
+  backgroundSuccess: 'rgba(39, 124, 67, 0.1600)',
+  backgroundWarning: 'rgba(190, 80, 30, 0.1600)',
+  border: primitiveColors.grey650,
+  borderAccessible: primitiveColors.grey300,
+  borderDanger: primitiveColors.red500,
+  borderWarning: primitiveColors.yellow500,
+  codeBackground: primitiveColors.grey650,
+  overlayOverlay: 'rgba(31, 38, 45, 0.7200)',
+  progressFill: primitiveColors.grey500,
+  progressTrack: primitiveColors.grey650,
+  skeleton: 'rgba(144, 164, 181, 0.1600)',
+  tableBackgroundSelectedDefault: 'rgba(189, 205, 219, 0.0800)',
+  tableBackgroundSelectedHover: 'rgba(189, 205, 219, 0.1200)',
+  tableBackgroundUnselectedDefault: primitiveColors.grey800,
+  tableBackgroundUnselectedHover: 'rgba(189, 205, 219, 0.0400)',
+  textPlaceholder: primitiveColors.grey400,
+  textPrimary: primitiveColors.grey100,
+  textSecondary: primitiveColors.grey350,
+  textValidationDanger: primitiveColors.red500,
+  textValidationSuccess: primitiveColors.green500,
+  textValidationWarning: primitiveColors.yellow500,
+  tooltipBackgroundTooltip: primitiveColors.grey050
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+const lightColorList = {
+  actionDangerDefaultBackgroundDefault: 'rgba(200, 45, 76, 0.0000)',
+  actionDangerDefaultBackgroundHover: 'rgba(200, 45, 76, 0.0800)',
+  actionDangerDefaultBackgroundPress: 'rgba(200, 45, 76, 0.1600)',
+  actionDangerDefaultBorderDefault: primitiveColors.red600,
+  actionDangerDefaultBorderHover: primitiveColors.red700,
+  actionDangerDefaultBorderPress: primitiveColors.red800,
+  actionDangerDefaultTextDefault: primitiveColors.red600,
+  actionDangerDefaultTextHover: primitiveColors.red700,
+  actionDangerDefaultTextPress: primitiveColors.red800,
+  actionDangerPrimaryBackgroundDefault: primitiveColors.red600,
+  actionDangerPrimaryBackgroundHover: primitiveColors.red700,
+  actionDangerPrimaryBackgroundPress: primitiveColors.red800,
+  actionDangerPrimaryText: primitiveColors.white,
+  actionDefaultBackgroundDefault: 'rgba(34, 114, 180, 0.0000)',
+  actionDefaultBackgroundHover: 'rgba(34, 114, 180, 0.0800)',
+  actionDefaultBackgroundPress: 'rgba(34, 114, 180, 0.1600)',
+  actionDefaultBorderDefault: primitiveColors.grey300,
+  actionDefaultBorderFocus: primitiveColors.blue600,
+  actionDefaultBorderHover: primitiveColors.blue600,
+  actionDefaultBorderPress: primitiveColors.blue800,
+  actionDefaultIconDefault: primitiveColors.grey600,
+  actionDefaultIconHover: primitiveColors.blue700,
+  actionDefaultIconPress: primitiveColors.blue800,
+  actionDefaultTextDefault: primitiveColors.grey800,
+  actionDefaultTextHover: primitiveColors.blue700,
+  actionDefaultTextPress: primitiveColors.blue800,
+  actionDisabledBackground: primitiveColors.grey100,
+  actionDisabledBorder: primitiveColors.grey200,
+  actionDisabledText: primitiveColors.grey350,
+  actionIconBackgroundDefault: 'rgba(34, 114, 180, 0.0000)',
+  actionIconBackgroundHover: 'rgba(34, 114, 180, 0.0800)',
+  actionIconBackgroundPress: 'rgba(34, 114, 180, 0.1600)',
+  actionIconIconDefault: primitiveColors.grey600,
+  actionIconIconHover: primitiveColors.blue700,
+  actionIconIconPress: primitiveColors.blue800,
+  actionLinkDefault: primitiveColors.blue600,
+  actionLinkHover: primitiveColors.blue700,
+  actionLinkPress: primitiveColors.blue800,
+  actionPrimaryBackgroundDefault: primitiveColors.blue600,
+  actionPrimaryBackgroundHover: primitiveColors.blue700,
+  actionPrimaryBackgroundPress: primitiveColors.blue800,
+  actionPrimaryIcon: primitiveColors.white,
+  actionPrimaryTextDefault: primitiveColors.white,
+  actionPrimaryTextHover: primitiveColors.white,
+  actionPrimaryTextPress: primitiveColors.white,
+  actionTertiaryBackgroundDefault: 'rgba(34, 114, 180, 0.0000)',
+  actionTertiaryBackgroundHover: 'rgba(34, 114, 180, 0.0800)',
+  actionTertiaryBackgroundPress: 'rgba(34, 114, 180, 0.1600)',
+  actionTertiaryIconDefault: primitiveColors.blue600,
+  actionTertiaryIconHover: primitiveColors.blue700,
+  actionTertiaryIconPress: primitiveColors.blue800,
+  actionTertiaryTextDefault: primitiveColors.blue600,
+  actionTertiaryTextHover: primitiveColors.blue700,
+  actionTertiaryTextPress: primitiveColors.blue800,
+  backgroundDanger: primitiveColors.red100,
+  backgroundPrimary: primitiveColors.white,
+  backgroundSecondary: primitiveColors.grey050,
+  backgroundSuccess: primitiveColors.green100,
+  backgroundWarning: primitiveColors.yellow100,
+  border: primitiveColors.grey200,
+  borderAccessible: primitiveColors.grey500,
+  borderDanger: primitiveColors.red300,
+  borderWarning: primitiveColors.yellow300,
+  codeBackground: 'rgba(68, 83, 95, 0.0800)',
+  overlayOverlay: 'rgba(64, 63, 63, 0.7200)',
+  progressFill: primitiveColors.grey300,
+  progressTrack: primitiveColors.grey100,
+  skeleton: 'rgba(144, 164, 181, 0.1600)',
+  tableBackgroundSelectedDefault: 'rgba(68, 83, 95, 0.0800)',
+  tableBackgroundSelectedHover: 'rgba(68, 83, 95, 0.1200)',
+  tableBackgroundUnselectedDefault: primitiveColors.white,
+  tableBackgroundUnselectedHover: 'rgba(68, 83, 95, 0.0400)',
+  textPlaceholder: primitiveColors.grey500,
+  textPrimary: primitiveColors.grey800,
+  textSecondary: primitiveColors.grey500,
+  textValidationDanger: primitiveColors.red600,
+  textValidationSuccess: primitiveColors.green600,
+  textValidationWarning: primitiveColors.yellow600,
+  tooltipBackgroundTooltip: primitiveColors.grey800
+};
+
+// Currently these are the same for both light and dark mode, but we may want to change this in the future.
+const branded = {
+  ai: {
+    /** For AI components, the top-left-oriented start color of gradient treatments. */
+    gradientStart: '#4299E0',
+    /** For AI components, the mid color of gradient treatments. */
+    gradientMid: '#CA42E0',
+    /** For AI components, the bottom-right-oriented end color of gradient treatments. */
+    gradientEnd: '#FF5F46'
+  }
+};
+const darkColors = {
+  ...darkColorList,
+  ...primitiveColors,
+  branded
+};
+const lightColors = {
+  ...lightColorList,
+  ...primitiveColors,
+  branded
+};
+function getSemanticColors(isDarkMode) {
+  return isDarkMode ? darkColors : lightColors;
+}
+function getProtectedSemanticColors(isDarkMode) {
+  return isDarkMode ? darkProtectedColorList : lightProtectedColorList;
+}
+
+// When deprecating a color, add it to this object with a comment explaining why it's deprecated and a link to a JIRA ticket.
+// Example: `@deprecated This color supports XXXX will be removed in an upcoming release (FEINF-1234).`
+const deprecatedPrimitiveColors = {
+  /** @deprecated This was an alias to `primitiveColors.blue600`, please use that instead.
+   * If possible, please use an appropriate semantic color, such as `actionPrimaryBackgroundDefault`. */
+  primary: primitiveColors.blue600,
+  /** @deprecated This was an alias to `primitiveColors.grey600`, please use that instead.
+   * If possible, please use an appropriate semantic color, such as `actionPrimaryBackgroundHover`. */
+  charcoal: primitiveColors.grey600,
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioInteractiveAvailable: primitiveColors.blue600,
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioInteractiveHover: '#186099',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioInteractivePress: '#0D4F85',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioDisabled: '#A2AEB8',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioDefaultBorder: '#64727D',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioDefaultBackground: '#FFFFFF',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioInteractiveHoverSecondary: 'rgba(34, 115, 181, 0.08)',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)'
+};
+const deprecatedSemanticColorsLight = {
+  /** @deprecated Use `backgroundDanger` (FEINF-xxxx) */
+  backgroundValidationDanger: lightColorList.backgroundDanger,
+  /** @deprecated Use `backgroundSuccess` (FEINF-xxxx) */
+  backgroundValidationSuccess: lightColorList.backgroundSuccess,
+  /** @deprecated Use `backgroundWarning` (FEINF-xxxx) */
+  backgroundValidationWarning: lightColorList.backgroundWarning,
+  /** @deprecated Use `border` (FEINF-xxxx) */
+  borderDecorative: lightColorList.border,
+  /** @deprecated Use `borderDanger` (FEINF-xxxx) */
+  borderValidationDanger: lightColorList.borderDanger,
+  /** @deprecated Use `borderWarning` (FEINF-xxxx) */
+  borderValidationWarning: lightColorList.borderWarning,
+  /** @deprecated Use `tableBackgroundUnselectedHover` (FEINF-xxxx) */
+  tableRowHover: lightColorList.tableBackgroundUnselectedHover,
+  /** @deprecated Use `textSecondary` (FEINF-xxxx) */
+  textValidationInfo: lightColorList.textSecondary,
+  /** @deprecated Use `codeBackground` (FEINF-xxxx) */
+  typographyCodeBg: lightColorList.codeBackground,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagBrown: primitiveColors.brown,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagCharcoal: primitiveColors.grey600,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagCoral: primitiveColors.coral,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagDefault: primitiveColors.grey100,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagHover: 'rgba(34, 114, 180, 0.0800)',
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagIconHover: primitiveColors.grey600,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagIconPress: primitiveColors.grey600,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagIndigo: primitiveColors.indigo,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagInverse: primitiveColors.grey800,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagLemon: primitiveColors.lemon,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagLime: primitiveColors.lime,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagPink: primitiveColors.pink,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagPress: 'rgba(34, 114, 180, 0.1600)',
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagPurple: primitiveColors.purple,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagTeal: primitiveColors.teal,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagText: primitiveColors.white,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagTurquoise: primitiveColors.turquoise
+};
+const deprecatedSemanticColorsDark = {
+  backgroundValidationDanger: darkColorList.backgroundDanger,
+  backgroundValidationSuccess: darkColorList.backgroundSuccess,
+  backgroundValidationWarning: darkColorList.backgroundWarning,
+  borderDecorative: darkColorList.border,
+  borderValidationDanger: darkColorList.borderDanger,
+  borderValidationWarning: darkColorList.borderWarning,
+  tableRowHover: darkColorList.tableBackgroundUnselectedHover,
+  textValidationInfo: darkColorList.textSecondary,
+  typographyCodeBg: darkColorList.codeBackground,
+  tagBrown: 'rgba(166, 99, 12, 0.8600)',
+  tagCharcoal: 'rgba(68, 83, 95, 0.8600)',
+  tagCoral: 'rgba(200, 50, 67, 0.8600)',
+  tagDefault: primitiveColors.grey650,
+  tagHover: 'rgba(138, 202, 255, 0.0800)',
+  tagIconHover: primitiveColors.grey350,
+  tagIconPress: primitiveColors.grey350,
+  tagIndigo: 'rgba(67, 74, 147, 0.8600)',
+  tagInverse: primitiveColors.grey800,
+  tagLemon: 'rgba(250, 203, 102, 0.8600)',
+  tagLime: 'rgba(48, 134, 19, 0.8600)',
+  tagPink: 'rgba(180, 80, 145, 0.8600)',
+  tagPress: 'rgba(138, 202, 255, 0.1600)',
+  tagPurple: 'rgba(138, 99, 191, 0.8600)',
+  tagTeal: 'rgba(4, 134, 125, 0.8600)',
+  tagText: primitiveColors.grey100,
+  tagTurquoise: 'rgba(19, 125, 174, 0.8600)'
+};
+
+// A static list of secondary colors; these are used as a limited palette of color options in component props, i.e. `color="lime"`.
+// TODO: We should split primitive colors into primary and secondary colors, and automatically generate this list.
+
+function getColors(isDarkMode) {
+  return {
+    ...deprecatedPrimitiveColors,
+    ...(isDarkMode ? deprecatedSemanticColorsDark : deprecatedSemanticColorsLight),
+    ...getSemanticColors(isDarkMode)
+  };
+}
+
+function getGradients(isDarkMode) {
+  const colors = getColors(isDarkMode);
+  return {
+    aiBorderGradient: `linear-gradient(135deg, ${colors.branded.ai.gradientStart} 20.5%, ${colors.branded.ai.gradientMid} 46.91%, ${colors.branded.ai.gradientEnd} 79.5%)`
+  };
+}
+
+// Dark mode colors
+const blackAlpha87 = 'rgba(0, 0, 0, 0.87)';
+const blackAlpha61 = 'rgba(0, 0, 0, 0.61)';
+const blackAlpha45 = 'rgba(0, 0, 0, 0.45)';
+const blackAlpha26 = 'rgba(0, 0, 0, 0.26)';
+
+// Light mode colors
+const blackAlpha13 = 'rgba(0, 0, 0, 0.13)';
+const blackAlpha08 = 'rgba(0, 0, 0, 0.08)';
+const blackAlpha05 = 'rgba(0, 0, 0, 0.05)';
+const blackAlpha02 = 'rgba(0, 0, 0, 0.02)';
+const getShadows = isDarkMode => {
+  return isDarkMode ? {
+    xs: `0px 1px 0px 0px ${blackAlpha45}`,
+    sm: ` 0px 2px 3px -1px ${blackAlpha45}, 0px 1px 0px 0px ${blackAlpha26}`,
+    md: `0px 3px 6px 0px ${blackAlpha45}`,
+    lg: `0px 2px 16px 0px ${blackAlpha61}`,
+    xl: `0px 8px 40px 0px ${blackAlpha87}`
+  } : {
+    xs: `0px 1px 0px 0px ${blackAlpha05}`,
+    sm: ` 0px 2px 3px -1px ${blackAlpha05}, 0px 1px 0px 0px ${blackAlpha02}`,
+    md: `0px 3px 6px 0px ${blackAlpha05}`,
+    lg: `0px 2px 16px 0px ${blackAlpha08}`,
+    xl: `0px 8px 40px 0px ${blackAlpha13}`
+  };
+};
+
+const FONT_SIZE_BASE = 13;
+
+// Less variables that are used by AntD
+const antdTypography = {
+  fontSizeSm: 12,
+  fontSizeBase: FONT_SIZE_BASE,
+  fontSizeMd: FONT_SIZE_BASE,
+  fontSizeLg: 18,
+  fontSizeXl: 22,
+  fontSizeXxl: 32,
+  lineHeightSm: '16px',
+  lineHeightBase: '20px',
+  lineHeightMd: '20px',
+  lineHeightLg: '24px',
+  lineHeightXl: '28px',
+  lineHeightXxl: '40px',
+  typographyRegularFontWeight: 400,
+  typographyBoldFontWeight: 600
+};
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var typography = {
+  ...antdTypography
+};
+
+const defaultOptions = {
+  enableAnimation: false,
+  zIndexBase: 1000
+};
+
+// Function to get variables for a certain theme.
+// End users should use useDesignSystemTheme instead.
+const getTheme = _memoize(getThemeImpl, function (isDarkMode) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+  return `${isDarkMode}-${options.enableAnimation}-${options.zIndexBase}`;
+});
+function getThemeImpl(isDarkMode) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+  return {
+    colors: getColors(isDarkMode),
+    gradients: getGradients(isDarkMode),
+    spacing,
+    general: {
+      ...antdGeneralVariables,
+      ...getShadowVariables(isDarkMode)
+    },
+    shadows: getShadows(isDarkMode),
+    typography,
+    legacyBorders: getLegacyBorders(),
+    // TODO: Update to use `getBorders`
+    borders: getBorders(),
+    responsive,
+    isDarkMode,
+    options,
+    DU_BOIS_INTERNAL_ONLY: {
+      colors: getProtectedSemanticColors(isDarkMode)
+    }
+  };
+}
+
+function getClassNamePrefix(theme) {
+  const antdThemeName = theme.isDarkMode ? 'dark' : 'light';
+  return `${theme.general.classnamePrefix}-${antdThemeName}`;
+}
+function getPrefixedClassNameFromTheme(theme, className) {
+  return [getClassNamePrefix(theme), className].filter(Boolean).join('-');
+}
+function useDesignSystemTheme() {
+  const emotionTheme = useTheme();
+  // Graceful fallback to default theme in case a test or developer forgot context.
+  const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme(false);
+  return {
+    theme: theme,
+    classNamePrefix: getClassNamePrefix(theme),
+    getPrefixedClassName: className => getPrefixedClassNameFromTheme(theme, className)
+  };
+}
+// This is a simple typed HOC wrapper around the useDesignSystemTheme hook, for use in older react components.
+function WithDesignSystemThemeHoc(Component) {
+  return function WrappedWithDesignSystemTheme(props) {
+    const themeValues = useDesignSystemTheme();
+    return jsx(Component, {
+      ...props,
+      designSystemThemeApi: themeValues
+    });
+  };
+}
+
+const DuboisContextDefaults = {
+  enableAnimation: false,
+  // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
+  getPrefixCls: suffix => suffix ? `du-bois-${suffix}` : 'du-bois',
+  flags: {}
+};
+const DesignSystemThemeContext = /*#__PURE__*/createContext({
+  isDarkMode: false
+});
+const DesignSystemContext = /*#__PURE__*/createContext(DuboisContextDefaults);
+const DU_BOIS_ENABLE_ANIMATION_CLASSNAME = 'du-bois-enable-animation';
+function getAnimationCss(enableAnimation) {
+  const disableAnimationCss = {
+    animationDuration: '0s !important',
+    transition: 'none !important'
+  };
+  return enableAnimation ? {} : {
+    // Apply to the current element
+    ...disableAnimationCss,
+    '&::before': disableAnimationCss,
+    '&::after': disableAnimationCss,
+    // Also apply to all child elements with a class that starts with our prefix
+    [`[class*=du-bois]:not(.${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}, .${DU_BOIS_ENABLE_ANIMATION_CLASSNAME} *)`]: {
+      ...disableAnimationCss,
+      // Also target any pseudo-elements associated with those elements, since these can also be animated.
+      '&::before': disableAnimationCss,
+      '&::after': disableAnimationCss
+    }
+  };
+}
+const DesignSystemProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
+const AntDConfigProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
+
+/** Only to be accessed by SupportsDuBoisThemes, except for special exceptions like tests and storybook. Ask in #dubois first if you need to use it. */
+const DesignSystemThemeProvider = _ref => {
+  let {
+    isDarkMode = false,
+    children
+  } = _ref;
+  return jsx(DesignSystemThemeContext.Provider, {
+    value: {
+      isDarkMode
+    },
+    children: children
+  });
+};
+const DesignSystemProvider = _ref2 => {
+  let {
+    children,
+    enableAnimation = false,
+    zIndexBase = 1000,
+    getPopupContainer,
+    flags = {},
+    // Disable virtualization of legacy AntD components when running tests so that all items are rendered
+    disableLegacyAntVirtualization = process.env.NODE_ENV === 'test' ? true : undefined
+  } = _ref2;
+  const {
+    isDarkMode
+  } = useContext(DesignSystemThemeContext);
+  const theme = useMemo(() => getTheme(isDarkMode, {
+    enableAnimation,
+    zIndexBase
+  }),
+  // TODO: revisit this
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isDarkMode, zIndexBase]);
+  const providerPropsContext = useMemo(() => ({
+    isDarkMode,
+    enableAnimation,
+    zIndexBase,
+    getPopupContainer,
+    flags
+  }), [isDarkMode, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  const classNamePrefix = getClassNamePrefix(theme);
+  const value = useMemo(() => {
+    return {
+      enableAnimation,
+      isDarkMode,
+      getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
+      getPopupContainer,
+      flags
+    };
+  }, [enableAnimation, theme, isDarkMode, getPopupContainer, flags]);
+  useEffect(() => {
+    return () => {
+      // when the design system context is unmounted, make sure the notification cache is also cleaned up
+      notification.destroy();
+    };
+  }, []);
+  return jsx(DesignSystemProviderPropsContext.Provider, {
+    value: providerPropsContext,
+    children: jsx(ThemeProvider, {
+      theme: theme,
+      children: jsx(AntDConfigProviderPropsContext.Provider, {
+        value: {
+          prefixCls: classNamePrefix,
+          getPopupContainer,
+          virtual: !disableLegacyAntVirtualization
+        },
+        children: jsx(TooltipProvider, {
+          children: jsx(DesignSystemContext.Provider, {
+            value: value,
+            children: children
+          })
+        })
+      })
+    })
+  });
+};
+const ApplyDesignSystemContextOverrides = _ref3 => {
+  let {
+    enableAnimation,
+    zIndexBase,
+    getPopupContainer,
+    flags,
+    children
+  } = _ref3;
+  const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
+  if (parentDesignSystemProviderProps === null) {
+    throw new Error(`ApplyDesignSystemContextOverrides cannot be used standalone - DesignSystemProvider must exist in the React context`);
+  }
+  const newProps = useMemo(() => ({
+    ...parentDesignSystemProviderProps,
+    enableAnimation: enableAnimation !== null && enableAnimation !== void 0 ? enableAnimation : parentDesignSystemProviderProps.enableAnimation,
+    zIndexBase: zIndexBase !== null && zIndexBase !== void 0 ? zIndexBase : parentDesignSystemProviderProps.zIndexBase,
+    getPopupContainer: getPopupContainer !== null && getPopupContainer !== void 0 ? getPopupContainer : parentDesignSystemProviderProps.getPopupContainer,
+    flags: {
+      ...parentDesignSystemProviderProps.flags,
+      ...flags
+    }
+  }), [parentDesignSystemProviderProps, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  return jsx(DesignSystemProvider, {
+    ...newProps,
+    children: children
+  });
+};
+
+// This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.
+const ApplyDesignSystemFlags = _ref4 => {
+  let {
+    flags,
+    children
+  } = _ref4;
+  const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
+  if (parentDesignSystemProviderProps === null) {
+    throw new Error(`ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context`);
+  }
+  const newProps = useMemo(() => ({
+    ...parentDesignSystemProviderProps,
+    flags: {
+      ...parentDesignSystemProviderProps.flags,
+      ...flags
+    }
+  }), [parentDesignSystemProviderProps, flags]);
+  return jsx(DesignSystemProvider, {
+    ...newProps,
+    children: children
+  });
+};
+const DesignSystemAntDConfigProvider = _ref5 => {
+  let {
+    children
+  } = _ref5;
+  const antdContext = useAntDConfigProviderContext();
+  return jsx(ConfigProvider, {
+    ...antdContext,
+    children: children
+  });
+};
+const useAntDConfigProviderContext = () => {
+  var _useContext;
+  return (_useContext = useContext(AntDConfigProviderPropsContext)) !== null && _useContext !== void 0 ? _useContext : {
+    prefixCls: undefined
+  };
+};
+
+/**
+ * When using AntD components inside Design System wrapper components (e.g. Modal, Collapse etc),
+ * we don't want Design System's prefix class to override them.
+ *
+ * Since all Design System's components have are wrapped with DesignSystemAntDConfigProvider,
+ * this won't affect their own prefixCls, but just allow nested antd components to keep their ant prefix.
+ */
+const RestoreAntDDefaultClsPrefix = _ref6 => {
+  let {
+    children
+  } = _ref6;
+  return jsx(ConfigProvider, {
+    prefixCls: "ant",
+    children: children
+  });
+};
+
+function useDesignSystemContext() {
+  return useContext(DesignSystemContext);
+}
+
+/**
+ * Provides access to http://go/safex flags from the frontend. Note that this is a temporary
+ * workaround until direct `safex` imports are available.
+ * @param flag The name of the flag to check
+ * @param defaultValue The default value to return if the flag is not set
+ * @returns
+ */
+const safex = (flag, defaultValue) => {
+  // Catching errors here, because we don't have type-safety to ensure
+  // that `__debug__safex`'s API hasn't changed.
+  try {
+    const globalSafex = window.__debug__safex;
+    return globalSafex ? globalSafex(flag, defaultValue) : defaultValue;
+  } catch (e) {
+    return defaultValue;
+  }
+};
+
+const getDebugOutlineStyles = theme => /*#__PURE__*/css({
+  outline: `1px dashed ${theme.isDarkMode ? theme.colors.lime : theme.colors.lime}`,
+  outlineOffset: '2px'
+}, process.env.NODE_ENV === "production" ? "" : ";label:getDebugOutlineStyles;");
+function addDebugOutlineIfEnabled() {
+  return safex('databricks.fe.designsystem.showDebugOutline', false) ? {
+    'data-dubois-show-outline': true
+  } : {};
+}
+function addDebugOutlineStylesIfEnabled(theme) {
+  return safex('databricks.fe.designsystem.showDebugOutline', false) ? getDebugOutlineStyles(theme) : {};
+}
+
+const uniqueId = () => new Date().getTime() + Array(16).fill('').map(() => parseInt((Math.random() * 10).toString())).join('');
+function useUniqueId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return useState(() => `${prefix}-${uniqueId()}`)[0];
+}
+
+const getIconVariantStyles = (theme, color) => {
+  switch (color) {
+    case 'success':
+      return {
+        color: theme.colors.textValidationSuccess
+      };
+    case 'warning':
+      return {
+        color: theme.colors.textValidationWarning
+      };
+    case 'danger':
+      return {
+        color: theme.colors.textValidationDanger
+      };
+    case 'ai':
+      return {
+        'svg *': {
+          fill: 'var(--ai-icon-gradient)'
+        }
+      };
+    default:
+      return {
+        color: color
+      };
+  }
+};
+const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    component: Component,
+    dangerouslySetAntdProps,
+    color,
+    style,
+    ...otherProps
+  } = props;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const linearGradientId = useUniqueId('ai-linear-gradient');
+  const MemoizedComponent = useMemo(() => Component ? _ref => {
+    let {
+      fill,
+      ...iconProps
+    } = _ref;
+    return (
+      // We don't rely on top-level fills for our colors. Fills are specified
+      // with "currentColor" on children of the top-most svg.
+      jsxs(Fragment, {
+        children: [jsx(Component, {
+          fill: "none",
+          ...iconProps,
+          style: color === 'ai' ? {
+            ['--ai-icon-gradient']: `url(#${linearGradientId})`,
+            ...iconProps.style
+          } : iconProps.style
+        }), color === 'ai' && jsx("svg", {
+          width: "0",
+          height: "0",
+          viewBox: "0 0 0 0",
+          css: visuallyHidden,
+          children: jsx("defs", {
+            children: jsxs("linearGradient", {
+              id: linearGradientId,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "100%",
+              children: [jsx("stop", {
+                offset: "20.5%",
+                stopColor: theme.colors.branded.ai.gradientStart
+              }), jsx("stop", {
+                offset: "46.91%",
+                stopColor: theme.colors.branded.ai.gradientMid
+              }), jsx("stop", {
+                offset: "79.5%",
+                stopColor: theme.colors.branded.ai.gradientEnd
+              })]
+            })
+          })
+        })]
+      })
+    );
+  } : undefined, [Component, color, linearGradientId, theme]);
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDIcon, {
+      ...addDebugOutlineIfEnabled(),
+      ref: forwardedRef,
+      "aria-hidden": "true",
+      css: /*#__PURE__*/css({
+        fontSize: theme.general.iconFontSize,
+        ...getIconVariantStyles(theme, color)
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Icon;"),
+      component: MemoizedComponent,
+      style: {
+        ...style
+      },
+      ...otherProps,
+      ...dangerouslySetAntdProps
+    })
+  });
+});
+
+function SvgCheckIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "m15.06 3.56-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const CheckIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgCheckIcon
+  });
+});
+CheckIcon.displayName = 'CheckIcon';
+
+function SvgChevronLeftIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M7.083 8 10 10.947 8.958 12 5 8l3.958-4L10 5.053z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const ChevronLeftIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgChevronLeftIcon
+  });
+});
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+
+function SvgChevronRightIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M8.917 8 6 5.053 7.042 4 11 8l-3.958 4L6 10.947z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const ChevronRightIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgChevronRightIcon
+  });
+});
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+
+function SvgCloseIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M6.97 8.03 2 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 13z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const CloseIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgCloseIcon
+  });
+});
+CloseIcon.displayName = 'CloseIcon';
+
+function SvgDangerIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M7.248 10.748a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0M8.748 4.998v4h-1.5v-4z"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "m11.533 15.776 4.243-4.243a.75.75 0 0 0 .22-.53v-6.01a.75.75 0 0 0-.22-.53L11.533.22a.75.75 0 0 0-.53-.22h-6.01a.75.75 0 0 0-.53.22L.22 4.462a.75.75 0 0 0-.22.53v6.011c0 .199.079.39.22.53l4.242 4.243c.141.14.332.22.53.22h6.011a.75.75 0 0 0 .53-.22m2.963-10.473v5.39l-3.804 3.803H5.303L1.5 10.692V5.303L5.303 1.5h5.39z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+const DangerIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgDangerIcon
+  });
+});
+DangerIcon.displayName = 'DangerIcon';
+
+function SvgLoadingIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M23.212 12a.79.79 0 0 1-.789-.788 9.6 9.6 0 0 0-.757-3.751 9.66 9.66 0 0 0-5.129-5.129 9.6 9.6 0 0 0-3.749-.755.788.788 0 0 1 0-1.577c1.513 0 2.983.296 4.365.882a11.1 11.1 0 0 1 3.562 2.403 11.157 11.157 0 0 1 3.283 7.927.785.785 0 0 1-.786.788",
+      clipRule: "evenodd"
+    })
+  });
+}
+const LoadingIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgLoadingIcon
+  });
+});
+LoadingIcon.displayName = 'LoadingIcon';
+
+function SvgNewWindowIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10z"
+    }), jsx("path", {
+      fill: "currentColor",
+      d: "M1 2.75A.75.75 0 0 1 1.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75z"
+    })]
+  });
+}
+const NewWindowIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgNewWindowIcon
+  });
+});
+NewWindowIcon.displayName = 'NewWindowIcon';
+
+function SvgWarningIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M7.25 10V6.5h1.5V10zM8 12.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0 1.5"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M8 1a.75.75 0 0 1 .649.374l7.25 12.5A.75.75 0 0 1 15.25 15H.75a.75.75 0 0 1-.649-1.126l7.25-12.5A.75.75 0 0 1 8 1m0 2.245L2.052 13.5h11.896z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+const WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgWarningIcon
+  });
+});
+WarningIcon.displayName = 'WarningIcon';
+
+// Use Symbol to correctly handled null/undefined as stable values
+const NOT_INITIALIZED = Symbol('NOT_INITIALIZED');
+
+/**
+ * Use to keep a stable value on the first mount of a component
+ * that cannot change.
+ */
+function useStable(valueCallback) {
+  const ref = useRef(NOT_INITIALIZED);
+  if (ref.current === NOT_INITIALIZED) {
+    const val = valueCallback();
+    ref.current = val;
+    return val;
+  }
+  return ref.current;
+}
+let sequentialCounter = 0;
+function useStableUid() {
+  return useStable(() => sequentialCounter++);
+}
+
+/** Props for UI components that support a "loading" state. */
+
+/**
+ * A handler for integrating UI components with external latency instrumentation.
+ * If provided via `LoadingStateContext`, hooks will be called whenever child
+ * components in a "loading" state are mounted and unmounted.
+ */
+
+const LoadingStateContext = /*#__PURE__*/createContext(null);
+/**
+ * Indicates that the containing component is in a "loading" state, i.e. that the UI
+ * displayed to the user is semantically equivalent to them seeing a spinner or a
+ * loading indicator. This means that the UI is not in its final settled state yet.
+ *
+ * All components that are in a "loading" state should render a `<LoadingState>`
+ * component, preferrably with an appropriate description.
+ *
+ * By itself, `<LoadingState>` doesn't do anything, but if used within `LoadingStateContext`,
+ * it will call the provided `startLoading()`/`endLoading()` hooks when the component
+ * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
+ */
+const LoadingState = _ref => {
+  let {
+    description = 'Generic UI loading state'
+  } = _ref;
+  const uid = useStableUid();
+  const loadingStateContext = useContext(LoadingStateContext);
+  useLayoutEffect(() => {
+    // mount
+    if (loadingStateContext) {
+      loadingStateContext.startLoading(uid, description);
+    }
+    return () => {
+      // unmount
+      if (loadingStateContext) {
+        loadingStateContext.endLoading(uid);
+      }
+    };
+  }, [uid, description, loadingStateContext]);
+  return null;
+};
+
+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;
+  let animationDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  let inheritColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  const styles = {
+    animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
+    ...(inheritColor ? {
+      color: 'inherit'
+    } : {
+      color: theme.colors.textSecondary
+    }),
+    animationDelay: `${delay}s`,
+    '@media only percy': {
+      animation: 'none'
+    }
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
+};
+const Spinner = _ref => {
+  let {
+    frameRate,
+    size = 'default',
+    delay,
+    className: propClass,
+    label,
+    animationDuration,
+    inheritColor,
+    loading = true,
+    loadingDescription = 'Spinner',
+    ...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 ? `${classNamePrefix}-spin${sizeSuffix}` : '';
+  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  return (
+    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
+    jsxs("div", {
+      ...props,
+      className: wrapperClass,
+      children: [loading && jsx(LoadingState, {
+        description: loadingDescription
+      }), jsx(AccessibleContainer, {
+        label: label,
+        children: jsx(LoadingIcon, {
+          "aria-hidden": "false",
+          css: cssSpinner(theme, frameRate, delay, animationDuration, inheritColor),
+          className: className
+        })
+      })]
+    })
+  );
+};
+
+const getDialogComboboxOptionLabelWidth = (theme, width) => {
+  const paddingLeft = theme.spacing.xs + theme.spacing.sm;
+  const iconWidth = theme.spacing.md;
+  const labelMarginLeft = theme.spacing.sm;
+  if (typeof width === 'string') {
+    return `calc(${width} - ${paddingLeft + iconWidth + labelMarginLeft}px)`;
+  }
+  return width - paddingLeft + iconWidth + labelMarginLeft;
+};
+function isOptionDisabled(option) {
+  return option.hasAttribute('disabled') && option.getAttribute('disabled') !== 'false';
+}
+function highlightFirstNonDisabledOption(firstOptionItem) {
+  let startAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'start';
+  let previousSelection = arguments.length > 2 ? arguments[2] : undefined;
+  if (isOptionDisabled(firstOptionItem)) {
+    const firstHighlightableOption = findClosestOptionSibling(firstOptionItem, startAt === 'end' ? 'previous' : 'next');
+    if (firstHighlightableOption) {
+      highlightOption(firstHighlightableOption, previousSelection);
+    }
+  } else {
+    highlightOption(firstOptionItem, previousSelection);
+  }
+}
+function findClosestOptionSibling(element, direction) {
+  const nextSibling = direction === 'previous' ? element.previousElementSibling : element.nextElementSibling;
+  if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.getAttribute('role')) === 'option') {
+    if (isOptionDisabled(nextSibling)) {
+      return findClosestOptionSibling(nextSibling, direction);
+    }
+    return nextSibling;
+  } else if (nextSibling) {
+    let nextOptionSibling = nextSibling;
+    while (nextOptionSibling && (nextOptionSibling.getAttribute('role') !== 'option' || isOptionDisabled(nextOptionSibling))) {
+      nextOptionSibling = direction === 'previous' ? nextOptionSibling.previousElementSibling : nextOptionSibling.nextElementSibling;
+    }
+    return nextOptionSibling;
+  }
+  return null;
+}
+const resetAllHighlightedOptions = currentSelection => {
+  const options = getContentOptions(currentSelection);
+  options === null || options === void 0 || options.forEach(option => {
+    option.setAttribute('tabIndex', '-1');
+    option.setAttribute('data-highlighted', 'false');
+  });
+};
+const highlightOption = function (currentSelection, prevSelection) {
+  var _currentSelection$scr;
+  let focus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  if (prevSelection) {
+    prevSelection.setAttribute('tabIndex', '-1');
+    prevSelection.setAttribute('data-highlighted', 'false');
+  }
+  if (focus) {
+    currentSelection.focus();
+  }
+  currentSelection.setAttribute('tabIndex', '0');
+  currentSelection.setAttribute('data-highlighted', 'true');
+  (_currentSelection$scr = currentSelection.scrollIntoView) === null || _currentSelection$scr === void 0 || _currentSelection$scr.call(currentSelection, {
+    block: 'center'
+  });
+};
+const findHighlightedOption = options => {
+  var _options$find;
+  return (_options$find = options.find(option => option.getAttribute('data-highlighted') === 'true')) !== null && _options$find !== void 0 ? _options$find : undefined;
+};
+const getContentOptions = element => {
+  var _element$closest;
+  const options = (_element$closest = element.closest('[data-combobox-option-list="true"]')) === null || _element$closest === void 0 ? void 0 : _element$closest.querySelectorAll('[role="option"]');
+  return options ? Array.from(options) : undefined;
+};
+const getKeyboardNavigationFunctions = (handleSelect, _ref) => {
+  let {
+    onKeyDown,
+    onMouseEnter,
+    onDefaultKeyDown,
+    disableMouseOver,
+    setDisableMouseOver
+  } = _ref;
+  return {
+    onKeyDown: e => {
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setDisableMouseOver(true);
+          const nextSibling = findClosestOptionSibling(e.currentTarget, 'next');
+          if (nextSibling) {
+            highlightOption(nextSibling, e.currentTarget);
+          } else {
+            var _getContentOptions;
+            const firstOption = (_getContentOptions = getContentOptions(e.currentTarget)) === null || _getContentOptions === void 0 ? void 0 : _getContentOptions[0];
+            if (firstOption) {
+              highlightFirstNonDisabledOption(firstOption, 'start', e.currentTarget);
+            }
+          }
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setDisableMouseOver(true);
+          const previousSibling = findClosestOptionSibling(e.currentTarget, 'previous');
+          if (previousSibling) {
+            highlightOption(previousSibling, e.currentTarget);
+          } else {
+            var _getContentOptions2;
+            const lastOption = (_getContentOptions2 = getContentOptions(e.currentTarget)) === null || _getContentOptions2 === void 0 ? void 0 : _getContentOptions2.slice(-1)[0];
+            if (lastOption) {
+              highlightFirstNonDisabledOption(lastOption, 'end', e.currentTarget);
+            }
+          }
+          break;
+        case 'Enter':
+          e.preventDefault();
+          handleSelect(e);
+          break;
+        default:
+          onDefaultKeyDown === null || onDefaultKeyDown === void 0 || onDefaultKeyDown(e);
+          break;
+      }
+    },
+    onMouseMove: e => {
+      if (disableMouseOver) {
+        setDisableMouseOver(false);
+      }
+    },
+    onMouseEnter: e => {
+      if (!disableMouseOver) {
+        onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e);
+        resetTabIndexToFocusedElement(e.currentTarget);
+      }
+    }
+  };
+};
+const resetTabIndexToFocusedElement = elem => {
+  resetAllHighlightedOptions(elem);
+  elem.setAttribute('tabIndex', '0');
+  elem.focus();
+};
+const dialogComboboxLookAheadKeyDown = (e, setLookAhead, lookAhead) => {
+  var _e$currentTarget$pare, _e$currentTarget$pare2;
+  if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') {
+    return;
+  }
+  e.preventDefault();
+  const siblings = Array.from((_e$currentTarget$pare = (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.children) !== null && _e$currentTarget$pare !== void 0 ? _e$currentTarget$pare : []);
+  // Look for the first sibling that starts with the pressed key + recently pressed keys (lookAhead, cleared after 1.5 seconds of inactivity)
+  const nextSiblingIndex = siblings.findIndex(sibling => {
+    var _sibling$textContent$, _sibling$textContent;
+    const siblingLabel = (_sibling$textContent$ = (_sibling$textContent = sibling.textContent) === null || _sibling$textContent === void 0 ? void 0 : _sibling$textContent.toLowerCase()) !== null && _sibling$textContent$ !== void 0 ? _sibling$textContent$ : '';
+    return siblingLabel.startsWith(lookAhead + e.key);
+  });
+  if (nextSiblingIndex !== -1) {
+    const nextSibling = siblings[nextSiblingIndex];
+    nextSibling.focus();
+    if (setLookAhead) {
+      setLookAhead(lookAhead + e.key);
+    }
+    resetTabIndexToFocusedElement(nextSibling);
+  }
+};
+
+const getComboboxContentWrapperStyles = (theme, _ref) => {
+  let {
+    maxHeight = '100vh',
+    maxWidth = '100vw',
+    minHeight = 0,
+    minWidth = 0,
+    width,
+    useNewShadows
+  } = _ref;
+  return /*#__PURE__*/css({
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    ...(width ? {
+      width
+    } : {}),
+    background: theme.colors.backgroundPrimary,
+    color: theme.colors.textPrimary,
+    overflow: 'auto',
+    // Making sure the content popover overlaps the remove button when opens to the right
+    zIndex: theme.options.zIndexBase + 10,
+    boxSizing: 'border-box',
+    border: `1px solid ${theme.colors.border}`,
+    boxShadow: useNewShadows ? theme.shadows.lg : theme.general.shadowLow,
+    borderRadius: theme.borders.borderRadiusSm,
+    colorScheme: theme.isDarkMode ? 'dark' : 'light',
+    ...getDarkModePortalStyles(theme, useNewShadows)
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getComboboxContentWrapperStyles;");
+};
+const COMBOBOX_MENU_ITEM_PADDING = [6, 32, 6, 12];
+const getComboboxOptionItemWrapperStyles = theme => {
+  return /*#__PURE__*/css(importantify({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    alignSelf: 'stretch',
+    padding: `${COMBOBOX_MENU_ITEM_PADDING.map(x => `${x}px`).join(' ')}`,
+    lineHeight: theme.typography.lineHeightBase,
+    boxSizing: 'content-box',
+    cursor: 'pointer',
+    userSelect: 'none',
+    '&[data-highlighted="true"]': {
+      background: theme.colors.actionTertiaryBackgroundHover
+    },
+    '&:focus': {
+      background: theme.colors.actionTertiaryBackgroundHover,
+      outline: 'none'
+    },
+    '&[disabled]': {
+      pointerEvents: 'none',
+      color: theme.colors.actionDisabledText,
+      background: theme.colors.backgroundPrimary
+    }
+  }), process.env.NODE_ENV === "production" ? "" : ";label:getComboboxOptionItemWrapperStyles;");
+};
+const getComboboxOptionLabelStyles = _ref2 => {
+  let {
+    theme,
+    dangerouslyHideCheck,
+    textOverflowMode,
+    contentWidth,
+    hasHintColumn
+  } = _ref2;
+  return /*#__PURE__*/css({
+    marginLeft: !dangerouslyHideCheck ? theme.spacing.sm : 0,
+    fontSize: theme.typography.fontSizeBase,
+    fontStyle: 'normal',
+    fontWeight: 400,
+    cursor: 'pointer',
+    overflow: 'hidden',
+    wordBreak: 'break-word',
+    ...(textOverflowMode === 'ellipsis' && {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }),
+    ...(contentWidth ? {
+      width: getDialogComboboxOptionLabelWidth(theme, contentWidth)
+    } : {}),
+    ...(hasHintColumn && {
+      display: 'flex'
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getComboboxOptionLabelStyles;");
+};
+const getInfoIconStyles = theme => {
+  return /*#__PURE__*/css({
+    paddingLeft: theme.spacing.xs,
+    color: theme.colors.textSecondary,
+    pointerEvents: 'all',
+    cursor: 'pointer',
+    verticalAlign: 'middle'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getInfoIconStyles;");
+};
+const getCheckboxStyles = (theme, textOverflowMode) => {
+  return /*#__PURE__*/css({
+    pointerEvents: 'none',
+    height: 'unset',
+    width: '100%',
+    '& > label': {
+      display: 'flex',
+      width: '100%',
+      fontSize: theme.typography.fontSizeBase,
+      fontStyle: 'normal',
+      fontWeight: 400,
+      cursor: 'pointer',
+      '& > span:first-of-type': {
+        alignSelf: 'flex-start',
+        display: 'inline-flex',
+        alignItems: 'center',
+        paddingTop: theme.spacing.xs / 2
+      },
+      '& > span:last-of-type, & > span:last-of-type > label': {
+        paddingRight: 0,
+        width: '100%',
+        overflow: 'hidden',
+        wordBreak: 'break-word',
+        ...(textOverflowMode === 'ellipsis' ? {
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        } : {})
+      }
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getCheckboxStyles;");
+};
+const getFooterStyles = theme => {
+  return /*#__PURE__*/css({
+    width: '100%',
+    background: theme.colors.backgroundPrimary,
+    padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px ${theme.spacing.lg / 2}px`,
+    position: 'sticky',
+    bottom: 0,
+    boxSizing: 'border-box',
+    '&:has(> .combobox-footer-add-button)': {
+      padding: `${theme.spacing.sm}px 0 ${theme.spacing.sm}px 0`,
+      '& > :not(.combobox-footer-add-button)': {
+        marginLeft: `${theme.spacing.lg / 2}px`,
+        marginRight: `${theme.spacing.lg / 2}px`
+      },
+      '& > .combobox-footer-add-button': {
+        justifyContent: 'flex-start !important'
+      }
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getFooterStyles;");
+};
+const getSelectItemWithHintColumnStyles = function () {
+  let hintColumnWidthPercent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+  return /*#__PURE__*/css({
+    flexGrow: 1,
+    display: 'inline-grid',
+    gridTemplateColumns: `${100 - hintColumnWidthPercent}% ${hintColumnWidthPercent}%`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getSelectItemWithHintColumnStyles;");
+};
+const getHintColumnStyles = (theme, disabled, textOverflowMode) => {
+  return /*#__PURE__*/css({
+    color: theme.colors.textSecondary,
+    fontSize: theme.typography.fontSizeSm,
+    textAlign: 'right',
+    ...(disabled && {
+      color: theme.colors.actionDisabledText
+    }),
+    ...(textOverflowMode === 'ellipsis' && {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getHintColumnStyles;");
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+let ValidSemanticColors = /*#__PURE__*/function (ValidSemanticColors) {
+  ValidSemanticColors["ActionDangerDefaultBackgroundDefault"] = "actionDangerDefaultBackgroundDefault";
+  ValidSemanticColors["ActionDangerDefaultBackgroundHover"] = "actionDangerDefaultBackgroundHover";
+  ValidSemanticColors["ActionDangerDefaultBackgroundPress"] = "actionDangerDefaultBackgroundPress";
+  ValidSemanticColors["ActionDangerDefaultBorderDefault"] = "actionDangerDefaultBorderDefault";
+  ValidSemanticColors["ActionDangerDefaultBorderHover"] = "actionDangerDefaultBorderHover";
+  ValidSemanticColors["ActionDangerDefaultBorderPress"] = "actionDangerDefaultBorderPress";
+  ValidSemanticColors["ActionDangerDefaultTextDefault"] = "actionDangerDefaultTextDefault";
+  ValidSemanticColors["ActionDangerDefaultTextHover"] = "actionDangerDefaultTextHover";
+  ValidSemanticColors["ActionDangerDefaultTextPress"] = "actionDangerDefaultTextPress";
+  ValidSemanticColors["ActionDangerPrimaryBackgroundDefault"] = "actionDangerPrimaryBackgroundDefault";
+  ValidSemanticColors["ActionDangerPrimaryBackgroundHover"] = "actionDangerPrimaryBackgroundHover";
+  ValidSemanticColors["ActionDangerPrimaryBackgroundPress"] = "actionDangerPrimaryBackgroundPress";
+  ValidSemanticColors["ActionDangerPrimaryText"] = "actionDangerPrimaryText";
+  ValidSemanticColors["ActionDefaultBackgroundDefault"] = "actionDefaultBackgroundDefault";
+  ValidSemanticColors["ActionDefaultBackgroundHover"] = "actionDefaultBackgroundHover";
+  ValidSemanticColors["ActionDefaultBackgroundPress"] = "actionDefaultBackgroundPress";
+  ValidSemanticColors["ActionDefaultBorderDefault"] = "actionDefaultBorderDefault";
+  ValidSemanticColors["ActionDefaultBorderFocus"] = "actionDefaultBorderFocus";
+  ValidSemanticColors["ActionDefaultBorderHover"] = "actionDefaultBorderHover";
+  ValidSemanticColors["ActionDefaultBorderPress"] = "actionDefaultBorderPress";
+  ValidSemanticColors["ActionDefaultIconDefault"] = "actionDefaultIconDefault";
+  ValidSemanticColors["ActionDefaultIconHover"] = "actionDefaultIconHover";
+  ValidSemanticColors["ActionDefaultIconPress"] = "actionDefaultIconPress";
+  ValidSemanticColors["ActionDefaultTextDefault"] = "actionDefaultTextDefault";
+  ValidSemanticColors["ActionDefaultTextHover"] = "actionDefaultTextHover";
+  ValidSemanticColors["ActionDefaultTextPress"] = "actionDefaultTextPress";
+  ValidSemanticColors["ActionDisabledBackground"] = "actionDisabledBackground";
+  ValidSemanticColors["ActionDisabledBorder"] = "actionDisabledBorder";
+  ValidSemanticColors["ActionDisabledText"] = "actionDisabledText";
+  ValidSemanticColors["ActionIconBackgroundDefault"] = "actionIconBackgroundDefault";
+  ValidSemanticColors["ActionIconBackgroundHover"] = "actionIconBackgroundHover";
+  ValidSemanticColors["ActionIconBackgroundPress"] = "actionIconBackgroundPress";
+  ValidSemanticColors["ActionIconIconDefault"] = "actionIconIconDefault";
+  ValidSemanticColors["ActionIconIconHover"] = "actionIconIconHover";
+  ValidSemanticColors["ActionIconIconPress"] = "actionIconIconPress";
+  ValidSemanticColors["ActionLinkDefault"] = "actionLinkDefault";
+  ValidSemanticColors["ActionLinkHover"] = "actionLinkHover";
+  ValidSemanticColors["ActionLinkPress"] = "actionLinkPress";
+  ValidSemanticColors["ActionPrimaryBackgroundDefault"] = "actionPrimaryBackgroundDefault";
+  ValidSemanticColors["ActionPrimaryBackgroundHover"] = "actionPrimaryBackgroundHover";
+  ValidSemanticColors["ActionPrimaryBackgroundPress"] = "actionPrimaryBackgroundPress";
+  ValidSemanticColors["ActionPrimaryIcon"] = "actionPrimaryIcon";
+  ValidSemanticColors["ActionPrimaryTextDefault"] = "actionPrimaryTextDefault";
+  ValidSemanticColors["ActionPrimaryTextHover"] = "actionPrimaryTextHover";
+  ValidSemanticColors["ActionPrimaryTextPress"] = "actionPrimaryTextPress";
+  ValidSemanticColors["ActionTertiaryBackgroundDefault"] = "actionTertiaryBackgroundDefault";
+  ValidSemanticColors["ActionTertiaryBackgroundHover"] = "actionTertiaryBackgroundHover";
+  ValidSemanticColors["ActionTertiaryBackgroundPress"] = "actionTertiaryBackgroundPress";
+  ValidSemanticColors["ActionTertiaryIconDefault"] = "actionTertiaryIconDefault";
+  ValidSemanticColors["ActionTertiaryIconHover"] = "actionTertiaryIconHover";
+  ValidSemanticColors["ActionTertiaryIconPress"] = "actionTertiaryIconPress";
+  ValidSemanticColors["ActionTertiaryTextDefault"] = "actionTertiaryTextDefault";
+  ValidSemanticColors["ActionTertiaryTextHover"] = "actionTertiaryTextHover";
+  ValidSemanticColors["ActionTertiaryTextPress"] = "actionTertiaryTextPress";
+  ValidSemanticColors["BackgroundDanger"] = "backgroundDanger";
+  ValidSemanticColors["BackgroundPrimary"] = "backgroundPrimary";
+  ValidSemanticColors["BackgroundSecondary"] = "backgroundSecondary";
+  ValidSemanticColors["BackgroundSuccess"] = "backgroundSuccess";
+  ValidSemanticColors["BackgroundWarning"] = "backgroundWarning";
+  ValidSemanticColors["Border"] = "border";
+  ValidSemanticColors["BorderAccessible"] = "borderAccessible";
+  ValidSemanticColors["BorderDanger"] = "borderDanger";
+  ValidSemanticColors["BorderWarning"] = "borderWarning";
+  ValidSemanticColors["CodeBackground"] = "codeBackground";
+  ValidSemanticColors["OverlayOverlay"] = "overlayOverlay";
+  ValidSemanticColors["ProgressFill"] = "progressFill";
+  ValidSemanticColors["ProgressTrack"] = "progressTrack";
+  ValidSemanticColors["Skeleton"] = "skeleton";
+  ValidSemanticColors["TableBackgroundSelectedDefault"] = "tableBackgroundSelectedDefault";
+  ValidSemanticColors["TableBackgroundSelectedHover"] = "tableBackgroundSelectedHover";
+  ValidSemanticColors["TableBackgroundUnselectedDefault"] = "tableBackgroundUnselectedDefault";
+  ValidSemanticColors["TableBackgroundUnselectedHover"] = "tableBackgroundUnselectedHover";
+  ValidSemanticColors["TextPlaceholder"] = "textPlaceholder";
+  ValidSemanticColors["TextPrimary"] = "textPrimary";
+  ValidSemanticColors["TextSecondary"] = "textSecondary";
+  ValidSemanticColors["TextValidationDanger"] = "textValidationDanger";
+  ValidSemanticColors["TextValidationSuccess"] = "textValidationSuccess";
+  ValidSemanticColors["TextValidationWarning"] = "textValidationWarning";
+  ValidSemanticColors["TooltipBackgroundTooltip"] = "tooltipBackgroundTooltip";
+  return ValidSemanticColors;
+}({});
+
+const ColorVars = {
+  primary: ValidSemanticColors.TextPrimary,
+  secondary: ValidSemanticColors.TextSecondary,
+  info: ValidSemanticColors.TextSecondary,
+  error: ValidSemanticColors.TextValidationDanger,
+  success: ValidSemanticColors.TextValidationSuccess,
+  warning: ValidSemanticColors.TextValidationWarning
+};
+
+/**
+ * Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.
+ * Used to ensure that we always override Ant styles, without worrying about selector precedence.
+ */
+function importantify(obj) {
+  return _mapValues(obj, (value, key) => {
+    if (_isString(value) || _isNumber(value) || _isBoolean(value)) {
+      // Make sure we don't double-append important
+      if (_isString(value) && _endsWith(value, '!important')) {
+        return value;
+      }
+      if (_isNumber(value)) {
+        if (unitless[key]) {
+          return `${value}!important`;
+        }
+        return `${value}px!important`;
+      }
+      return `${value}!important`;
+    }
+    if (_isNil(value)) {
+      return value;
+    }
+    return importantify(value);
+  });
+}
+
+/**
+ * Returns a text color, in case of invalid/missing key and missing fallback color it will return textPrimary
+ * @param theme
+ * @param key - key of TypographyColor
+ * @param fallbackColor - color to return as fallback -- used to remove tertiary check inline
+ */
+function getTypographyColor(theme, key, fallbackColor) {
+  if (theme && key && Object(theme.colors).hasOwnProperty(ColorVars[key])) {
+    return theme.colors[ColorVars[key]];
+  }
+  return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;
+}
+
+/**
+ * Returns validation color based on state, has default validation colors if params are not provided
+ * @param theme
+ * @param validationState
+ * @param errorColor
+ * @param warningColor
+ * @param successColor
+ */
+function getValidationStateColor(theme, validationState) {
+  let {
+    errorColor,
+    warningColor,
+    successColor
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  switch (validationState) {
+    case 'error':
+      return errorColor || theme.colors.actionDangerPrimaryBackgroundDefault;
+    case 'warning':
+      return warningColor || theme.colors.textValidationWarning;
+    case 'success':
+      return successColor || theme.colors.textValidationSuccess;
+    default:
+      return undefined;
+  }
+}
+function getDarkModePortalStyles(theme, useNewShadows) {
+  if (!theme || !theme.isDarkMode) {
+    return {};
+  }
+  return {
+    border: `1px solid ${theme.colors.borderDecorative}`,
+    // With the new shadows we have corrected the style of shadows for dark mode, and don't need to disable them.
+    ...(useNewShadows ? {} : {
+      boxShadow: 'none'
+    })
+  };
+}
+const shadowCoverTop = bgColor => `linear-gradient(${bgColor} 30%, rgba(0, 0, 0, 0)) center top`;
+const shadowCoverBot = bgColor => `linear-gradient(rgba(0, 0, 0, 0), ${bgColor} 70%) center bottom`;
+const shadowCoverLeft = bgColor => `linear-gradient(to left, rgba(0, 0, 0, 0), ${bgColor} 30%) left center`;
+const shadowCoverRight = bgColor => `linear-gradient(to left, ${bgColor} 70%, rgba(0, 0, 0, 0)) right center`;
+const shadowTop = shadowRgb => `radial-gradient(
+  farthest-side at 50% 0,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) center top`;
+const shadowBot = shadowRgb => `radial-gradient(
+  farthest-side at 50% 100%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) center bottom`;
+const shadowLeft = shadowRgb => `radial-gradient(
+  farthest-side at 0 50%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) left center`;
+const shadowRight = shadowRgb => `radial-gradient(
+  farthest-side at 100% 50%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) right center`;
+const shadowCoverBackgroundSizeVertical = '100% 40px';
+const shadowCoverBackgroundSizeHorizontal = '40px 100%';
+const shadowBackgroundSizeVertical = '100% 14px';
+const shadowBackgroundSizeHorizontal = '14px 100%';
+const getShadowScrollStylesMemoized = _memoize(function getShadowScrollStylesMemoized(theme, backgroundColor) {
+  let orientation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'vertical';
+  const bgColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.backgroundPrimary;
+  const shadowColor = theme.isDarkMode ? shadowDarkRgb : shadowLightRgb;
+  if (orientation === 'horizontal') {
+    return {
+      background: `
+            ${shadowCoverLeft(bgColor)},
+            ${shadowCoverRight(bgColor)},
+            ${shadowLeft(shadowColor)},
+            ${shadowRight(shadowColor)}`,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: `
+            ${shadowCoverBackgroundSizeHorizontal},
+            ${shadowCoverBackgroundSizeHorizontal},
+            ${shadowBackgroundSizeHorizontal},
+            ${shadowBackgroundSizeHorizontal}`,
+      backgroundAttachment: 'local, local, scroll, scroll'
+    };
+  }
+  return {
+    background: `
+          ${shadowCoverTop(bgColor)},
+          ${shadowCoverBot(bgColor)},
+          ${shadowTop(shadowColor)},
+          ${shadowBot(shadowColor)}`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: `
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical}`,
+    backgroundAttachment: 'local, local, scroll, scroll'
+  };
+}, (theme, backgroundColor, orientation) => {
+  return `${theme.isDarkMode}-${backgroundColor}-${orientation}`;
+});
+const getShadowScrollStyles = function getShadowScrollStyles(theme) {
+  let {
+    backgroundColor,
+    orientation
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return getShadowScrollStylesMemoized(theme, backgroundColor, orientation);
+};
+const getBottomOnlyShadowScrollStylesMemoized = _memoize(function getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor) {
+  const bgColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.backgroundPrimary;
+  return {
+    background: `
+          ${shadowCoverBot(bgColor)},
+          ${shadowBot(theme.isDarkMode ? shadowDarkRgb : shadowLightRgb)}`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: `
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical}`,
+    backgroundAttachment: 'local, scroll'
+  };
+});
+const getBottomOnlyShadowScrollStyles = function getBottomOnlyShadowScrollStyles(theme) {
+  let {
+    backgroundColor
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor);
+};
+function getVirtualizedComboboxMenuItemStyles(virtualItem) {
+  const topBottomPadding = COMBOBOX_MENU_ITEM_PADDING[0] + COMBOBOX_MENU_ITEM_PADDING[2];
+  const leftRightPadding = COMBOBOX_MENU_ITEM_PADDING[1] + COMBOBOX_MENU_ITEM_PADDING[3];
+  return {
+    position: 'absolute',
+    width: `calc(100% - ${leftRightPadding}px)`,
+    height: `${virtualItem.size - topBottomPadding}px`,
+    transform: `translateY(${virtualItem.start}px)`
+  };
+}
+
+// Define a module-global observer and a WeakMap on elements to hold callbacks
+let sharedObserver = null;
+const entryCallbackMap = new WeakMap();
+const ensureSharedObserverExists = () => {
+  if (!sharedObserver) {
+    sharedObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const entryCallback = entryCallbackMap.get(entry.target);
+          if (entryCallback) {
+            entryCallback();
+            entryCallbackMap.delete(entry.target);
+          }
+        }
+      });
+    });
+  }
+};
+function observeElement(element, callback) {
+  var _sharedObserver;
+  ensureSharedObserverExists();
+  entryCallbackMap.set(element, callback);
+  (_sharedObserver = sharedObserver) === null || _sharedObserver === void 0 || _sharedObserver.observe(element);
+  return () => {
+    if (element) {
+      var _sharedObserver2;
+      (_sharedObserver2 = sharedObserver) === null || _sharedObserver2 === void 0 || _sharedObserver2.unobserve(element);
+      entryCallbackMap.delete(element);
+    }
+  };
+}
+/**
+ * Checks if the element was viewed and calls the onView callback.
+ * NOTE: This hook only triggers the onView callback once for the element.
+ * @param onView - callback to be called when the element is viewed
+ * @param resetKey - optional key that resets the observer when changed
+ * @typeParam T - extends Element to specify the type of element being observed
+ */
+const useNotifyOnFirstView = _ref => {
+  let {
+    onView,
+    resetKey,
+    value
+  } = _ref;
+  const isViewedRef = useRef(false);
+  const elementRef = useRef(null);
+  const previousResetKey = useRef(resetKey);
+
+  // Only reset isViewedRef when resetKey changes
+  useEffect(() => {
+    if (previousResetKey.current !== resetKey) {
+      isViewedRef.current = false;
+      previousResetKey.current = resetKey;
+    }
+  }, [resetKey]);
+  useEffect(() => {
+    const element = elementRef.current;
+    // If already viewed or element is not available, do nothing
+    if (!element || isViewedRef.current) {
+      return;
+    }
+    const callback = () => {
+      isViewedRef.current = true;
+      onView(value);
+    };
+
+    // If IntersectionObserver is not available, assume that the element is visible
+    if (!window.IntersectionObserver) {
+      callback();
+      return;
+    }
+    return observeElement(element, callback);
+  }, [onView, value]);
+  return {
+    elementRef
+  };
+};
+
+const useDesignSystemSafexFlags = () => {
+  return {
+    useNewShadows: safex('databricks.fe.designsystem.useNewShadows', false),
+    useNewFormUISpacing: safex('databricks.fe.designsystem.useNewFormUISpacing', false),
+    useNewBorderRadii: safex('databricks.fe.designsystem.useNewBorderRadii', false),
+    useNewLargeAlertSizing: safex('databricks.fe.designsystem.useNewLargeAlertSizing', false)
+  };
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { 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 _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "g8zzui",
+  styles: "cursor:progress"
+} : {
+  name: "4y1qki-AccessibleContainer",
+  styles: "cursor:progress;label:AccessibleContainer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+function AccessibleContainer(_ref) {
+  let {
+    children,
+    label
+  } = _ref;
+  if (!label) {
+    return jsx(Fragment, {
+      children: children
+    });
+  }
+  return jsxs("div", {
+    css: _ref2,
+    children: [jsx("span", {
+      css: visuallyHidden,
+      children: label
+    }), jsx("div", {
+      "aria-hidden": true,
+      children: children
+    })]
+  });
+}
+
+const DefaultDesignSystemEventSuppressInteractionContextValue = {
+  suppressAnalyticsStartInteraction: false
+};
+const DesignSystemEventSuppressInteractionTrueContextValue = {
+  suppressAnalyticsStartInteraction: true
+};
+const DesignSystemEventSuppressInteractionProviderContext = /*#__PURE__*/React__default.createContext(DefaultDesignSystemEventSuppressInteractionContextValue);
+
+/**
+ * This gets the event suppress interaction provider, is used to suppress the start interaction for analytics events.
+ *
+ * @returns DesignSystemEventSuppressInteractionContextType
+ */
+const useDesignSystemEventSuppressInteractionContext = () => {
+  return useContext(DesignSystemEventSuppressInteractionProviderContext);
+};
+
+let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
+  DesignSystemEventProviderComponentTypes["Accordion"] = "accordion";
+  DesignSystemEventProviderComponentTypes["Alert"] = "alert";
+  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
+  DesignSystemEventProviderComponentTypes["Button"] = "button";
+  DesignSystemEventProviderComponentTypes["Card"] = "card";
+  DesignSystemEventProviderComponentTypes["Checkbox"] = "checkbox";
+  DesignSystemEventProviderComponentTypes["ContextMenuCheckboxItem"] = "context_menu_checkbox_item";
+  DesignSystemEventProviderComponentTypes["ContextMenuItem"] = "context_menu_item";
+  DesignSystemEventProviderComponentTypes["ContextMenuRadioGroup"] = "context_menu_radio_group";
+  DesignSystemEventProviderComponentTypes["DialogCombobox"] = "dialog_combobox";
+  DesignSystemEventProviderComponentTypes["Drawer"] = "drawer_content";
+  DesignSystemEventProviderComponentTypes["DropdownMenuCheckboxItem"] = "dropdown_menu_checkbox_item";
+  DesignSystemEventProviderComponentTypes["DropdownMenuItem"] = "dropdown_menu_item";
+  DesignSystemEventProviderComponentTypes["DropdownMenuRadioGroup"] = "dropdown_menu_radio_group";
+  DesignSystemEventProviderComponentTypes["Form"] = "form";
+  DesignSystemEventProviderComponentTypes["Input"] = "input";
+  DesignSystemEventProviderComponentTypes["LegacySelect"] = "legacy_select";
+  DesignSystemEventProviderComponentTypes["Modal"] = "modal";
+  DesignSystemEventProviderComponentTypes["Notification"] = "notification";
+  DesignSystemEventProviderComponentTypes["Pagination"] = "pagination";
+  DesignSystemEventProviderComponentTypes["PillControl"] = "pill_control";
+  DesignSystemEventProviderComponentTypes["Popover"] = "popover";
+  DesignSystemEventProviderComponentTypes["PreviewCard"] = "preview_card";
+  DesignSystemEventProviderComponentTypes["Radio"] = "radio";
+  DesignSystemEventProviderComponentTypes["RadioGroup"] = "radio_group";
+  DesignSystemEventProviderComponentTypes["SegmentedControlGroup"] = "segmented_control_group";
+  DesignSystemEventProviderComponentTypes["SimpleSelect"] = "simple_select";
+  DesignSystemEventProviderComponentTypes["Switch"] = "switch";
+  DesignSystemEventProviderComponentTypes["TableHeader"] = "table_header";
+  DesignSystemEventProviderComponentTypes["Tabs"] = "tabs";
+  DesignSystemEventProviderComponentTypes["Tag"] = "tag";
+  DesignSystemEventProviderComponentTypes["TextArea"] = "text_area";
+  DesignSystemEventProviderComponentTypes["ToggleButton"] = "toggle_button";
+  DesignSystemEventProviderComponentTypes["Tooltip"] = "tooltip";
+  DesignSystemEventProviderComponentTypes["TypeaheadCombobox"] = "typeahead_combobox";
+  DesignSystemEventProviderComponentTypes["TypographyLink"] = "typography_link";
+  return DesignSystemEventProviderComponentTypes;
+}({});
+let DesignSystemEventProviderAnalyticsEventTypes = /*#__PURE__*/function (DesignSystemEventProviderAnalyticsEventTypes) {
+  DesignSystemEventProviderAnalyticsEventTypes["OnClick"] = "onClick";
+  DesignSystemEventProviderAnalyticsEventTypes["OnSubmit"] = "onSubmit";
+  DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
+  DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
+  return DesignSystemEventProviderAnalyticsEventTypes;
+}({});
+let DesignSystemEventProviderComponentSubTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentSubTypes) {
+  DesignSystemEventProviderComponentSubTypes["Success"] = "success";
+  DesignSystemEventProviderComponentSubTypes["Error"] = "error";
+  DesignSystemEventProviderComponentSubTypes["Warning"] = "warning";
+  DesignSystemEventProviderComponentSubTypes["Info"] = "info";
+  DesignSystemEventProviderComponentSubTypes["InfoLightPurple"] = "info_light_purple";
+  DesignSystemEventProviderComponentSubTypes["InfoDarkPurple"] = "info_dark_purple";
+  return DesignSystemEventProviderComponentSubTypes;
+}({});
+const DesignSystemEventProviderComponentSubTypeMap = {
+  success: DesignSystemEventProviderComponentSubTypes.Success,
+  error: DesignSystemEventProviderComponentSubTypes.Error,
+  warning: DesignSystemEventProviderComponentSubTypes.Warning,
+  info: DesignSystemEventProviderComponentSubTypes.Info,
+  info_light_purple: DesignSystemEventProviderComponentSubTypes.InfoLightPurple,
+  info_dark_purple: DesignSystemEventProviderComponentSubTypes.InfoDarkPurple
+};
+const shouldTriggerCallback = (eventType, analyticsEvents) => {
+  return analyticsEvents.includes(eventType);
+};
+const DefaultEmptyCallbacks = {
+  callback: () => {}
+};
+const DesignSystemEventProviderContext = /*#__PURE__*/React__default.createContext(DefaultEmptyCallbacks);
+
+/**
+ * This gets the event provider, which is used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
+ * If the value is undefined, then the expected behavior is to not emit any events.
+ *
+ * @returns DesignSystemEventProviderContextType
+ */
+const useDesignSystemEventProviderContext = () => {
+  return useContext(DesignSystemEventProviderContext);
+};
+const ComponentFinderContext = /*#__PURE__*/createContext({
+  dataComponentProps: {}
+});
+const useComponentFinderContext = targetComponentType => {
+  const componentFinderContext = useContext(ComponentFinderContext);
+  return targetComponentType === componentFinderContext.dataComponentProps['data-component-type'] ? componentFinderContext.dataComponentProps : {};
+};
+
+/**
+ * NOTE: Manually adding in data-component-* props via spreading dataComponentProps from useDesignSystemEventComponentCallbacks
+ * is preferred over direct use of this function. See Button.tsx for an example.
+ *
+ * The main use case of this function is to avoid adding in extra containers/divs with data-component-* props
+ * that may result in unexpected css changes.
+ *
+ * @returns a react node with injected data-component-* props, if possible
+ */
+function augmentWithDataComponentProps(node, dataComponentProps) {
+  if (/*#__PURE__*/React__default.isValidElement(node)) {
+    return /*#__PURE__*/React__default.cloneElement(node, dataComponentProps);
+  }
+  if (Array.isArray(node)) {
+    return node.map(child => {
+      return augmentWithDataComponentProps(child, dataComponentProps);
+    });
+  }
+  return node;
+}
+/**
+ * NOTE: This is not suggested for direct usage from engineers, and should emit your own events.
+ * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
+ *
+ * This gets the event provider component event type callbacks.
+ * If context & componentId are not undefined, then it will check if the event is in analyticsEvents or the default analyticsEvents for that component.
+ * If the context or componentId are undefined, then the expected behavior is to not emit any events.
+ *
+ * @returns Object of event callbacks
+ */
+const useDesignSystemEventComponentCallbacks = _ref => {
+  let {
+    componentType,
+    componentId,
+    componentSubType,
+    analyticsEvents,
+    valueHasNoPii,
+    shouldStartInteraction,
+    isInteractionSubject
+  } = _ref;
+  const context = useDesignSystemEventProviderContext();
+  const suppressInteractionContext = useDesignSystemEventSuppressInteractionContext();
+  // If shouldStartInteraction is explicitly true or has no suppression when shouldStartInteraction
+  // is not defined for an onClick event, then it will start the interaction
+  const shouldStartInteractionComplete = useMemo(() => shouldStartInteraction || shouldStartInteraction === undefined && !suppressInteractionContext.suppressAnalyticsStartInteraction, [suppressInteractionContext, shouldStartInteraction]);
+  const callbacks = useMemo(() => {
+    const dataComponentProps = componentId ? {
+      'data-component-id': componentId,
+      'data-component-type': componentType
+    } : {};
+    if (context === DefaultEmptyCallbacks || componentId === undefined) {
+      return {
+        onClick: () => {},
+        onSubmit: () => {},
+        onValueChange: () => {},
+        onView: () => {},
+        dataComponentProps
+      };
+    }
+    return {
+      onClick: event => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnClick,
+            componentType,
+            componentId,
+            componentSubType,
+            value: undefined,
+            shouldStartInteraction: shouldStartInteractionComplete,
+            event,
+            isInteractionSubject
+          });
+        }
+      },
+      onSubmit: payload => {
+        const mode = shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnSubmit, analyticsEvents) ? 'default' : 'associate_event_only';
+        context.callback({
+          eventType: DesignSystemEventProviderAnalyticsEventTypes.OnSubmit,
+          componentType,
+          componentId,
+          componentSubType,
+          value: undefined,
+          shouldStartInteraction: shouldStartInteractionComplete,
+          event: payload.event,
+          mode,
+          referrerComponent: payload.referrerComponent,
+          formPropertyValues: {
+            initial: payload.initialState,
+            final: payload.finalState
+          }
+        });
+      },
+      onValueChange: value => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnValueChange,
+            componentType,
+            componentId,
+            componentSubType,
+            value: valueHasNoPii ? value : undefined,
+            shouldStartInteraction: false
+          });
+        }
+      },
+      onView: value => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnView, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnView,
+            componentType,
+            componentId,
+            componentSubType,
+            value: valueHasNoPii ? value : undefined,
+            shouldStartInteraction: false
+          });
+        }
+      },
+      dataComponentProps
+    };
+  }, [context, componentId, analyticsEvents, componentType, componentSubType, shouldStartInteractionComplete, isInteractionSubject, valueHasNoPii]);
+  return callbacks;
+};
+
+/**
+ * NOTE: This is not suggested for direct usage from engineers, and should use RecordEventContext instead.
+ * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
+ *
+ * This is the Design System Event Context Provider, and is only used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
+ *
+ * @param children Children react elements
+ * @param callback The event callback function
+ * @returns Design System Event Context Provider with the children inside
+ */
+function DesignSystemEventProvider(_ref2) {
+  let {
+    children,
+    callback
+  } = _ref2;
+  const contextValue = useMemo(() => {
+    return {
+      callback
+    };
+  }, [callback]);
+  return jsx(DesignSystemEventProviderContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+
+function getDefaultStyles(theme) {
+  let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDefaultBorderDefault,
+    color: theme.colors.actionDefaultTextDefault
+  };
+  return {
+    ...defaultStyles,
+    lineHeight: theme.typography.lineHeightBase,
+    textDecoration: 'none',
+    '&:hover': {
+      backgroundColor: theme.colors.actionDefaultBackgroundHover,
+      borderColor: theme.colors.actionDefaultBorderHover,
+      color: theme.colors.actionDefaultTextHover
+    },
+    '&:active': {
+      backgroundColor: loading ? theme.colors.actionDefaultBackgroundDefault : theme.colors.actionDefaultBackgroundPress,
+      borderColor: theme.colors.actionDefaultBorderPress,
+      color: theme.colors.actionDefaultTextPress
+    }
+  };
+}
+function getPrimaryStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault
+  };
+  return {
+    ...defaultStyles,
+    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$1(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: theme.colors.actionTertiaryBackgroundDefault,
+    color: theme.colors.actionTertiaryTextDefault
+  };
+  return {
+    ...defaultStyles,
+    '&: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',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getPrimaryDangerStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextHover
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextPress
+    },
+    '&:focus-visible': {
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
+    }
+  };
+}
+function getSecondaryDangerStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDangerDefaultBorderDefault,
+    color: theme.colors.actionDangerDefaultTextDefault
+  };
+  return {
+    ...defaultStyles,
+    '&: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 getDisabledDefaultStyles(theme, useNewShadows) {
+  const defaultStyles = {
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText
+    },
+    '&:active': {
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getDisabledPrimaryStyles(theme, useNewShadows) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDisabledBorder,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextDefault
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextDefault
+    }
+  };
+}
+function getDisabledErrorStyles(theme, useNewShadows) {
+  return getDisabledPrimaryStyles(theme, useNewShadows);
+}
+function getDisabledTertiaryStyles(theme, useNewShadows) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getDisabledSplitButtonStyles(theme, useNewShadows) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getDisabledPrimarySplitButtonStyles(theme, useNewShadows) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionPrimaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionPrimaryTextDefault
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionPrimaryTextDefault
+    }
+  };
+}
+
+const FormContext = /*#__PURE__*/React__default.createContext({
+  componentId: undefined,
+  isSubmitting: false,
+  formRef: undefined
+});
+const useFormContext = () => React__default.useContext(FormContext);
+/**
+ * Form is a wrapper around the form element that allows us to track the active element before the form is submitted.
+ * This is useful for analytics purposes to know what component was last focused when the form was sent for submission.
+ *
+ * NOTE: Form component cannot be nested.
+ */
+const Form = _ref => {
+  let {
+    children,
+    componentId,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnSubmit],
+    onSubmit,
+    shouldStartInteraction,
+    ...otherProps
+  } = _ref;
+  const formContext = useFormContext();
+  const formRef = useRef(null);
+  const eventRef = useRef(null);
+  if (formContext.componentId !== undefined) {
+    throw new Error('DuBois Form component cannot be nested');
+  }
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Form,
+    componentId,
+    analyticsEvents: memoizedAnalyticsEvents,
+    shouldStartInteraction
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const onSubmitHandler = useCallback(async e => {
+    try {
+      setIsSubmitting(true);
+      eventContext.onSubmit({
+        event: e,
+        initialState: undefined,
+        finalState: undefined,
+        referrerComponent: extractReferrerComponent()
+      });
+      await onSubmit(e);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [eventContext, onSubmit]);
+  const contextValue = useMemo(() => ({
+    componentId,
+    isSubmitting,
+    eventRef,
+    formRef
+  }), [componentId, isSubmitting]);
+  return jsx(FormContext.Provider, {
+    value: contextValue,
+    children: jsxs("form", {
+      onSubmit: onSubmitHandler,
+      ...otherProps,
+      ref: formRef,
+      ...eventContext.dataComponentProps,
+      children: [isSubmitting && jsx(LoadingState, {
+        description: componentId
+      }), children]
+    })
+  });
+};
+/**
+ * Form is a wrapper around the Form DuBois component to better integrate with React Hook Form and to track the active
+ * element before the form is submitted. This is useful for analytics purposes to know what component was last focused
+ * when the form was sent for submission, along with being able to pass in the initial and final values of the form.
+ *
+ * Internal implementation details:
+ * The form is wrapped in a Form component to share implementation details along with associating the HTML form
+ * submission event with interaction details. The Form component does not emit analytics events, but the RHF
+ * component will emit the events once the RHF lifecycle events occur so we can relay the form property values.
+ *
+ * NOTE: Form components cannot be nested.
+ */
+const RhfForm = _ref2 => {
+  let {
+    handleSubmit,
+    handleValid,
+    handleInvalid,
+    processFinalPropertyValues,
+    children,
+    componentId,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnSubmit],
+    shouldStartInteraction,
+    initialState,
+    ...otherProps
+  } = _ref2;
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Form,
+    componentId,
+    analyticsEvents: memoizedAnalyticsEvents,
+    shouldStartInteraction
+  });
+  const onValidWrapper = useCallback(async (data, e) => {
+    const refinedData = processFinalPropertyValues ? processFinalPropertyValues(data) : data;
+    eventContext.onSubmit({
+      event: e,
+      initialState,
+      finalState: refinedData,
+      referrerComponent: extractReferrerComponent()
+    });
+    await handleValid(refinedData, e);
+  }, [eventContext, initialState, handleValid, processFinalPropertyValues]);
+  const onInvalidWrapper = useCallback(async (errors, e) => {
+    eventContext.onSubmit({
+      event: e,
+      initialState,
+      finalState: undefined,
+      referrerComponent: extractReferrerComponent()
+    });
+    if (handleInvalid) {
+      await handleInvalid(errors, e);
+    }
+  }, [eventContext, initialState, handleInvalid]);
+  const onSubmitWrapper = useCallback(async e => {
+    await handleSubmit(onValidWrapper, onInvalidWrapper)(e);
+  }, [handleSubmit, onInvalidWrapper, onValidWrapper]);
+  return jsx(Form, {
+    componentId: componentId,
+    analyticsEvents: [] // Needed to disable events
+    ,
+    onSubmit: onSubmitWrapper,
+    ...otherProps,
+    children: children
+  });
+};
+function extractReferrerComponent() {
+  var _activeElement$datase;
+  const activeElement = document.activeElement;
+  const {
+    componentType,
+    componentId
+  } = (_activeElement$datase = activeElement === null || activeElement === void 0 ? void 0 : activeElement.dataset) !== null && _activeElement$datase !== void 0 ? _activeElement$datase : {};
+  if (componentType && componentId) {
+    return {
+      type: componentType,
+      id: componentId
+    };
+  }
+  return undefined;
+}
+
+const buttonStylesCache = new WeakMap();
+const getMemoizedButtonEmotionStyles = props => {
+  // Theme is a large object, so cache it by ref using a WeakMap,
+  // and then JSON.stringify() the rest of the props as the cache key.
+  const {
+    theme,
+    ...rest
+  } = props;
+  const themeCache = buttonStylesCache.get(theme) || new Map();
+  if (!buttonStylesCache.has(theme)) {
+    buttonStylesCache.set(theme, themeCache);
+  }
+  const cacheKey = JSON.stringify(rest);
+  const cachedStyles = themeCache.get(cacheKey);
+  if (cachedStyles) {
+    return cachedStyles;
+  }
+  const styles = getButtonEmotionStyles(props);
+  themeCache.set(cacheKey, styles);
+  return styles;
+};
+function getEndIconClsName(theme) {
+  return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
+}
+const getButtonEmotionStyles = _ref => {
+  let {
+    theme,
+    classNamePrefix,
+    loading,
+    withIcon,
+    onlyIcon,
+    isAnchor,
+    enableAnimation,
+    size,
+    type,
+    useFocusPseudoClass,
+    forceIconStyles,
+    danger,
+    useNewShadows,
+    useNewBorderRadii
+  } = _ref;
+  const clsIcon = `.${theme.general.iconfontCssPrefix}`;
+  const clsEndIcon = `.${getEndIconClsName(theme)}`;
+  const clsLoadingIcon = `.${classNamePrefix}-btn-loading-icon`;
+  const clsIconOnly = `.${classNamePrefix}-btn-icon-only`;
+  const classPrimary = `.${classNamePrefix}-btn-primary`;
+  const classLink = `.${classNamePrefix}-btn-link`;
+  const classDangerous = `.${classNamePrefix}-btn-dangerous`;
+  const SMALL_BUTTON_HEIGHT = 24;
+  const tertiaryColors = {
+    background: theme.colors.actionTertiaryBackgroundDefault,
+    color: theme.colors.actionTertiaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    }),
+    '&:hover': {
+      background: theme.colors.actionTertiaryBackgroundHover,
+      color: theme.colors.actionTertiaryTextHover
+    },
+    '&:active': {
+      background: theme.colors.actionTertiaryBackgroundPress,
+      color: theme.colors.actionTertiaryTextPress
+    }
+  };
+  const iconCss = {
+    fontSize: theme.general.iconFontSize,
+    lineHeight: 0,
+    ...(size === 'small' && {
+      lineHeight: theme.typography.lineHeightSm,
+      height: 16,
+      ...((onlyIcon || forceIconStyles) && {
+        fontSize: 16
+      })
+    })
+  };
+  const inactiveIconCss = {
+    color: theme.colors.textSecondary
+  };
+  const endIconCssSelector = `span > ${clsEndIcon} > ${clsIcon}`;
+  const styles = {
+    lineHeight: theme.typography.lineHeightBase,
+    boxShadow: useNewShadows ? theme.shadows.xs : 'none',
+    height: theme.general.heightSm,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'middle',
+    ...(useNewBorderRadii && {
+      borderRadius: theme.borders.borderRadiusSm
+    }),
+    ...(!onlyIcon && !forceIconStyles && {
+      '&&': {
+        padding: '4px 12px',
+        ...(size === 'small' && {
+          padding: '0 8px'
+        })
+      }
+    }),
+    ...((onlyIcon || forceIconStyles) && {
+      width: theme.general.heightSm
+    }),
+    ...(size === 'small' && {
+      height: SMALL_BUTTON_HEIGHT,
+      lineHeight: theme.typography.lineHeightBase,
+      ...((onlyIcon || forceIconStyles) && {
+        width: SMALL_BUTTON_HEIGHT,
+        paddingTop: 0,
+        paddingBottom: 0,
+        verticalAlign: 'middle'
+      })
+    }),
+    '&:focus-visible': {
+      outlineStyle: 'solid',
+      outlineWidth: '2px',
+      outlineOffset: '1px',
+      outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.actionDefaultBorderFocus
+    },
+    ...getDefaultStyles(theme, loading),
+    [`&${classPrimary}`]: {
+      ...getPrimaryStyles(theme)
+    },
+    [`&${classLink}`]: {
+      ...getLinkStyles$1(theme),
+      ...(type === 'link' && {
+        padding: 'unset',
+        height: 'auto',
+        border: 'none',
+        boxShadow: 'none',
+        '&[disabled],&:hover': {
+          background: 'none'
+        }
+      })
+    },
+    [`&${classDangerous}${classPrimary}`]: {
+      ...getPrimaryDangerStyles(theme)
+    },
+    [`&${classDangerous}`]: {
+      ...getSecondaryDangerStyles(theme)
+    },
+    [`&[disabled]`]: {
+      ...getDisabledDefaultStyles(theme, useNewShadows)
+    },
+    [`&${classLink}:disabled`]: {
+      ...getDisabledTertiaryStyles(theme, useNewShadows)
+    },
+    [`&${classDangerous}:disabled`]: {
+      ...getDisabledErrorStyles(theme, useNewShadows)
+    },
+    [`&${classPrimary}:disabled`]: {
+      ...getDisabledPrimaryStyles(theme, useNewShadows)
+    },
+    [`&[disabled], &${classDangerous}:disabled`]: {
+      ...(useNewShadows && {
+        boxShadow: 'none'
+      }),
+      ...((onlyIcon || forceIconStyles) && {
+        backgroundColor: 'transparent',
+        '&:hover': {
+          backgroundColor: 'transparent'
+        },
+        '&:active': {
+          backgroundColor: 'transparent'
+        }
+      })
+    },
+    [clsLoadingIcon]: {
+      display: 'none'
+    },
+    // Loading styles
+    ...(loading && {
+      '::before': {
+        opacity: 0
+      },
+      cursor: 'default',
+      [`${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'
+        }),
+        // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
+        svg: {
+          animationDuration: '1s !important'
+        }
+      },
+      [`& > ${clsLoadingIcon} .anticon`]: {
+        paddingRight: 0 // to horizontally center icon
+      },
+      [`> :not(${clsLoadingIcon})`]: {
+        // Hide all content except loading icon
+        opacity: 0,
+        visibility: 'hidden',
+        // Add horizontal space for icon
+        ...(withIcon && {
+          paddingLeft: theme.general.iconFontSize + theme.spacing.xs
+        })
+      }
+    }),
+    // Icon styles
+    [`> ${clsIcon} + span, > span + ${clsIcon}`]: {
+      marginRight: 0,
+      marginLeft: theme.spacing.xs
+    },
+    [`> ${clsIcon}`]: iconCss,
+    [`> ${endIconCssSelector}`]: {
+      ...iconCss,
+      marginLeft: size === 'small' ? theme.spacing.xs : theme.spacing.sm
+    },
+    ...(!type && !danger && {
+      [`&:enabled:not(:hover):not(:active) > ${clsIcon}`]: inactiveIconCss
+    }),
+    ...(!type && !danger && {
+      [`&:enabled:not(:hover):not(:active) > ${endIconCssSelector}`]: inactiveIconCss
+    }),
+    // Disable animations
+    [`&[${classNamePrefix}-click-animating-without-extra-node='true']::after`]: {
+      display: 'none'
+    },
+    [`&${clsIconOnly}`]: {
+      border: 'none',
+      ...(useNewShadows && {
+        boxShadow: 'none'
+      }),
+      [`&:enabled:not(${classLink})`]: {
+        ...tertiaryColors,
+        color: theme.colors.textSecondary,
+        '&:hover > .anticon': {
+          color: tertiaryColors['&:hover'].color,
+          ...(danger && {
+            color: theme.colors.actionDangerDefaultTextHover
+          })
+        },
+        '&:active > .anticon': {
+          color: tertiaryColors['&:active'].color,
+          ...(danger && {
+            color: theme.colors.actionDangerDefaultTextPress
+          })
+        },
+        ...(loading && {
+          '&&, &:hover, &:active': {
+            backgroundColor: 'transparent'
+          }
+        })
+      },
+      [`&:enabled:not(${classLink}) > .anticon`]: {
+        color: theme.colors.textSecondary,
+        ...(danger && {
+          color: theme.colors.actionDangerDefaultTextDefault
+        })
+      },
+      ...(isAnchor && {
+        lineHeight: `${theme.general.heightSm}px`,
+        ...getLinkStyles$1(theme),
+        '&:disabled': {
+          color: theme.colors.actionDisabledText
+        }
+      }),
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: 'transparent'
+        }
+      }),
+      '&[disabled]:hover': {
+        backgroundColor: 'transparent'
+      }
+    },
+    [`&:focus`]: {
+      ...(useFocusPseudoClass && {
+        outlineStyle: 'solid',
+        outlineWidth: '2px',
+        outlineOffset: '1px',
+        outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.actionDefaultBorderFocus
+      }),
+      [`${clsLoadingIcon}`]: {
+        ...(onlyIcon && {
+          // Mitigate wrong left offset for loading state with onlyIcon
+          left: 0
+        })
+      }
+    },
+    ...(forceIconStyles && {
+      padding: '0 6px',
+      lineHeight: theme.typography.lineHeightSm,
+      color: theme.colors.textSecondary,
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors.actionDefaultBorderDefault
+        },
+        '&[disabled], &[disabled]:hover, &[disabled]:active': {
+          backgroundColor: 'transparent',
+          borderColor: 'transparent'
+        }
+      }),
+      '& > span': {
+        verticalAlign: -1,
+        height: theme.general.heightSm / 2,
+        width: theme.general.heightSm / 2
+      },
+      [`& > ${clsLoadingIcon} .anticon`]: {
+        // left: `calc(50% - 6px)!important`,
+        height: theme.general.heightSm / 2,
+        width: theme.general.heightSm / 2,
+        padding: 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(${clsIconOnly})`]: tertiaryColors,
+      [`&${classLink}[disabled]`]: {
+        ...getDisabledTertiaryStyles(theme, useNewShadows)
+      }
+    })
+  };
+  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,
+      loading: loadingProp,
+      loadingDescription,
+      endIcon,
+      onClick,
+      dangerouslySetForceIconStyles,
+      dangerouslyUseFocusPseudoClass,
+      dangerouslyAppendWrapperCss,
+      componentId,
+      analyticsEvents,
+      shouldStartInteraction,
+      ...props
+    } = _ref2;
+    const emitOnView = safex('databricks.fe.observability.defaultButtonComponentView', true);
+    const formContext = useFormContext();
+    const {
+      theme,
+      classNamePrefix
+    } = useDesignSystemTheme();
+    const {
+      useNewShadows,
+      useNewBorderRadii
+    } = useDesignSystemSafexFlags();
+    const memoizedAnalyticsEvents = useMemo(() => analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : emitOnView ? [DesignSystemEventProviderAnalyticsEventTypes.OnClick, DesignSystemEventProviderAnalyticsEventTypes.OnView] : [DesignSystemEventProviderAnalyticsEventTypes.OnClick], [analyticsEvents, emitOnView]);
+    const eventContext = useDesignSystemEventComponentCallbacks({
+      componentType: DesignSystemEventProviderComponentTypes.Button,
+      componentId,
+      analyticsEvents: memoizedAnalyticsEvents,
+      shouldStartInteraction,
+      // If the button is a submit button and is part of a form, it is not the subject of the interaction, the form submission is
+      isInteractionSubject: !(props.htmlType === 'submit' && formContext.componentId)
+    });
+    const clsEndIcon = getEndIconClsName(theme);
+    const loadingCls = `${classNamePrefix}-btn-loading-icon`;
+    const {
+      elementRef: buttonRef
+    } = useNotifyOnFirstView({
+      onView: eventContext.onView
+    });
+    useImperativeHandle(ref, () => buttonRef.current);
+    const loading = loadingProp !== null && loadingProp !== void 0 ? loadingProp : props.htmlType === 'submit' && formContext.isSubmitting;
+
+    // Needed to keep backwards compatibility and support existing unit tests
+    useEffect(() => {
+      if (buttonRef.current) {
+        if (loading) {
+          buttonRef.current.setAttribute('loading', 'true');
+          buttonRef.current.classList.add(`${classNamePrefix}-btn-loading`);
+        } else {
+          buttonRef.current.setAttribute('loading', 'false');
+          buttonRef.current.classList.remove(`${classNamePrefix}-btn-loading`);
+        }
+      }
+    }, [loading, classNamePrefix, buttonRef]);
+    const iconOnly = Boolean((props.icon || endIcon) && !children);
+    const handleClick = useCallback(event => {
+      var _formContext$formRef;
+      if (loading) {
+        return;
+      }
+      eventContext.onClick(event);
+      if (props.htmlType === 'submit' && (_formContext$formRef = formContext.formRef) !== null && _formContext$formRef !== void 0 && _formContext$formRef.current) {
+        event.preventDefault();
+        formContext.formRef.current.requestSubmit();
+      }
+      onClick === null || onClick === void 0 || onClick(event);
+    }, [loading, props.htmlType, formContext.formRef, eventContext, onClick]);
+    const loadingSpinner = jsx(Spinner, {
+      className: loadingCls,
+      animationDuration: 8,
+      inheritColor: true,
+      label: "loading",
+      "aria-label": "loading",
+      loadingDescription: loadingDescription !== null && loadingDescription !== void 0 ? loadingDescription : componentId,
+      css: /*#__PURE__*/css({
+        color: 'inherit !important',
+        pointerEvents: 'none',
+        ...(!iconOnly && !dangerouslySetForceIconStyles && {
+          '.anticon': {
+            verticalAlign: '-0.2em'
+          }
+        }),
+        '[aria-hidden="true"]': {
+          display: 'inline'
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:loadingSpinner;")
+    });
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Button$1, {
+        ...addDebugOutlineIfEnabled(),
+        ...props,
+        css: getMemoizedButtonEmotionStyles({
+          theme,
+          classNamePrefix,
+          loading: Boolean(loading),
+          withIcon: Boolean(props.icon),
+          onlyIcon: iconOnly,
+          isAnchor: Boolean(props.href && !type),
+          danger: Boolean(props.danger),
+          enableAnimation: theme.options.enableAnimation,
+          size: size || 'middle',
+          type,
+          forceIconStyles: Boolean(dangerouslySetForceIconStyles),
+          useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass),
+          useNewShadows,
+          useNewBorderRadii
+        }),
+        href: props.disabled ? undefined : props.href,
+        ...dangerouslySetAntdProps,
+        onClick: handleClick,
+        icon: loading ? loadingSpinner : props.icon,
+        ref: buttonRef,
+        type: type === 'tertiary' ? 'link' : type,
+        ...eventContext.dataComponentProps,
+        children: children && jsxs("span", {
+          style: {
+            visibility: loading ? 'hidden' : 'visible',
+            display: 'inline-flex',
+            alignItems: 'center',
+            ...dangerouslyAppendWrapperCss
+          },
+          children: [children, endIcon && jsx("span", {
+            className: clsEndIcon,
+            style: {
+              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;
+})();
+
+const {
+  Text: AntDText$1
+} = Typography$1;
+function getTextEmotionStyles$1(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      display: 'block',
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm,
+      color: theme.colors.textSecondary,
+      ...(props.withoutMargins && {
+        '&&': {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      })
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Hint(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    bold,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDText$1, {
+      ...addDebugOutlineIfEnabled(),
+      ...props,
+      css: getTextEmotionStyles$1(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
+}
+
+const getLinkStyles = (theme, clsPrefix) => {
+  const classTypography = `.${clsPrefix}-typography`;
+  const styles = {
+    [`&${classTypography}, &${classTypography}:focus`]: {
+      color: theme.colors.actionTertiaryTextDefault
+    },
+    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
+      color: theme.colors.actionTertiaryTextHover,
+      textDecoration: 'underline'
+    },
+    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
+      color: theme.colors.actionTertiaryTextPress,
+      textDecoration: 'underline'
+    },
+    [`&${classTypography}:focus-visible`]: {
+      textDecoration: 'underline'
+    },
+    '.anticon': {
+      fontSize: 12,
+      verticalAlign: 'baseline'
+    },
+    // manually update color for link within a LegacyTooltip since tooltip always has an inverted background color for light/dark mode
+    // this is required for accessibility compliance
+    [`.${clsPrefix}-tooltip-inner a&${classTypography}`]: {
+      [`&, :focus`]: {
+        color: theme.colors.blue500,
+        '.anticon': {
+          color: theme.colors.blue500
+        }
+      },
+      ':active': {
+        color: theme.colors.blue500,
+        '.anticon': {
+          color: theme.colors.blue500
+        }
+      },
+      ':hover': {
+        color: theme.colors.blue400,
+        '.anticon': {
+          color: theme.colors.blue400
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
+};
+const getEllipsisNewTabLinkStyles = () => {
+  const styles = {
+    paddingRight: 'calc(2px + 1em)',
+    // 1em for icon
+    position: 'relative'
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
+};
+const getIconStyles = theme => {
+  const styles = {
+    marginLeft: 4,
+    color: theme.colors.actionTertiaryTextDefault,
+    position: 'relative',
+    top: '1px'
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
+};
+const getEllipsisIconStyles = useNewIcons => {
+  const styles = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+    ...(useNewIcons)
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
+};
+const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
+  let {
+    dangerouslySetAntdProps,
+    componentId,
+    analyticsEvents,
+    onClick,
+    ...props
+  } = _ref;
+  const emitOnView = safex('databricks.fe.observability.defaultComponentView.typographyLink', false);
+  const {
+    children,
+    openInNewTab,
+    ...restProps
+  } = props;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : emitOnView ? [DesignSystemEventProviderAnalyticsEventTypes.OnClick, DesignSystemEventProviderAnalyticsEventTypes.OnView] : [DesignSystemEventProviderAnalyticsEventTypes.OnClick], [analyticsEvents, emitOnView]);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.TypographyLink,
+    componentId,
+    analyticsEvents: memoizedAnalyticsEvents,
+    shouldStartInteraction: false
+  });
+  const {
+    elementRef: linkRef
+  } = useNotifyOnFirstView({
+    onView: eventContext.onView
+  });
+  const mergedRef = useMergeRefs([ref, linkRef]);
+  const onClickHandler = useCallback(e => {
+    eventContext.onClick(e);
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [eventContext, onClick]);
+  const newTabProps = {
+    rel: 'noopener noreferrer',
+    target: '_blank'
+  };
+  const linkProps = openInNewTab ? {
+    ...restProps,
+    ...newTabProps
+  } : {
+    ...restProps
+  };
+  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix);
+  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsxs(Typography$1.Link, {
+      ...addDebugOutlineIfEnabled(),
+      "aria-disabled": linkProps.disabled,
+      css: linkStyles,
+      ref: mergedRef,
+      onClick: onClickHandler,
+      ...linkProps,
+      ...dangerouslySetAntdProps,
+      ...eventContext.dataComponentProps,
+      children: [children, openInNewTab ? jsx(NewWindowIcon, {
+        css: iconStyles,
+        ...newTabProps
+      }) : null]
+    })
+  });
+});
+
+const {
+  Paragraph: AntDParagraph
+} = Typography$1;
+function getParagraphEmotionStyles(theme, clsPrefix, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    },
+    '& .anticon': {
+      verticalAlign: 'text-bottom'
+    },
+    [`& .${clsPrefix}-btn-link`]: {
+      verticalAlign: 'baseline !important'
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
+}
+function Paragraph(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDParagraph, {
+      ...addDebugOutlineIfEnabled(),
+      ...props,
+      className: props.className,
+      css: getParagraphEmotionStyles(theme, classNamePrefix, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
+}
+
+const {
+  Text: AntDText
+} = Typography$1;
+function getTextEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.hint && {
+    '&&': {
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm
+    }
+  }, props.bold && {
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyBoldFontWeight,
+      lineHeight: theme.typography.lineHeightBase
+    }
+  }, props.code && {
+    '&& > code': {
+      color: theme.colors.textPrimary,
+      fontSize: theme.typography.fontSizeBase,
+      lineHeight: theme.typography.lineHeightBase,
+      background: theme.colors.typographyCodeBg,
+      fontFamily: 'monospace',
+      borderRadius: theme.borders.borderRadiusSm,
+      padding: '2px 4px',
+      border: 'unset',
+      margin: 0
+    }
+  }, props.size && {
+    '&&': (() => {
+      switch (props.size) {
+        case 'xxl':
+          return {
+            fontSize: theme.typography.fontSizeXxl,
+            lineHeight: theme.typography.lineHeightXxl,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightXxl,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'xl':
+          return {
+            fontSize: theme.typography.fontSizeXl,
+            lineHeight: theme.typography.lineHeightXl,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightXl,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'lg':
+          return {
+            fontSize: theme.typography.fontSizeLg,
+            lineHeight: theme.typography.lineHeightLg,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightLg,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'sm':
+          return {
+            fontSize: theme.typography.fontSizeSm,
+            lineHeight: theme.typography.lineHeightSm,
+            '& .anticon': {
+              verticalAlign: '-0.219em'
+            }
+          };
+        default:
+          return {};
+      }
+    })()
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Text(userProps) {
+  // Omit props that are not supported by `antd`
+  const {
+    dangerouslySetAntdProps,
+    bold,
+    hint,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDText, {
+      ...addDebugOutlineIfEnabled(),
+      ...props,
+      className: props.className,
+      css: getTextEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
+}
+
+const MiddleElideSuffixLength = 6;
+function TextMiddleElide(_ref) {
+  var _process, _textProps$title;
+  let {
+    text,
+    suffixLength = MiddleElideSuffixLength,
+    ...textProps
+  } = _ref;
+  const id = useMemo(() => _uniqueId('text-middle-elided-'), []);
+  const {
+    start,
+    suffix
+  } = getStartAndSuffix(text, suffixLength);
+  const disableElide = ((_process = process) === null || _process === void 0 || (_process = _process.env) === null || _process === void 0 ? void 0 : _process.NODE_ENV) === 'test'; // so unit tests play nice
+
+  // use the entire text on select and copy
+  useEffect(() => {
+    var _document$querySelect;
+    const clipboardCopyHandler = e => {
+      var _e$clipboardData;
+      e === null || e === void 0 || e.preventDefault();
+      e === null || e === void 0 || (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 || _e$clipboardData.setData('text/plain', text);
+    };
+    const selector = `.${id}`;
+    (_document$querySelect = document.querySelector(selector)) === null || _document$querySelect === void 0 || _document$querySelect.addEventListener('copy', clipboardCopyHandler);
+    return () => {
+      var _document$querySelect2;
+      (_document$querySelect2 = document.querySelector(selector)) === null || _document$querySelect2 === void 0 || _document$querySelect2.removeEventListener('copy', clipboardCopyHandler);
+    };
+  }, [id, text]);
+  return jsx(Text, {
+    ellipsis: disableElide ? undefined : {
+      suffix
+    },
+    ...textProps,
+    "aria-label": text,
+    title: (_textProps$title = textProps.title) !== null && _textProps$title !== void 0 ? _textProps$title : text,
+    className: id,
+    children: disableElide ? text : start
+  });
+}
+
+// Exported for unit tests
+function getStartAndSuffix(text, suffixLength) {
+  if (text.length <= suffixLength) {
+    return {
+      start: text,
+      suffix: undefined
+    };
+  }
+  const start = text.slice(0, text.length - suffixLength).trim();
+  const suffix = text.slice(-suffixLength).trim();
+  return {
+    start,
+    suffix
+  };
+}
+
+const {
+  Title: AntDTitle
+} = Typography$1;
+function getLevelStyles(theme, props) {
+  switch (props.level) {
+    case 1:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXxl,
+          lineHeight: theme.typography.lineHeightXxl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXxl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 2:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXl,
+          lineHeight: theme.typography.lineHeightXl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 3:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeLg,
+          lineHeight: theme.typography.lineHeightLg,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightLg
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 4:
+    default:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeMd,
+          lineHeight: theme.typography.lineHeightMd,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightMd
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+  }
+}
+function getTitleEmotionStyles(theme, props) {
+  return /*#__PURE__*/css(getLevelStyles(theme, props), {
+    '&&': {
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    },
+    '& > .anticon': {
+      verticalAlign: 'middle'
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: '0 !important',
+      // override general styling
+      marginBottom: '0 !important' // override general styling
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
+}
+function Title(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
+    elementLevel,
+    ...props
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDTitle, {
+      ...addDebugOutlineIfEnabled(),
+      ...props,
+      level: elementLevel !== null && elementLevel !== void 0 ? elementLevel : props.level,
+      className: props.className,
+      css: getTitleEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
+}
+
+const Truncate = _ref => {
+  let {
+    children,
+    lines = 1,
+    ...props
+  } = _ref;
+  const [textContent, setTextContent] = useState('');
+  const spanRef = useRef(null);
+
+  // This ensures that truncated text is always available to the user via a native tooltip
+  useEffect(() => {
+    if (spanRef.current) {
+      setTextContent(spanRef.current.textContent || '');
+    }
+  }, [spanRef, children]);
+  return jsx("span", {
+    ref: spanRef,
+    title: textContent,
+    css: /*#__PURE__*/css({
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'normal',
+      wordBreak: 'break-word',
+      display: '-webkit-box',
+      webkitLineClamp: lines,
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: lines
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Truncate;"),
+    ...props,
+    children: children
+  });
+};
+
+const Typography = /* #__PURE__ */(() => {
+  function Typography(_ref) {
+    let {
+      dangerouslySetAntdProps,
+      ...props
+    } = _ref;
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Typography$1, {
+        ...addDebugOutlineIfEnabled(),
+        ...props,
+        ...dangerouslySetAntdProps
+      })
+    });
+  }
+  Typography.Text = Text;
+  Typography.Title = Title;
+  Typography.Paragraph = Paragraph;
+  Typography.Link = Link;
+  Typography.Hint = Hint;
+  Typography.Truncate = Truncate;
+  Typography.TextMiddleElide = TextMiddleElide;
+  return Typography;
+})();
+
+const Anchor = Popover$1.Anchor; // Behavioral component only
+
+const Root = _ref => {
+  let {
+    children,
+    onOpenChange,
+    componentId,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnView],
+    ...props
+  } = _ref;
+  const firstView = useRef(true);
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Popover,
+    componentId: componentId !== null && componentId !== void 0 ? componentId : 'design_system.popover',
+    analyticsEvents: memoizedAnalyticsEvents
+  });
+  useEffect(() => {
+    if (props.open && firstView.current) {
+      eventContext.onView();
+      firstView.current = false;
+    }
+  }, [eventContext, props.open]);
+  const onOpenChangeHandler = useCallback(open => {
+    if (open && firstView.current) {
+      eventContext.onView();
+      firstView.current = false;
+    }
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
+  }, [eventContext, onOpenChange]);
+  return jsx(Popover$1.Root, {
+    ...props,
+    onOpenChange: onOpenChangeHandler,
+    children: jsx(ComponentFinderContext.Provider, {
+      value: {
+        dataComponentProps: eventContext.dataComponentProps
+      },
+      children: children
+    })
+  });
+};
+const Content = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
+  let {
+    children,
+    minWidth = 220,
+    maxWidth,
+    ...props
+  } = _ref2;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    useNewShadows
+  } = useDesignSystemSafexFlags();
+  const dataComponentProps = useComponentFinderContext(DesignSystemEventProviderComponentTypes.Popover);
+  return jsx(Popover$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(Popover$1.Content, {
+      ...addDebugOutlineIfEnabled(),
+      ref: ref,
+      css: [contentStyles(theme, useNewShadows), {
+        minWidth,
+        maxWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      sideOffset: 4,
+      "aria-label": "Popover content",
+      ...props,
+      ...dataComponentProps,
+      children: children
+    })
+  });
+});
+const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return jsx(Popover$1.Trigger, {
+    ...addDebugOutlineIfEnabled(),
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Close = /*#__PURE__*/forwardRef(function Close(_ref4, ref) {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  return jsx(Popover$1.Close, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref5, ref) {
+  let {
+    children,
+    ...props
+  } = _ref5;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(Popover$1.Arrow, {
+    css: /*#__PURE__*/css({
+      fill: theme.colors.backgroundPrimary,
+      stroke: theme.colors.borderDecorative,
+      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
+      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
+      strokeWidth: CONSTANTS.arrowStrokeWidth(),
+      // TODO: This is a temporary fix for the alignment of the Arrow;
+      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
+      // which has new behaviors for alignment that we don't want. Generally
+      // we need to fix the arrow to always be aligned to the left of the menu (with
+      // offset equal to border radius)
+      position: 'relative',
+      top: -1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
+    ref: ref,
+    width: 12,
+    height: 6,
+    ...props,
+    children: children
+  });
+});
+
+// CONSTANTS
+const CONSTANTS = {
+  arrowBottomLength() {
+    // The built in arrow is a polygon: 0,0 30,0 15,10
+    return 30;
+  },
+  arrowHeight() {
+    return 10;
+  },
+  arrowSide() {
+    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
+  },
+  arrowStrokeWidth() {
+    // This is eyeballed b/c relative to the svg viewbox coordinate system
+    return 2;
+  }
+};
+const popoverContentStyles = (theme, useNewShadows) => ({
+  backgroundColor: theme.colors.backgroundPrimary,
+  color: theme.colors.textPrimary,
+  lineHeight: theme.typography.lineHeightBase,
+  border: `1px solid ${theme.colors.borderDecorative}`,
+  borderRadius: theme.borders.borderRadiusSm,
+  padding: `${theme.spacing.sm}px`,
+  boxShadow: useNewShadows ? theme.shadows.lg : theme.general.shadowLow,
+  zIndex: theme.options.zIndexBase + 30,
+  ...getDarkModePortalStyles(theme, useNewShadows),
+  a: importantify({
+    color: theme.colors.actionTertiaryTextDefault,
+    '&:hover, &:focus': {
+      color: theme.colors.actionTertiaryTextHover
+    }
+  }),
+  '&:focus-visible': {
+    outlineStyle: 'solid',
+    outlineWidth: '2px',
+    outlineOffset: '1px',
+    outlineColor: theme.colors.actionDefaultBorderFocus
+  }
+});
+const contentStyles = (theme, useNewShadows) => ({
+  ...popoverContentStyles(theme, useNewShadows)
+});
+
+var Popover = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Anchor: Anchor,
+  Arrow: Arrow,
+  Close: Close,
+  Content: Content,
+  Root: Root,
+  Trigger: Trigger
+});
+
+function Stepper(_ref) {
+  let {
+    direction: requestedDirection,
+    currentStepIndex: currentStep,
+    steps,
+    localizeStepNumber,
+    responsive = true,
+    onStepClicked
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const ref = useRef(null);
+  const {
+    direction
+  } = useResponsiveDirection({
+    ref,
+    requestedDirection,
+    responsive,
+    enabled: steps.length > 0
+  });
+  if (steps.length === 0) {
+    return null;
+  }
+  const isHorizontal = direction === 'horizontal';
+  const currentStepIndex = currentStep ? Math.min(steps.length - 1, Math.max(0, currentStep)) : 0;
+  return jsx("ol", {
+    ...addDebugOutlineIfEnabled(),
+    css: /*#__PURE__*/css(getStepsStyle(theme, isHorizontal), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+    ref: ref,
+    children: steps.map((step, index) => {
+      const isCurrentStep = index === currentStepIndex;
+      const isLastStep = index === steps.length - 1;
+      const displayEndingDivider = !isLastStep;
+      const contentTitleLevel = 4;
+      const StepIcon = step.icon;
+      const clickEnabled = step.clickEnabled && onStepClicked;
+      const {
+        icon,
+        iconBackgroundColor,
+        iconTextColor,
+        titleTextColor,
+        titleAsParagraph,
+        descriptionTextColor,
+        hasStepItemIconBorder,
+        stepItemIconBorderColor
+      } = getStepContentStyleFields(theme, isCurrentStep, step.status, StepIcon, step.additionalVerticalContent);
+      return jsx("li", {
+        "aria-current": isCurrentStep,
+        css: /*#__PURE__*/css(getStepItemStyle(theme, isHorizontal, isLastStep), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+        ...(step.status === 'error' && {
+          'data-error': true
+        }),
+        ...(step.status === 'loading' && {
+          'data-loading': true
+        }),
+        children: jsxs(StepContentGrid, {
+          isHorizontal: isHorizontal,
+          children: [jsx("div", {
+            css: /*#__PURE__*/css(getStepItemIconParentStyle(theme, iconBackgroundColor, hasStepItemIconBorder, stepItemIconBorderColor, Boolean(clickEnabled)), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+            onClick: clickEnabled ? () => onStepClicked(index) : undefined,
+            children: StepIcon ? jsx(StepIcon, {
+              statusColor: iconTextColor,
+              status: step.status
+            }) : icon ? jsx("span", {
+              css: /*#__PURE__*/css({
+                color: iconTextColor,
+                display: 'flex'
+              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+              children: icon
+            }) : jsx(Typography.Title, {
+              level: contentTitleLevel,
+              css: /*#__PURE__*/css({
+                color: `${iconTextColor} !important`
+              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+              withoutMargins: true,
+              children: localizeStepNumber(index + 1)
+            })
+          }), jsx("span", {
+            onClick: clickEnabled ? () => onStepClicked(index) : undefined,
+            onKeyDown: event => {
+              if (event.key === 'Enter' && clickEnabled) {
+                onStepClicked(index);
+              }
+            },
+            css: /*#__PURE__*/css({
+              cursor: clickEnabled ? 'pointer' : undefined
+            }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+            tabIndex: clickEnabled ? 0 : undefined,
+            role: clickEnabled ? 'button' : undefined,
+            children: titleAsParagraph ? jsx(Typography.Text, {
+              withoutMargins: true,
+              css: /*#__PURE__*/css({
+                flexShrink: 0,
+                color: `${titleTextColor} !important`
+              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+              children: step.title
+            }) : jsx(Typography.Title, {
+              level: 4,
+              withoutMargins: true,
+              css: /*#__PURE__*/css({
+                flexShrink: 0,
+                color: `${titleTextColor} !important`
+              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+              children: step.title
+            })
+          }), displayEndingDivider && jsx("div", {
+            css: /*#__PURE__*/css(getStepEndingDividerStyles(theme, isHorizontal, step.status === 'completed'), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;")
+          }), (step.description || step.additionalVerticalContent && !isHorizontal) && jsxs("div", {
+            css: /*#__PURE__*/css(getStepDescriptionStyles(theme, isHorizontal, isLastStep, descriptionTextColor), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+            children: [step.description && jsx(Typography.Text, {
+              css: /*#__PURE__*/css(getStepDescriptionTextStyles(descriptionTextColor), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+              withoutMargins: true,
+              size: "sm",
+              children: step.description
+            }), step.additionalVerticalContent && !isHorizontal && jsx("div", {
+              css: /*#__PURE__*/css(getAdditionalVerticalStepContentStyles(theme, Boolean(step.description)), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+              children: step.additionalVerticalContent
+            })]
+          })]
+        })
+      }, index);
+    })
+  });
+}
+function getStepsStyle(theme, isHorizontal) {
+  return /*#__PURE__*/css({
+    listStyle: 'none',
+    display: 'flex',
+    flexDirection: isHorizontal ? 'row' : 'column',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    gap: isHorizontal ? theme.spacing.sm : theme.spacing.xs,
+    width: '100%',
+    margin: '0',
+    padding: '0'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepsStyle;");
+}
+function getStepItemStyle(theme, isHorizontal, isLastStep) {
+  return /*#__PURE__*/css({
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flexGrow: isLastStep ? 0 : 1,
+    marginRight: isLastStep && isHorizontal ? theme.spacing.lg + theme.spacing.md : 0,
+    width: isHorizontal ? undefined : '100%'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemStyle;");
+}
+function getStepContentStyleFields(theme, isCurrentStep, status, icon, additionalVerticalContent) {
+  const fields = getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status, !_isUndefined(additionalVerticalContent));
+  if (icon) {
+    return {
+      ...fields,
+      icon: undefined,
+      iconBackgroundColor: undefined,
+      iconTextColor: getCustomIconColor(theme, isCurrentStep, status),
+      hasStepItemIconBorder: false
+    };
+  }
+  return fields;
+}
+function getCustomIconColor(theme, isCurrentStep, status) {
+  switch (status) {
+    case 'completed':
+      return theme.colors.actionLinkDefault;
+    case 'loading':
+      return theme.colors.textPlaceholder;
+    case 'error':
+      return theme.colors.textValidationDanger;
+    case 'warning':
+      return theme.colors.textValidationWarning;
+    default:
+    case 'upcoming':
+      return isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.textPlaceholder;
+  }
+}
+function getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status, hasAdditionalVerticalContent) {
+  switch (status) {
+    case 'completed':
+      return {
+        icon: jsx(CheckIcon, {}),
+        iconBackgroundColor: isCurrentStep ? theme.colors.actionLinkDefault : theme.isDarkMode ? theme.colors.blue800 : theme.colors.blue100,
+        iconTextColor: isCurrentStep ? theme.colors.white : theme.colors.actionLinkDefault,
+        titleAsParagraph: false,
+        titleTextColor: theme.colors.actionLinkDefault,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: true,
+        stepItemIconBorderColor: theme.colors.actionDefaultBackgroundPress
+      };
+    case 'loading':
+      return {
+        icon: jsx(LoadingIcon, {
+          spin: true,
+          css: /*#__PURE__*/css({
+            fontSize: isCurrentStep ? theme.typography.fontSizeXl : theme.typography.fontSizeLg
+          }, process.env.NODE_ENV === "production" ? "" : ";label:icon;")
+        }),
+        iconBackgroundColor: undefined,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleAsParagraph: false,
+        titleTextColor: isCurrentStep ? theme.colors.textPrimary : theme.colors.textSecondary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: false
+      };
+    case 'error':
+      return {
+        icon: jsx(DangerIcon, {}),
+        iconBackgroundColor: isCurrentStep ? theme.colors.textValidationDanger : theme.colors.backgroundDanger,
+        iconTextColor: isCurrentStep ? theme.colors.white : theme.colors.textValidationDanger,
+        titleAsParagraph: false,
+        titleTextColor: theme.colors.textValidationDanger,
+        descriptionTextColor: theme.colors.textValidationDanger,
+        hasStepItemIconBorder: true,
+        stepItemIconBorderColor: theme.colors.borderDanger
+      };
+    case 'warning':
+      return {
+        icon: jsx(WarningIcon, {}),
+        iconBackgroundColor: isCurrentStep ? theme.colors.textValidationWarning : theme.colors.backgroundWarning,
+        iconTextColor: isCurrentStep ? theme.colors.white : theme.colors.textValidationWarning,
+        titleAsParagraph: false,
+        titleTextColor: theme.colors.textValidationWarning,
+        descriptionTextColor: theme.colors.textValidationWarning,
+        hasStepItemIconBorder: true,
+        stepItemIconBorderColor: theme.colors.borderWarning
+      };
+    default:
+    case 'upcoming':
+      if (isCurrentStep) {
+        return {
+          icon: undefined,
+          iconBackgroundColor: theme.colors.actionLinkDefault,
+          iconTextColor: 'white',
+          titleAsParagraph: false,
+          titleTextColor: theme.colors.actionLinkDefault,
+          descriptionTextColor: hasAdditionalVerticalContent ? theme.colors.textSecondary : theme.colors.textPrimary,
+          hasStepItemIconBorder: false
+        };
+      }
+      return {
+        icon: undefined,
+        iconBackgroundColor: undefined,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleAsParagraph: true,
+        titleTextColor: theme.colors.textSecondary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: true,
+        stepItemIconBorderColor: theme.colors.border
+      };
+  }
+}
+const MaxHorizontalStepDescriptionWidth = 140;
+const StepIconSize = DEFAULT_SPACING_UNIT * 4;
+function getStepItemIconParentStyle(theme, iconBackgroundColor, hasStepItemIconBorder, stepItemIconBorderColor, clickEnabled) {
+  return /*#__PURE__*/css({
+    width: StepIconSize,
+    height: StepIconSize,
+    backgroundColor: iconBackgroundColor,
+    borderRadius: theme.borders.borderRadiusFull,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '20px',
+    flexShrink: 0,
+    border: hasStepItemIconBorder ? `1px solid ${stepItemIconBorderColor !== null && stepItemIconBorderColor !== void 0 ? stepItemIconBorderColor : theme.colors.textPlaceholder}` : undefined,
+    boxSizing: 'border-box',
+    cursor: clickEnabled ? 'pointer' : undefined
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemIconParentStyle;");
+}
+function getStepEndingDividerStyles(theme, isHorizontal, isCompleted) {
+  const backgroundColor = isCompleted ? theme.colors.actionLinkDefault : theme.colors.border;
+  if (isHorizontal) {
+    return /*#__PURE__*/css({
+      backgroundColor,
+      height: '1px',
+      width: '100%',
+      minWidth: theme.spacing.md
+    }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
+  }
+  return /*#__PURE__*/css({
+    backgroundColor,
+    height: '100%',
+    minHeight: theme.spacing.lg,
+    width: '1px',
+    alignSelf: 'flex-start',
+    marginLeft: theme.spacing.md
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
+}
+function getStepDescriptionStyles(theme, isHorizontal, isLastStep, textColor) {
+  return /*#__PURE__*/css({
+    alignSelf: 'flex-start',
+    width: '100%',
+    gridColumn: isHorizontal || isLastStep ? '2 / span 2' : undefined,
+    maxWidth: isHorizontal ? MaxHorizontalStepDescriptionWidth : undefined,
+    paddingBottom: isHorizontal ? undefined : theme.spacing.sm,
+    color: `${textColor} !important`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepDescriptionStyles;");
+}
+function getStepDescriptionTextStyles(textColor) {
+  return /*#__PURE__*/css({
+    color: `${textColor} !important`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepDescriptionTextStyles;");
+}
+function getAdditionalVerticalStepContentStyles(theme, addTopPadding) {
+  return /*#__PURE__*/css({
+    paddingTop: addTopPadding ? theme.spacing.sm : 0
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getAdditionalVerticalStepContentStyles;");
+}
+function StepContentGrid(_ref2) {
+  let {
+    children,
+    isHorizontal
+  } = _ref2;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  if (isHorizontal) {
+    return jsx("div", {
+      css: /*#__PURE__*/css({
+        display: 'grid',
+        gridTemplateColumns: `${StepIconSize}px fit-content(100%) 1fr`,
+        gridTemplateRows: `${StepIconSize}px auto`,
+        alignItems: 'center',
+        justifyItems: 'flex-start',
+        gridColumnGap: theme.spacing.sm,
+        width: '100%'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
+      children: children
+    });
+  }
+  return jsx("div", {
+    css: /*#__PURE__*/css({
+      display: 'grid',
+      gridTemplateColumns: `${StepIconSize}px minmax(0, 1fr)`,
+      alignItems: 'center',
+      justifyItems: 'flex-start',
+      gridColumnGap: theme.spacing.sm,
+      gridRowGap: theme.spacing.xs,
+      width: '100%',
+      '& > :first-child': {
+        // horizontally center the first column (circle/icon)
+        justifySelf: 'center'
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
+    children: children
+  });
+}
+
+// Ant design uses the same value for their stepper and to works well for us as well.
+const MinimumHorizonalDirectionWidth = 532;
+
+// exported for unit test
+function useResponsiveDirection(_ref3) {
+  let {
+    requestedDirection = 'horizontal',
+    responsive,
+    enabled,
+    ref
+  } = _ref3;
+  const [direction, setDirection] = useState(requestedDirection);
+  useEffect(() => {
+    if (requestedDirection === 'vertical' || !enabled || !responsive || !ref.current) {
+      return;
+    }
+    let timeoutId;
+    const resizeObserver = new ResizeObserver(entries => {
+      timeoutId = requestAnimationFrame(() => {
+        if (entries.length === 1) {
+          const width = entries[0].target.clientWidth || 0;
+          setDirection(width < MinimumHorizonalDirectionWidth ? 'vertical' : 'horizontal');
+        }
+      });
+    });
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+      cancelAnimationFrame(timeoutId);
+    };
+  }, [requestedDirection, enabled, ref, responsive]);
+  return {
+    direction
+  };
+}
+
+export { getContentOptions as $, getDarkModePortalStyles as A, Button as B, CloseIcon as C, DesignSystemAntDConfigProvider as D, getShadowScrollStyles as E, Form as F, useDesignSystemContext as G, Spinner as H, Icon as I, useUniqueId as J, Arrow as K, LoadingState as L, visuallyHidden as M, CheckIcon as N, ComponentFinderContext as O, getComboboxContentWrapperStyles as P, getFooterStyles as Q, Root as R, Stepper as S, Typography as T, highlightFirstNonDisabledOption as U, getInfoIconStyles as V, WarningIcon as W, getKeyboardNavigationFunctions as X, dialogComboboxLookAheadKeyDown as Y, getCheckboxStyles as Z, getDialogComboboxOptionLabelWidth as _, useDesignSystemSafexFlags as a, findHighlightedOption as a0, highlightOption as a1, findClosestOptionSibling as a2, getComboboxOptionLabelStyles as a3, getSelectItemWithHintColumnStyles as a4, getHintColumnStyles as a5, useComponentFinderContext as a6, ApplyDesignSystemContextOverrides as a7, LoadingIcon as a8, Title as a9, ColorVars as aA, AccessibleContainer as aa, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as ab, getDefaultStyles as ac, getPrimaryStyles as ad, getDisabledSplitButtonStyles as ae, getDisabledPrimarySplitButtonStyles as af, getMemoizedButtonEmotionStyles as ag, getButtonEmotionStyles as ah, DesignSystemEventProviderComponentSubTypes as ai, DesignSystemEventProvider as aj, useDesignSystemEventSuppressInteractionContext as ak, DesignSystemThemeContext as al, DesignSystemContext as am, DesignSystemThemeProvider as an, DesignSystemProvider as ao, ApplyDesignSystemFlags as ap, useAntDConfigProviderContext as aq, isOptionDisabled as ar, resetTabIndexToFocusedElement as as, WithDesignSystemThemeHoc as at, NewWindowIcon as au, LoadingStateContext as av, Popover as aw, getTypographyColor as ax, getBottomOnlyShadowScrollStyles as ay, getVirtualizedComboboxMenuItemStyles as az, addDebugOutlineIfEnabled as b, getAnimationCss as c, DesignSystemEventProviderAnalyticsEventTypes as d, useFormContext as e, useDesignSystemEventComponentCallbacks as f, getValidationStateColor as g, DesignSystemEventProviderComponentTypes as h, importantify as i, DangerIcon as j, DesignSystemEventProviderComponentSubTypeMap as k, useNotifyOnFirstView as l, Trigger as m, Content as n, ChevronLeftIcon as o, primitiveColors as p, ChevronRightIcon as q, getComboboxOptionItemWrapperStyles as r, RhfForm as s, DesignSystemEventSuppressInteractionProviderContext as t, useDesignSystemTheme as u, DesignSystemEventSuppressInteractionTrueContextValue as v, safex as w, augmentWithDataComponentProps as x, RestoreAntDDefaultClsPrefix as y, addDebugOutlineStylesIfEnabled as z };
+//# sourceMappingURL=Stepper-BevE-qWg.js.map