@databricks/design-system 1.12.13 → 1.12.14

package/dist/{DropdownMenu-dbeef1b7.js → Stepper-839336b1.js}

@@ -1,8 +1,8 @@
-import React__default, { createContext, useContext, useMemo, useEffect, useState, forwardRef, useRef, useLayoutEffect, useImperativeHandle, Children } from 'react';
+import React__default, { createContext, useContext, useMemo, useEffect, useState, forwardRef, useRef, useLayoutEffect, useImperativeHandle } from 'react';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
 import { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
-import { notification, ConfigProvider, Button as Button$1, Typography as Typography$1, Tooltip as Tooltip$1, Input as Input$2 } from 'antd';
-import * as DropdownMenu$1 from '@radix-ui/react-dropdown-menu';
+import { notification, ConfigProvider, Button as Button$1, Typography as Typography$1, Input as Input$2 } from 'antd';
+import AntDIcon from '@ant-design/icons';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
 import _isBoolean from 'lodash/isBoolean';
@@ -11,7 +11,6 @@ import _isString from 'lodash/isString';
 import _mapValues from 'lodash/mapValues';
 import _memoize from 'lodash/memoize';
 import unitless from '@emotion/unitless';
-import AntDIcon from '@ant-design/icons';
 
 /**
  * Used to hide text visually, but still be readable by screen-readers
@@ -181,7 +180,6 @@ let ValidSemanticColors = /*#__PURE__*/function (ValidSemanticColors) {
   ValidSemanticColors["ActionTertiaryTextHover"] = "actionTertiaryTextHover";
   ValidSemanticColors["ActionTertiaryTextPress"] = "actionTertiaryTextPress";
   ValidSemanticColors["BackgroundDanger"] = "backgroundDanger";
-  ValidSemanticColors["BackgroundInfo"] = "backgroundInfo";
   ValidSemanticColors["BackgroundPrimary"] = "backgroundPrimary";
   ValidSemanticColors["BackgroundSecondary"] = "backgroundSecondary";
   ValidSemanticColors["BackgroundSuccess"] = "backgroundSuccess";
@@ -490,15 +488,15 @@ const primitiveColors = {
   green600: '#277C43',
   green700: '#115026',
   green800: '#093919',
-  grey050: '#F2F8F8',
-  grey100: '#E4ECF1',
-  grey200: '#CDDAE5',
-  grey300: '#BDCDDB',
-  grey350: '#90A4B5',
-  grey400: '#8196A7',
-  grey500: '#5D7283',
-  grey600: '#44535F',
-  grey650: '#354450',
+  grey050: '#F6F7F9',
+  grey100: '#E8ECF0',
+  grey200: '#D1D9E1',
+  grey300: '#C0CDD8',
+  grey350: '#92A4B3',
+  grey400: '#8396A5',
+  grey500: '#5F7281',
+  grey600: '#445461',
+  grey650: '#37444F',
   grey700: '#1F272D',
   grey800: '#11171C',
   indigo: '#434A93',
@@ -556,9 +554,9 @@ const darkColorList = {
   actionDefaultTextDefault: primitiveColors.grey100,
   actionDefaultTextHover: primitiveColors.blue400,
   actionDefaultTextPress: primitiveColors.blue300,
-  actionDisabledBackground: primitiveColors.grey700,
-  actionDisabledBorder: primitiveColors.grey650,
-  actionDisabledText: primitiveColors.grey600,
+  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)',
@@ -585,7 +583,6 @@ const darkColorList = {
   actionTertiaryTextHover: primitiveColors.blue400,
   actionTertiaryTextPress: primitiveColors.blue300,
   backgroundDanger: 'rgba(200, 45, 76, 0.1600)',
-  backgroundInfo: 'rgba(68, 83, 95, 0.1600)',
   backgroundPrimary: primitiveColors.grey800,
   backgroundSecondary: primitiveColors.grey700,
   backgroundSuccess: 'rgba(39, 124, 67, 0.1600)',
@@ -594,9 +591,9 @@ const darkColorList = {
   borderAccessible: primitiveColors.grey300,
   borderDanger: primitiveColors.red500,
   borderWarning: primitiveColors.yellow500,
-  codeBackground: primitiveColors.grey700,
+  codeBackground: primitiveColors.grey650,
   overlayOverlay: 'rgba(31, 38, 45, 0.7200)',
-  skeleton: 'rgba(228, 236, 241, 0.1000)',
+  skeleton: 'rgba(144, 164, 181, 0.1600)',
   tableBackgroundSelectedDefault: 'rgba(189, 205, 219, 0.0800)',
   tableBackgroundSelectedHover: 'rgba(189, 205, 219, 0.1200)',
   tableBackgroundUnselectedDefault: primitiveColors.grey800,
@@ -604,7 +601,7 @@ const darkColorList = {
   tagBrown: 'rgba(166, 99, 12, 0.8600)',
   tagCharcoal: 'rgba(68, 83, 95, 0.8600)',
   tagCoral: 'rgba(200, 50, 67, 0.8600)',
-  tagDefault: primitiveColors.grey700,
+  tagDefault: primitiveColors.grey650,
   tagHover: 'rgba(138, 202, 255, 0.0800)',
   tagIconDefault: primitiveColors.grey350,
   tagIconHover: primitiveColors.grey350,
@@ -619,7 +616,7 @@ const darkColorList = {
   tagTeal: 'rgba(4, 134, 125, 0.8600)',
   tagText: primitiveColors.grey100,
   tagTurquoise: 'rgba(19, 125, 174, 0.8600)',
-  textPlaceholder: primitiveColors.grey650,
+  textPlaceholder: primitiveColors.grey400,
   textPrimary: primitiveColors.grey100,
   textSecondary: primitiveColors.grey350,
   textValidationDanger: primitiveColors.red500,
@@ -657,9 +654,9 @@ const lightColorList = {
   actionDefaultTextDefault: primitiveColors.grey800,
   actionDefaultTextHover: primitiveColors.blue700,
   actionDefaultTextPress: primitiveColors.blue800,
-  actionDisabledBackground: primitiveColors.grey050,
-  actionDisabledBorder: primitiveColors.grey100,
-  actionDisabledText: primitiveColors.grey300,
+  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)',
@@ -686,7 +683,6 @@ const lightColorList = {
   actionTertiaryTextHover: primitiveColors.blue700,
   actionTertiaryTextPress: primitiveColors.blue800,
   backgroundDanger: primitiveColors.red100,
-  backgroundInfo: primitiveColors.grey100,
   backgroundPrimary: primitiveColors.white,
   backgroundSecondary: primitiveColors.grey050,
   backgroundSuccess: primitiveColors.green100,
@@ -697,7 +693,7 @@ const lightColorList = {
   borderWarning: primitiveColors.yellow300,
   codeBackground: 'rgba(68, 83, 95, 0.0800)',
   overlayOverlay: 'rgba(64, 63, 63, 0.7200)',
-  skeleton: 'rgba(17, 23, 28, 0.1000)',
+  skeleton: 'rgba(144, 164, 181, 0.1600)',
   tableBackgroundSelectedDefault: 'rgba(68, 83, 95, 0.0800)',
   tableBackgroundSelectedHover: 'rgba(68, 83, 95, 0.1200)',
   tableBackgroundUnselectedDefault: primitiveColors.white,
@@ -705,7 +701,7 @@ const lightColorList = {
   tagBrown: primitiveColors.brown,
   tagCharcoal: primitiveColors.grey600,
   tagCoral: primitiveColors.coral,
-  tagDefault: primitiveColors.grey050,
+  tagDefault: primitiveColors.grey100,
   tagHover: 'rgba(34, 114, 180, 0.0800)',
   tagIconDefault: primitiveColors.grey600,
   tagIconHover: primitiveColors.grey600,
@@ -1483,35 +1479,6 @@ const FaceSmileIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 FaceSmileIcon.displayName = 'FaceSmileIcon';
 var FaceSmileIcon$1 = FaceSmileIcon;
 
-function SvgInfoIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsx("path", {
-      fill: "currentColor",
-      d: "M7.25 11V7h1.5v4h-1.5ZM8 4.5A.75.75 0 1 1 8 6a.75.75 0 0 1 0-1.5Z"
-    }), jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z",
-      clipRule: "evenodd"
-    })]
-  });
-}
-const InfoIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgInfoIcon
-  });
-});
-InfoIcon.displayName = 'InfoIcon';
-var InfoIcon$1 = InfoIcon;
-
 function SvgLoadingIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1776,6 +1743,7 @@ function getDisabledTertiaryStyles(theme) {
 }
 
 let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
+  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
   DesignSystemEventProviderComponentTypes["Button"] = "button";
   DesignSystemEventProviderComponentTypes["Input"] = "input";
   return DesignSystemEventProviderComponentTypes;
@@ -2043,7 +2011,8 @@ const getButtonEmotionStyles = _ref => {
     type,
     isFlex,
     useFocusPseudoClass,
-    forceIconStyles
+    forceIconStyles,
+    danger
   } = _ref;
   const clsIcon = `.${theme.general.iconfontCssPrefix}`;
   const clsEndIcon = `.${getEndIconClsName(theme)}`;
@@ -2220,10 +2189,10 @@ const getButtonEmotionStyles = _ref => {
       ...iconCss,
       marginLeft: theme.spacing.sm
     },
-    ...(!type && {
+    ...(!type && !danger && {
       [`&:enabled:not(:hover):not(:active) > ${clsIcon}`]: inactiveIconCss
     }),
-    ...(!type && {
+    ...(!type && !danger && {
       [`&:enabled:not(:hover):not(:active) > ${endIconCssSelector}`]: inactiveIconCss
     }),
     // Disable animations
@@ -2236,10 +2205,16 @@ const getButtonEmotionStyles = _ref => {
         ...tertiaryColors,
         color: theme.colors.textSecondary,
         '&:hover > .anticon': {
-          color: tertiaryColors['&:hover'].color
+          color: tertiaryColors['&:hover'].color,
+          ...(danger && {
+            color: theme.colors.actionDangerDefaultTextHover
+          })
         },
         '&:active > .anticon': {
-          color: tertiaryColors['&:active'].color
+          color: tertiaryColors['&:active'].color,
+          ...(danger && {
+            color: theme.colors.actionDangerDefaultTextPress
+          })
         },
         ...(loading && {
           '&&, &:hover, &:active': {
@@ -2248,7 +2223,10 @@ const getButtonEmotionStyles = _ref => {
         })
       },
       [`&:enabled:not(${classLink}) > .anticon`]: {
-        color: theme.colors.textSecondary
+        color: theme.colors.textSecondary,
+        ...(danger && {
+          color: theme.colors.actionDangerDefaultTextDefault
+        })
       },
       ...(isAnchor && {
         lineHeight: `${theme.general.heightSm}px`,
@@ -2853,84 +2831,6 @@ const Typography = /* #__PURE__ */(() => {
   return Typography;
 })();
 
-const Tooltip = _ref => {
-  let {
-    children,
-    title,
-    placement = 'top',
-    dataTestId,
-    dangerouslySetAntdProps,
-    silenceScreenReader = false,
-    useAsLabel = false,
-    ...props
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const id = useUniqueId('dubois-tooltip-component-');
-  if (!title) {
-    return jsx(React__default.Fragment, {
-      children: children
-    });
-  }
-  const titleProps = silenceScreenReader ? {} : {
-    'aria-live': 'polite',
-    'aria-relevant': 'additions'
-  };
-  if (dataTestId) {
-    // TODO FEINF-1337 - this should turn into data-testid
-    titleProps['data-test-id'] = dataTestId;
-  }
-  const liveTitle = title && /*#__PURE__*/React__default.isValidElement(title) ? /*#__PURE__*/React__default.cloneElement(title, titleProps) : jsx("span", {
-    ...titleProps,
-    children: title
-  });
-  const ariaProps = {
-    [useAsLabel ? 'aria-labelledby' : 'aria-describedby']: id,
-    'aria-hidden': false
-  };
-  const childWithProps = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
-    ...ariaProps,
-    ...children.props
-  }) : _isNil(children) ? children : jsx("span", {
-    ...ariaProps,
-    children: children
-  });
-  const {
-    overlayInnerStyle,
-    overlayStyle,
-    ...delegatedDangerouslySetAntdProps
-  } = dangerouslySetAntdProps || {};
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Tooltip$1, {
-      id: id,
-      title: liveTitle,
-      placement: placement
-      // Always trigger on hover and focus
-      ,
-      trigger: ['hover', 'focus'],
-      overlayInnerStyle: {
-        backgroundColor: '#2F3941',
-        lineHeight: '22px',
-        padding: '4px 8px',
-        boxShadow: theme.general.shadowLow,
-        ...overlayInnerStyle,
-        ...getDarkModePortalStyles(theme)
-      },
-      overlayStyle: {
-        zIndex: theme.options.zIndexBase + 70,
-        ...overlayStyle
-      },
-      css: /*#__PURE__*/css({
-        ...getAnimationCss(theme.options.enableAnimation)
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
-      ...delegatedDangerouslySetAntdProps,
-      ...props,
-      children: childWithProps
-    })
-  });
-};
-
 const getInputGroupStyling = (clsPrefix, theme) => {
   const inputClass = `.${clsPrefix}-input`;
   const buttonClass = `.${clsPrefix}-btn`;
@@ -2954,7 +2854,7 @@ const getInputGroupStyling = (clsPrefix, theme) => {
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
 };
-const Group$1 = _ref => {
+const Group = _ref => {
   let {
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
@@ -2975,10 +2875,14 @@ const Group$1 = _ref => {
   });
 };
 
-const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
+const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
   let {
     validationState
   } = _ref;
+  let {
+    useTransparent = false,
+    useFocusWithin = false
+  } = _ref2;
   const inputClass = `.${clsPrefix}-input`;
   const affixClass = `.${clsPrefix}-input-affix-wrapper`;
   const affixClassFocused = `.${clsPrefix}-input-affix-wrapper-focused`;
@@ -2986,6 +2890,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
   const prefixIcon = `.${clsPrefix}-input-prefix`;
   const suffixIcon = `.${clsPrefix}-input-suffix`;
   const validationColor = getValidationStateColor(theme, validationState);
+  const focusSpecifier = useFocusWithin ? 'focus-within' : 'focus';
   const styles = {
     '&&': {
       lineHeight: theme.typography.lineHeightBase,
@@ -2996,7 +2901,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
       '&:hover': {
         borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
       },
-      '&:focus': {
+      [`&:${focusSpecifier}`]: {
         outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineOffset: -2,
@@ -3037,7 +2942,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
     },
     [`&${affixClassFocused}`]: {
       boxShadow: 'none',
-      '&&, &:focus': {
+      [`&&, &:${focusSpecifier}`]: {
         outlineColor: theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineOffset: -2,
@@ -3059,9 +2964,20 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
     },
     ...getAnimationCss(theme.options.enableAnimation)
   };
+  return styles;
+};
+const getInputEmotionStyles = (clsPrefix, theme, _ref3, useTransparent) => {
+  let {
+    validationState
+  } = _ref3;
+  const styles = getInputStyles(clsPrefix, theme, {
+    validationState
+  }, {
+    useTransparent
+  });
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
 };
-const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
+const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
   let {
     validationState,
     autoComplete = 'off',
@@ -3070,7 +2986,7 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
     onChange,
     onClear,
     ...props
-  } = _ref2;
+  } = _ref4;
   const {
     classNamePrefix,
     theme
@@ -3157,483 +3073,332 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
 const InputNamespace = /* #__PURE__ */Object.assign(Input$1, {
   TextArea,
   Password,
-  Group: Group$1
+  Group
 });
 const Input = InputNamespace;
 
-const Root = DropdownMenu$1.Root; // Behavioral component only
-
-const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+function Stepper(_ref) {
   let {
-    children,
-    minWidth = 220,
-    isInsideModal,
-    onEscapeKeyDown,
-    onKeyDown,
-    ...props
+    direction: requestedDirection,
+    currentStepIndex: currentStep,
+    steps,
+    localizeStepNumber,
+    responsive = true
   } = _ref;
   const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  return jsx(DropdownMenu$1.Portal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(DropdownMenu$1.Content, {
-      ref: ref,
-      loop: true,
-      css: [contentStyles, {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
-      sideOffset: 4,
-      align: "start",
-      onKeyDown: e => {
-        // This is a workaround for Radix's DropdownMenu.Content not receiving Escape key events
-        // when nested inside a modal. We need to stop propagation of the event so that the modal
-        // doesn't close when the DropdownMenu should.
-        if (e.key === 'Escape') {
-          if (isInsideModal) {
-            e.stopPropagation();
-          }
-          onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(e.nativeEvent);
-        }
-        onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
-      },
-      ...props,
-      children: children
-    })
-  });
-});
-const SubContent = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
-  let {
-    children,
-    minWidth = 220,
-    ...props
-  } = _ref2;
+    theme
+  } = useDesignSystemTheme();
+  const ref = useRef(null);
   const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  return jsx(DropdownMenu$1.Portal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(DropdownMenu$1.SubContent, {
-      ref: ref,
-      loop: true,
-      css: [contentStyles, {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
-      sideOffset: -2,
-      alignOffset: -5,
-      ...props,
-      children: children
-    })
-  });
-});
-const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
-  let {
-    children,
-    ...props
-  } = _ref3;
-  return jsx(DropdownMenu$1.Trigger, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-});
-const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
-  let {
-    children,
-    disabledReason,
-    danger,
-    onClick,
-    ...props
-  } = _ref4;
-  const itemRef = useRef(null);
-  useImperativeHandle(ref, () => itemRef.current);
-  return jsx(DropdownMenu$1.Item, {
-    css: theme => [dropdownItemStyles, danger && dangerItemStyles(theme)],
-    ref: itemRef,
-    onClick: e => {
-      if (props.disabled) {
-        e.preventDefault();
-      } else {
-        onClick === null || onClick === void 0 || onClick(e);
-      }
-    },
-    ...props,
-    children: getNewChildren(children, props, disabledReason, itemRef)
-  });
-});
-const Label = /*#__PURE__*/forwardRef(function Label(_ref5, ref) {
-  let {
-    children,
-    ...props
-  } = _ref5;
-  return jsx(DropdownMenu$1.Label, {
-    ref: ref,
-    css: [dropdownItemStyles, theme => ({
-      color: theme.colors.textSecondary,
-      '&:hover': {
-        cursor: 'default'
-      }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:Label;"],
-    ...props,
-    children: children
-  });
-});
-const Separator = /*#__PURE__*/forwardRef(function Separator(_ref6, ref) {
-  let {
-    children,
-    ...props
-  } = _ref6;
-  return jsx(DropdownMenu$1.Separator, {
+    direction
+  } = useResponsiveDirection({
+    ref,
+    requestedDirection,
+    responsive,
+    enabled: steps.length > 0
+  });
+  if (steps.length === 0) {
+    return null;
+  }
+  const isHorizontal = direction === 'horizontal';
+  const currentStepIndex = currentStep ? Math.min(steps.length - 1, Math.max(0, currentStep)) : 0;
+  return jsx("ol", {
+    css: /*#__PURE__*/css(getStepsStyle(theme, isHorizontal), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
     ref: ref,
-    css: dropdownSeparatorStyles,
-    ...props,
-    children: children
-  });
-});
-const SubTrigger = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref7;
-  const subTriggerRef = useRef(null);
-  useImperativeHandle(ref, () => subTriggerRef.current);
-  return jsxs(DropdownMenu$1.SubTrigger, {
-    ref: subTriggerRef,
-    css: [dropdownItemStyles, theme => ({
-      '&[data-state="open"]': {
-        backgroundColor: theme.colors.actionTertiaryBackgroundHover
-      }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
-    ...props,
-    children: [getNewChildren(children, props, disabledReason, subTriggerRef), jsx(HintColumn, {
-      css: theme => ({
-        margin: CONSTANTS.subMenuIconMargin(theme),
-        display: 'flex',
-        alignSelf: 'stretch',
-        alignItems: 'center'
-      }),
-      children: jsx(ChevronRightIcon$1, {
-        css: theme => ({
-          fontSize: CONSTANTS.subMenuIconSize(theme)
+    children: steps.map((step, index) => {
+      const isCurrentStep = index === currentStepIndex;
+      const isLastStep = index === steps.length - 1;
+      const displayEndingDivider = !isLastStep;
+      const contentTitleLevel = isCurrentStep ? 3 : 4;
+      const StepIcon = step.icon;
+      const {
+        icon,
+        iconBackgroundColor,
+        iconTextColor,
+        titleTextColor,
+        descriptionTextColor,
+        hasStepItemIconBorder
+      } = getStepContentStyleFields(theme, isCurrentStep, step.status, StepIcon);
+      return jsx("li", {
+        "aria-current": isCurrentStep,
+        css: /*#__PURE__*/css(getStepItemStyle(theme, isHorizontal, isLastStep)),
+        children: jsxs(StepContentGrid, {
+          isHorizontal: isHorizontal,
+          isCurrentStep: isCurrentStep,
+          children: [jsx("div", {
+            css: /*#__PURE__*/css(getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder)),
+            children: StepIcon ? jsx(StepIcon, {
+              statusColor: iconTextColor,
+              status: step.status
+            }) : icon ? jsx("span", {
+              css: /*#__PURE__*/css({
+                color: iconTextColor
+              }),
+              children: icon
+            }) : jsx(Typography.Title, {
+              level: contentTitleLevel,
+              css: /*#__PURE__*/css({
+                color: `${iconTextColor} !important`
+              }),
+              withoutMargins: true,
+              children: localizeStepNumber(index + 1)
+            })
+          }), jsx(Typography.Title, {
+            level: contentTitleLevel,
+            withoutMargins: true,
+            css: /*#__PURE__*/css({
+              flexShrink: 0,
+              color: `${titleTextColor} !important`
+            }),
+            children: step.title
+          }), displayEndingDivider && jsx("div", {
+            css: /*#__PURE__*/css(getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep))
+          }), step.description && jsx(Typography.Text, {
+            css: /*#__PURE__*/css(getStepDescriptionStyles(theme, isHorizontal, isLastStep, descriptionTextColor)),
+            withoutMargins: true,
+            size: "sm",
+            children: step.description
+          })]
         })
-      })
-    })]
-  });
-});
-
-/**
- * Deprecated. Use `SubTrigger` instead.
- * @deprecated
- */
-const TriggerItem = SubTrigger;
-const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref8, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref8;
-  const checkboxItemRef = useRef(null);
-  useImperativeHandle(ref, () => checkboxItemRef.current);
-  return jsx(DropdownMenu$1.CheckboxItem, {
-    ref: checkboxItemRef,
-    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
-    ...props,
-    children: getNewChildren(children, props, disabledReason, checkboxItemRef)
-  });
-});
-const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref) {
-  let {
-    children,
-    ...props
-  } = _ref9;
-  return jsx(DropdownMenu$1.ItemIndicator, {
-    ref: ref,
-    css: theme => ({
-      marginLeft: -(CONSTANTS.checkboxIconWidth(theme) + CONSTANTS.checkboxPaddingRight(theme)),
-      position: 'absolute',
-      fontSize: theme.general.iconFontSize
-    }),
-    ...props,
-    children: children !== null && children !== void 0 ? children : jsx(CheckIcon$1, {
-      css: theme => ({
-        color: theme.colors.textSecondary
-      })
+      }, index);
     })
   });
-});
-const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref10, ref) {
+}
+function getStepsStyle(theme, isHorizontal) {
+  return /*#__PURE__*/css({
+    listStyle: 'none',
+    display: 'flex',
+    flexDirection: isHorizontal ? 'row' : 'column',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    gap: isHorizontal ? theme.spacing.md : theme.spacing.sm,
+    width: '100%',
+    margin: '0',
+    padding: '0'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepsStyle;");
+}
+function getStepItemStyle(theme, isHorizontal, isLastStep) {
+  return /*#__PURE__*/css({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flexGrow: isLastStep ? 0 : 1,
+    marginRight: isLastStep ? theme.spacing.lg + theme.spacing.md : 0,
+    width: isHorizontal ? undefined : '100%'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemStyle;");
+}
+function getStepContentStyleFields(theme, isCurrentStep, status, icon) {
+  const fields = getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status);
+  if (icon) {
+    return {
+      ...fields,
+      icon: undefined,
+      iconBackgroundColor: undefined,
+      iconTextColor: getCustomIconColor(theme, isCurrentStep, status),
+      hasStepItemIconBorder: false
+    };
+  }
+  return fields;
+}
+function getCustomIconColor(theme, isCurrentStep, status) {
+  switch (status) {
+    case 'completed':
+      return theme.colors.actionDefaultBackgroundPress;
+    case 'loading':
+      return theme.colors.textPlaceholder;
+    case 'error':
+      return theme.colors.textValidationDanger;
+    default:
+    case 'upcoming':
+      return isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.textPlaceholder;
+  }
+}
+function getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status) {
+  switch (status) {
+    case 'completed':
+      return {
+        icon: jsx(CheckIcon$1, {}),
+        iconBackgroundColor: theme.colors.actionDefaultBackgroundPress,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: theme.colors.textPrimary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: true
+      };
+    case 'loading':
+      return {
+        icon: jsx(LoadingIcon$1, {
+          spin: true,
+          css: /*#__PURE__*/css({
+            fontSize: isCurrentStep ? theme.typography.fontSizeXl : theme.typography.fontSizeLg
+          }, process.env.NODE_ENV === "production" ? "" : ";label:icon;")
+        }),
+        iconBackgroundColor: undefined,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: isCurrentStep ? theme.colors.textPrimary : theme.colors.textSecondary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: false
+      };
+    case 'error':
+      return {
+        icon: jsx(CloseIcon$1, {
+          css: /*#__PURE__*/css({
+            marginBottom: theme.spacing.sm /* center icon in icon circle */
+          }, process.env.NODE_ENV === "production" ? "" : ";label:icon;")
+        }),
+        iconBackgroundColor: theme.colors.textValidationDanger,
+        iconTextColor: 'white',
+        titleTextColor: theme.colors.textValidationDanger,
+        descriptionTextColor: theme.colors.textValidationDanger,
+        hasStepItemIconBorder: false
+      };
+    default:
+    case 'upcoming':
+      if (isCurrentStep) {
+        return {
+          icon: undefined,
+          iconBackgroundColor: theme.colors.actionLinkDefault,
+          iconTextColor: 'white',
+          titleTextColor: theme.colors.textPrimary,
+          descriptionTextColor: theme.colors.textPrimary,
+          hasStepItemIconBorder: false
+        };
+      }
+      return {
+        icon: undefined,
+        iconBackgroundColor: undefined,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: theme.colors.textSecondary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: true
+      };
+  }
+}
+const MaxHorizontalStepDescriptionWidth = 140;
+const CurrentStepIconSize = DEFAULT_SPACING_UNIT * 4;
+const NonCurrentStepIconSize = DEFAULT_SPACING_UNIT * 3;
+function getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder) {
+  return /*#__PURE__*/css({
+    width: isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize,
+    height: isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize,
+    backgroundColor: iconBackgroundColor,
+    borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '20px',
+    flexShrink: 0,
+    border: hasStepItemIconBorder ? `1px solid ${theme.colors.textPlaceholder}` : undefined
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemIconParentStyle;");
+}
+function getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep) {
+  const backgroundColor = isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.border;
+  if (isHorizontal) {
+    return /*#__PURE__*/css({
+      backgroundColor,
+      height: '1px',
+      width: '100%',
+      minWidth: theme.spacing.md
+    }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
+  }
+  return /*#__PURE__*/css({
+    backgroundColor,
+    height: '100%',
+    minHeight: theme.spacing.md,
+    width: '1px',
+    alignSelf: 'flex-start',
+    marginLeft: theme.spacing.md
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
+}
+function getStepDescriptionStyles(theme, isHorizontal, isLastStep, textColor) {
+  return /*#__PURE__*/css({
+    alignSelf: 'flex-start',
+    width: '100%',
+    gridColumn: isHorizontal || isLastStep ? '2 / span 2' : undefined,
+    maxWidth: isHorizontal ? MaxHorizontalStepDescriptionWidth : undefined,
+    paddingBottom: isHorizontal ? undefined : theme.spacing.sm,
+    color: `${textColor} !important`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepDescriptionStyles;");
+}
+function StepContentGrid(_ref2) {
   let {
     children,
-    ...props
-  } = _ref10;
+    isHorizontal,
+    isCurrentStep
+  } = _ref2;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(DropdownMenu$1.Arrow, {
+  if (isHorizontal) {
+    return jsx("div", {
+      css: /*#__PURE__*/css({
+        display: 'grid',
+        gridTemplateColumns: `${isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize}px fit-content(100%) 1fr`,
+        gridTemplateRows: `${CurrentStepIconSize}px auto`,
+        alignItems: 'center',
+        justifyItems: 'flex-start',
+        gridColumnGap: theme.spacing.sm,
+        gridRowGap: theme.spacing.sm,
+        width: '100%'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
+      children: children
+    });
+  }
+  return jsx("div", {
     css: /*#__PURE__*/css({
-      fill: theme.colors.backgroundPrimary,
-      stroke: theme.colors.borderDecorative,
-      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
-      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
-      strokeWidth: CONSTANTS.arrowStrokeWidth(),
-      // TODO: This is a temporary fix for the alignment of the Arrow;
-      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
-      // which has new behaviors for alignment that we don't want. Generally
-      // we need to fix the arrow to always be aligned to the left of the menu (with
-      // offset equal to border radius)
-      position: 'relative',
-      top: -1
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
-    ref: ref,
-    width: 12,
-    height: 6,
-    ...props,
+      display: 'grid',
+      gridTemplateColumns: `${CurrentStepIconSize}px auto`,
+      alignItems: 'center',
+      justifyItems: 'flex-start',
+      gridColumnGap: theme.spacing.md,
+      gridRowGap: theme.spacing.sm,
+      width: '100%',
+      '& > :first-child': {
+        // horizontally center the first column (circle/icon)
+        justifySelf: 'center'
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
     children: children
   });
-});
-const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref11;
-  const radioItemRef = useRef(null);
-  useImperativeHandle(ref, () => radioItemRef.current);
-  return jsx(DropdownMenu$1.RadioItem, {
-    ref: radioItemRef,
-    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
-    ...props,
-    children: getNewChildren(children, props, disabledReason, radioItemRef)
-  });
-});
+}
 
-// UNWRAPPED RADIX-UI-COMPONENTS
-const Group = DropdownMenu$1.Group;
-const RadioGroup = DropdownMenu$1.RadioGroup;
-const Sub = DropdownMenu$1.Sub;
+// Ant design uses the same value for their stepper and to works well for us as well.
+const MinimumHorizonalDirectionWidth = 532;
 
-// EXTRA COMPONENTS
-const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
-  let {
-    children,
-    ...props
-  } = _ref12;
-  return jsx("div", {
-    ref: ref,
-    css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
-    ...props,
-    children: children
-  });
-});
-const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
+// exported for unit test
+function useResponsiveDirection(_ref3) {
   let {
-    children,
-    ...props
-  } = _ref13;
-  return jsx("div", {
-    ref: ref,
-    css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
-    ...props,
-    children: children
-  });
-});
-const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
-  let {
-    children,
-    ...props
-  } = _ref14;
-  return jsx("div", {
-    ref: ref,
-    css: theme => ({
-      fontSize: 16,
-      color: theme.colors.textSecondary,
-      paddingRight: theme.spacing.sm
-    }),
-    ...props,
-    children: children
-  });
-});
-const getNewChildren = (children, props, disabledReason, ref) => {
-  const childCount = Children.count(children);
-  const tooltip = jsx(Tooltip, {
-    title: disabledReason,
-    placement: "right",
-    dangerouslySetAntdProps: {
-      getPopupContainer: () => ref.current || document.body
-    },
-    children: jsx("span", {
-      css: theme => infoIconStyles(theme),
-      children: jsx(InfoIcon$1, {
-        role: "presentation",
-        alt: "Disabled state reason",
-        "aria-hidden": "false"
-      })
-    })
-  });
-  if (childCount === 1) {
-    return getChild(children, Boolean(props['disabled']), disabledReason, tooltip, 0, childCount);
-  }
-  return Children.map(children, (child, idx) => {
-    return getChild(child, Boolean(props['disabled']), disabledReason, tooltip, idx, childCount);
-  });
-};
-const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCount) => {
-  const HintColumnType = jsx(HintColumn, {}).type;
-  const isHintColumnType = Boolean(child && typeof child !== 'string' && typeof child !== 'number' && typeof child !== 'boolean' && 'type' in child && (child === null || child === void 0 ? void 0 : child.type) === HintColumnType);
-  if (isDisabled && disabledReason && child && isHintColumnType) {
-    return jsxs(Fragment, {
-      children: [tooltip, child]
-    });
-  } else if (index === siblingCount - 1 && isDisabled && disabledReason) {
-    return jsxs(Fragment, {
-      children: [child, tooltip]
+    requestedDirection = 'horizontal',
+    responsive,
+    enabled,
+    ref
+  } = _ref3;
+  const [direction, setDirection] = useState(requestedDirection);
+  useEffect(() => {
+    if (requestedDirection === 'vertical' || !enabled || !responsive || !ref.current) {
+      return;
+    }
+    let timeoutId;
+    const resizeObserver = new ResizeObserver(entries => {
+      timeoutId = requestAnimationFrame(() => {
+        if (entries.length === 1) {
+          const width = entries[0].target.clientWidth || 0;
+          setDirection(width < MinimumHorizonalDirectionWidth ? 'vertical' : 'horizontal');
+        }
+      });
     });
-  }
-  return child;
-};
-
-// CONSTANTS
-const CONSTANTS = {
-  itemPaddingVertical(theme) {
-    // The number from the mocks is the midpoint between constants
-    return 0.5 * theme.spacing.xs + 0.5 * theme.spacing.sm;
-  },
-  itemPaddingHorizontal(theme) {
-    return theme.spacing.sm;
-  },
-  checkboxIconWidth(theme) {
-    return theme.general.iconFontSize;
-  },
-  checkboxPaddingLeft(theme) {
-    return theme.spacing.sm + theme.spacing.xs;
-  },
-  checkboxPaddingRight(theme) {
-    return theme.spacing.sm;
-  },
-  subMenuIconMargin(theme) {
-    // Negative margin so the icons can be larger without increasing the overall item height
-    const iconMarginVertical = this.itemPaddingVertical(theme) / 2;
-    const iconMarginRight = -this.itemPaddingVertical(theme) + theme.spacing.sm * 1.5;
-    return `${-iconMarginVertical}px ${-iconMarginRight}px ${-iconMarginVertical}px auto`;
-  },
-  subMenuIconSize(theme) {
-    return theme.spacing.lg;
-  },
-  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 dropdownContentStyles = theme => ({
-  backgroundColor: theme.colors.backgroundPrimary,
-  color: theme.colors.textPrimary,
-  lineHeight: theme.typography.lineHeightBase,
-  border: `1px solid ${theme.colors.borderDecorative}`,
-  borderRadius: theme.borders.borderRadiusMd,
-  padding: `${theme.spacing.xs}px 0`,
-  boxShadow: theme.general.shadowLow,
-  userSelect: 'none',
-  ...getDarkModePortalStyles(theme),
-  // Ant Design uses 1000s for their zIndex space; this ensures Radix works with that, but
-  // we'll likely need to be sure that all Radix components are using the same zIndex going forward.
-  //
-  // Additionally, there is an issue where macOS overlay scrollbars in Chrome and Safari (sometimes!)
-  // overlap other elements with higher zIndex, because the scrollbars themselves have zIndex 9999,
-  // so we have to use a higher value than that: https://github.com/databricks/universe/pull/232825
-  zIndex: 10000,
-  a: importantify({
-    color: theme.colors.textPrimary,
-    '&:hover, &:focus': {
-      color: theme.colors.textPrimary,
-      textDecoration: 'none'
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
     }
-  })
-});
-const contentStyles = theme => ({
-  ...dropdownContentStyles(theme)
-});
-const dropdownItemStyles = theme => ({
-  padding: `${CONSTANTS.itemPaddingVertical(theme)}px ${CONSTANTS.itemPaddingHorizontal(theme)}px`,
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  outline: 'unset',
-  '&:hover': {
-    cursor: 'pointer'
-  },
-  '&:focus': {
-    backgroundColor: theme.colors.actionTertiaryBackgroundHover
-  },
-  '&[data-disabled]': {
-    pointerEvents: 'none',
-    color: theme.colors.actionDisabledText
-  }
-});
-const dangerItemStyles = theme => ({
-  color: theme.colors.textValidationDanger,
-  '&:hover, &:focus': {
-    backgroundColor: theme.colors.actionDangerDefaultBackgroundHover
-  }
-});
-const infoIconStyles = theme => ({
-  display: 'inline-flex',
-  paddingLeft: theme.spacing.xs,
-  color: theme.colors.textSecondary,
-  pointerEvents: 'all'
-});
-const checkboxItemStyles = theme => ({
-  position: 'relative',
-  paddingLeft: CONSTANTS.checkboxIconWidth(theme) + CONSTANTS.checkboxPaddingLeft(theme) + CONSTANTS.checkboxPaddingRight(theme)
-});
-const metaTextStyles = theme => ({
-  color: theme.colors.textSecondary,
-  fontSize: theme.typography.fontSizeSm,
-  '[data-disabled] &': {
-    color: theme.colors.actionDisabledText
-  }
-});
-const dropdownSeparatorStyles = theme => ({
-  height: 1,
-  margin: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-  backgroundColor: theme.colors.borderDecorative
-});
-
-var DropdownMenu = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Arrow: Arrow,
-  CheckboxItem: CheckboxItem,
-  Content: Content,
-  Group: Group,
-  HintColumn: HintColumn,
-  HintRow: HintRow,
-  IconWrapper: IconWrapper,
-  Item: Item,
-  ItemIndicator: ItemIndicator,
-  Label: Label,
-  RadioGroup: RadioGroup,
-  RadioItem: RadioItem,
-  Root: Root,
-  Separator: Separator,
-  Sub: Sub,
-  SubContent: SubContent,
-  SubTrigger: SubTrigger,
-  Trigger: Trigger,
-  TriggerItem: TriggerItem,
-  dropdownContentStyles: dropdownContentStyles,
-  dropdownItemStyles: dropdownItemStyles,
-  dropdownSeparatorStyles: dropdownSeparatorStyles
-});
+    return () => {
+      resizeObserver.disconnect();
+      cancelAnimationFrame(timeoutId);
+    };
+  }, [requestedDirection, enabled, ref, responsive]);
+  return {
+    direction
+  };
+}
 
-export { FaceFrownIcon$1 as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, getPrimaryStyles as E, getDisabledStyles as F, useDesignSystemFlags as G, getButtonEmotionStyles as H, Icon as I, DesignSystemEventProviderComponentTypes as J, DesignSystemEventProviderAnalyticsEventTypes as K, LoadingState as L, useDesignSystemEventComponentCallbacks as M, DesignSystemEventProvider as N, DesignSystemThemeContext as O, DesignSystemContext as P, DesignSystemThemeProvider as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, DesignSystemProvider as U, ApplyDesignSystemFlags as V, WarningIcon$1 as W, useAntDConfigProviderContext as X, DropdownMenu as Y, WithDesignSystemThemeHoc as Z, CursorIcon$1 as _, getDarkModePortalStyles as a, FaceNeutralIcon$1 as a0, FaceSmileIcon$1 as a1, MegaphoneIcon$1 as a2, NewWindowIcon$1 as a3, LoadingStateContext as a4, getTypographyColor as a5, getBottomOnlyShadowScrollStyles as a6, ColorVars as a7, primitiveColors as a8, dropdownItemStyles as a9, dropdownSeparatorStyles as aa, ChevronRightIcon$1 as b, useDesignSystemContext as c, Tooltip as d, InfoIcon$1 as e, Input as f, getAnimationCss as g, CheckIcon$1 as h, importantify as i, getValidationStateColor as j, getShadowScrollStyles as k, DangerIcon$1 as l, LoadingIcon$1 as m, dropdownContentStyles as n, useUniqueId as o, Title as p, AccessibleContainer as q, ChevronLeftIcon$1 as r, safex as s, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as t, useDesignSystemTheme as u, visuallyHidden as v, lightColorList as w, Root as x, Trigger as y, getDefaultStyles as z };
-//# sourceMappingURL=DropdownMenu-dbeef1b7.js.map
+export { getInputStyles as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, DesignSystemEventProviderComponentTypes as E, DesignSystemEventProviderAnalyticsEventTypes as F, useDesignSystemEventComponentCallbacks as G, DesignSystemEventProvider as H, Icon as I, DesignSystemThemeContext as J, DesignSystemContext as K, LoadingState as L, DesignSystemThemeProvider as M, DesignSystemProvider as N, ApplyDesignSystemFlags as O, useAntDConfigProviderContext as P, WithDesignSystemThemeHoc as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, CursorIcon$1 as U, FaceFrownIcon$1 as V, WarningIcon$1 as W, FaceNeutralIcon$1 as X, FaceSmileIcon$1 as Y, MegaphoneIcon$1 as Z, NewWindowIcon$1 as _, getDarkModePortalStyles as a, LoadingStateContext as a0, getTypographyColor as a1, getBottomOnlyShadowScrollStyles as a2, ColorVars as a3, primitiveColors as a4, ChevronRightIcon$1 as b, useUniqueId as c, useDesignSystemContext as d, CheckIcon$1 as e, Input as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, getShadowScrollStyles as j, DangerIcon$1 as k, LoadingIcon$1 as l, Title as m, AccessibleContainer as n, ChevronLeftIcon$1 as o, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as p, lightColorList as q, getDefaultStyles as r, safex as s, getPrimaryStyles as t, useDesignSystemTheme as u, visuallyHidden as v, getDisabledStyles as w, useDesignSystemFlags as x, Stepper as y, getButtonEmotionStyles as z };
+//# sourceMappingURL=Stepper-839336b1.js.map