@bolio-ui/core 3.0.4 → 3.1.0

package/dist/chunk-WXUMV5TD.js

@@ -0,0 +1,178 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+// core/use-keyboard/codes.ts
+var KeyCode = {
+  Unknown: 0,
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
+  Shift: 16,
+  Ctrl: 17,
+  Alt: 18,
+  PauseBreak: 19,
+  CapsLock: 20,
+  Escape: 27,
+  Space: 32,
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+  LeftArrow: 37,
+  UpArrow: 38,
+  RightArrow: 39,
+  DownArrow: 40,
+  Insert: 45,
+  Delete: 46,
+  KEY_0: 48,
+  KEY_1: 49,
+  KEY_2: 50,
+  KEY_3: 51,
+  KEY_4: 52,
+  KEY_5: 53,
+  KEY_6: 54,
+  KEY_7: 55,
+  KEY_8: 56,
+  KEY_9: 57,
+  KEY_A: 65,
+  KEY_B: 66,
+  KEY_C: 67,
+  KEY_D: 68,
+  KEY_E: 69,
+  KEY_F: 70,
+  KEY_G: 71,
+  KEY_H: 72,
+  KEY_I: 73,
+  KEY_J: 74,
+  KEY_K: 75,
+  KEY_L: 76,
+  KEY_M: 77,
+  KEY_N: 78,
+  KEY_O: 79,
+  KEY_P: 80,
+  KEY_Q: 81,
+  KEY_R: 82,
+  KEY_S: 83,
+  KEY_T: 84,
+  KEY_U: 85,
+  KEY_V: 86,
+  KEY_W: 87,
+  KEY_X: 88,
+  KEY_Y: 89,
+  KEY_Z: 90,
+  Meta: 91,
+  F1: 112,
+  F2: 113,
+  F3: 114,
+  F4: 115,
+  F5: 116,
+  F6: 117,
+  F7: 118,
+  F8: 119,
+  F9: 120,
+  F10: 121,
+  F11: 122,
+  F12: 123,
+  NumLock: 144,
+  ScrollLock: 145,
+  Equal: 187,
+  Minus: 189,
+  Backquote: 192,
+  Backslash: 220
+};
+var KeyMod = {
+  CtrlCmd: 1 << 11 >>> 0,
+  Shift: 1 << 10 >>> 0,
+  Alt: 1 << 9 >>> 0,
+  WinCtrl: 1 << 8 >>> 0
+};
+
+// core/use-keyboard/use-keyboard.ts
+var _react = require('react');
+
+// core/use-keyboard/helper.ts
+var getCtrlKeysByPlatform = () => {
+  return {
+    CtrlCmd: _chunkUX2B3G6Ujs.isMac.call(void 0, ) ? "metaKey" : "ctrlKey",
+    WinCtrl: _chunkUX2B3G6Ujs.isMac.call(void 0, ) ? "ctrlKey" : "metaKey"
+  };
+};
+var getActiveModMap = (bindings) => ({
+  CtrlCmd: bindings.includes(KeyMod.CtrlCmd),
+  Shift: bindings.includes(KeyMod.Shift),
+  Alt: bindings.includes(KeyMod.Alt),
+  WinCtrl: bindings.includes(KeyMod.WinCtrl)
+});
+
+// core/use-keyboard/use-keyboard.ts
+var useKeyboard = (handler, keyBindings, options = {}) => {
+  const bindings = Array.isArray(keyBindings) ? keyBindings : [keyBindings];
+  const {
+    disableGlobalEvent = false,
+    capture = false,
+    stopPropagation = false,
+    preventDefault = true,
+    event = "keydown"
+  } = options;
+  const activeModMap = getActiveModMap(bindings);
+  const keyCode = bindings.filter(
+    (item) => !Object.values(KeyMod).includes(item)
+  );
+  const { CtrlCmd, WinCtrl } = getCtrlKeysByPlatform();
+  const eventHandler = (event2) => {
+    if (activeModMap.Shift && !event2.shiftKey) return;
+    if (activeModMap.Alt && !event2.altKey) return;
+    if (activeModMap.CtrlCmd && !event2[CtrlCmd]) return;
+    if (activeModMap.WinCtrl && !event2[WinCtrl]) return;
+    const hitOne = keyCode.find((k) => k === event2.keyCode);
+    if (keyCode && !hitOne) return;
+    if (stopPropagation) {
+      event2.stopPropagation();
+    }
+    if (preventDefault) {
+      event2.preventDefault();
+    }
+    if (handler) handler(event2);
+  };
+  const latest = _chunkZRORQ2WHjs.use_latest_default.call(void 0, eventHandler);
+  _react.useEffect.call(void 0, () => {
+    const listener = (e) => latest.current(e);
+    if (!disableGlobalEvent) {
+      document.addEventListener(event, listener);
+    }
+    return () => {
+      document.removeEventListener(event, listener);
+    };
+  }, [disableGlobalEvent, event, latest]);
+  const elementBindingHandler = (elementEventType, isCapture = false) => {
+    if (elementEventType !== event) return () => {
+    };
+    if (isCapture !== capture) return () => {
+    };
+    return (e) => eventHandler(e);
+  };
+  return {
+    bindings: {
+      onKeyDown: elementBindingHandler("keydown"),
+      onKeyDownCapture: elementBindingHandler("keydown", true),
+      onKeyPress: elementBindingHandler("keypress"),
+      onKeyPressCapture: elementBindingHandler("keypress", true),
+      onKeyUp: elementBindingHandler("keyup"),
+      onKeyUpCapture: elementBindingHandler("keyup", true)
+    }
+  };
+};
+var use_keyboard_default = useKeyboard;
+
+// core/use-keyboard/index.ts
+var use_keyboard_default2 = use_keyboard_default;
+
+
+
+
+
+exports.KeyCode = KeyCode; exports.KeyMod = KeyMod; exports.use_keyboard_default = use_keyboard_default2;

package/dist/{chunk-EEZG4FGY.js → chunk-XB3GY5TL.js}

@@ -1,9 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkWEYAL53Ojs = require('./chunk-WEYAL53O.js');
+var _chunkYTIXCWZOjs = require('./chunk-YTIXCWZO.js');
 
 
-var _chunkRZBEZ26Ajs = require('./chunk-RZBEZ26A.js');
+var _chunkTZ6SF6COjs = require('./chunk-TZ6SF6CO.js');
+
+
+var _chunkSELOBD66js = require('./chunk-SELOBD66.js');
 
 
 
@@ -51,7 +54,7 @@ var BreadcrumbsComponent = _react2.default.forwardRef(({ separator = "/", childr
   const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
   const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
   const hoverColor = _react.useMemo.call(void 0, () => {
-    return _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, theme.palette.link, 0.85);
+    return _chunkSELOBD66js.addColorAlpha.call(void 0, theme.palette.link, 0.85);
   }, [theme.palette.link]);
   const navStyle = {
     color: theme.palette.accents_5,
@@ -114,10 +117,18 @@ var BreadcrumbsItem = _react2.default.forwardRef(
       if (onClick) onClick(event);
     };
     if (!isLink) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: classes, onClick: clickHandler, children: withoutSepChildren });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "span",
+        {
+          className: classes,
+          onClick: clickHandler,
+          ...onClick ? { role: "button", tabIndex: 0, onKeyDown: _chunkYTIXCWZOjs.activateOnKey } : {},
+          children: withoutSepChildren
+        }
+      );
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWEYAL53Ojs.Link_default,
+      _chunkTZ6SF6COjs.Link_default,
       {
         className: classes,
         href,

package/dist/{chunk-6U7FXFJP.js → chunk-XI7N2LKD.js}

@@ -1,5 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var _chunk45Y5OGFMjs = require('./chunk-45Y5OGFM.js');
+
+
 
 var _chunkDSX6YDJMjs = require('./chunk-DSX6YDJM.js');
 
@@ -17,11 +20,6 @@ var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
 var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
 
 // core/Tabs/Tabs.tsx
-
-
-
-
-
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // core/Tabs/TabsContext.ts
@@ -34,19 +32,6 @@ var useTabsContext = () => _react2.default.useContext(TabsContext);
 
 // core/Shared/highlight.tsx
 
-
-// core/utils/use-previous.ts
-
-var usePrevious = (state) => {
-  const ref = _react.useRef.call(void 0, null);
-  _react.useEffect.call(void 0, () => {
-    ref.current = state;
-  });
-  return ref ? ref.current : null;
-};
-var use_previous_default = usePrevious;
-
-// core/Shared/highlight.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var Highlight = ({
   rect,
@@ -60,7 +45,7 @@ var Highlight = ({
 }) => {
   const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
   const ref = _react.useRef.call(void 0, null);
-  const isFirstVisible = use_previous_default(_chunkDSX6YDJMjs.isUnplacedRect.call(void 0, rect));
+  const isFirstVisible = _chunk45Y5OGFMjs.use_previous_default.call(void 0, _chunkDSX6YDJMjs.isUnplacedRect.call(void 0, rect));
   const position = _react.useMemo.call(void 0, () => {
     const width = rect.width * hoverWidthRatio;
     const height = rect.height * hoverHeightRatio;

package/dist/chunk-XTRGAC3F.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-isomorphic-effect/use-isomorphic-effect.ts
+var _react = require('react');
+var useIsomorphicEffect = typeof document !== "undefined" ? _react.useLayoutEffect : _react.useEffect;
+var use_isomorphic_effect_default = useIsomorphicEffect;
+
+// core/use-isomorphic-effect/index.ts
+var use_isomorphic_effect_default2 = use_isomorphic_effect_default;
+
+
+
+exports.use_isomorphic_effect_default = use_isomorphic_effect_default2;

package/dist/chunk-Y6DIYKCE.js

@@ -0,0 +1,43 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+// core/use-throttled-callback/use-throttled-callback.ts
+var _react = require('react');
+var useThrottledCallback = (callback, wait) => {
+  const latest = _chunkZRORQ2WHjs.use_latest_default.call(void 0, callback);
+  const lastRun = _react.useRef.call(void 0, 0);
+  const lastArgs = _react.useRef.call(void 0, void 0);
+  const timer = _react.useRef.call(void 0, void 0);
+  _react.useEffect.call(void 0, () => () => clearTimeout(timer.current), []);
+  return _react.useMemo.call(void 0, () => {
+    const run = () => {
+      timer.current = void 0;
+      lastRun.current = Date.now();
+      if (lastArgs.current) latest.current(...lastArgs.current);
+    };
+    const throttled = (...args) => {
+      lastArgs.current = args;
+      const remaining = wait - (Date.now() - lastRun.current);
+      if (remaining <= 0) {
+        clearTimeout(timer.current);
+        run();
+      } else if (timer.current === void 0) {
+        timer.current = setTimeout(run, remaining);
+      }
+    };
+    throttled.cancel = () => {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    };
+    return throttled;
+  }, [latest, wait]);
+};
+var use_throttled_callback_default = useThrottledCallback;
+
+// core/use-throttled-callback/index.ts
+var use_throttled_callback_default2 = use_throttled_callback_default;
+
+
+
+exports.use_throttled_callback_default = use_throttled_callback_default2;

package/dist/{chunk-NEG5UNM6.js → chunk-YH2NWDFO.js}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkISLUC2SDjs = require('./chunk-ISLUC2SD.js');
+var _chunkNTNFTNRAjs = require('./chunk-NTNFTNRA.js');
 
 
-var _chunkUOGCO6CVjs = require('./chunk-UOGCO6CV.js');
+var _chunkCCKWTHUTjs = require('./chunk-CCKWTHUT.js');
 
 
-var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+var _chunkUOGCO6CVjs = require('./chunk-UOGCO6CV.js');
 
 
 var _chunkBSDZWWUSjs = require('./chunk-BSDZWWUS.js');
@@ -42,10 +42,11 @@ var InputLabel_module_css_default = { "span": "InputLabel-module_span__ek5IE" };
 var _jsxruntime = require('react/jsx-runtime');
 function InputLabel({ children, isRight }) {
   const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const dark = theme.type === "dark";
   const labelStyle = {
     padding: `0 ${theme.layout.gapHalf}`,
-    color: theme.palette.accents_4,
-    backgroundColor: theme.palette.accents_1,
+    color: dark ? theme.palette.accents_7 : theme.palette.accents_4,
+    backgroundColor: dark ? theme.palette.accents_3 : theme.palette.accents_1,
     borderTopLeftRadius: isRight ? 0 : theme.layout.radius,
     borderBottomLeftRadius: isRight ? 0 : theme.layout.radius,
     borderTopRightRadius: isRight ? theme.layout.radius : 0,
@@ -108,23 +109,34 @@ function InputIconClear({ onClick, disabled, visible, hoverColor }) {
     cursor: disabled ? "not-allowed" : "pointer",
     "--clear-icon-hover-color": hoverColor
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { onClick: clickHandler, className: classes, style: iconStyle, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "svg",
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "button",
     {
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none",
-      shapeRendering: "geometricPrecision",
-      className: InputIconClear_module_css_default.svg,
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 6L6 18" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 6l12 12" })
-      ]
+      type: "button",
+      "aria-label": "Clear",
+      disabled,
+      onClick: clickHandler,
+      className: classes,
+      style: iconStyle,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none",
+          shapeRendering: "geometricPrecision",
+          className: InputIconClear_module_css_default.svg,
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 6L6 18" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 6l12 12" })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 var MemoInputIconClear = _react2.default.memo(InputIconClear);
 var InputIconClear_default = MemoInputIconClear;
@@ -215,13 +227,13 @@ var InputComponent = _react2.default.forwardRef((inputComponentProps, ref) => {
     [icon, iconRight]
   );
   const colors = _react.useMemo.call(void 0, 
-    () => _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {
+    () => _chunkCCKWTHUTjs.getColors.call(void 0, theme.palette, error ? "error" : type, disabled, {
       filled,
       light,
       ghost,
       subtle
     }),
-    [theme.palette, type, disabled, filled, light, ghost, subtle]
+    [theme.palette, type, error, disabled, filled, light, ghost, subtle]
   );
   const changeHandler = (event) => {
     if (disabled || readOnly) return;
@@ -442,7 +454,7 @@ var InputPassword = _chunkMAICNLTYjs.with_scale_default.call(void 0, InputPasswo
 var Password_default = InputPassword;
 
 // core/Input/index.ts
-Input_default.Textarea = _chunkISLUC2SDjs.Textarea_default;
+Input_default.Textarea = _chunkNTNFTNRAjs.Textarea_default;
 Input_default.Password = Password_default;
 var Input_default2 = Input_default;
 

package/dist/{chunk-BUB6MDGJ.js → chunk-YORZYBVH.js}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkDAPM4M4Ajs = require('./chunk-DAPM4M4A.js');
+var _chunk5ZFJSGCAjs = require('./chunk-5ZFJSGCA.js');
 
 
-var _chunkNEG5UNM6js = require('./chunk-NEG5UNM6.js');
+var _chunkYH2NWDFOjs = require('./chunk-YH2NWDFO.js');
 
 
 var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
@@ -60,7 +60,7 @@ var Command = ({
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkDAPM4M4Ajs.Modal_default,
+    _chunk5ZFJSGCAjs.Modal_default,
     {
       visible,
       onClose,
@@ -68,7 +68,7 @@ var Command = ({
       wrapClassName: _chunk5KUROAEPjs.use_classes_default.call(void 0, Command_module_css_default.command, className),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { onKeyDown: keyDownHandler, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkNEG5UNM6js.Input_default,
+          _chunkYH2NWDFOjs.Input_default,
           {
             autoFocus: true,
             width: "100%",

package/dist/{chunk-Y5CFWIGV.js → chunk-YR5JHUOB.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkE5EDUOQTjs = require('./chunk-E5EDUOQT.js');
+var _chunkE5ALJNBLjs = require('./chunk-E5ALJNBL.js');
 
 
 var _chunkHKOESPKZjs = require('./chunk-HKOESPKZ.js');
@@ -12,6 +12,9 @@ var _chunkJJFOGZ6Vjs = require('./chunk-JJFOGZ6V.js');
 var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
 
 
+var _chunkYTIXCWZOjs = require('./chunk-YTIXCWZO.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -191,6 +194,8 @@ var TableCell = ({
       "td",
       {
         onClick: () => onCellClick && onCellClick(currentRowValue, rowIndex, index),
+        tabIndex: onCellClick ? 0 : void 0,
+        onKeyDown: onCellClick ? _chunkYTIXCWZOjs.activateOnKey : void 0,
         className: column.className,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "cell", children: shouldBeRenderElement ? shouldBeRenderElement : cellValue })
       },
@@ -248,6 +253,8 @@ var TableBody = ({
           className
         ),
         onClick: () => rowClickHandler(row, index),
+        tabIndex: onRow ? 0 : void 0,
+        onKeyDown: onRow ? _chunkYTIXCWZOjs.activateOnKey : void 0,
         style: trStyle,
         children: [
           selection && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { className: TableBody_module_css_default.selectCell, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "cell", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -515,7 +522,7 @@ function TableComponent(tableProps, forwardedRef) {
             }
           ),
           pageCount > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Table_module_css_default.footer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkE5EDUOQTjs.Pagination_default,
+            _chunkE5ALJNBLjs.Pagination_default,
             {
               count: pageCount,
               page,

package/dist/chunk-YTIXCWZO.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/utils/activate-on-key.ts
+var activateOnKey = (event) => {
+  if (event.target !== event.currentTarget) return;
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  event.currentTarget.click();
+};
+
+
+
+exports.activateOnKey = activateOnKey;

package/dist/chunk-YX4QMKYJ.js

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk45Y5OGFMjs = require('./chunk-45Y5OGFM.js');
+
+// core/use-previous/use-previous.ts
+var use_previous_default2 = _chunk45Y5OGFMjs.use_previous_default;
+
+// core/use-previous/index.ts
+var use_previous_default3 = use_previous_default2;
+
+
+
+exports.use_previous_default = use_previous_default3;

package/dist/{chunk-EAHIBHMI.js → chunk-ZJUVOARM.js}

@@ -1,5 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var _chunkUOGCO6CVjs = require('./chunk-UOGCO6CV.js');
+
+
 var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
 
 
@@ -95,6 +98,8 @@ var CheckboxComponent = _react2.default.forwardRef(
     children,
     type = "default",
     value = "",
+    error = false,
+    errorMessage,
     ...props
   }, ref) => {
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
@@ -103,6 +108,9 @@ var CheckboxComponent = _react2.default.forwardRef(
     const { updateState, inGroup, disabledAll, values } = useCheckbox();
     const isDisabled = inGroup ? disabledAll || disabled : disabled;
     const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, Checkbox_module_css_default.checkbox, className);
+    const generatedId = _react.useId.call(void 0, );
+    const errorId = `${props.id || generatedId}-error`;
+    const describedBy = [props["aria-describedby"], error && errorMessage ? errorId : void 0].filter(Boolean).join(" ") || void 0;
     if (inGroup && checked) {
       _chunkAXYDJGTNjs.log_warning_default.call(void 0, 
         'Remove props "checked" when [Checkbox] component is in the group.',
@@ -116,8 +124,8 @@ var CheckboxComponent = _react2.default.forwardRef(
       setSelfChecked(next);
     }, [inGroup, selfChecked, value, values]);
     const fill = _react.useMemo.call(void 0, 
-      () => getColors(theme.palette, type),
-      [theme.palette, type]
+      () => getColors(theme.palette, error ? "error" : type),
+      [theme.palette, type, error]
     );
     const changeHandle = _react.useCallback.call(void 0, 
       (ev) => {
@@ -152,28 +160,40 @@ var CheckboxComponent = _react2.default.forwardRef(
       padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
       margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
     };
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: classes, style: checkboxStyle, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckboxIcon_default, { fill, disabled: isDisabled, checked: selfChecked }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "input",
-        {
-          ref,
-          type: "checkbox",
-          disabled: isDisabled,
-          checked: selfChecked,
-          onChange: changeHandle,
-          ...props,
-          className: Checkbox_module_css_default.input
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "span",
-        {
-          className: Checkbox_module_css_default.text,
-          style: { cursor: isDisabled ? "not-allowed" : "pointer" },
-          children
-        }
-      )
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: classes, style: checkboxStyle, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          CheckboxIcon_default,
+          {
+            fill,
+            disabled: isDisabled,
+            checked: selfChecked
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            disabled: isDisabled,
+            checked: selfChecked,
+            onChange: changeHandle,
+            ...props,
+            "aria-invalid": error || void 0,
+            "aria-describedby": describedBy,
+            className: Checkbox_module_css_default.input
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: Checkbox_module_css_default.text,
+            style: { cursor: isDisabled ? "not-allowed" : "pointer" },
+            children
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUOGCO6CVjs.InputBlockLabel_default, { error, id: errorId, children: errorMessage })
     ] });
   }
 );