@dynatrace/strato-components 3.1.3 → 3.2.0

package/forms/date-time-range-picker/useSelectionInteractionHandlers.js

@@ -0,0 +1,106 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSelectionInteractionHandlers_exports = {};
+__export(useSelectionInteractionHandlers_exports, {
+  useSelectionInteractionHandlers: () => useSelectionInteractionHandlers
+});
+module.exports = __toCommonJS(useSelectionInteractionHandlers_exports);
+var import_react = require("react");
+var import_selection_helpers = require("./selection-helpers.js");
+function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput) {
+  const onMouseDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      window.getSelection()?.removeAllRanges();
+      const root = event.currentTarget;
+      const triggerElement = event.target;
+      if (root) {
+        (0, import_selection_helpers.removeContentEditable)(
+          root,
+          document,
+          "mouseup",
+          (event2, hasMultiElementSelection) => {
+            if (!hasMultiElementSelection && event2.target instanceof HTMLElement && event2.target === triggerElement) {
+              if (event2.target.hasAttribute("contenteditable")) {
+                event2.target.focus();
+              } else {
+                onFocusInput();
+              }
+            }
+          }
+        );
+      }
+    },
+    [onFocusInput]
+  );
+  const hasContentEditableKeyRemoved = (0, import_react.useRef)(false);
+  const onKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      const userAgent = navigator.userAgent.toLowerCase();
+      const isMac = userAgent.includes("mac");
+      const hasModifierKey = isMac ? event.metaKey === true : event.ctrlKey === true;
+      if (event.key === "Shift" || event.key === "Control" || event.key === "Command") {
+        event.preventDefault();
+        return;
+      }
+      function removeContentEditableIfNeeded() {
+        if (hasContentEditableKeyRemoved.current === false) {
+          hasContentEditableKeyRemoved.current = true;
+          (0, import_selection_helpers.removeContentEditable)(
+            event.currentTarget,
+            event.currentTarget,
+            "keyup",
+            () => hasContentEditableKeyRemoved.current = false
+          );
+        }
+      }
+      if (hasModifierKey && event.key === "c") {
+        (0, import_selection_helpers.removeContentEditable)(
+          event.currentTarget,
+          event.currentTarget,
+          "keyup"
+        );
+        return;
+      }
+      if (hasModifierKey && event.key === "a") {
+        event.preventDefault();
+        if (event.currentTarget instanceof HTMLElement) {
+          removeContentEditableIfNeeded();
+          (0, import_selection_helpers.extendSelectionToAll)();
+        }
+        return;
+      }
+      if (event.shiftKey === true && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End")) {
+        event.preventDefault();
+        if (event.currentTarget instanceof HTMLElement) {
+          removeContentEditableIfNeeded();
+          (0, import_selection_helpers.extendSelection)(event.key);
+        }
+        return;
+      }
+      if (event.target === touchedContainerRef.current) {
+        onFocusInput();
+      }
+    },
+    [onFocusInput, touchedContainerRef]
+  );
+  return { onMouseDown, onKeyDown };
+}

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-1-3 {
+._1dphm0f0-3-2-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-1-3 {
+._1dphm0f1-3-2-0 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.d.ts

@@ -24,6 +24,6 @@ export interface FieldSetLegendProps extends WithChildren, StylingProps, DataTes
  * Use `FieldSet` to semantically group related form fields.
  * @public
  */
-export declare const FieldSet: ((props: FieldSetProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
-    Legend: (props: FieldSetLegendProps & import("react").RefAttributes<HTMLLegendElement>) => React.ReactElement | null;
+export declare const FieldSet: ((props: FieldSetProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
+    Legend: (props: FieldSetLegendProps & import("react").RefAttributes<HTMLLegendElement>) => import("react").ReactElement | null;
 };

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -23,5 +23,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-1-3";
-var legend = "_1dphm0f1-3-1-3";
+var fieldset = "_1dphm0f0-3-2-0";
+var legend = "_1dphm0f1-3-2-0";

package/forms/forms-core/components/form-field/FormField.d.ts

@@ -22,4 +22,4 @@ export interface FormFieldProps extends WithChildren, SharedFormFieldProps, Styl
  * The form field is child-agnostic.
  * @public
  */
-export declare const FormField: (props: FormFieldProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const FormField: (props: FormFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -22,4 +22,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-1-3";
+var formField = "_mvcxum0-3-2-0";

package/forms/forms-core/components/form-field/FormFieldMessageContextProvider.d.ts

@@ -19,5 +19,5 @@ export declare function withFormFieldMessageContextProviderWithGenerics<Componen
  * Function to ensure that an element is always wrapped within a MessageContextProvider for form validation outside of a `FormField`.
  * @internal
  */
-export declare function withFormFieldMessageContextProvider<PropType extends FormControlBaseProps, RefType>(OriginalComponent: JSXElementConstructor<PropType>): (props: PropType & import("react").RefAttributes<RefType>) => React.ReactElement | null;
+export declare function withFormFieldMessageContextProvider<PropType extends FormControlBaseProps, RefType>(OriginalComponent: JSXElementConstructor<PropType>): (props: PropType & import("react").RefAttributes<RefType>) => import("react").ReactElement | null;
 export {};

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-1-3 {
+._16z6rg10-3-2-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-1-3 {
+._16z6rg11-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-1-3 {
+._16z6rg12-3-2-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-1-3 {
+._16z6rg13-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-1-3 {
+._16z6rg14-3-2-0 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -24,5 +24,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-1-3", variantClassNames: { variant: { hint: "_16z6rg11-3-1-3", error: "_16z6rg12-3-1-3" }, disabled: { true: "_16z6rg13-3-1-3" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-1-3";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-2-0", variantClassNames: { variant: { hint: "_16z6rg11-3-2-0", error: "_16z6rg12-3-2-0" }, disabled: { true: "_16z6rg13-3-2-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-2-0";

package/forms/forms-core/components/form-field-messages/FormFieldMessages.d.ts

@@ -15,7 +15,7 @@ export type FormFieldMessageProps = MaskingProps & StylingProps & DataTestId & {
  */
 export declare const FormFieldMessages: ((props: MaskingProps & StylingProps & DataTestId & {
     children?: ((messages: FormFieldControlMessage[]) => ReactNode[] | ReactNode) | ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
     Item: {
         (props: import("./FormFieldMessageItem.js").FormFieldMessageItemProps): import("react/jsx-runtime.js").JSX.Element | null;
         displayName: string;

package/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -22,4 +22,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-1-3";
+var formFieldMessages = "_1l9bja60-3-2-0";

package/forms/forms-core/components/label/Label.css

@@ -1,9 +1,9 @@
-._1gxatyo0-3-1-3 {
+._1gxatyo0-3-2-0 {
   display: inline-block;
 }
-._1gxatyo1-3-1-3 {
+._1gxatyo1-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-1-3:after {
+._1gxatyo2-3-2-0:after {
   content: "*" / "";
 }

package/forms/forms-core/components/label/Label.d.ts

@@ -31,4 +31,4 @@ export interface LabelProps extends WithChildren, DOMProps, StylingProps, DataTe
  * form control by using the `FormField` component.
  * @public
  */
-export declare const Label: (props: LabelProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;
+export declare const Label: (props: LabelProps & import("react").RefAttributes<HTMLLabelElement>) => import("react").ReactElement | null;

package/forms/forms-core/components/label/Label.sty.js

@@ -23,4 +23,4 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var LabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-1-3", variantClassNames: { disabled: { true: "_1gxatyo1-3-1-3" }, required: { true: "_1gxatyo2-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var LabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-2-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-2-0" }, required: { true: "_1gxatyo2-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-1-3 {
+@keyframes _yfwka31-3-2-0 {
 
 }
-@keyframes _yfwka32-3-1-3 {
+@keyframes _yfwka32-3-2-0 {
 
 }
-._yfwka33-3-1-3:-webkit-autofill:is(._yfwka33-3-1-3,:hover,:focus) {
+._yfwka33-3-2-0:-webkit-autofill:is(._yfwka33-3-2-0,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-1-3) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-2-0) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-1-3:-webkit-autofill {
-  animation-name: _yfwka31-3-1-3;
+._yfwka33-3-2-0:-webkit-autofill {
+  animation-name: _yfwka31-3-2-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-1-3:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-1-3;
+._yfwka33-3-2-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-2-0;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/forms/hooks/useAutofillEvent.sty.js

@@ -25,7 +25,7 @@ __export(useAutofillEvent_css_exports, {
 });
 module.exports = __toCommonJS(useAutofillEvent_css_exports);
 var import_useAutofillEvent_css_ts_vanilla = require("./useAutofillEvent.css");
-var autofillBackground = "var(--_yfwka30-3-1-3)";
-var autofillCSS = "_yfwka33-3-1-3";
-var end = "_yfwka32-3-1-3";
-var start = "_yfwka31-3-1-3";
+var autofillBackground = "var(--_yfwka30-3-2-0)";
+var autofillCSS = "_yfwka33-3-2-0";
+var end = "_yfwka32-3-2-0";
+var start = "_yfwka31-3-2-0";

package/forms/number-input/NumberInput.d.ts

@@ -5,4 +5,4 @@ import type { FormControlRef } from '../shared-types.js';
  * @public
  * @deprecated This component is deprecated and will be removed in a future release. Please use the NumberInputV2 component instead.
  */
-export declare const NumberInput: (props: NumberInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => React.ReactElement | null;
+export declare const NumberInput: (props: NumberInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => import("react").ReactElement | null;

package/forms/number-input/NumberInputBase.d.ts

@@ -22,4 +22,4 @@ export type NumberInputProps = Pick<BaseInputProps, 'autoComplete' | 'placeholde
  * NumberInputBase component. This is necessary in order to correctly call onChange with undefined on blur, which is otherwise set to NaN by react-stately.
  * @public
  */
-export declare const NumberInputBase: (props: NumberInputProps & import("react").RefAttributes<Omit<FormControlRef<HTMLDivElement>, "validate">>) => React.ReactElement | null;
+export declare const NumberInputBase: (props: NumberInputProps & import("react").RefAttributes<Omit<FormControlRef<HTMLDivElement>, "validate">>) => import("react").ReactElement | null;

package/forms/number-input-v2/NumberInput.d.ts

@@ -25,11 +25,11 @@ export type NumberInputProps = Pick<BaseInputProps, 'placeholder' | 'variant' |
     stepMultiplier?: number;
 };
 /**
- * Use the `NumberInput` component to enter integers and floating-point numbers.
+ * Use `NumberInputV2` to let users enter integers and floating-point numbers.
  * @public
  */
-export declare const NumberInput: ((props: NumberInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => React.ReactElement | null) & {
-    Prefix: (props: import("../_base-input/BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Suffix: (props: import("../_base-input/BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Button: (props: import("../_base-input/BaseInputButton.js").BaseInputButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const NumberInput: ((props: NumberInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => import("react").ReactElement | null) & {
+    Prefix: (props: import("../_base-input/BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Suffix: (props: import("../_base-input/BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Button: (props: import("../_base-input/BaseInputButton.js").BaseInputButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;
 };

package/forms/number-input-v2/NumberInput.js

@@ -25,13 +25,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_calculations = require("./utils/calculations.js");
+var import_useId = require("../../core/hooks/useId.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
-var import_core = require("../../core/index.js");
 var import_BaseInput = require("../_base-input/BaseInput.js");
 var import_BaseInputButton = require("../_base-input/BaseInputButton.js");
+var import_format = require("./utils/format.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
-var import_format = require("./utils/format.js");
 var import_validation = require("./utils/validation.js");
 var import_BaseInputContent = require("../_base-input/BaseInputContent.js");
 const COMPONENT_NAME = "NumberInput";
@@ -58,7 +58,7 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     ...remainingProps
   } = props;
   const { state, dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
-  const errorId = (0, import_core.useId)();
+  const errorId = (0, import_useId.useId)();
   const isPasted = (0, import_react.useRef)(false);
   const isInternalChanged = (0, import_react.useRef)(defaultValue !== void 0);
   const internalRef = (0, import_react.useRef)(null);

package/forms/password-input/PasswordInput.css

@@ -1,4 +1,4 @@
-._1ah2tn00-3-1-3 {
+._1ah2tn00-3-2-0 {
   cursor: not-allowed;
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }

package/forms/password-input/PasswordInput.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEvent } from 'react';
+import { type ChangeEvent, type ReactElement } from 'react';
 import { type PasswordInputTooltipProps } from './PasswordInputTooltip.js';
 import type { FormControlProps } from '../../core/types/form-control-props.js';
 import { WithChildren } from '../../core/types/with-children.js';
@@ -15,6 +15,6 @@ export type PasswordInputProps = Pick<BaseInputProps, 'placeholder' | 'autoCompl
  * such as a password. Users can click on the eye icon to hide or show their data.
  * @public
  */
-export declare const PasswordInput: ((props: PasswordInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => React.ReactElement | null) & {
-    Tooltip: (props: PasswordInputTooltipProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const PasswordInput: ((props: PasswordInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => import("react").ReactElement | null) & {
+    Tooltip: (props: PasswordInputTooltipProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 };

package/forms/password-input/PasswordInput.js

@@ -96,6 +96,7 @@ const PasswordInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, f
   });
   const showTooltipText = showText ?? showTooltipDefaultText;
   const hideTooltipText = hideText ?? hideTooltipDefaultText;
+  const dataDtName = hidden ? "ShowPassword" : "HidePassword";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_BaseInput.BaseInput,
     {
@@ -124,6 +125,7 @@ const PasswordInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, f
           "aria-label": hidden ? showTooltipText : hideTooltipText,
           id: remainingTooltipProps.id,
           "aria-disabled": ariaDisabledProp,
+          "data-dt-name": dataDtName,
           children: hidden ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ViewIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ViewOffIcon, {})
         }
       ) })

package/forms/password-input/PasswordInput.sty.js

@@ -22,4 +22,4 @@ __export(PasswordInput_css_exports, {
 });
 module.exports = __toCommonJS(PasswordInput_css_exports);
 var import_PasswordInput_css_ts_vanilla = require("./PasswordInput.css");
-var readOnly = "_1ah2tn00-3-1-3";
+var readOnly = "_1ah2tn00-3-2-0";

package/forms/password-input/PasswordInputTooltip.d.ts

@@ -24,4 +24,4 @@ export interface PasswordInputTooltipProps extends DOMProps, StylingProps, DataT
  * Component which allows users to configure the tooltip text and icons of the PasswordInput.
  * @public
  */
-export declare const PasswordInputTooltip: (props: PasswordInputTooltipProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const PasswordInputTooltip: (props: PasswordInputTooltipProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/forms/radio/Radio.d.ts

@@ -19,4 +19,4 @@ export type RadioProps = Pick<FormControlProps<string, never>, 'disabled' | 'val
  * consider using a `Select` component.
  * @public
  */
-export declare const Radio: (props: Pick<FormControlProps<string, never>, "disabled" | "value"> & DOMProps & StylingProps & WithChildren & DataTestId & FocusEvents & AriaLabelingProps & import("react").RefAttributes<FormControlRef<HTMLElement>>) => React.ReactElement | null;
+export declare const Radio: (props: Pick<FormControlProps<string, never>, "disabled" | "value"> & DOMProps & StylingProps & WithChildren & DataTestId & FocusEvents & AriaLabelingProps & import("react").RefAttributes<FormControlRef<HTMLElement>>) => import("react").ReactElement | null;

package/forms/radio/RadioGroup.d.ts

@@ -16,4 +16,4 @@ export type RadioGroupProps = FormControlProps<string, (value: string, event?: F
  * `Radio` components inside a 'RadioGroup' component.
  * @public
  */
-export declare const RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<FormControlRef<HTMLElement>>) => React.ReactElement | null;
+export declare const RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<FormControlRef<HTMLElement>>) => import("react").ReactElement | null;

package/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-1-3 {
+._h96idu0-3-2-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-1-3 {
+._h96idu1-3-2-0 {
   cursor: not-allowed;
 }
-._h96idu4-3-1-3 {
+._h96idu4-3-2-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu4-3-1-3._h96idu2-3-1-3 {
+._h96idu4-3-2-0._h96idu2-3-2-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-1-3 ._h96idu4-3-1-3 {
+._h96idu1-3-2-0 ._h96idu4-3-2-0 {
   cursor: not-allowed;
 }
-._h96idu5-3-1-3 {
+._h96idu5-3-2-0 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,25 +31,25 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-1-3);
+  background-color: var(--_bx32h3-3-2-0);
 }
-._h96idu6-3-1-3 {
+._h96idu6-3-2-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduf-3-1-3 {
+._h96iduf-3-2-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96idug-3-1-3 {
+._h96idug-3-2-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96iduh-3-1-3 {
-  background-color: var(--_bx32h2-3-1-3);
+._h96iduh-3-2-0 {
+  background-color: var(--_bx32h2-3-2-0);
 }
-._h96idui-3-1-3 {
+._h96idui-3-2-0 {
   height: 100%;
-  fill: var(--_bx32h1-3-1-3);
+  fill: var(--_bx32h1-3-2-0);
 }
-._h96idu4-3-1-3:not(._h96idu3-3-1-3) ._h96idui-3-1-3 {
+._h96idu4-3-2-0:not(._h96idu3-3-2-0) ._h96idui-3-2-0 {
   display: none;
 }

package/forms/radio/styles.sty.js

@@ -30,10 +30,10 @@ module.exports = __toCommonJS(styles_css_exports);
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checked = "_h96idu3-3-1-3";
-var disabled = "_h96idu2-3-1-3";
-var group = "_h96idu0-3-1-3";
-var innerKnob = "_h96idui-3-1-3";
-var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu5-3-1-3", variantClassNames: { disabled: { true: "_h96idu6-3-1-3" }, checked: { true: "_h96idu7-3-1-3", false: "_h96idu8-3-1-3" }, hasError: { true: "_h96idu9-3-1-3", false: "_h96idua-3-1-3" }, isFocusVisible: { true: "_h96idub-3-1-3", false: "_h96iduc-3-1-3" }, readOnly: { true: "_h96idud-3-1-3", false: "_h96idue-3-1-3" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false }, "_h96iduf-3-1-3"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false }, "_h96idug-3-1-3"], [{ readOnly: true, disabled: false }, "_h96iduh-3-1-3"]] });
-var label = "_h96idu4-3-1-3";
-var readOnly = "_h96idu1-3-1-3";
+var checked = "_h96idu3-3-2-0";
+var disabled = "_h96idu2-3-2-0";
+var group = "_h96idu0-3-2-0";
+var innerKnob = "_h96idui-3-2-0";
+var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu5-3-2-0", variantClassNames: { disabled: { true: "_h96idu6-3-2-0" }, checked: { true: "_h96idu7-3-2-0", false: "_h96idu8-3-2-0" }, hasError: { true: "_h96idu9-3-2-0", false: "_h96idua-3-2-0" }, isFocusVisible: { true: "_h96idub-3-2-0", false: "_h96iduc-3-2-0" }, readOnly: { true: "_h96idud-3-2-0", false: "_h96idue-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false }, "_h96iduf-3-2-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false }, "_h96idug-3-2-0"], [{ readOnly: true, disabled: false }, "_h96iduh-3-2-0"]] });
+var label = "_h96idu4-3-2-0";
+var readOnly = "_h96idu1-3-2-0";

package/forms/search-input/SearchInput.css

@@ -1,3 +1,3 @@
-._1mumub80-3-1-3 {
+._1mumub80-3-2-0 {
   min-width: 192px;
 }

package/forms/search-input/SearchInput.d.ts

@@ -16,7 +16,7 @@ export type SearchInputProps = Pick<BaseInputProps, 'variant' | 'onBlur' | 'auto
  * It includes a built-in `Clear` button for quick resets.
  * @public
  */
-export declare const SearchInput: ((props: SearchInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => React.ReactElement | null) & {
-    Suffix: (props: import("../_base-input/BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Button: (props: import("../_base-input/BaseInputButton.js").BaseInputButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const SearchInput: ((props: SearchInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => import("react").ReactElement | null) & {
+    Suffix: (props: import("../_base-input/BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Button: (props: import("../_base-input/BaseInputButton.js").BaseInputButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;
 };

package/forms/search-input/SearchInput.sty.js

@@ -22,4 +22,4 @@ __export(SearchInput_css_exports, {
 });
 module.exports = __toCommonJS(SearchInput_css_exports);
 var import_SearchInput_css_ts_vanilla = require("./SearchInput.css");
-var searchInput = "_1mumub80-3-1-3";
+var searchInput = "_1mumub80-3-2-0";

package/forms/select/Select.d.ts

@@ -86,7 +86,7 @@ declare module 'react-select/dist/declarations/src/Select' {
     }
 }
 declare module 'react' {
-    function forwardRef<T, P = unknown>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+    function forwardRef<T, P = unknown>(render: (props: P, ref: import('react').Ref<T>) => import('react').ReactElement | null): (props: P & import('react').RefAttributes<T>) => import('react').ReactElement | null;
 }
 /**
  * Common select base props.
@@ -146,7 +146,7 @@ export type SelectFormsProps<OptionValue, Multiple extends boolean> = SelectBase
  * options from a collapsed dropdown with options.
  * @public
  */
-export declare const Select: (<OptionValue, Multiple extends boolean = false>(props: SelectFormsProps<OptionValue, Multiple> & import("react").RefAttributes<FormControlWithOverlayRef<HTMLDivElement>>) => React.ReactElement | null) & {
+export declare const Select: (<OptionValue, Multiple extends boolean = false>(props: SelectFormsProps<OptionValue, Multiple> & import("react").RefAttributes<FormControlWithOverlayRef<HTMLDivElement>>) => import("react").ReactElement | null) & {
     Content: typeof SelectContent;
     Option: typeof SelectOption;
     Group: typeof SelectGroup;

package/forms/select/components/Menu.js

@@ -192,6 +192,7 @@ function Menu(props) {
       }
     }
   };
+  const dataDtName = allSelected ? "DeselectAll" : "SelectAll";
   const noOptionsAvailable = selectProps.allOptions === void 0 || selectProps.allOptions.length === 0;
   const isFiltering = selectProps.customFilter && inputValue !== void 0 && inputValue !== "";
   const showClearSelection = selectProps.clearable && selectProps.value && isMulti === false && !isFiltering;
@@ -240,6 +241,11 @@ function Menu(props) {
                     "data-testid": filterDataTestId,
                     ref: filterRef,
                     variant: "minimal",
+                    "aria-label": intl.formatMessage({
+                      defaultMessage: "Search available options",
+                      id: "4PipZ2Z07Q9epib1",
+                      description: "Aria label for the filter inside the select"
+                    }),
                     placeholder: intl.formatMessage({
                       defaultMessage: "Search",
                       id: "CerADEHqR/6IVmHr",
@@ -359,6 +365,7 @@ function Menu(props) {
                     event.stopPropagation();
                   }
                 },
+                "data-dt-name": dataDtName,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                     "div",