eidos-ui 3.3.0 → 3.4.0

package/dist/{chunk-JRLUZDKA.js → chunk-CEC3GO4R.js}

@@ -1,10 +1,11 @@
 import {
   Tooltip
-} from "./chunk-YV57RSPD.js";
+} from "./chunk-XO7WTE6O.js";
 import {
+  devWarn,
   fullWidthModifier,
   renderIcon
-} from "./chunk-EAJHEYZM.js";
+} from "./chunk-WT4WBHBR.js";
 
 // src/components/Input/Input.component.tsx
 import { forwardRef, useState, useId } from "react";
@@ -27,6 +28,7 @@ var Input = forwardRef(
     posIcon,
     posIconButton = false,
     onPosIconClick,
+    posIconLabel,
     type = "text",
     id,
     name,
@@ -47,6 +49,14 @@ var Input = forwardRef(
     const currentValue = isControlled ? restInputProps.value : localValue;
     const shouldFloatLabel = isSelect ? false : currentValue || defaultValue;
     const isRequired = required || Boolean("required" in restInputProps && restInputProps.required);
+    const errorId = `${inputId}-error`;
+    const describedBy = [restInputProps["aria-describedby"], error ? errorId : null].filter(Boolean).join(" ") || void 0;
+    if (posIcon && posIconButton && onPosIconClick && !posIconLabel) {
+      devWarn(
+        "input-pos-icon-label",
+        'Input: `posIconButton` renders an icon-only button, so it needs `posIconLabel` to have an accessible name. Falling back to "Input action".'
+      );
+    }
     const handleNumberInput = (e) => {
       if (type === "number") {
         const allowedKeys = [
@@ -167,6 +177,8 @@ var Input = forwardRef(
                 disabled: disabled || loading,
                 onKeyDown: handleNumberInput,
                 ...restInputProps,
+                "aria-invalid": error ? true : restInputProps["aria-invalid"],
+                "aria-describedby": describedBy,
                 value: currentValue,
                 onFocus: (e) => {
                   handleFocus();
@@ -186,7 +198,8 @@ var Input = forwardRef(
                 className: `eidos-input-password-toggle`,
                 onClick: () => setShowPassword(!showPassword),
                 disabled: disabled || loading,
-                tabIndex: -1,
+                "aria-label": showPassword ? "Hide password" : "Show password",
+                "aria-pressed": showPassword,
                 children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: `eidos-input-password-toggle-icon` }) : /* @__PURE__ */ jsx(Eye, { className: `eidos-input-password-toggle-icon` })
               }
             ),
@@ -197,7 +210,7 @@ var Input = forwardRef(
                 className: `eidos-input-clear-button`,
                 onClick: handleClear,
                 disabled: disabled || loading,
-                tabIndex: -1,
+                "aria-label": label ? `Clear ${label}` : "Clear",
                 children: /* @__PURE__ */ jsx(X, { className: `eidos-input-clear-button-icon` })
               }
             ),
@@ -209,13 +222,13 @@ var Input = forwardRef(
                 className: `eidos-input-pos-icon-button`,
                 onClick: onPosIconClick,
                 disabled: disabled || loading,
-                tabIndex: -1,
+                "aria-label": posIconLabel ?? "Input action",
                 children: renderIcon(posIcon, `eidos-input-pos-icon-svg`)
               }
             ),
             isSelect && /* @__PURE__ */ jsx("span", { className: `eidos-input-select-chevron`, children: /* @__PURE__ */ jsx(ChevronDown, { className: `eidos-input-pos-icon-svg` }) })
           ] }),
-          error && /* @__PURE__ */ jsxs("div", { className: `eidos-input-error-message`, children: [
+          error && /* @__PURE__ */ jsxs("div", { id: errorId, className: `eidos-input-error-message`, children: [
             /* @__PURE__ */ jsx(CircleAlert, { className: `eidos-input-error-icon` }),
             /* @__PURE__ */ jsx("span", { children: error })
           ] })
@@ -229,4 +242,4 @@ Input.displayName = "Input";
 export {
   Input
 };
-//# sourceMappingURL=chunk-JRLUZDKA.js.map
+//# sourceMappingURL=chunk-CEC3GO4R.js.map

package/dist/chunk-CEC3GO4R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/Input.component.tsx"],"sourcesContent":["import React, { forwardRef, useState, useId } from 'react';\nimport { Eye, EyeOff, CircleAlert, X, ChevronDown } from 'lucide-react';\nimport { renderIcon, fullWidthModifier, devWarn } from '../../utils';\nimport type { InputProps } from './Input.types';\nimport { Tooltip } from '../Tooltip/Tooltip.component';\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      variant = 'filled',\n      color = 'primary',\n      size = 'md',\n      disabled = false,\n      loading = false,\n      className = '',\n      width,\n      label,\n      error,\n      disclaimerIcon,\n      disclaimerContent,\n      preIcon,\n      posIcon,\n      posIconButton = false,\n      onPosIconClick,\n      posIconLabel,\n      type = 'text',\n      id,\n      name,\n      required,\n      isSelect = false,\n      clearable = true,\n      fullWidth = false,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    // Extract defaultValue so it never reaches the native <input> alongside `value`.\n    // Passing both causes React's \"controlled/uncontrolled\" warning because we always\n    // set value={currentValue} below - defaultValue is only needed to seed local state.\n    const { defaultValue, ...restInputProps } = inputProps;\n\n    const [showPassword, setShowPassword] = useState(false);\n    const [localValue, setLocalValue] = useState(defaultValue || '');\n    const [isFocused, setIsFocused] = useState(false);\n\n    // Auto-generate id and name if not provided\n    const generatedId = useId();\n    const inputId = id || `input-${generatedId}`;\n    const inputName = name || inputId;\n\n    // Determine if using controlled or uncontrolled mode\n    const isControlled = restInputProps.value !== undefined;\n    const currentValue = isControlled ? restInputProps.value : localValue;\n\n    // For select inputs, don't manage localValue - let the select component handle it\n    // This prevents the Input's clear button from showing\n\n    // Determine if label should float (only when there's content - static behavior)\n    // For select inputs, keep label completely static (never float)\n    const shouldFloatLabel = isSelect ? false : currentValue || defaultValue;\n\n    // Check if field is required (from props or enhanced register function)\n    const isRequired = required || Boolean('required' in restInputProps && restInputProps.required);\n\n    // ── Error identification (SC 3.3.1) ───────────────────────────────\n    //\n    // The error was rendered as a red message next to the field and nothing\n    // more: no `aria-invalid`, and no association between the two. Visually\n    // obvious, entirely absent from the accessibility tree.\n    //\n    // `aria-describedby` is merged rather than assigned, because callers\n    // pass their own - `TagInput` and `Combobox` both describe their fields\n    // with hint text - and overwriting it would trade one missing\n    // description for another.\n    const errorId = `${inputId}-error`;\n    const describedBy =\n      [restInputProps['aria-describedby'], error ? errorId : null].filter(Boolean).join(' ') ||\n      undefined;\n\n    // An icon-only button with no name is announced as just \"button\", and\n    // only the caller knows what the icon means. Warned rather than enforced\n    // at the type level, which would be a breaking change - see the note on\n    // `posIconLabel` in Input.types.ts.\n    if (posIcon && posIconButton && onPosIconClick && !posIconLabel) {\n      devWarn(\n        'input-pos-icon-label',\n        'Input: `posIconButton` renders an icon-only button, so it needs `posIconLabel` to have an accessible name. Falling back to \"Input action\".',\n      );\n    }\n\n    // Handle number input to allow decimals and negative numbers\n    const handleNumberInput = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (type === 'number') {\n        const allowedKeys = [\n          'Backspace',\n          'Delete',\n          'Tab',\n          'Escape',\n          'Enter',\n          'ArrowLeft',\n          'ArrowRight',\n          'ArrowUp',\n          'ArrowDown',\n        ];\n        const isNumber = /[0-9]/.test(e.key);\n        const isDecimal = /[.,]/.test(e.key);\n        const isMinus = e.key === '-';\n        const isAllowedKey = allowedKeys.includes(e.key);\n        const isControlKey = e.ctrlKey || e.metaKey;\n\n        // Allow minus only at the beginning or when no text is selected\n        if (isMinus) {\n          const selectionStart = e.currentTarget.selectionStart || 0;\n          const selectionEnd = e.currentTarget.selectionEnd || 0;\n          const hasSelection = selectionStart !== selectionEnd;\n\n          // Allow if at beginning or if replacing selected text\n          if (selectionStart !== 0 && !hasSelection) {\n            e.preventDefault();\n            return;\n          }\n        }\n\n        // Allow decimal only once\n        if (isDecimal) {\n          const currentValue = e.currentTarget.value;\n          const hasDecimal = /[.,]/.test(currentValue);\n          if (hasDecimal) {\n            e.preventDefault();\n            return;\n          }\n        }\n\n        if (!isNumber && !isDecimal && !isMinus && !isAllowedKey && !isControlKey) {\n          e.preventDefault();\n        }\n      }\n    };\n\n    // Handle input change for number inputs\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      // Only update localValue if uncontrolled and not a select input\n      if (!isControlled && !isSelect) {\n        setLocalValue(value);\n      }\n      restInputProps.onChange?.(e);\n    };\n\n    // Handle clear button\n    const handleClear = () => {\n      // Update localValue if uncontrolled\n      if (!isControlled) {\n        setLocalValue('');\n      }\n\n      // Create a proper synthetic event for React Hook Form\n      const syntheticEvent = {\n        target: {\n          value: '',\n          name: inputName,\n          id: inputId,\n          type: actualType,\n        },\n      } as React.ChangeEvent<HTMLInputElement>;\n\n      // Call the form's onChange handler\n      restInputProps.onChange?.(syntheticEvent);\n\n      // Also try to update the input element directly\n      if (ref && typeof ref === 'object' && ref.current) {\n        ref.current.value = '';\n      }\n    };\n\n    // Handle focus and blur\n    const handleFocus = () => {\n      setIsFocused(true);\n    };\n\n    const handleBlur = () => {\n      setIsFocused(false);\n    };\n\n    // Determine actual input type (handle password visibility)\n    const actualType = type === 'password' ? (showPassword ? 'text' : 'password') : type;\n\n    // Generate CSS classes\n    const inputClasses = [\n      'eidos-input',\n      `eidos-input--${variant}`,\n      `eidos-input--${color}`,\n      `eidos-input--${size}`,\n      fullWidth && fullWidthModifier('eidos-input'),\n      loading && `eidos-input--loading`,\n      error && `eidos-input--error`,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const wrapperClasses = [\n      'eidos-input-wrapper',\n      `eidos-input-wrapper--${variant}`,\n      `eidos-input-wrapper--${color}`,\n      `eidos-input-wrapper--${size}`,\n      fullWidth && fullWidthModifier('eidos-input-wrapper'),\n      loading && `eidos-input-wrapper--loading`,\n      isFocused && `eidos-input-wrapper--focused`,\n      error && `eidos-input-wrapper--error`,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const labelClasses = [\n      'eidos-input-label',\n      shouldFloatLabel && `eidos-input-label--floating`,\n      disclaimerIcon && `eidos-input-label--with-icon`,\n      error && `eidos-input-label--error`,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div\n        className={`eidos-input-container ${fullWidth ? fullWidthModifier('eidos-input-container') : ''} ${className}`}\n        // `width` sizes the whole field, so it belongs on the container rather\n        // than on the inner <input> (which is a `flex: 1 1 0` child of the\n        // wrapper and only ever fills whatever the wrapper gives it). Applying\n        // it here also keeps it a *preferred* width: `max-width: 100%` lets the\n        // field shrink inside a narrower parent instead of overflowing it.\n        style={\n          width\n            ? { width: typeof width === 'number' ? `${width}px` : width, maxWidth: '100%' }\n            : undefined\n        }\n      >\n        {label && (\n          <label htmlFor={inputId} className={labelClasses}>\n            <span className={`eidos-input-label-text`}>{label}</span>\n            {isRequired && <span className={`eidos-input-required-asterisk`}>*</span>}\n            {disclaimerIcon &&\n              (disclaimerContent ? (\n                <Tooltip message={disclaimerContent}>\n                  <span className={`eidos-input-disclaimer-icon`}>\n                    {renderIcon(disclaimerIcon, `eidos-input-disclaimer-icon-svg`)}\n                  </span>\n                </Tooltip>\n              ) : (\n                <span className={`eidos-input-disclaimer-icon`}>\n                  {renderIcon(disclaimerIcon, `eidos-input-disclaimer-icon-svg`)}\n                </span>\n              ))}\n          </label>\n        )}\n\n        <div className={wrapperClasses}>\n          {preIcon && (\n            <span className={`eidos-input-pre-icon`}>\n              {renderIcon(preIcon, `eidos-input-pre-icon-svg`)}\n            </span>\n          )}\n\n          <input\n            ref={ref}\n            id={inputId}\n            name={inputName}\n            type={actualType}\n            className={inputClasses}\n            disabled={disabled || loading}\n            onKeyDown={handleNumberInput}\n            {...restInputProps}\n            aria-invalid={error ? true : restInputProps['aria-invalid']}\n            aria-describedby={describedBy}\n            value={currentValue}\n            onFocus={(e) => {\n              handleFocus();\n              restInputProps.onFocus?.(e);\n            }}\n            onBlur={(e) => {\n              handleBlur();\n              restInputProps.onBlur?.(e);\n            }}\n            onChange={handleInputChange}\n          />\n\n          {type === 'password' && (\n            <button\n              type=\"button\"\n              className={`eidos-input-password-toggle`}\n              onClick={() => setShowPassword(!showPassword)}\n              disabled={disabled || loading}\n              // The name changes with state so a screen reader announces what\n              // pressing it will do, not what it just did.\n              aria-label={showPassword ? 'Hide password' : 'Show password'}\n              aria-pressed={showPassword}\n            >\n              {showPassword ? (\n                <EyeOff className={`eidos-input-password-toggle-icon`} />\n              ) : (\n                <Eye className={`eidos-input-password-toggle-icon`} />\n              )}\n            </button>\n          )}\n\n          {/* Clear button - show when there's content and clearable is enabled (default: true) */}\n          {currentValue &&\n            String(currentValue).trim().length > 0 &&\n            type !== 'password' &&\n            !isSelect &&\n            clearable !== false && (\n              <button\n                type=\"button\"\n                className={`eidos-input-clear-button`}\n                onClick={handleClear}\n                disabled={disabled || loading}\n                aria-label={label ? `Clear ${label}` : 'Clear'}\n              >\n                <X className={`eidos-input-clear-button-icon`} />\n              </button>\n            )}\n\n          {posIcon && !posIconButton && (\n            <span className={`eidos-input-pos-icon`}>\n              {renderIcon(posIcon, `eidos-input-pos-icon-svg`)}\n            </span>\n          )}\n\n          {posIcon && posIconButton && onPosIconClick && (\n            <button\n              type=\"button\"\n              className={`eidos-input-pos-icon-button`}\n              onClick={onPosIconClick}\n              disabled={disabled || loading}\n              aria-label={posIconLabel ?? 'Input action'}\n            >\n              {renderIcon(posIcon, `eidos-input-pos-icon-svg`)}\n            </button>\n          )}\n\n          {/* Chevron for select inputs */}\n          {isSelect && (\n            <span className={`eidos-input-select-chevron`}>\n              <ChevronDown className={`eidos-input-pos-icon-svg`} />\n            </span>\n          )}\n        </div>\n\n        {error && (\n          <div id={errorId} className={`eidos-input-error-message`}>\n            <CircleAlert className={`eidos-input-error-icon`} />\n            <span>{error}</span>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"mappings":"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","names":["currentValue"]}

package/dist/{chunk-BNVQ34FD.js → chunk-CP335H4Q.js}

@@ -1,15 +1,15 @@
 import {
   Dropdown
-} from "./chunk-6CPCNQKV.js";
+} from "./chunk-67EXHO4T.js";
 import {
   Kbd
 } from "./chunk-LYH3EKKQ.js";
 import {
   Tooltip
-} from "./chunk-YV57RSPD.js";
+} from "./chunk-XO7WTE6O.js";
 import {
   renderIcon
-} from "./chunk-EAJHEYZM.js";
+} from "./chunk-WT4WBHBR.js";
 
 // src/components/Menu/Menu.component.tsx
 import { useCallback } from "react";
@@ -122,4 +122,4 @@ export {
   MenuPanel,
   Menu
 };
-//# sourceMappingURL=chunk-BNVQ34FD.js.map
+//# sourceMappingURL=chunk-CP335H4Q.js.map

package/dist/{chunk-H6CWTMAH.js → chunk-DGXHR6FV.js}

@@ -20,6 +20,7 @@ var Checkbox = forwardRef(
   }, ref) => {
     const generatedId = useId();
     const checkboxId = id || `checkbox-${generatedId}`;
+    const errorId = `${checkboxId}-error`;
     const internalRef = useRef(null);
     const isControlled = checked !== void 0;
     const [localChecked, setLocalChecked] = useState(defaultChecked ?? false);
@@ -73,6 +74,8 @@ var Checkbox = forwardRef(
             type: "checkbox",
             id: checkboxId,
             className: "eidos-checkbox-input",
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": error ? errorId : void 0,
             disabled,
             onChange: handleChange,
             onClick: handleClick,
@@ -86,7 +89,7 @@ var Checkbox = forwardRef(
         ] }),
         label && /* @__PURE__ */ jsx("span", { className: "eidos-checkbox-label", children: label })
       ] }),
-      error && /* @__PURE__ */ jsxs("div", { className: "eidos-checkbox-error-message", children: [
+      error && /* @__PURE__ */ jsxs("div", { id: errorId, className: "eidos-checkbox-error-message", children: [
         /* @__PURE__ */ jsx(CircleAlert, {}),
         /* @__PURE__ */ jsx("span", { children: error })
       ] })
@@ -98,4 +101,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-H6CWTMAH.js.map
+//# sourceMappingURL=chunk-DGXHR6FV.js.map

package/dist/chunk-DGXHR6FV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.component.tsx"],"sourcesContent":["import React, { forwardRef, useId, useRef, useState, useEffect, useCallback } from 'react';\nimport { Check, Minus, CircleAlert } from 'lucide-react';\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      label,\n      error,\n      indeterminate = false,\n      color = 'primary',\n      size = 'md',\n      className = '',\n      disabled = false,\n      id,\n      checked,\n      defaultChecked,\n      onChange,\n      onClick,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const generatedId = useId();\n    const checkboxId = id || `checkbox-${generatedId}`;\n    // Associates the visible error with the control. Without it the message\n    // is just a red line of text sitting near the field - obvious to look\n    // at, absent from the accessibility tree (SC 3.3.1). See the fuller\n    // note in `Input`.\n    const errorId = `${checkboxId}-error`;\n\n    // Internal ref needed to imperatively set `indeterminate` (not a standard HTML attribute)\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    // Track checked state for the visual control:\n    //   - controlled mode: `checked` prop drives everything\n    //   - uncontrolled mode: local state mirrors the native input\n    const isControlled = checked !== undefined;\n    const [localChecked, setLocalChecked] = useState<boolean>(defaultChecked ?? false);\n\n    // `??` correctly handles `false` (falsy but defined): only falls back when `checked` is undefined\n    const isChecked = checked ?? localChecked;\n\n    // Imperatively set the indeterminate property – it has no HTML attribute equivalent\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    // Merge the forwarded ref with our internal ref so callers can still access the input.\n    // useCallback(_, [ref]) prevents the ref callback from being a new function identity\n    // every render, which would cause React to detach/re-attach the ref unnecessarily.\n    const mergedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setLocalChecked(e.target.checked);\n      }\n      onChange?.(e);\n    };\n\n    // Clicking anywhere in the surrounding <label> (e.g. the custom\n    // `.eidos-checkbox-control` box) fires a click on the clicked element\n    // *and* a second, browser-synthesized click targeted at this input -\n    // both bubble up. A consumer that wraps Checkbox in its own click\n    // handler (e.g. DataGrid toggling a cell on click) would otherwise see\n    // that handler fire twice per click and cancel itself out. Stopping\n    // propagation here only cancels the synthesized click's bubbling; the\n    // original click (whichever element the user actually clicked) still\n    // bubbles normally. Still forwards to a caller-supplied `onClick`\n    // first, so passing one through doesn't silently disable this fix.\n    const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n      onClick?.(e);\n      e.stopPropagation();\n    };\n\n    const wrapperClasses = [\n      'eidos-checkbox-wrapper',\n      `eidos-checkbox-wrapper--${color}`,\n      `eidos-checkbox-wrapper--${size}`,\n      disabled && 'eidos-checkbox-wrapper--disabled',\n      error && 'eidos-checkbox-wrapper--error',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const controlClasses = [\n      'eidos-checkbox-control',\n      isChecked && 'eidos-checkbox-control--checked',\n      indeterminate && 'eidos-checkbox-control--indeterminate',\n      disabled && 'eidos-checkbox-control--disabled',\n      error && !disabled && 'eidos-checkbox-control--error',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={['eidos-checkbox-container', className].filter(Boolean).join(' ')}>\n        <label className={wrapperClasses}>\n          <input\n            ref={mergedRef}\n            type=\"checkbox\"\n            id={checkboxId}\n            className=\"eidos-checkbox-input\"\n            aria-invalid={error ? true : undefined}\n            aria-describedby={error ? errorId : undefined}\n            disabled={disabled}\n            onChange={handleChange}\n            onClick={handleClick}\n            {...(isControlled ? { checked } : { defaultChecked })}\n            {...inputProps}\n          />\n          <span className={controlClasses}>\n            {isChecked && !indeterminate && <Check className=\"eidos-checkbox-icon\" />}\n            {indeterminate && <Minus className=\"eidos-checkbox-icon\" />}\n          </span>\n          {label && <span className=\"eidos-checkbox-label\">{label}</span>}\n        </label>\n\n        {error && (\n          <div id={errorId} className=\"eidos-checkbox-error-message\">\n            <CircleAlert />\n            <span>{error}</span>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":";AAAA,SAAgB,YAAY,OAAO,QAAQ,UAAU,WAAW,mBAAmB;AACnF,SAAS,OAAO,OAAO,mBAAmB;AA6GhC,cAaA,YAbA;AA1GH,IAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,cAAc,MAAM;AAC1B,UAAM,aAAa,MAAM,YAAY,WAAW;AAKhD,UAAM,UAAU,GAAG,UAAU;AAG7B,UAAM,cAAc,OAAyB,IAAI;AAKjD,UAAM,eAAe,YAAY;AACjC,UAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,kBAAkB,KAAK;AAGjF,UAAM,YAAY,WAAW;AAG7B,cAAU,MAAM;AACd,UAAI,YAAY,SAAS;AACvB,oBAAY,QAAQ,gBAAgB;AAAA,MACtC;AAAA,IACF,GAAG,CAAC,aAAa,CAAC;AAKlB,UAAM,YAAY;AAAA,MAChB,CAAC,SAAkC;AACjC,oBAAY,UAAU;AACtB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,IAAI;AAAA,QACV,WAAW,KAAK;AACd,UAAC,IAAwD,UAAU;AAAA,QACrE;AAAA,MACF;AAAA,MACA,CAAC,GAAG;AAAA,IACN;AAEA,UAAM,eAAe,CAAC,MAA2C;AAC/D,UAAI,CAAC,cAAc;AACjB,wBAAgB,EAAE,OAAO,OAAO;AAAA,MAClC;AACA,iBAAW,CAAC;AAAA,IACd;AAYA,UAAM,cAAc,CAAC,MAA0C;AAC7D,gBAAU,CAAC;AACX,QAAE,gBAAgB;AAAA,IACpB;AAEA,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA,2BAA2B,KAAK;AAAA,MAChC,2BAA2B,IAAI;AAAA,MAC/B,YAAY;AAAA,MACZ,SAAS;AAAA,IACX,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,SAAS,CAAC,YAAY;AAAA,IACxB,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,qBAAC,SAAI,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC9E;AAAA,2BAAC,WAAM,WAAW,gBAChB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,IAAI;AAAA,YACJ,WAAU;AAAA,YACV,gBAAc,QAAQ,OAAO;AAAA,YAC7B,oBAAkB,QAAQ,UAAU;AAAA,YACpC;AAAA,YACA,UAAU;AAAA,YACV,SAAS;AAAA,YACR,GAAI,eAAe,EAAE,QAAQ,IAAI,EAAE,eAAe;AAAA,YAClD,GAAG;AAAA;AAAA,QACN;AAAA,QACA,qBAAC,UAAK,WAAW,gBACd;AAAA,uBAAa,CAAC,iBAAiB,oBAAC,SAAM,WAAU,uBAAsB;AAAA,UACtE,iBAAiB,oBAAC,SAAM,WAAU,uBAAsB;AAAA,WAC3D;AAAA,QACC,SAAS,oBAAC,UAAK,WAAU,wBAAwB,iBAAM;AAAA,SAC1D;AAAA,MAEC,SACC,qBAAC,SAAI,IAAI,SAAS,WAAU,gCAC1B;AAAA,4BAAC,eAAY;AAAA,QACb,oBAAC,UAAM,iBAAM;AAAA,SACf;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":[]}

package/dist/{chunk-OU7DCYIA.js → chunk-DMOZURHV.js}

@@ -1,6 +1,6 @@
 import {
   MenuPanel
-} from "./chunk-BNVQ34FD.js";
+} from "./chunk-CP335H4Q.js";
 
 // src/components/ContextMenu/ContextMenu.component.tsx
 import { useState, useEffect, useRef, useCallback } from "react";
@@ -103,4 +103,4 @@ var ContextMenu = ({
 export {
   ContextMenu
 };
-//# sourceMappingURL=chunk-OU7DCYIA.js.map
+//# sourceMappingURL=chunk-DMOZURHV.js.map

package/dist/{chunk-L5W2XC6M.js → chunk-EWTMX4DK.js}

@@ -11,16 +11,16 @@ import {
   useSensor,
   useSensors,
   useSortable
-} from "./chunk-SXGCRHBZ.js";
+} from "./chunk-FDMYDIGI.js";
 import {
   SplitButton
-} from "./chunk-E7FGY7BJ.js";
+} from "./chunk-FPLX5FIK.js";
 import {
   Pagination
-} from "./chunk-TQGO5WK6.js";
+} from "./chunk-GPK2THIG.js";
 import {
   Checkbox
-} from "./chunk-H6CWTMAH.js";
+} from "./chunk-DGXHR6FV.js";
 import {
   Spinner
 } from "./chunk-6ZAT5CGB.js";
@@ -29,13 +29,13 @@ import {
 } from "./chunk-3TUCQAYL.js";
 import {
   Dropdown
-} from "./chunk-6CPCNQKV.js";
+} from "./chunk-67EXHO4T.js";
 import {
   Button
-} from "./chunk-L5Q6UDY3.js";
+} from "./chunk-44T4HMFU.js";
 import {
   devWarn
-} from "./chunk-EAJHEYZM.js";
+} from "./chunk-WT4WBHBR.js";
 
 // src/components/Table/Table.component.tsx
 import { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } from "react";
@@ -918,4 +918,4 @@ var Table = ({
 export {
   Table
 };
-//# sourceMappingURL=chunk-L5W2XC6M.js.map
+//# sourceMappingURL=chunk-EWTMX4DK.js.map

package/dist/{chunk-SXGCRHBZ.js → chunk-FDMYDIGI.js}

@@ -1,21 +1,21 @@
 import {
   DatePicker
-} from "./chunk-MHZIBV2C.js";
+} from "./chunk-IXVM2XNS.js";
 import {
   Select
-} from "./chunk-7SVDYEKM.js";
+} from "./chunk-TLECMA3B.js";
 import {
   Input
-} from "./chunk-JRLUZDKA.js";
+} from "./chunk-CEC3GO4R.js";
 import {
   Dropdown
-} from "./chunk-6CPCNQKV.js";
+} from "./chunk-67EXHO4T.js";
 import {
   Badge
 } from "./chunk-3SKI6FXB.js";
 import {
   Button
-} from "./chunk-L5Q6UDY3.js";
+} from "./chunk-44T4HMFU.js";
 
 // src/components/Table/TableFiltersDropdown.component.tsx
 import { useMemo, useState, useEffect, useRef } from "react";
@@ -255,6 +255,7 @@ var TableFiltersDropdown = ({
             value: row.value || "",
             onChange: (e) => updateFilter(row.id, row.columnKey, e.target.value),
             placeholder: "Enter value",
+            "aria-label": `Filter value${row.columnKey ? ` for ${row.columnKey}` : ""}`,
             size: "sm",
             fullWidth: true
           }
@@ -302,6 +303,7 @@ var TableFiltersDropdown = ({
             value: "",
             disabled: true,
             placeholder: "Select column first",
+            "aria-label": "Filter value (choose a column first)",
             size: "sm",
             fullWidth: true
           }
@@ -4433,4 +4435,4 @@ export {
   sortableKeyboardCoordinates,
   TableFiltersDropdown
 };
-//# sourceMappingURL=chunk-SXGCRHBZ.js.map
+//# sourceMappingURL=chunk-FDMYDIGI.js.map