@databricks/design-system 1.12.20 → 1.12.21

package/dist/Popover-CrX63HDP.js

@@ -0,0 +1,3831 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import React__default, { createContext, useContext, useMemo, useEffect, useState, forwardRef, useRef, useLayoutEffect, useCallback, useImperativeHandle } from 'react';
+import { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
+import { notification, ConfigProvider, Button as Button$1, Typography as Typography$1 } from 'antd';
+import { useMergeRefs } from '@floating-ui/react';
+import AntDIcon from '@ant-design/icons';
+import _, { memoize, uniqueId as uniqueId$1 } from 'lodash';
+import * as Popover$1 from '@radix-ui/react-popover';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import unitless from '@emotion/unitless';
+
+/**
+ * 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'
+    }
+};
+
+// 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 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 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)',
+    tagHover: 'rgba(138, 202, 255, 0.0800)',
+    tagIconBrown: '#DAB594',
+    tagIconCharcoal: primitiveColors.grey650,
+    tagIconCoral: '#FF859D',
+    tagIconDefault: primitiveColors.grey350,
+    tagIconHover: primitiveColors.grey350,
+    tagIconIndigo: '#99A2FF',
+    tagIconLemon: '#FFCD4D',
+    tagIconLime: '#70D083',
+    tagIconPink: '#F986C9',
+    tagIconPress: primitiveColors.grey350,
+    tagIconPurple: '#B399FF',
+    tagIconTeal: '#0AD8B6',
+    tagIconTurquoise: '#1FD0F3',
+    tagInverse: primitiveColors.grey800,
+    tagPress: 'rgba(138, 202, 255, 0.1600)',
+    tagTextBrown: '#F2E1CA',
+    tagTextCharcoal: primitiveColors.grey800,
+    tagTextCoral: '#FED2E1',
+    tagTextDefault: primitiveColors.grey100,
+    tagTextIndigo: '#DDDFFE',
+    tagTextLemon: '#FFE7B3',
+    tagTextLime: '#C2F0C2',
+    tagTextPink: '#FDD1EA',
+    tagTextPurple: '#E2DDFE',
+    tagTextTeal: '#ADF0DD',
+    tagTextTurquoise: '#B6ECF7'
+};
+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)',
+    tagHover: 'rgba(34, 114, 180, 0.0800)',
+    tagIconBrown: '#815E46',
+    tagIconCharcoal: primitiveColors.grey350,
+    tagIconCoral: '#CA244E',
+    tagIconDefault: primitiveColors.grey600,
+    tagIconHover: primitiveColors.grey600,
+    tagIconIndigo: '#3451B2',
+    tagIconLemon: '#915830',
+    tagIconLime: '#227534',
+    tagIconPink: '#C41C87',
+    tagIconPress: primitiveColors.grey600,
+    tagIconPurple: '#5746AF',
+    tagIconTeal: '#00776B',
+    tagIconTurquoise: '#00708D',
+    tagInverse: primitiveColors.grey800,
+    tagPress: 'rgba(34, 114, 180, 0.1600)',
+    tagTextBrown: '#3E332E',
+    tagTextCharcoal: primitiveColors.grey100,
+    tagTextCoral: '#64172B',
+    tagTextDefault: primitiveColors.grey800,
+    tagTextIndigo: '#101D46',
+    tagTextLemon: '#4F3422',
+    tagTextLime: '#203C25',
+    tagTextPink: '#651249',
+    tagTextPurple: '#2F265F',
+    tagTextTeal: '#0D3D38',
+    tagTextTurquoise: '#0D3C48'
+};
+
+// 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.grey700,
+    borderAccessible: primitiveColors.grey300,
+    borderDanger: primitiveColors.red500,
+    borderWarning: primitiveColors.yellow500,
+    codeBackground: primitiveColors.grey650,
+    overlayOverlay: 'rgba(0, 0, 0, 0.45)',
+    progressFill: primitiveColors.grey500,
+    progressFillPrimary: primitiveColors.blue600,
+    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.grey100
+};
+
+// 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.grey100,
+    borderAccessible: primitiveColors.grey500,
+    borderDanger: primitiveColors.red300,
+    borderWarning: primitiveColors.yellow300,
+    codeBackground: 'rgba(68, 83, 95, 0.0800)',
+    overlayOverlay: 'rgba(0, 0, 0, 0.26)',
+    progressFill: primitiveColors.grey300,
+    progressFillPrimary: primitiveColors.blue500,
+    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)'
+};
+function getColors(isDarkMode) {
+    return {
+        ...deprecatedPrimitiveColors,
+        ...isDarkMode ? deprecatedSemanticColorsDark : deprecatedSemanticColorsLight,
+        ...getSemanticColors(isDarkMode)
+    };
+}
+
+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)`
+        };
+    }
+};
+
+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,
+    useNewBorderColors: false
+};
+// 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] !== void 0 ? arguments[1] : defaultOptions;
+    return `${isDarkMode}-${options.enableAnimation}-${options.zIndexBase}-${options.useNewBorderColors}`;
+});
+function getThemeImpl(isDarkMode) {
+    let options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : defaultOptions;
+    return {
+        colors: {
+            ...getColors(isDarkMode),
+            ...options.useNewBorderColors && {
+                border: isDarkMode ? primitiveColors.grey700 : primitiveColors.grey100
+            }
+        },
+        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();
+    const { useNewBorderColors } = useDesignSystemSafexFlags();
+    // Graceful fallback to default theme in case a test or developer forgot context.
+    const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme(false, {
+        useNewBorderColors,
+        // Default values, safe to remove once the border colors flag is retired
+        zIndexBase: 1000,
+        enableAnimation: 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 /*#__PURE__*/ 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 = (param)=>{
+    let { isDarkMode = false, children } = param;
+    return /*#__PURE__*/ jsx(DesignSystemThemeContext.Provider, {
+        value: {
+            isDarkMode
+        },
+        children: children
+    });
+};
+const DesignSystemProvider = (param)=>{
+    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 } = param;
+    const { isDarkMode } = useContext(DesignSystemThemeContext);
+    const { useNewBorderColors } = useDesignSystemSafexFlags();
+    const theme = useMemo(()=>getTheme(isDarkMode, {
+            enableAnimation,
+            zIndexBase,
+            useNewBorderColors
+        }), // TODO: revisit this
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        isDarkMode,
+        zIndexBase,
+        useNewBorderColors
+    ]);
+    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 /*#__PURE__*/ jsx(DesignSystemProviderPropsContext.Provider, {
+        value: providerPropsContext,
+        children: /*#__PURE__*/ jsx(ThemeProvider, {
+            theme: theme,
+            children: /*#__PURE__*/ jsx(AntDConfigProviderPropsContext.Provider, {
+                value: {
+                    prefixCls: classNamePrefix,
+                    getPopupContainer,
+                    virtual: !disableLegacyAntVirtualization
+                },
+                children: /*#__PURE__*/ jsx(TooltipProvider, {
+                    children: /*#__PURE__*/ jsx(DesignSystemContext.Provider, {
+                        value: value,
+                        children: children
+                    })
+                })
+            })
+        })
+    });
+};
+const ApplyDesignSystemContextOverrides = (param)=>{
+    let { enableAnimation, zIndexBase, getPopupContainer, flags, children } = param;
+    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 ?? parentDesignSystemProviderProps.enableAnimation,
+            zIndexBase: zIndexBase ?? parentDesignSystemProviderProps.zIndexBase,
+            getPopupContainer: getPopupContainer ?? parentDesignSystemProviderProps.getPopupContainer,
+            flags: {
+                ...parentDesignSystemProviderProps.flags,
+                ...flags
+            }
+        }), [
+        parentDesignSystemProviderProps,
+        enableAnimation,
+        zIndexBase,
+        getPopupContainer,
+        flags
+    ]);
+    return /*#__PURE__*/ jsx(DesignSystemProvider, {
+        ...newProps,
+        children: children
+    });
+};
+// This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.
+const ApplyDesignSystemFlags = (param)=>{
+    let { flags, children } = param;
+    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 /*#__PURE__*/ jsx(DesignSystemProvider, {
+        ...newProps,
+        children: children
+    });
+};
+const DesignSystemAntDConfigProvider = (param)=>{
+    let { children } = param;
+    const antdContext = useAntDConfigProviderContext();
+    return /*#__PURE__*/ jsx(ConfigProvider, {
+        ...antdContext,
+        children: children
+    });
+};
+const useAntDConfigProviderContext = ()=>{
+    return useContext(AntDConfigProviderPropsContext) ?? {
+        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 = (param)=>{
+    let { children } = param;
+    return /*#__PURE__*/ 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'
+    });
+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] !== void 0 ? arguments[0] : '';
+    return useState(()=>`${prefix}-${uniqueId()}`)[0];
+}
+
+const getIconVariantStyles = (theme, color)=>{
+    switch(color){
+        case 'success':
+            return {
+                color: `${theme.colors.textValidationSuccess} !important`
+            };
+        case 'warning':
+            return {
+                color: `${theme.colors.textValidationWarning} !important`
+            };
+        case 'danger':
+            return {
+                color: `${theme.colors.textValidationDanger} !important`
+            };
+        case 'ai':
+            return {
+                'svg *': {
+                    fill: 'var(--ai-icon-gradient)'
+                }
+            };
+        default:
+            return color ? {
+                color: `${color} !important`
+            } : {};
+    }
+};
+const Icon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { component: Component, dangerouslySetAntdProps, color, style, ...otherProps } = props;
+    const { theme } = useDesignSystemTheme();
+    const linearGradientId = useUniqueId('ai-linear-gradient');
+    const useSmallIcons = safex('databricks.fe.designsystem.useSmallIcons', false);
+    const MemoizedComponent = useMemo(()=>Component ? (param)=>{
+            let { fill, ...iconProps } = param;
+            return(// We don't rely on top-level fills for our colors. Fills are specified
+            // with "currentColor" on children of the top-most svg.
+            /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Component, {
+                        fill: "none",
+                        ...iconProps,
+                        style: {
+                            ...color === 'ai' ? {
+                                ['--ai-icon-gradient']: `url(#${linearGradientId})`,
+                                ...iconProps.style
+                            } : iconProps.style,
+                            ...useSmallIcons ? {
+                                padding: '1px'
+                            } : {}
+                        }
+                    }),
+                    color === 'ai' && /*#__PURE__*/ jsx("svg", {
+                        width: "0",
+                        height: "0",
+                        viewBox: "0 0 0 0",
+                        css: visuallyHidden,
+                        children: /*#__PURE__*/ jsx("defs", {
+                            children: /*#__PURE__*/ jsxs("linearGradient", {
+                                id: linearGradientId,
+                                x1: "0%",
+                                y1: "0%",
+                                x2: "100%",
+                                y2: "100%",
+                                children: [
+                                    /*#__PURE__*/ jsx("stop", {
+                                        offset: "20.5%",
+                                        stopColor: theme.colors.branded.ai.gradientStart
+                                    }),
+                                    /*#__PURE__*/ jsx("stop", {
+                                        offset: "46.91%",
+                                        stopColor: theme.colors.branded.ai.gradientMid
+                                    }),
+                                    /*#__PURE__*/ jsx("stop", {
+                                        offset: "79.5%",
+                                        stopColor: theme.colors.branded.ai.gradientEnd
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            }));
+        } : undefined, [
+        Component,
+        color,
+        linearGradientId,
+        theme,
+        useSmallIcons
+    ]);
+    return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
+        children: /*#__PURE__*/ jsx(AntDIcon, {
+            ...addDebugOutlineIfEnabled(),
+            ref: forwardedRef,
+            "aria-hidden": "true",
+            css: {
+                fontSize: theme.general.iconFontSize,
+                ...getIconVariantStyles(theme, color)
+            },
+            component: MemoizedComponent,
+            style: {
+                ...style
+            },
+            ...otherProps,
+            ...dangerouslySetAntdProps
+        })
+    });
+});
+
+function SvgChevronLeftIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: /*#__PURE__*/ 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 /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgChevronLeftIcon
+    });
+});
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+
+function SvgChevronRightIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: /*#__PURE__*/ 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 /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgChevronRightIcon
+    });
+});
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+
+function SvgCloseIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: /*#__PURE__*/ 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 /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgCloseIcon
+    });
+});
+CloseIcon.displayName = 'CloseIcon';
+
+function SvgDangerIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ 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"
+            }),
+            /*#__PURE__*/ 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 /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgDangerIcon
+    });
+});
+DangerIcon.displayName = 'DangerIcon';
+
+function SvgLoadingIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        ...props,
+        children: /*#__PURE__*/ 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 /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgLoadingIcon
+    });
+});
+LoadingIcon.displayName = 'LoadingIcon';
+
+function SvgNewWindowIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10z"
+            }),
+            /*#__PURE__*/ 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 /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgNewWindowIcon
+    });
+});
+NewWindowIcon.displayName = 'NewWindowIcon';
+
+function SvgWarningIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ 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"
+            }),
+            /*#__PURE__*/ 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 /*#__PURE__*/ 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++);
+}
+
+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 = (param)=>{
+    let { description = 'Generic UI loading state' } = param;
+    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 = /*#__PURE__*/ 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] !== void 0 ? arguments[1] : 60, delay = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0, animationDuration = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 1, inheritColor = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false;
+    const styles = {
+        animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
+        ...inheritColor ? {
+            color: 'inherit'
+        } : {
+            color: theme.colors.textSecondary
+        },
+        animationDelay: `${delay}s`
+    };
+    return /*#__PURE__*/ css(importantify(styles));
+};
+const Spinner = (param)=>{
+    let { frameRate, size = 'default', delay, className: propClass, label, animationDuration, inheritColor, loading = true, loadingDescription = 'Spinner', ...props } = param;
+    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
+    /*#__PURE__*/ jsxs("div", {
+        ...props,
+        className: wrapperClass,
+        children: [
+            loading && /*#__PURE__*/ jsx(LoadingState, {
+                description: loadingDescription
+            }),
+            /*#__PURE__*/ jsx(AccessibleContainer, {
+                label: label,
+                children: /*#__PURE__*/ 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] !== void 0 ? arguments[1] : 'start', previousSelection = arguments.length > 2 ? arguments[2] : void 0;
+    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?.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?.forEach((option)=>{
+        option.setAttribute('tabIndex', '-1');
+        option.setAttribute('data-highlighted', 'false');
+    });
+};
+const highlightOption = function(currentSelection, prevSelection) {
+    let focus = arguments.length > 2 && arguments[2] !== void 0 ? 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.scrollIntoView?.({
+        block: 'center'
+    });
+};
+const findHighlightedOption = (options)=>{
+    return options.find((option)=>option.getAttribute('data-highlighted') === 'true') ?? undefined;
+};
+const getContentOptions = (element)=>{
+    const options = element.closest('[data-combobox-option-list="true"]')?.querySelectorAll('[role="option"]');
+    return options ? Array.from(options) : undefined;
+};
+const getKeyboardNavigationFunctions = (handleSelect, param)=>{
+    let { onKeyDown, onMouseEnter, onDefaultKeyDown, disableMouseOver, setDisableMouseOver } = param;
+    return {
+        onKeyDown: (e)=>{
+            onKeyDown?.(e);
+            switch(e.key){
+                case 'ArrowDown':
+                    e.preventDefault();
+                    setDisableMouseOver(true);
+                    const nextSibling = findClosestOptionSibling(e.currentTarget, 'next');
+                    if (nextSibling) {
+                        highlightOption(nextSibling, e.currentTarget);
+                    } else {
+                        const firstOption = getContentOptions(e.currentTarget)?.[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 {
+                        const lastOption = getContentOptions(e.currentTarget)?.slice(-1)[0];
+                        if (lastOption) {
+                            highlightFirstNonDisabledOption(lastOption, 'end', e.currentTarget);
+                        }
+                    }
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    handleSelect(e);
+                    break;
+                default:
+                    onDefaultKeyDown?.(e);
+                    break;
+            }
+        },
+        onMouseMove: (e)=>{
+            if (disableMouseOver) {
+                setDisableMouseOver(false);
+            }
+        },
+        onMouseEnter: (e)=>{
+            if (!disableMouseOver) {
+                onMouseEnter?.(e);
+                resetTabIndexToFocusedElement(e.currentTarget);
+            }
+        }
+    };
+};
+const resetTabIndexToFocusedElement = (elem)=>{
+    resetAllHighlightedOptions(elem);
+    elem.setAttribute('tabIndex', '0');
+    elem.focus();
+};
+const dialogComboboxLookAheadKeyDown = (e, setLookAhead, lookAhead)=>{
+    if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') {
+        return;
+    }
+    e.preventDefault();
+    const siblings = Array.from(e.currentTarget.parentElement?.children ?? []);
+    // 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)=>{
+        const siblingLabel = sibling.textContent?.toLowerCase() ?? '';
+        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, param)=>{
+    let { maxHeight = '100vh', maxWidth = '100vw', minHeight = 0, minWidth = 0, width, useNewShadows, useNewBorderColors } = param;
+    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, useNewBorderColors)
+    });
+};
+const getComboboxMenuItemPadding = (theme)=>[
+        6,
+        theme.spacing.sm,
+        6,
+        theme.spacing.sm
+    ];
+const getComboboxOptionItemWrapperStyles = (theme)=>{
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = getComboboxMenuItemPadding(theme);
+    return /*#__PURE__*/ css(importantify({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        alignSelf: 'stretch',
+        padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+        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
+        }
+    }));
+};
+const getComboboxOptionLabelStyles = (param)=>{
+    let { theme, dangerouslyHideCheck, textOverflowMode, contentWidth, hasHintColumn, hasIcon, hasDisabledReason } = param;
+    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'
+        },
+        ...hasIcon && hasDisabledReason && {
+            display: 'flex'
+        }
+    });
+};
+const getInfoIconStyles = (theme)=>{
+    return /*#__PURE__*/ css({
+        paddingLeft: theme.spacing.xs,
+        color: theme.colors.textSecondary,
+        pointerEvents: 'all',
+        cursor: 'pointer',
+        verticalAlign: 'middle'
+    });
+};
+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'
+                } : {}
+            }
+        }
+    });
+};
+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'
+            }
+        }
+    });
+};
+const getSelectItemWithHintColumnStyles = function() {
+    let hintColumnWidthPercent = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 50;
+    return /*#__PURE__*/ css({
+        flexGrow: 1,
+        display: 'inline-grid',
+        gridTemplateColumns: `${100 - hintColumnWidthPercent}% ${hintColumnWidthPercent}%`,
+        alignItems: 'baseline'
+    });
+};
+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'
+        }
+    });
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+var 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["ProgressFillPrimary"] = "progressFillPrimary";
+    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 ?? 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] !== void 0 ? 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, useNewBorderColors) {
+    if (!theme || !theme.isDarkMode) {
+        return {};
+    }
+    return {
+        border: `1px solid ${useNewBorderColors ? theme.colors.border : 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] !== void 0 ? arguments[2] : 'vertical';
+    const bgColor = 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] !== void 0 ? arguments[1] : {};
+    return getShadowScrollStylesMemoized(theme, backgroundColor, orientation);
+};
+const getBottomOnlyShadowScrollStylesMemoized = memoize(function getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor) {
+    const bgColor = 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] !== void 0 ? arguments[1] : {};
+    return getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor);
+};
+const getHorizontalTabShadowStylesMemoized = memoize(function getHorizontalTabShadowStylesMemoized(theme, backgroundColor) {
+    const bgColor = backgroundColor ?? theme.colors.backgroundPrimary;
+    const shadowValue = theme.shadows.lg;
+    const shadowColorMatch = shadowValue.match(/rgba?\([^)]+\)/);
+    const shadowColor = shadowColorMatch ? shadowColorMatch[0] : 'rgba(0, 0, 0, 0.1)';
+    const shadowCoverLeft = `linear-gradient(to right, ${bgColor} 0%, ${bgColor} 30%, rgba(0, 0, 0, 0) 100%) left center`;
+    const shadowCoverRight = `linear-gradient(to left, ${bgColor} 0%, ${bgColor} 30%, rgba(0, 0, 0, 0) 100%) right center`;
+    const shadowLeft = `linear-gradient(to right, ${shadowColor} 0%, rgba(0, 0, 0, 0) 100%) left center`;
+    const shadowRight = `linear-gradient(to left, ${shadowColor} 0%, rgba(0, 0, 0, 0) 100%) right center`;
+    const shadowSize = '16px 100%';
+    return {
+        background: `
+      ${shadowCoverLeft},
+      ${shadowCoverRight},
+      ${shadowLeft},
+      ${shadowRight}`,
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: `${shadowSize}, ${shadowSize}, ${shadowSize}, ${shadowSize}`,
+        backgroundAttachment: 'local, local, scroll, scroll'
+    };
+});
+const getHorizontalTabShadowStyles = function getHorizontalTabShadowStyles(theme) {
+    let { backgroundColor } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+    return getHorizontalTabShadowStylesMemoized(theme, backgroundColor);
+};
+function getVirtualizedComboboxMenuItemStyles(virtualItem) {
+    const theme = getTheme(false); // Since we only need paddings, we can use light mode theme
+    const [top, right, bottom, left] = getComboboxMenuItemPadding(theme);
+    const topBottomPadding = top + bottom;
+    const leftRightPadding = right + left;
+    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) {
+    ensureSharedObserverExists();
+    entryCallbackMap.set(element, callback);
+    sharedObserver?.observe(element);
+    return ()=>{
+        if (element) {
+            sharedObserver?.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 = (param)=>{
+    let { onView, resetKey, value } = param;
+    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),
+        useNewBorderColors: safex('databricks.fe.designsystem.useNewBorderColors', false),
+        useNewDatePickerInput: safex('databricks.fe.designsystem.useNewDatePickerInput', false)
+    };
+};
+
+function AccessibleContainer(param) {
+    let { children, label } = param;
+    if (!label) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        css: {
+            cursor: 'progress'
+        },
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                css: visuallyHidden,
+                children: label
+            }),
+            /*#__PURE__*/ 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);
+};
+
+// Ensure webapp/web/html/index.html version has parity with this function below
+function generateUuidV4() {
+    const uuid = window.crypto?.randomUUID?.();
+    if (uuid) {
+        return uuid;
+    }
+    // fallback for older browsers
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c)=>{
+        const r = Math.random() * 16 | 0;
+        const v = c === 'x' ? r : r & 0x3 | 0x8;
+        return v.toString(16);
+    });
+}
+/**
+ * Give the component a stable uuidv4 on mount that can be used to differentiate between
+ * other components. One application is debugging or performance tracing or analytics.
+ */ function useStableUuidV4() {
+    return useStable(()=>generateUuidV4());
+}
+
+var 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["Listbox"] = "listbox";
+    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;
+}({});
+var DesignSystemEventProviderAnalyticsEventTypes = /*#__PURE__*/ function(DesignSystemEventProviderAnalyticsEventTypes) {
+    DesignSystemEventProviderAnalyticsEventTypes["OnClick"] = "onClick";
+    DesignSystemEventProviderAnalyticsEventTypes["OnSubmit"] = "onSubmit";
+    DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
+    DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
+    return DesignSystemEventProviderAnalyticsEventTypes;
+}({});
+var 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: "success",
+    error: "error",
+    warning: "warning",
+    info: "info",
+    info_light_purple: "info_light_purple",
+    info_dark_purple: "info_dark_purple"
+};
+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 = (param)=>{
+    let { componentType, componentId, componentSubType, analyticsEvents, valueHasNoPii, shouldStartInteraction, isInteractionSubject } = param;
+    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 componentViewId = useStableUuidV4();
+    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("onClick", analyticsEvents)) {
+                    context.callback({
+                        eventType: "onClick",
+                        componentType,
+                        componentId,
+                        componentSubType,
+                        value: undefined,
+                        shouldStartInteraction: shouldStartInteractionComplete,
+                        event,
+                        isInteractionSubject,
+                        componentViewId: componentViewId
+                    });
+                }
+            },
+            onSubmit: (payload)=>{
+                const mode = shouldTriggerCallback("onSubmit", analyticsEvents) ? 'default' : 'associate_event_only';
+                context.callback({
+                    eventType: "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("onValueChange", analyticsEvents)) {
+                    context.callback({
+                        eventType: "onValueChange",
+                        componentType,
+                        componentId,
+                        componentSubType,
+                        value: valueHasNoPii ? value : undefined,
+                        shouldStartInteraction: false,
+                        componentViewId: componentViewId
+                    });
+                }
+            },
+            onView: (value)=>{
+                if (shouldTriggerCallback("onView", analyticsEvents)) {
+                    context.callback({
+                        eventType: "onView",
+                        componentType,
+                        componentId,
+                        componentSubType,
+                        value: valueHasNoPii ? value : undefined,
+                        shouldStartInteraction: false,
+                        componentViewId: componentViewId
+                    });
+                }
+            },
+            dataComponentProps
+        };
+    }, [
+        context,
+        componentId,
+        analyticsEvents,
+        componentType,
+        componentSubType,
+        shouldStartInteractionComplete,
+        isInteractionSubject,
+        valueHasNoPii,
+        componentViewId
+    ]);
+    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(param) {
+    let { children, callback } = param;
+    const contextValue = useMemo(()=>{
+        return {
+            callback
+        };
+    }, [
+        callback
+    ]);
+    return /*#__PURE__*/ jsx(DesignSystemEventProviderContext.Provider, {
+        value: contextValue,
+        children: children
+    });
+}
+
+function getDefaultStyles(theme) {
+    let loading = arguments.length > 1 && arguments[1] !== void 0 ? 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 = (param)=>{
+    let { children, componentId, analyticsEvents = [
+        DesignSystemEventProviderAnalyticsEventTypes.OnSubmit
+    ], onSubmit, shouldStartInteraction, ...otherProps } = param;
+    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 /*#__PURE__*/ jsx(FormContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsxs("form", {
+            onSubmit: onSubmitHandler,
+            ...otherProps,
+            ref: formRef,
+            ...eventContext.dataComponentProps,
+            children: [
+                isSubmitting && /*#__PURE__*/ 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 = (param)=>{
+    let { handleSubmit, handleValid, handleInvalid, processFinalPropertyValues, children, componentId, analyticsEvents = [
+        DesignSystemEventProviderAnalyticsEventTypes.OnSubmit
+    ], shouldStartInteraction, initialState, ...otherProps } = param;
+    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(data, 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 /*#__PURE__*/ jsx(Form, {
+        componentId: componentId,
+        analyticsEvents: [],
+        onSubmit: onSubmitWrapper,
+        ...otherProps,
+        children: children
+    });
+};
+function extractReferrerComponent() {
+    const activeElement = document.activeElement;
+    const { componentType, componentId } = activeElement?.dataset ?? {};
+    if (componentType && componentId) {
+        return {
+            type: componentType,
+            id: componentId
+        };
+    }
+    return undefined;
+}
+
+const SMALL_BUTTON_HEIGHT = 24;
+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 = (param)=>{
+    let { theme, classNamePrefix, loading, withIcon, onlyIcon, isAnchor, enableAnimation, size, type, useFocusPseudoClass, forceIconStyles, danger, useNewShadows, useNewBorderRadii } = param;
+    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 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'
+                }
+            }
+        },
+        [`&[disabled] > ${clsIcon}`]: {
+            color: 'inherit !important'
+        },
+        [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
+            },
+            [`> :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);
+};
+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
+    param, ref) {
+        let { dangerouslySetAntdProps, children, size, type, loading: loadingProp, loadingDescription, endIcon, onClick, dangerouslySetForceIconStyles, dangerouslyUseFocusPseudoClass, dangerouslyAppendWrapperCss, componentId, analyticsEvents, shouldStartInteraction, ...props } = param;
+        const emitOnView = safex('databricks.fe.observability.defaultButtonComponentView', true);
+        const formContext = useFormContext();
+        const { theme, classNamePrefix } = useDesignSystemTheme();
+        const { useNewShadows, useNewBorderRadii } = useDesignSystemSafexFlags();
+        const memoizedAnalyticsEvents = useMemo(()=>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 ?? (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)=>{
+            if (loading) {
+                return;
+            }
+            eventContext.onClick(event);
+            if (props.htmlType === 'submit' && formContext.formRef?.current) {
+                event.preventDefault();
+                formContext.formRef.current.requestSubmit();
+            }
+            onClick?.(event);
+        }, [
+            loading,
+            props.htmlType,
+            formContext.formRef,
+            eventContext,
+            onClick
+        ]);
+        const loadingSpinner = /*#__PURE__*/ jsx(Spinner, {
+            className: loadingCls,
+            animationDuration: 8,
+            inheritColor: true,
+            label: "loading",
+            "aria-label": "loading",
+            loadingDescription: loadingDescription ?? componentId,
+            css: {
+                color: 'inherit !important',
+                pointerEvents: 'none',
+                ...!iconOnly && !dangerouslySetForceIconStyles && {
+                    '.anticon': {
+                        verticalAlign: '-0.2em'
+                    }
+                },
+                '[aria-hidden="true"]': {
+                    display: 'inline'
+                }
+            }
+        });
+        return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
+            children: /*#__PURE__*/ 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 && /*#__PURE__*/ jsxs("span", {
+                    style: {
+                        visibility: loading ? 'hidden' : undefined,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        ...dangerouslyAppendWrapperCss
+                    },
+                    children: [
+                        children,
+                        endIcon && /*#__PURE__*/ 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
+                }
+            }
+        }
+    });
+}
+function Hint(userProps) {
+    const { dangerouslySetAntdProps, bold, withoutMargins, color, ...props } = userProps;
+    const { theme } = useDesignSystemTheme();
+    return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
+        children: /*#__PURE__*/ 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);
+};
+const getEllipsisNewTabLinkStyles = ()=>{
+    const styles = {
+        paddingRight: 'calc(2px + 1em)',
+        position: 'relative'
+    };
+    return /*#__PURE__*/ css(styles);
+};
+const getIconStyles = (theme)=>{
+    const styles = {
+        marginLeft: 4,
+        color: theme.colors.actionTertiaryTextDefault,
+        position: 'relative',
+        top: '1px'
+    };
+    return /*#__PURE__*/ css(styles);
+};
+const getEllipsisIconStyles = (useNewIcons)=>{
+    const styles = {
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        top: 0,
+        display: 'flex',
+        alignItems: 'center',
+        ...useNewIcons
+    };
+    return /*#__PURE__*/ css(styles);
+};
+const Link = /*#__PURE__*/ forwardRef(function Link(param, ref) {
+    let { dangerouslySetAntdProps, componentId, analyticsEvents, onClick, ...props } = param;
+    const emitOnView = safex('databricks.fe.observability.defaultComponentView.typographyLink', false);
+    const { children, openInNewTab, ...restProps } = props;
+    const { theme, classNamePrefix } = useDesignSystemTheme();
+    const memoizedAnalyticsEvents = useMemo(()=>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?.(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 /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
+        children: /*#__PURE__*/ jsxs(Typography$1.Link, {
+            ...addDebugOutlineIfEnabled(),
+            "aria-disabled": linkProps.disabled,
+            css: linkStyles,
+            ref: mergedRef,
+            onClick: onClickHandler,
+            ...linkProps,
+            ...dangerouslySetAntdProps,
+            ...eventContext.dataComponentProps,
+            children: [
+                children,
+                openInNewTab ? /*#__PURE__*/ 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
+        }
+    });
+}
+function Paragraph(userProps) {
+    const { dangerouslySetAntdProps, withoutMargins, color, ...props } = userProps;
+    const { theme, classNamePrefix } = useDesignSystemTheme();
+    return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
+        children: /*#__PURE__*/ 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
+        }
+    });
+}
+function Text(userProps) {
+    // Omit props that are not supported by `antd`
+    const { dangerouslySetAntdProps, bold, hint, withoutMargins, color, ...props } = userProps;
+    const { theme } = useDesignSystemTheme();
+    return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
+        children: /*#__PURE__*/ jsx(AntDText, {
+            ...addDebugOutlineIfEnabled(),
+            ...props,
+            className: props.className,
+            css: getTextEmotionStyles(theme, userProps),
+            ...dangerouslySetAntdProps
+        })
+    });
+}
+
+const MiddleElideSuffixLength = 6;
+function TextMiddleElide(param) {
+    let { text, suffixLength = MiddleElideSuffixLength, ...textProps } = param;
+    const id = useMemo(()=>uniqueId$1('text-middle-elided-'), []);
+    const { start, suffix } = getStartAndSuffix(text, suffixLength);
+    const disableElide = process?.env?.NODE_ENV === 'test'; // so unit tests play nice
+    // use the entire text on select and copy
+    useEffect(()=>{
+        const clipboardCopyHandler = (e)=>{
+            e?.preventDefault();
+            e?.clipboardData?.setData('text/plain', text);
+        };
+        const selector = `.${id}`;
+        document.querySelector(selector)?.addEventListener('copy', clipboardCopyHandler);
+        return ()=>{
+            document.querySelector(selector)?.removeEventListener('copy', clipboardCopyHandler);
+        };
+    }, [
+        id,
+        text
+    ]);
+    return /*#__PURE__*/ jsx(Text, {
+        ellipsis: disableElide ? undefined : {
+            suffix
+        },
+        ...textProps,
+        "aria-label": text,
+        title: 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
+                }
+            });
+        case 2:
+            return /*#__PURE__*/ css({
+                '&&': {
+                    fontSize: theme.typography.fontSizeXl,
+                    lineHeight: theme.typography.lineHeightXl,
+                    fontWeight: theme.typography.typographyBoldFontWeight
+                },
+                '& > .anticon': {
+                    lineHeight: theme.typography.lineHeightXl
+                }
+            });
+        case 3:
+            return /*#__PURE__*/ css({
+                '&&': {
+                    fontSize: theme.typography.fontSizeLg,
+                    lineHeight: theme.typography.lineHeightLg,
+                    fontWeight: theme.typography.typographyBoldFontWeight
+                },
+                '& > .anticon': {
+                    lineHeight: theme.typography.lineHeightLg
+                }
+            });
+        case 4:
+        default:
+            return /*#__PURE__*/ css({
+                '&&': {
+                    fontSize: theme.typography.fontSizeMd,
+                    lineHeight: theme.typography.lineHeightMd,
+                    fontWeight: theme.typography.typographyBoldFontWeight
+                },
+                '& > .anticon': {
+                    lineHeight: theme.typography.lineHeightMd
+                }
+            });
+    }
+}
+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',
+            marginBottom: '0 !important'
+        }
+    });
+}
+function Title(userProps) {
+    const { dangerouslySetAntdProps, withoutMargins, color, elementLevel, ...props } = userProps;
+    const { theme } = useDesignSystemTheme();
+    return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
+        children: /*#__PURE__*/ jsx(AntDTitle, {
+            ...addDebugOutlineIfEnabled(),
+            ...props,
+            level: elementLevel ?? props.level,
+            className: props.className,
+            css: getTitleEmotionStyles(theme, userProps),
+            ...dangerouslySetAntdProps
+        })
+    });
+}
+
+const Truncate = (param)=>{
+    let { children, lines = 1, ...props } = param;
+    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 /*#__PURE__*/ jsx("span", {
+        ref: spanRef,
+        title: textContent,
+        css: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            display: '-webkit-box',
+            webkitLineClamp: lines,
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: lines
+        },
+        ...props,
+        children: children
+    });
+};
+
+const Typography = /* #__PURE__ */ (()=>{
+    function Typography(param) {
+        let { dangerouslySetAntdProps, ...props } = param;
+        return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
+            children: /*#__PURE__*/ 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;
+})();
+
+// WRAPPED RADIX-UI-COMPONENTS
+const Anchor = Popover$1.Anchor; // Behavioral component only
+const Root = (param)=>{
+    let { children, onOpenChange, componentId, analyticsEvents = [
+        DesignSystemEventProviderAnalyticsEventTypes.OnView
+    ], ...props } = param;
+    const firstView = useRef(true);
+    const memoizedAnalyticsEvents = useMemo(()=>analyticsEvents, [
+        analyticsEvents
+    ]);
+    const eventContext = useDesignSystemEventComponentCallbacks({
+        componentType: DesignSystemEventProviderComponentTypes.Popover,
+        componentId: 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?.(open);
+    }, [
+        eventContext,
+        onOpenChange
+    ]);
+    return /*#__PURE__*/ jsx(Popover$1.Root, {
+        ...props,
+        onOpenChange: onOpenChangeHandler,
+        children: /*#__PURE__*/ jsx(ComponentFinderContext.Provider, {
+            value: {
+                dataComponentProps: eventContext.dataComponentProps
+            },
+            children: children
+        })
+    });
+};
+const Content = /*#__PURE__*/ forwardRef(function Content(param, ref) {
+    let { children, minWidth = 220, maxWidth, ...props } = param;
+    const { getPopupContainer } = useDesignSystemContext();
+    const { theme } = useDesignSystemTheme();
+    const { useNewShadows, useNewBorderColors } = useDesignSystemSafexFlags();
+    const dataComponentProps = useComponentFinderContext(DesignSystemEventProviderComponentTypes.Popover);
+    return /*#__PURE__*/ jsx(Popover$1.Portal, {
+        container: getPopupContainer && getPopupContainer(),
+        children: /*#__PURE__*/ jsx(Popover$1.Content, {
+            ...addDebugOutlineIfEnabled(),
+            ref: ref,
+            css: [
+                contentStyles(theme, useNewShadows, useNewBorderColors),
+                {
+                    minWidth,
+                    maxWidth
+                }
+            ],
+            sideOffset: 4,
+            "aria-label": "Popover content",
+            ...props,
+            ...dataComponentProps,
+            children: children
+        })
+    });
+});
+const Trigger = /*#__PURE__*/ forwardRef(function Trigger(param, ref) {
+    let { children, ...props } = param;
+    return /*#__PURE__*/ jsx(Popover$1.Trigger, {
+        ...addDebugOutlineIfEnabled(),
+        ref: ref,
+        ...props,
+        children: children
+    });
+});
+const Close = /*#__PURE__*/ forwardRef(function Close(param, ref) {
+    let { children, ...props } = param;
+    return /*#__PURE__*/ jsx(Popover$1.Close, {
+        ref: ref,
+        ...props,
+        children: children
+    });
+});
+const Arrow = /*#__PURE__*/ forwardRef(function Arrow(param, ref) {
+    let { children, ...props } = param;
+    const { theme } = useDesignSystemTheme();
+    return /*#__PURE__*/ jsx(Popover$1.Arrow, {
+        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
+        },
+        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, useNewBorderColors)=>({
+        backgroundColor: theme.colors.backgroundPrimary,
+        color: theme.colors.textPrimary,
+        lineHeight: theme.typography.lineHeightBase,
+        border: `1px solid ${useNewBorderColors ? theme.colors.border : 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, useNewBorderColors),
+        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, useNewBorderColors)=>({
+        ...popoverContentStyles(theme, useNewShadows, useNewBorderColors)
+    });
+
+var Popover = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Anchor: Anchor,
+  Arrow: Arrow,
+  Close: Close,
+  Content: Content,
+  Root: Root,
+  Trigger: Trigger
+});
+
+export { getDialogComboboxOptionLabelWidth as $, getDarkModePortalStyles as A, Button as B, CloseIcon as C, DesignSystemAntDConfigProvider as D, getShadowScrollStyles as E, Form as F, DEFAULT_SPACING_UNIT as G, useDesignSystemContext as H, Icon as I, DesignSystemEventProvider as J, useUniqueId as K, LoadingIcon as L, Arrow as M, LoadingState as N, visuallyHidden as O, ComponentFinderContext as P, getComboboxContentWrapperStyles as Q, Root as R, Spinner as S, Typography as T, getFooterStyles as U, highlightFirstNonDisabledOption as V, WarningIcon as W, getInfoIconStyles as X, getKeyboardNavigationFunctions as Y, dialogComboboxLookAheadKeyDown as Z, getCheckboxStyles as _, useDesignSystemSafexFlags as a, getContentOptions as a0, findHighlightedOption as a1, highlightOption as a2, findClosestOptionSibling as a3, getComboboxOptionLabelStyles as a4, getSelectItemWithHintColumnStyles as a5, getHintColumnStyles as a6, useComponentFinderContext as a7, SMALL_BUTTON_HEIGHT as a8, ApplyDesignSystemContextOverrides as a9, getVirtualizedComboboxMenuItemStyles as aA, ColorVars as aB, Title as aa, AccessibleContainer as ab, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as ac, getDefaultStyles as ad, getPrimaryStyles as ae, getDisabledSplitButtonStyles as af, getDisabledPrimarySplitButtonStyles as ag, getHorizontalTabShadowStyles as ah, getMemoizedButtonEmotionStyles as ai, getButtonEmotionStyles as aj, DesignSystemEventProviderComponentSubTypes as ak, useDesignSystemEventSuppressInteractionContext as al, DesignSystemThemeContext as am, DesignSystemContext as an, DesignSystemThemeProvider as ao, DesignSystemProvider as ap, ApplyDesignSystemFlags as aq, useAntDConfigProviderContext as ar, isOptionDisabled as as, resetTabIndexToFocusedElement as at, WithDesignSystemThemeHoc as au, NewWindowIcon as av, LoadingStateContext as aw, Popover as ax, getTypographyColor as ay, getBottomOnlyShadowScrollStyles as az, addDebugOutlineIfEnabled as b, getAnimationCss as c, useFormContext as d, DesignSystemEventProviderAnalyticsEventTypes as e, useDesignSystemEventComponentCallbacks as f, getValidationStateColor as g, DesignSystemEventProviderComponentTypes as h, importantify as i, DesignSystemEventProviderComponentSubTypeMap as j, useNotifyOnFirstView as k, DangerIcon as l, Trigger as m, Content as n, ChevronLeftIcon as o, primitiveColors as p, ChevronRightIcon as q, getComboboxOptionItemWrapperStyles as r, safex as s, RhfForm as t, useDesignSystemTheme as u, DesignSystemEventSuppressInteractionProviderContext as v, DesignSystemEventSuppressInteractionTrueContextValue as w, augmentWithDataComponentProps as x, RestoreAntDDefaultClsPrefix as y, addDebugOutlineStylesIfEnabled as z };
+//# sourceMappingURL=Popover-CrX63HDP.js.map