@ozen-ui/kit 0.39.0 → 0.41.0

package/__inner__/esm/components/ButtonNext/Button.css

@@ -80,11 +80,12 @@
 
       text-transform: var(--typography-text-l-text_transform, none);
     }
+/** contained */
 .ButtonNext_variant_contained.ButtonNext_color_primary {
     --button-bg-color: var(--color-background-action);
     --button-bg-color-hover: var(--color-background-action-hover);
     --button-bg-color-active: var(--color-background-action-pressed);
-    --button-bg-color-focus: var(--color-background-action);
+    --button-bg-color-focus: var(--color-background-action-hover);
     --button-font-color: var(--color-content-action-on);
     --button-font-color-hover: var(--color-content-action-on);
     --button-font-color-active: var(--color-content-action-on);
@@ -94,7 +95,7 @@
     --button-bg-color: var(--color-background-action-secondary);
     --button-bg-color-hover: var(--color-background-action-secondary-hover);
     --button-bg-color-active: var(--color-background-action-secondary-pressed);
-    --button-bg-color-focus: var(--color-background-action-secondary);
+    --button-bg-color-focus: var(--color-background-action-secondary-hover);
     --button-font-color: var(--color-content-action-on);
     --button-font-color-hover: var(--color-content-action-on);
     --button-font-color-active: var(--color-content-action-on);
@@ -104,7 +105,7 @@
     --button-bg-color: var(--color-background-tertiary);
     --button-bg-color-hover: var(--color-background-tertiary-hover);
     --button-bg-color-active: var(--color-background-tertiary-pressed);
-    --button-bg-color-focus: var(--color-background-tertiary);
+    --button-bg-color-focus: var(--color-background-tertiary-hover);
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
@@ -114,17 +115,18 @@
     --button-bg-color: var(--color-background-error);
     --button-bg-color-hover: var(--color-background-error-hover);
     --button-bg-color-active: var(--color-background-error-pressed);
-    --button-bg-color-focus: var(--color-background-error);
+    --button-bg-color-focus: var(--color-background-error-hover);
     --button-font-color: var(--color-content-action-on);
     --button-font-color-hover: var(--color-content-action-on);
     --button-font-color-active: var(--color-content-action-on);
     --button-font-color-focus: var(--color-content-action-on);
   }
+/** contained-additional */
 .ButtonNext_variant_contained-additional.ButtonNext_color_primary {
     --button-bg-color: var(--color-background-action-light);
     --button-bg-color-hover: var(--color-background-action-light-hover);
     --button-bg-color-active: var(--color-background-action-light-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-action-light-hover);
     --button-font-color: var(--color-content-action);
     --button-font-color-hover: var(--color-content-action);
     --button-font-color-active: var(--color-content-action);
@@ -134,7 +136,7 @@
     --button-bg-color: var(--color-background-secondary);
     --button-bg-color-hover: var(--color-background-secondary-hover);
     --button-bg-color-active: var(--color-background-secondary-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-secondary-hover);
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
@@ -144,7 +146,7 @@
     --button-bg-color: var(--color-background-primary);
     --button-bg-color-hover: var(--color-background-primary-hover);
     --button-bg-color-active: var(--color-background-primary-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-primary-hover);
     --button-font-color: var(--color-content-secondary);
     --button-font-color-hover: var(--color-content-secondary);
     --button-font-color-active: var(--color-content-secondary);
@@ -154,52 +156,54 @@
     --button-bg-color: var(--color-background-error-light);
     --button-bg-color-hover: var(--color-background-error-light-hover);
     --button-bg-color-active: var(--color-background-error-light-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-error-light-hover);
     --button-font-color: var(--color-content-error);
     --button-font-color-hover: var(--color-content-error);
     --button-font-color-active: var(--color-content-error);
     --button-font-color-focus: var(--color-content-error);
   }
+/** ghost */
 .ButtonNext_variant_ghost.ButtonNext_color_primary {
-    --button-bg-color: unset;
-    --button-bg-color-hover: var(--color-background-success-light-hover);
-    --button-bg-color-active: var(--color-background-success-light-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color: transparent;
+    --button-bg-color-hover: var(--color-background-action-light-hover);
+    --button-bg-color-active: var(--color-background-action-light-pressed);
+    --button-bg-color-focus: var(--color-background-action-light-hover);
     --button-font-color: var(--color-content-action);
     --button-font-color-hover: var(--color-content-action);
     --button-font-color-active: var(--color-content-action);
     --button-font-color-focus: var(--color-content-action);
   }
 .ButtonNext_variant_ghost.ButtonNext_color_secondary {
-    --button-bg-color: unset;
+    --button-bg-color: transparent;
     --button-bg-color-hover: var(--color-background-secondary-hover);
     --button-bg-color-active: var(--color-background-secondary-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-secondary-hover);
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
     --button-font-color-focus: var(--color-content-primary);
   }
 .ButtonNext_variant_ghost.ButtonNext_color_tertiary {
-    --button-bg-color: unset;
+    --button-bg-color: transparent;
     --button-bg-color-hover: var(--color-background-primary-hover);
     --button-bg-color-active: var(--color-background-primary-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-primary-hover);
     --button-font-color: var(--color-content-secondary);
     --button-font-color-hover: var(--color-content-secondary);
     --button-font-color-active: var(--color-content-secondary);
     --button-font-color-focus: var(--color-content-secondary);
   }
 .ButtonNext_variant_ghost.ButtonNext_color_error {
-    --button-bg-color: unset;
+    --button-bg-color: transparent;
     --button-bg-color-hover: var(--color-background-error-light-hover);
     --button-bg-color-active: var(--color-background-error-light-pressed);
-    --button-bg-color-focus: unset;
+    --button-bg-color-focus: var(--color-background-error-light-hover);
     --button-font-color: var(--color-content-error);
     --button-font-color-hover: var(--color-content-error);
     --button-font-color-active: var(--color-content-error);
     --button-font-color-focus: var(--color-content-error);
   }
+/** function */
 .ButtonNext_variant_function {
     --button-height: auto;
     --button-min-width: auto;
@@ -209,10 +213,10 @@
   .ButtonNext_variant_function.ButtonNext_color_secondary,
   .ButtonNext_variant_function.ButtonNext_color_tertiary,
   .ButtonNext_variant_function.ButtonNext_color_error {
-    --button-bg-color: unset;
-    --button-bg-color-hover: unset;
-    --button-bg-color-active: unset;
-    --button-bg-color-focus: unset;
+    --button-bg-color: transparent;
+    --button-bg-color-hover: transparent;
+    --button-bg-color-active: transparent;
+    --button-bg-color-focus: transparent;
   }
 .ButtonNext_variant_function.ButtonNext_color_primary {
     --button-font-color: var(--color-content-action);
@@ -238,6 +242,7 @@
     --button-font-color-active: var(--color-content-error-pressed);
     --button-font-color-focus: var(--color-content-error-pressed);
   }
+/** disabled & loading */
 .ButtonNext_variant_contained.ButtonNext_disabled,
   .ButtonNext_variant_contained.ButtonNext_loading,
   .ButtonNext_variant_contained-additional.ButtonNext_disabled,
@@ -260,13 +265,15 @@
   .ButtonNext_variant_ghost.ButtonNext_loading,
   .ButtonNext_variant_function.ButtonNext_disabled,
   .ButtonNext_variant_function.ButtonNext_loading {
-    --button-bg-color: unset;
-    --button-bg-color-hover: unset;
-    --button-bg-color-active: unset;
+    --button-bg-color: transparent;
+    --button-bg-color-hover: transparent;
+    --button-bg-color-active: transparent;
   }
+/** focus */
 .ButtonNext:focus:not(:focus-visible, :active, :hover) {
     box-shadow: none;
     color: var(--button-font-color);
+    background-color: var(--button-bg-color);
   }
 .ButtonNext:focus:not(:focus-visible) {
     box-shadow: none;

package/__inner__/esm/components/FieldControl/FieldControl.css

@@ -1,22 +1,24 @@
 /* stylelint-disable */
 .FieldControl {
   --textfield-color: var(--color-content-primary);
-  --textfield-background-color: var(--color-background-primary);
   --textfield-border-width: var(--border-width-s);
   --textfield-border-color: var(--color-border-main);
+  --textfield-placeholder-color: var(--color-content-tertiary);
+  --textfield-background-color: var(--color-background-primary);
   cursor: text;
-  display: inline-flex;
   vertical-align: top;
+  display: inline-flex;
   flex-direction: column;
 }
 .FieldControl > * {
     cursor: text;
   }
 .FieldControl_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 32px;
       --textfield-input-padding: 8px 0;
       --textfield-input-gap: var(--spacing-2xs);
+      --textfield-gutter-x: var(--control-padding-xs);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-2xs);
 
       font: var(--typography-text-2xs-font);
 
@@ -25,10 +27,11 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .FieldControl_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 40px;
       --textfield-input-padding: 12px 0;
       --textfield-input-gap: var(--spacing-2xs);
+      --textfield-gutter-x: var(--control-padding-xs);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-xs);
 
       font: var(--typography-text-xs-font);
 
@@ -37,10 +40,11 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .FieldControl_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-height: 48px;
       --textfield-input-padding: 14px 0;
       --textfield-input-gap: var(--spacing-xs);
+      --textfield-gutter-x: var(--control-padding-s);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-s);
 
       font: var(--typography-text-s-font);
 
@@ -49,10 +53,11 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .FieldControl_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-height: 56px;
       --textfield-input-padding: 16px 0;
       --textfield-input-gap: var(--spacing-xs);
+      --textfield-gutter-x: var(--control-padding-m);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-m);
 
       font: var(--typography-text-m-font);
 
@@ -61,10 +66,11 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .FieldControl_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-height: 64px;
       --textfield-input-padding: 18px 0;
       --textfield-input-gap: var(--spacing-s);
+      --textfield-gutter-x: var(--control-padding-l);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-l);
 
       font: var(--typography-text-l-font);
 
@@ -76,16 +82,16 @@
         --textfield-input-padding: 8px 0 8px;
       }
 .FieldControl_hasLabel.FieldControl_size_xs {
-        --textfield-input-padding: 19px 0 4px;
+        --textfield-input-padding: 20px 0 4px;
       }
 .FieldControl_hasLabel.FieldControl_size_s {
-        --textfield-input-padding: 21px 0 6px;
+        --textfield-input-padding: 22px 0 6px;
       }
 .FieldControl_hasLabel.FieldControl_size_m {
-        --textfield-input-padding: 24px 0 6px;
+        --textfield-input-padding: 24px 0 8px;
       }
 .FieldControl_hasLabel.FieldControl_size_l {
-        --textfield-input-padding: 26px 0 6px;
+        --textfield-input-padding: 28px 0 8px;
       }
 .FieldControl_hasLabel .FieldInput::placeholder {
         opacity: 0;
@@ -102,8 +108,8 @@
 .FieldControl_focused,
   .FieldControl_focused:hover {
     --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
     --textfield-border-color: var(--color-border-action);
+    --textfield-background-color: var(--color-background-main);
   }
 .FieldControl_error,
   .FieldControl_error.FieldControl:hover,
@@ -112,9 +118,9 @@
     --textfield-border-color: var(--color-border-error);
   }
 .FieldControl_disabled {
+    --textfield-color: var(--color-content-secondary);
     --textfield-border-color: var(--color-border-disabled);
     --textfield-background-color: var(--color-background-disabled);
-    --textfield-color: var(--color-content-secondary);
-    pointer-events: none;
     cursor: default;
+    pointer-events: none;
   }

package/__inner__/esm/components/FieldLabel/FieldLabel.css

@@ -48,22 +48,22 @@
   .FieldLabel_size_s {
       --field-label-font: var(--typography-text-s-font);
       --field-label-scaled: var(--typography-text-3xs-font);
-      --field-label-translate_y: -9px;
+      --field-label-translate_y: -8px;
       --field-label-top: 14px;
     }
 
   .FieldLabel_size_m {
       --field-label-font: var(--typography-text-m-font);
-      --field-label-scaled: var(--typography-text-s-font);
-      --field-label-translate_y: -10px;
-      --field-label-top: 15px;
+      --field-label-scaled: var(--typography-text-xs-font);
+      --field-label-translate_y: -8px;
+      --field-label-top: 16px;
     }
 
   .FieldLabel_size_l {
       --field-label-font: var(--typography-text-l-font);
       --field-label-scaled: var(--typography-text-s-font);
-      --field-label-translate_y: -9px;
-      --field-label-top: 17px;
+      --field-label-translate_y: -10px;
+      --field-label-top: 18px;
     }
 
   .FieldLabel_disabled {

package/__inner__/esm/components/Fieldset/Fieldset.css

@@ -4,7 +4,7 @@
   margin: 0;
   padding: 0;
   pointer-events: none;
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--textfield-border-radius);
   border: var(--textfield-border-width) solid var(--textfield-border-color);
   transition: border var(--transition-default);
 }

package/__inner__/esm/components/FilePicker/FilePicker.css

@@ -1,130 +1,70 @@
-/* stylelint-disable */
-.FilePicker {
-  --textfield-color: var(--color-content-tertiary);
-  --textfield-background-color: var(--color-background-primary);
-  --textfield-border-width: var(--border-width-s);
-  --textfield-border-color: var(--color-border-main);
-  font: var(--textfield-input-font);
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
-}
 .FilePicker-Body {
-    position: relative;
     display: flex;
-    -moz-column-gap: var(--textfield-input-gap);
-         column-gap: var(--textfield-input-gap);
+    cursor: pointer;
+    position: relative;
     align-items: center;
     box-sizing: border-box;
+    color: var(--textfield-color);
     padding: 0 var(--textfield-gutter-x);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
+    border-radius: var(--textfield-border-radius);
     background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
-    color: var(--textfield-color);
-    border-radius: var(--border-radius-xs);
-    cursor: pointer;
   }
-.FilePicker-FieldContainer {
+  .FilePicker-FieldContainer {
+    overflow: hidden;
     inline-size: 100%;
     min-inline-size: 0;
     position: relative;
-    overflow: hidden;
   }
-.FilePicker-FileName,
+  .FilePicker-FileName,
   .FilePicker-Placeholder {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    padding: 0;
     border: none;
-    outline: none;
-    position: relative;
     display: flex;
-    align-items: center;
+    outline: none;
+    overflow: hidden;
     inline-size: 100%;
-    padding: 0;
     background: none;
+    position: relative;
+    align-items: center;
+    white-space: nowrap;
     box-sizing: border-box;
-    color: var(--textfield-color);
+    text-overflow: ellipsis;
     block-size: var(--textfield-input-height);
   }
-.FilePicker-Input {
+  .FilePicker-Placeholder {
+    color: var(--textfield-placeholder-color);
+  }
+  .FilePicker-Input {
+    opacity: 0;
+    inline-size: 100%;
     inset-block-end: 0;
-    inset-inline-start: 0;
     position: absolute;
-    opacity: 0;
     pointer-events: none;
-    inline-size: 100%;
+    inset-inline-start: 0;
   }
-.FilePicker-Input:focus + .FilePicker-Placeholder {
+  .FilePicker-Input:focus + .FilePicker-Placeholder {
       opacity: 1;
     }
-.FilePicker_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 32px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-padding: 8px 0 8px;
-      --textfield-input-gap: var(--spacing-2xs);
-    }
-.FilePicker_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 40px;
-      --textfield-input-font: var(--typography-text-xs-font);
-      --textfield-input-padding: 19px 0 4px;
-      --textfield-input-gap: var(--spacing-2xs);
-    }
-.FilePicker_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-height: 48px;
-      --textfield-input-font: var(--typography-text-s-font);
-      --textfield-input-padding: 21px 0 6px;
-      --textfield-input-gap: var(--spacing-xs);
-    }
-.FilePicker_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-height: 56px;
-      --textfield-input-font: var(--typography-text-m-font);
-      --textfield-input-padding: 24px 0 6px;
-      --textfield-input-gap: var(--spacing-xs);
-    }
-.FilePicker_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-height: 64px;
-      --textfield-input-font: var(--typography-text-l-font);
-      --textfield-input-padding: 26px 0 6px;
-      --textfield-input-gap: var(--spacing-s);
-    }
-.FilePicker_fullWidth {
-    inline-size: 100%;
+  .FilePicker-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
   }
-.FilePicker_hasValue {
-    --textfield-color: var(--color-content-primary);
+  .FilePicker-ClearButton_visibility {
+      visibility: visible;
+    }
+  .FilePicker-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
   }
-.FilePicker_hasLabel .FilePicker-Placeholder {
+
+.FieldControl_hasLabel .FilePicker-Placeholder {
       opacity: 0;
     }
-.FilePicker_hasLabel .FilePicker-FileName,
-    .FilePicker_hasLabel .FilePicker-Placeholder {
+
+.FieldControl_hasLabel .FilePicker-FileName,
+    .FieldControl_hasLabel .FilePicker-Placeholder {
       padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
     }
-.FilePicker:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-.FilePicker_focused,
-  .FilePicker_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-.FilePicker_error,
-  .FilePicker_error.FilePicker:hover,
-  .FilePicker_error.FilePicker_focused,
-  .FilePicker_error.FilePicker_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-.FilePicker_disabled {
-    --textfield-border-color: var(--color-border-disabled);
-    --textfield-background-color: var(--color-background-disabled);
-    --textfield-color: var(--color-content-secondary);
-    pointer-events: none;
-    cursor: default;
-  }

package/__inner__/esm/components/FilePicker/FilePicker.d.ts

@@ -1,4 +1,72 @@
 import './FilePicker.css';
 import React from 'react';
 export declare const cnFilePicker: import("@bem-react/classname").ClassNameFormatter;
-export declare const FilePicker: React.ForwardRefExoticComponent<import("./types").FilePickerBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("./types").FilePickerBaseProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const FilePicker: React.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    name?: string | undefined;
+    size?: "s" | "m" | "l" | "2xs" | "xs" | undefined;
+    label?: string | undefined;
+    accept?: string | undefined;
+    placeholder?: string | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    multiple?: boolean | undefined;
+    fileList?: File[] | undefined;
+    fullWidth?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    inputProps?: (Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
+    } & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    disableTruncate?: boolean | undefined;
+    required?: boolean | undefined;
+    renderLeft?: string | number | React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>> | (() => React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>> | (() => React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>>) | undefined;
+    hint?: string | null | undefined;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+    labelProps?: import("../FieldLabel").FieldLabelProps | undefined;
+    renderValue?: import("./types").FilePickerRenderValue | undefined;
+    clearText?: string | undefined;
+    onClear?: ((e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, payload: {
+        name?: string | undefined;
+    }) => void) | undefined;
+    className?: string | undefined;
+    'data-testid'?: string | undefined;
+} & {
+    labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
+    labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+}> & React.RefAttributes<HTMLDivElement>>;