@redis-ui/components 42.0.0 → 42.7.0

package/dist/Inputs/TextArea/components/TextAreaTag/TextAreaTag.cjs

@@ -13,6 +13,7 @@ const TextAreaTag = React.forwardRef(({
   id,
   autoComplete = "off",
   disabled,
+  "aria-describedby": ariaDescribedby,
   ...restProps
 }, ref) => {
   const fieldDisabled = Field_context.useFieldDisabled(disabled);
@@ -20,12 +21,15 @@ const TextAreaTag = React.forwardRef(({
   const inputValueProps = InputValue_context.useInputValueProps(restProps, ref);
   const status = FormField_context.useFieldStatus();
   const required = FormField_context.useFieldRequired();
+  const additionTextId = FormField_context.useFieldAdditionTextId();
   const errorContent = Field_context.useErrorContent();
   const errorId = index.useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
-    "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
-  } : null;
+    "aria-describedby": [errorId, additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  } : {
+    "aria-describedby": [additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  };
   const requiredProps = required ? {
     "aria-required": true
   } : null;
@@ -39,9 +43,9 @@ const TextAreaTag = React.forwardRef(({
       id: sharedId,
       disabled: fieldDisabled,
       autoComplete,
-      ...statusProps,
       ...requiredProps,
       ...restProps,
+      ...statusProps,
       ...inputValueProps
     }), errorAlert]
   });

package/dist/Inputs/TextArea/components/TextAreaTag/TextAreaTag.js

@@ -6,11 +6,12 @@ import { useFieldDisabled, useErrorContent } from "../../../components/Context/F
 import { useInputValueProps } from "../../../components/Context/InputValue.context.js";
 import { TextAreaTag as TextAreaTag$1 } from "./TextAreaTag.style.js";
 import { useSharedId } from "../../../../Helpers/contexts/SharedId.context.js";
-import { useFieldStatus, useFieldRequired } from "../../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired, useFieldAdditionTextId } from "../../../../FormField/FormField.context.js";
 const TextAreaTag = forwardRef(({
   id,
   autoComplete = "off",
   disabled,
+  "aria-describedby": ariaDescribedby,
   ...restProps
 }, ref) => {
   const fieldDisabled = useFieldDisabled(disabled);
@@ -18,12 +19,15 @@ const TextAreaTag = forwardRef(({
   const inputValueProps = useInputValueProps(restProps, ref);
   const status = useFieldStatus();
   const required = useFieldRequired();
+  const additionTextId = useFieldAdditionTextId();
   const errorContent = useErrorContent();
   const errorId = useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
-    "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
-  } : null;
+    "aria-describedby": [errorId, additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  } : {
+    "aria-describedby": [additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  };
   const requiredProps = required ? {
     "aria-required": true
   } : null;
@@ -37,9 +41,9 @@ const TextAreaTag = forwardRef(({
       id: sharedId,
       disabled: fieldDisabled,
       autoComplete,
-      ...statusProps,
       ...requiredProps,
       ...restProps,
+      ...statusProps,
       ...inputValueProps
     }), errorAlert]
   });

package/dist/Inputs/components/Compose/CommonCompose.cjs

@@ -43,20 +43,22 @@ const CommonInputCompose = ({
       children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusTransProvider, {
         value: error && "error" || valid && "success" || "none",
         children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldRequiredTransProvider, {
-          children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
-            value: error ?? "",
-            children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CommonInputCompose, {
-              "$variant": variant,
-              ...restProps,
-              "data-editable": "",
-              onPointerUp: react_utils.combineHandlers((e) => {
-                var _a;
-                const target = e.target;
-                if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
-                  (_a = e.currentTarget.querySelector(`input${InputTag_style.InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
-                }
-              }, onPointerUp),
-              children
+          children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldAdditionTextIdTransProvider, {
+            children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
+              value: error ?? "",
+              children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CommonInputCompose, {
+                "$variant": variant,
+                ...restProps,
+                "data-editable": "",
+                onPointerUp: react_utils.combineHandlers((e) => {
+                  var _a;
+                  const target = e.target;
+                  if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
+                    (_a = e.currentTarget.querySelector(`input${InputTag_style.InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
+                  }
+                }, onPointerUp),
+                children
+              })
             })
           })
         })

package/dist/Inputs/components/Compose/CommonCompose.js

@@ -4,7 +4,7 @@ import { ReadonlyRenderWrapper } from "../ReadonlyRender/ReadonlyRenderWrapper.j
 import { InputTag } from "../InputTag/InputTag.style.js";
 import { CommonInputCompose as CommonInputCompose$1, ReadonlyValue } from "./Compose.style.js";
 import { SharedIdTransProvider } from "../../../Helpers/contexts/SharedId.context.js";
-import { useFieldReadonly, FieldStatusTransProvider, FieldRequiredTransProvider } from "../../../FormField/FormField.context.js";
+import { useFieldReadonly, FieldStatusTransProvider, FieldRequiredTransProvider, FieldAdditionTextIdTransProvider } from "../../../FormField/FormField.context.js";
 import { combineHandlers } from "../../../Helpers/react.utils.js";
 const DefaultReadonlyRender = ({
   value,
@@ -41,20 +41,22 @@ const CommonInputCompose = ({
       children: jsxRuntimeExports.jsx(FieldStatusTransProvider, {
         value: error && "error" || valid && "success" || "none",
         children: jsxRuntimeExports.jsx(FieldRequiredTransProvider, {
-          children: jsxRuntimeExports.jsx(ErrorContentProvider, {
-            value: error ?? "",
-            children: jsxRuntimeExports.jsx(CommonInputCompose$1, {
-              "$variant": variant,
-              ...restProps,
-              "data-editable": "",
-              onPointerUp: combineHandlers((e) => {
-                var _a;
-                const target = e.target;
-                if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
-                  (_a = e.currentTarget.querySelector(`input${InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
-                }
-              }, onPointerUp),
-              children
+          children: jsxRuntimeExports.jsx(FieldAdditionTextIdTransProvider, {
+            children: jsxRuntimeExports.jsx(ErrorContentProvider, {
+              value: error ?? "",
+              children: jsxRuntimeExports.jsx(CommonInputCompose$1, {
+                "$variant": variant,
+                ...restProps,
+                "data-editable": "",
+                onPointerUp: combineHandlers((e) => {
+                  var _a;
+                  const target = e.target;
+                  if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
+                    (_a = e.currentTarget.querySelector(`input${InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
+                  }
+                }, onPointerUp),
+                children
+              })
             })
           })
         })

package/dist/Inputs/components/Compose/Compose.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputVariant } from './CommonCompose.types';
 export declare const CommonInputCompose: import("styled-components").StyledComponent<"div", any, {
     'data-status': import("../../../FormField").FieldStatus | undefined;

package/dist/Inputs/components/Context/InputValue.context.d.ts

@@ -20,112 +20,74 @@ export type InputValueContext = {
     };
 };
 export declare const ContextProvider: import("react").Provider<InputValueContext | null>;
-export declare const useInputValueProps: <T extends HTMLElement>(customProps?: Partial<ChildFree<HTMLAttributes<HTMLElement>>>, inputRef?: ForwardedRef<T> | undefined) => {
+export declare const useInputValueProps: <T extends HTMLElement>(customProps?: Partial<ChildFree<HTMLAttributes<HTMLElement>>>, inputRef?: ForwardedRef<T>) => {
     ref: (node: T) => void;
-    slot?: string | undefined;
+    slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoFocus?: boolean | undefined;
-    className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
-    translate?: "no" | "yes" | undefined;
-    radioGroup?: string | undefined;
+    title?: string | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    className?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    color?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
-    is?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
+    tabIndex?: number | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
+    "aria-flowto"?: string | undefined | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
     "aria-modal"?: (boolean | "true" | "false") | undefined;
     "aria-multiline"?: (boolean | "true" | "false") | undefined;
     "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
     "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
-    } | undefined;
+    } | undefined | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
@@ -286,6 +248,44 @@ export declare const useInputValueProps: <T extends HTMLElement>(customProps?: P
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCapitalize?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
     value?: string | undefined;
 };
 export declare const useInputValueApi: <T extends InputValueApi = InputValueApi>() => T;

package/dist/Inputs/components/InputTag/InputTag.cjs

@@ -15,6 +15,7 @@ const InputTag = React.forwardRef(({
   type = "text",
   autoComplete = "off",
   disabled,
+  "aria-describedby": ariaDescribedby,
   ...restProps
 }, ref) => {
   const fieldDisabled = Field_context.useFieldDisabled(disabled);
@@ -22,12 +23,15 @@ const InputTag = React.forwardRef(({
   const inputValueProps = InputValue_context.useInputValueProps(restProps, ref);
   const status = FormField_context.useFieldStatus();
   const required = FormField_context.useFieldRequired();
+  const additionTextId = FormField_context.useFieldAdditionTextId();
   const errorContent = Field_context.useErrorContent();
   const errorId = index.useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
-    "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
-  } : null;
+    "aria-describedby": [errorId, additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  } : {
+    "aria-describedby": [additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  };
   const requiredProps = required ? {
     "aria-required": true
   } : null;
@@ -36,9 +40,9 @@ const InputTag = React.forwardRef(({
     type,
     disabled: fieldDisabled,
     autoComplete,
-    ...statusProps,
     ...requiredProps,
     ...restProps,
+    ...statusProps,
     ...inputValueProps
   };
   const inputTag = autoSize ? jsxRuntime.jsxRuntimeExports.jsx(InputTag_style.AutoSizeInputTag, {

package/dist/Inputs/components/InputTag/InputTag.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputTagProps, RestInputTagProps } from './InputTag.types';
 declare const InputTag: import("react").ForwardRefExoticComponent<InputTagProps & RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
 export default InputTag;

package/dist/Inputs/components/InputTag/InputTag.js

@@ -5,7 +5,7 @@ import { VisuallyHidden } from "../../../node_modules/@radix-ui/react-visually-h
 import { useFieldDisabled, useErrorContent } from "../Context/Field.context.js";
 import { useInputValueProps } from "../Context/InputValue.context.js";
 import { AutoSizeInputTag, InputTag as InputTag$1 } from "./InputTag.style.js";
-import { useFieldStatus, useFieldRequired } from "../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired, useFieldAdditionTextId } from "../../../FormField/FormField.context.js";
 import { useSharedId } from "../../../Helpers/contexts/SharedId.context.js";
 const InputTag = forwardRef(({
   autoSize,
@@ -13,6 +13,7 @@ const InputTag = forwardRef(({
   type = "text",
   autoComplete = "off",
   disabled,
+  "aria-describedby": ariaDescribedby,
   ...restProps
 }, ref) => {
   const fieldDisabled = useFieldDisabled(disabled);
@@ -20,12 +21,15 @@ const InputTag = forwardRef(({
   const inputValueProps = useInputValueProps(restProps, ref);
   const status = useFieldStatus();
   const required = useFieldRequired();
+  const additionTextId = useFieldAdditionTextId();
   const errorContent = useErrorContent();
   const errorId = useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
-    "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
-  } : null;
+    "aria-describedby": [errorId, additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  } : {
+    "aria-describedby": [additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  };
   const requiredProps = required ? {
     "aria-required": true
   } : null;
@@ -34,9 +38,9 @@ const InputTag = forwardRef(({
     type,
     disabled: fieldDisabled,
     autoComplete,
-    ...statusProps,
     ...requiredProps,
     ...restProps,
+    ...statusProps,
     ...inputValueProps
   };
   const inputTag = autoSize ? jsxRuntimeExports.jsx(AutoSizeInputTag, {

package/dist/Inputs/components/InputTag/InputTag.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const InputStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
 export declare const InputTag: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const AutoSizeInputTag: import("styled-components").StyledComponent<({ children, ...restProps }: import("../AutoSizeInput/AutoSizeInput.types").AutoSizeInputProps & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "value"> & import("../AutoSizeInput/AutoSizeInput.types").InputWrapper) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const AutoSizeInputTag: import("styled-components").StyledComponent<({ children, ...restProps }: import("../AutoSizeInput/AutoSizeInput.types").AutoSizeInputProps & import("../AutoSizeInput/AutoSizeInput.types").RestAutoSizeInputProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Inputs/components/ResetButton/ResetButton.style.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ResetButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/Inputs/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributes } from 'react';
 import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons';
-declare const StatusIndicator: ({ className, style, size, ...restProps }: MonochromeIconProps & Pick<HTMLAttributes<unknown>, 'className' | 'style'>) => import("react/jsx-runtime").JSX.Element | null;
+declare const StatusIndicator: ({ className, style, size, ...restProps }: MonochromeIconProps & Pick<HTMLAttributes<unknown>, "className" | "style">) => import("react/jsx-runtime").JSX.Element | null;
 export default StatusIndicator;

package/dist/Inputs/hooks/numericInput/numericInput.utils.d.ts

@@ -8,7 +8,7 @@ export declare const isInoperative: (value: MaybeNumber) => value is null | unde
 /**
  * Checks that value is empty: null, undefined, NaN or empty string
  */
-export declare const isEmpty: (value: MaybeNumber) => value is "" | null | undefined;
+export declare const isEmpty: (value: MaybeNumber) => value is null | undefined | "";
 /**
  * Tries to parse numeric input to number, even if it is not fully qualified.
  * e.g. "1e" will be parsed as 1 and "e1" as 0; "-." and empty string are also 0.
@@ -26,7 +26,7 @@ export declare const toNumberOptimistic: (value: MaybeNumber) => number | undefi
 /**
  * verifies, that specified value is not empty and can be converted to number
  */
-export declare const isNumber: (value: MaybeNumber) => value is string | number;
+export declare const isNumber: (value: MaybeNumber) => value is number | string;
 /**
  * if value is not empty and simply convertable to number, returns converted, otherwise undefined
  */

package/dist/KeyValueList/KeyValueList.cjs

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const AddButton = require("./components/AddButton/AddButton.cjs");
+const KeyValueList_style = require("./KeyValueList.style.cjs");
+const ActionIconButton = require("../Button/ActionIconButton/ActionIconButton.cjs");
+const Input = require("../Inputs/Input/Input.cjs");
+const KeyValueListBase = ({
+  data,
+  emptyStateMessage = "There are no tags associated with this database",
+  onDelete,
+  onKeyChange,
+  onValueChange,
+  renderKey,
+  renderValue,
+  maxHeight,
+  keyPlaceholder = "Enter key",
+  valuePlaceholder = "Enter value",
+  ...restProps
+}) => {
+  const renderKeyContent = (row) => {
+    if (renderKey) {
+      return renderKey(row);
+    }
+    return jsxRuntime.jsxRuntimeExports.jsx(Input.default, {
+      value: String(row.key),
+      onChange: (value) => onKeyChange == null ? void 0 : onKeyChange(row, value),
+      placeholder: keyPlaceholder
+    });
+  };
+  const renderValueContent = (row) => {
+    if (renderValue) {
+      return renderValue(row);
+    }
+    return jsxRuntime.jsxRuntimeExports.jsx(Input.default, {
+      value: String(row.value),
+      onChange: (value) => onValueChange == null ? void 0 : onValueChange(row, value),
+      placeholder: valuePlaceholder
+    });
+  };
+  const hasData = data.length > 0;
+  return jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.TableWrapper, {
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.TableScroller, {
+      "$maxHeight": maxHeight,
+      children: jsxRuntime.jsxRuntimeExports.jsxs(KeyValueList_style.Table, {
+        children: [jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.TableHead, {
+          children: jsxRuntime.jsxRuntimeExports.jsxs(KeyValueList_style.HeaderRow, {
+            children: [jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.HeaderCell, {
+              children: "Key"
+            }), jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.SeparatorCell, {}), jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.HeaderCell, {
+              children: "Value"
+            }), jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.HeaderCell, {
+              "$width": "4.8rem"
+            })]
+          })
+        }), jsxRuntime.jsxRuntimeExports.jsx("tbody", {
+          children: hasData ? data.map((row) => jsxRuntime.jsxRuntimeExports.jsxs("tr", {
+            children: [jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.BodyCell, {
+              children: renderKeyContent(row)
+            }), jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.DelimiterCell, {
+              children: ":"
+            }), jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.BodyCell, {
+              children: renderValueContent(row)
+            }), jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.BodyCell, {
+              children: jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.ActionCellContent, {
+                children: jsxRuntime.jsxRuntimeExports.jsx(ActionIconButton.default, {
+                  variant: "secondary",
+                  icon: redisUiIcons.DeleteIcon,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete == null ? void 0 : onDelete(row);
+                  },
+                  "aria-label": "Delete"
+                })
+              })
+            })]
+          }, row.id)) : jsxRuntime.jsxRuntimeExports.jsx("tr", {
+            children: jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.BodyCell, {
+              colSpan: 4,
+              "$align": "center",
+              children: jsxRuntime.jsxRuntimeExports.jsx(KeyValueList_style.EmptyStateContainer, {
+                children: emptyStateMessage
+              })
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+const KeyValueList = Object.assign(KeyValueListBase, {
+  AddButton: AddButton.default
+});
+exports.KeyValueList = KeyValueList;

package/dist/KeyValueList/KeyValueList.d.ts

@@ -0,0 +1,4 @@
+import { KeyValueListProps } from './KeyValueList.types';
+export declare const KeyValueList: (<TKey = string, TValue = string>({ data, emptyStateMessage, onDelete, onKeyChange, onValueChange, renderKey, renderValue, maxHeight, keyPlaceholder, valuePlaceholder, ...restProps }: KeyValueListProps<TKey, TValue>) => import("react/jsx-runtime").JSX.Element) & {
+    AddButton: import("react").ForwardRefExoticComponent<import(".").KeyValueListAddButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+};