npm - @lanaco/lnc-react-ui - Versions diffs - 3.0.0-rc.2 → 3.0.0-rc.4 - Mend

@lanaco/lnc-react-ui 3.0.0-rc.2 → 3.0.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -1,5 +1,7 @@
 # Lanaco ReactJS UI components library
+[Deployment](https://lanaco.github.io/lnc-react-ui/?path=/docs/intro--intro)
 This library includes basic and advanced UI components used with ReactJS frontend framework
 - [Installing](#installing)
@@ -11,7 +13,7 @@ This library includes basic and advanced UI components used with ReactJS fronten
 ## Installing
 ```
-$ npm install --save-dev @lanaco/lnc-react-ui
+$ npm install @lanaco/lnc-react-ui
 ```

package/lib/index.esm.js CHANGED Viewed

@@ -3,7 +3,7 @@ import _slicedToArray$2 from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties$b from '@babel/runtime/helpers/objectWithoutProperties';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import * as React from 'react';
-import React__default, { useLayoutEffect, useContext, createElement, createContext, forwardRef, Fragment, useRef, useEffect, useState, useMemo, useImperativeHandle, useCallback, Component, memo, useReducer, cloneElement, useDebugValue, isValidElement, Children } from 'react';
+import React__default, { useLayoutEffect, useContext, createElement, createContext, forwardRef, Fragment, useRef, useEffect, useState, useMemo, useCallback, Component, useImperativeHandle, memo, useReducer, cloneElement, useDebugValue, isValidElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import _defineProperty$g from '@babel/runtime/helpers/esm/defineProperty';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
@@ -14917,7 +14917,7 @@ var getDisabledBackgroundCss = function getDisabledBackgroundCss(theme) {
   return "\n    background-color: ".concat(bgColorRgba, ";\n  ");
 };
-var _excluded$1h = ["containerRef", "id", "name", "checked", "defaultValue", "indeterminate", "disabled", "readOnly", "label", "labelPosition", "tabIndex", "spaceBetween", "customCheckmark", "onChange", "onFocus", "onBlur", "onClick", "color", "size", "className", "style", "inputProps", "children"];
+var _excluded$1h = ["containerRef", "id", "name", "checked", "defaultChecked", "indeterminate", "disabled", "readOnly", "label", "labelPosition", "tabIndex", "spaceBetween", "customCheckmark", "onChange", "onFocus", "onBlur", "onClick", "color", "size", "className", "style", "inputProps", "children"];
 var _templateObject$1j;
 var getLabelDirection$2 = function getLabelDirection(direction) {
   if (direction == "left") return "row-reverse";
@@ -14926,7 +14926,7 @@ var getLabelDirection$2 = function getLabelDirection(direction) {
 var getCheckSize = function getCheckSize(theme, size) {
   return "calc(".concat(theme.components.Checkbox["default"].enabled.sizes[size], " / 2)");
 };
-var Container$d = newStyled.label(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteral(["\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: pointer;\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  flex-direction: ", ";\n  ", "\n  width: 100%;\n  ", "\n  ", ";\n  gap: 0.75rem;\n  position: relative;\n  & .checkbox-label {\n    ", "\n    min-width: 0;\n    flex-shrink: 1;\n    min-height: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  & input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n  }\n  & .checkmark {\n    min-height: ", ";\n    min-width: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: all 0.2s ease;\n    background-color: transparent;\n    color: ", ";\n    border: 1px solid\n      ", ";\n    border-radius: ", ";\n    ", ";\n    ", "\n    & svg {\n      height: 0;\n      width: 0;\n      stroke: transparent;\n    }\n    & img {\n      max-height: 0;\n      max-width: 0;\n      filter: brightness(0) invert(1);\n    }\n  }\n  & input:checked ~ .checkmark {\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    & .checked {\n      height: ", ";\n      width: ", ";\n      stroke: white;\n    }\n    & .indeterminate {\n      height: 0;\n      width: 0;\n    }\n    & img {\n      max-height: ", ";\n      max-width: ", ";\n    }\n  }\n  & input:indeterminate ~ .checkmark {\n    & .checked {\n      height: 0;\n      width: 0;\n    }\n    background-color: ", ";\n    & .indeterminate {\n      height: ", ";\n      width: ", ";\n      stroke: white;\n    }\n  }\n  & input:disabled ~ .checkmark {\n    ", ";\n  }\n"])), function (props) {
+var Container$d = newStyled.label(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteral(["\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: pointer;\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  flex-direction: ", ";\n  ", "\n  width: 100%;\n  ", "\n  ", ";\n  gap: 0.75rem;\n  position: relative;\n  & .checkbox-label {\n    ", "\n    min-width: 0;\n    flex-shrink: 1;\n    min-height: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  & input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n    z-index: 3;\n  }\n  & .checkmark {\n    min-height: ", ";\n    min-width: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: all 0.2s ease;\n    background-color: transparent;\n    color: ", ";\n    border: 1px solid\n      ", ";\n    border-radius: ", ";\n    ", ";\n    & svg {\n      height: 0;\n      width: 0;\n      stroke: transparent;\n    }\n    & img {\n      max-height: 0;\n      max-width: 0;\n      filter: brightness(0) invert(1);\n    }\n  }\n  & input:checked ~ .checkmark {\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    & .checked {\n      height: ", ";\n      width: ", ";\n      stroke: white;\n    }\n    & .indeterminate {\n      height: 0;\n      width: 0;\n    }\n    & img {\n      max-height: ", ";\n      max-width: ", ";\n    }\n  }\n  & input:indeterminate ~ .checkmark {\n    & .checked {\n      height: 0;\n      width: 0;\n    }\n    background-color: ", ";\n    & .indeterminate {\n      height: ", ";\n      width: ", ";\n      stroke: white;\n    }\n  }\n  & input:disabled ~ .checkmark {\n    ", ";\n  }\n  & input:focus ~ .checkmark {\n    ", ";\n  }\n  & input:active ~ .checkmark {\n    ", ";\n  }\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
@@ -14952,8 +14952,6 @@ var Container$d = newStyled.label(_templateObject$1j || (_templateObject$1j = _t
   return getBorderRadiusValueWithUnits(props.theme, "slight");
 }, function (props) {
   return props.disabled && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"));
-}, function (props) {
-  return props.focused && !props.disabled && !props.readOnly ? getOutlineCss(props.theme) : "";
 }, function (props) {
   return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "background", "backgroundOpacity");
 }, function (props) {
@@ -14974,15 +14972,19 @@ var Container$d = newStyled.label(_templateObject$1j || (_templateObject$1j = _t
   return getCheckSize(props.theme, props.size);
 }, function (props) {
   return props.readOnly == false && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n    border-color: ").concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n    ");
+}, function (props) {
+  return getOutlineCss(props.theme);
+}, function (props) {
+  return getOutlineCss(props.theme);
 });
 var CheckBoxInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var containerRef = props.containerRef;
     props.id;
     props.name;
     var checked = props.checked,
-    defaultValue = props.defaultValue,
-    indeterminate = props.indeterminate,
-    disabled = props.disabled,
+    defaultChecked = props.defaultChecked;
+    props.indeterminate;
+    var disabled = props.disabled,
     readOnly = props.readOnly,
     label = props.label,
     labelPosition = props.labelPosition,
@@ -15000,50 +15002,25 @@ var CheckBoxInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     inputProps = props.inputProps;
     props.children;
     var rest = _objectWithoutProperties$b(props, _excluded$1h);
-  var checkboxRef = useRef();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray$2(_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
   var theme = useTheme$1();
   var themeProps = {
     theme: theme,
     size: size,
     color: color,
     disabled: disabled,
-    readOnly: readOnly,
-    focused: focused
+    readOnly: readOnly
   };
-  var _useState3 = useState(checked == true || checked == false ? checked : defaultValue),
-    _useState4 = _slicedToArray$2(_useState3, 2),
-    checkBoxChecked = _useState4[0],
-    setCheckBoxChecked = _useState4[1];
-  useEffectOnce$1(function () {
-    var checkbox = ref !== null && ref !== void 0 && ref.current ? ref.current : checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current;
-    if (checkbox && indeterminate == true) checkbox.indeterminate = true;
-  });
+  var _useState = useState(checked == true || checked == false ? checked : defaultChecked),
+    _useState2 = _slicedToArray$2(_useState, 2),
+    checkBoxChecked = _useState2[0],
+    setCheckBoxChecked = _useState2[1];
   useUpdateEffect$1(function () {
     setCheckBoxChecked(checked ? checked : false);
   }, [checked]);
-  //Expose functions through ref
-  useImperativeHandle(ref, function () {
-    return {
-      setIndeterminate: function setIndeterminate() {
-        _setIndeterminate();
-      }
-    };
-  });
-  var _setIndeterminate = function _setIndeterminate() {
-    var checkbox = ref !== null && ref !== void 0 && ref.current ? ref.current : checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current;
-    if (checkbox && indeterminate == true) checkbox.indeterminate = true;
-  };
   var handleOnBlur = function handleOnBlur(e) {
-    setFocused(false);
     if (onBlur) onBlur(e);
   };
   var handleOnFocus = function handleOnFocus(e) {
-    setFocused(true);
     if (onFocus) onFocus(e);
   };
   return /*#__PURE__*/React__default.createElement(Container$d, _extends$g({
@@ -15057,9 +15034,9 @@ var CheckBoxInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     readOnly: readOnly,
     onClick: onClick,
     ref: containerRef
-  }, themeProps, rest), checkBoxChecked == true || checkBoxChecked == false ? /*#__PURE__*/React__default.createElement("input", _extends$g({
+  }, themeProps, rest), checked == true || checked == false ? /*#__PURE__*/React__default.createElement("input", _extends$g({
     type: "checkbox",
-    ref: ref ? ref : checkboxRef,
+    ref: ref,
     tabIndex: tabIndex,
     onBlur: handleOnBlur,
     onFocus: handleOnFocus,
@@ -15068,15 +15045,16 @@ var CheckBoxInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     disabled: disabled || readOnly
   }, inputProps)) : /*#__PURE__*/React__default.createElement("input", _extends$g({
     type: "checkbox",
-    ref: ref ? ref : checkboxRef,
+    ref: ref,
     tabIndex: tabIndex,
     onBlur: handleOnBlur,
     onFocus: handleOnFocus,
-    defaultValue: defaultValue,
+    defaultChecked: defaultChecked,
     disabled: disabled || readOnly,
     onChange: onChange
   }, inputProps)), /*#__PURE__*/React__default.createElement("div", {
-    className: "checkmark"
+    className: "checkmark",
+    tabIndex: -1
   }, !customCheckmark && /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 8 6",
     fill: "none",
@@ -15139,7 +15117,7 @@ CheckBoxInput.propTypes = {
   containerRef: PropTypes.any,
   id: PropTypes.any,
   name: PropTypes.string,
-  defaultValue: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
@@ -15544,7 +15522,7 @@ function toNumber(value) {
 var lodash_debounce = debounce;
 var _excluded$1g = ["id", "name", "defaultValue", "value", "size", "tabIndex", "withInput", "className", "style", "color", "debounceTime", "readOnly", "disabled", "onChange", "onFocus", "onBlur", "onInput", "onKeyDown", "preventDefault", "labelRef", "inputProps"];
-var _templateObject$1i, _templateObject2$z, _templateObject3$m;
+var _templateObject$1i, _templateObject2$y, _templateObject3$m;
 var getSize$1 = function getSize(theme, size) {
   var componentSize = getSizeValueWithUnits(theme, size);
   return "calc(".concat(componentSize, " - 1rem)");
@@ -15570,7 +15548,7 @@ var StyledInput$4 = newStyled.label(_templateObject$1i || (_templateObject$1i =
 }, function (props) {
   return getColorRgbaValue(props.theme, "Input", props.color, "disabled", "border");
 });
-var StyledColorInput = newStyled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n  ", "\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  & div {\n    &:focus {\n      ", ";\n    }\n    &:hover {\n      ", ";\n    }\n    ", "\n    box-sizing: border-box;\n    min-width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    overflow: hidden;\n    & input[type=\"color\"] {\n      border: 0;\n      padding: 0;\n      width: 200%;\n      height: 200%;\n      cursor: pointer;\n      transform: translate(-25%, -25%);\n      ", ";\n    }\n  }\n"])), function (props) {
+var StyledColorInput = newStyled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n  ", "\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  & div {\n    &:focus {\n      ", ";\n    }\n    &:hover {\n      ", ";\n    }\n    ", "\n    box-sizing: border-box;\n    min-width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    overflow: hidden;\n    & input[type=\"color\"] {\n      border: 0;\n      padding: 0;\n      width: 200%;\n      height: 200%;\n      cursor: pointer;\n      transform: translate(-25%, -25%);\n      ", ";\n    }\n  }\n"])), function (props) {
   return !props.disabled && props.readOnly == false && "cursor: pointer;";
 }, function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
@@ -24824,7 +24802,7 @@ var Calendar = Calendar$1;
 var css_248z$6 = ".react-calendar {\n  width: 380px;\n  max-width: 100%;\n  padding: 3px;\n  background: white;\n  border: 1px solid #a0a096;\n  /* font-family: Arial, Helvetica, sans-serif; */\n  line-height: 1.125em;\n}\n.react-calendar--doubleView {\n  width: 760px;\n}\n.react-calendar--doubleView .react-calendar__viewContainer {\n  display: flex;\n  margin: -0.5em;\n}\n.react-calendar--doubleView .react-calendar__viewContainer > * {\n  width: 50%;\n  margin: 0.5em;\n}\n.react-calendar,\n.react-calendar *,\n.react-calendar *:before,\n.react-calendar *:after {\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n.react-calendar button {\n  margin: 0;\n  border: 0;\n  outline: none;\n}\n.react-calendar button:enabled:hover {\n  cursor: pointer;\n}\n.react-calendar__navigation {\n  display: flex;\n  height: 44px;\n  margin-bottom: 1em;\n}\n.react-calendar__navigation button {\n  min-width: 44px;\n  background: none;\n}\n.react-calendar__navigation button:disabled {\n  background-color: #f0f0f0;\n}\n.react-calendar__navigation button:enabled:hover,\n.react-calendar__navigation button:enabled:focus {\n  background-color: #e6e6e6;\n}\n.react-calendar__month-view__weekdays {\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n  font-size: inherit;\n}\n.react-calendar__month-view__weekdays__weekday {\n  padding: 0.5em;\n}\n.react-calendar__month-view__weekNumbers .react-calendar__tile {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: inherit;\n  font-weight: bold;\n}\n.react-calendar__month-view__days__day--weekend {\n  color: #d10000;\n}\n.react-calendar__month-view__days__day--neighboringMonth {\n  color: #757575;\n}\n.react-calendar__year-view .react-calendar__tile,\n.react-calendar__decade-view .react-calendar__tile,\n.react-calendar__century-view .react-calendar__tile {\n  padding: 2em 0.5em;\n}\n.react-calendar__tile {\n  max-width: 100%;\n  padding: 10px 6.6667px;\n  background: none;\n  text-align: center;\n  line-height: 16px;\n  transition: all 220ms ease;\n  border-radius: 3px;\n}\n.react-calendar__tile:disabled {\n  background-color: #f0f0f0;\n}\n.react-calendar__tile:enabled:hover,\n.react-calendar__tile:enabled:focus {\n  background-color: #e6e6e6;\n}\n.react-calendar__tile--now {\n  background: #ffff76;\n}\n.react-calendar__tile--now:enabled:hover,\n.react-calendar__tile--now:enabled:focus {\n  background: #ffffa9;\n}\n.react-calendar__tile--hasActive {\n  background: #76baff;\n}\n.react-calendar__tile--hasActive:enabled:hover,\n.react-calendar__tile--hasActive:enabled:focus {\n  background: #a9d4ff;\n}\n.react-calendar__tile--active {\n  background: #006edc;\n  color: white;\n}\n.react-calendar__tile--active:enabled:hover,\n.react-calendar__tile--active:enabled:focus {\n  background: #1087ff;\n}\n.react-calendar--selectRange .react-calendar__tile--hover {\n  background-color: #e6e6e6;\n}\n";
 styleInject(css_248z$6);
-var _templateObject$1h, _templateObject2$y, _templateObject3$l, _templateObject4$a, _templateObject5$5, _templateObject6$2;
+var _templateObject$1h, _templateObject2$x, _templateObject3$l, _templateObject4$a, _templateObject5$5, _templateObject6$2;
 var StyledContainer$1 = newStyled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n\n  & .react-calendar {\n    border-radius: 0.2rem;\n    font-size: ", ";\n    font-family: ", ";\n    border: 0.0625rem solid #2dd1d4;\n  }\n\n  & .react-calendar__navigation__arrow,\n  .react-calendar__navigation__label {\n    transition: all 220ms ease;\n    border-radius: 0.1875rem;\n  }\n\n  & .react-calendar__navigation__label {\n    font-size: ", ";\n    font-family: ", ";\n  }\n\n  & .react-calendar__month-view__weekdays__weekday {\n    color: #2dd1d4;\n    font-size: ", ";\n    font-family: ", ";\n\n    & abbr {\n      text-decoration: none;\n    }\n  }\n\n  & .react-calendar__tile {\n    font-size: ", ";\n    font-family: ", ";\n  }\n\n  & .react-calendar__tile--now {\n    background: #adf4f5;\n  }\n\n  & .react-calendar__tile--now:enabled:hover,\n  .react-calendar__tile--now:enabled:focus {\n    background: #adf4f5;\n  }\n\n  & .react-calendar__tile--active {\n    background: #2dd1d4;\n    color: white;\n  }\n\n  & .react-calendar__tile--active:enabled:hover,\n  .react-calendar__tile--active:enabled:focus {\n    background: #73e3e4;\n  }\n\n  & .react-calendar__tile--hasActive {\n    background: #2dd1d4;\n  }\n\n  & .react-calendar__tile--hasActive:enabled:hover,\n  .react-calendar__tile--hasActive:enabled:focus {\n    background: #73e3e4;\n  }\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -24856,7 +24834,7 @@ var StyledContainer$1 = newStyled.div(_templateObject$1h || (_templateObject$1h
 }, function (props) {
   return props.theme.typography.component.fontFamily;
 });
-var StyledInput$3 = newStyled.input(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  outline: none;\n  width: 100%;\n  padding: 0.625rem 0.75rem;\n\n  ", "\n  min-height: ", ";\n  max-height: ", ";\n  color: ", ";\n  caret-color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:read-only {\n    cursor: default;\n  }\n\n  &:disabled {\n    ", "\n    background: none;\n  }\n"])), function (props) {
+var StyledInput$3 = newStyled.input(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  outline: none;\n  width: 100%;\n  padding: 0.625rem 0.75rem;\n\n  ", "\n  min-height: ", ";\n  max-height: ", ";\n  color: ", ";\n  caret-color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:read-only {\n    cursor: default;\n  }\n\n  &:disabled {\n    ", "\n    background: none;\n  }\n"])), function (props) {
   return getComponentTypographyCss(props.theme, "Input", props.size, "enabled");
 }, function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
@@ -43811,7 +43789,7 @@ var lodash = {exports: {}};
 }.call(commonjsGlobal));
 }(lodash, lodash.exports));
-var _templateObject$1f, _templateObject2$x, _templateObject3$k;
+var _templateObject$1f, _templateObject2$w, _templateObject3$k;
 var StyledWrapper$3 = newStyled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n  ", "\n\n  & input {\n    background: none;\n    border: none;\n    outline: none;\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    width: 100%;\n\n    ", "\n    min-height: ", ";\n    max-height: ", ";\n    color: ", ";\n    caret-color: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n  }\n\n  & input:disabled {\n    ", "\n    background: none;\n  }\n\n  & input:read-only {\n    cursor: default;\n  }\n\n  & input::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -43847,7 +43825,7 @@ var StyledWrapper$3 = newStyled.div(_templateObject$1f || (_templateObject$1f =
 }, function (props) {
   return getColorRgbaValue(props.theme, "Input", props.color, "enabled", "placeholder");
 });
-var StyledPrefix$3 = newStyled.span(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
+var StyledPrefix$3 = newStyled.span(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "Input", props.focused ? "primary" : props.color, "enabled", "prefix");
 });
 var StyledSuffix$3 = newStyled(StyledPrefix$3)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral([""])));
@@ -44051,7 +44029,7 @@ DecimalInput.propTypes = {
 };
 var _excluded$12 = ["id", "className", "style", "onChange", "onFocus", "onBlur", "disabled", "readOnly", "multiple", "accept", "label", "tabIndex", "color", "size"];
-var _templateObject$1e, _templateObject2$w, _templateObject3$j, _templateObject4$9;
+var _templateObject$1e, _templateObject2$v, _templateObject3$j, _templateObject4$9;
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); }
 function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
@@ -44064,7 +44042,7 @@ var Container$c = newStyled.label(_templateObject$1e || (_templateObject$1e = _t
 }, function (props) {
   return props.focused && props.readOnly == false ? getOutlineCss(props.theme) : "";
 });
-var Input$3 = newStyled.input(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: -1;\n"])));
+var Input$3 = newStyled.input(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: -1;\n"])));
 var Label$4 = newStyled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  padding: 0.625rem 0.75rem;\n  ", "\n  color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px 0 0 8px;\n\n  ", "\n"])), function (props) {
   return getComponentTypographyCss(props.theme, "Input", props.size, "enabled");
 }, function (props) {
@@ -44217,7 +44195,7 @@ FileInput.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "information"])
 };
-var _templateObject$1d, _templateObject2$v, _templateObject3$i, _templateObject4$8;
+var _templateObject$1d, _templateObject2$u, _templateObject3$i, _templateObject4$8;
 var StyledWrapper$2 = newStyled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -44233,7 +44211,7 @@ var StyledWrapper$2 = newStyled.div(_templateObject$1d || (_templateObject$1d =
 }, function (props) {
   return props.disabled ? getDisabledStateCss(props.theme) : "";
 });
-var StyledPrefix$2 = newStyled.span(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
+var StyledPrefix$2 = newStyled.span(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "Input", props.focused ? "primary" : props.color, "enabled", "prefix");
 });
 var StyledSuffix$2 = newStyled(StyledPrefix$2)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral([""])));
@@ -44453,7 +44431,7 @@ NumberInput.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "information"])
 };
-var _templateObject$1c, _templateObject2$u, _templateObject3$h, _templateObject4$7, _templateObject5$4;
+var _templateObject$1c, _templateObject2$t, _templateObject3$h, _templateObject4$7, _templateObject5$4;
 var StyledWrapper$1 = newStyled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -44469,7 +44447,7 @@ var StyledWrapper$1 = newStyled.div(_templateObject$1c || (_templateObject$1c =
 }, function (props) {
   return props.disabled ? getDisabledStateCss(props.theme) : "";
 });
-var StyledPrefix$1 = newStyled.span(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
+var StyledPrefix$1 = newStyled.span(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "Input", props.focused ? "primary" : props.color, "enabled", "prefix");
 });
 var StyledSuffix$1 = newStyled(StyledPrefix$1)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteral([""])));
@@ -44668,7 +44646,7 @@ PasswordInput.propTypes = {
 };
 var _excluded$$ = ["id", "name", "tabIndex", "checked", "className", "style", "color", "size", "onChange", "onFocus", "onBlur", "onClick", "onKeyDown", "value", "label", "labelPosition", "spaceBetween", "disabled", "readOnly", "inputProps"];
-var _templateObject$1b, _templateObject2$t;
+var _templateObject$1b, _templateObject2$s;
 var getLabelDirection$1 = function getLabelDirection(direction) {
   if (direction == "left") return "row-reverse";
   return "row";
@@ -44704,7 +44682,7 @@ var Container$b = newStyled.label(_templateObject$1b || (_templateObject$1b = _t
 }, function (props) {
   return getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
 });
-var Label$3 = newStyled.label(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n  ", ";\n  min-width: 0;\n  flex-shrink: 1;\n  min-height: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
+var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n  ", ";\n  min-width: 0;\n  flex-shrink: 1;\n  min-height: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return !props.disabled && props.readOnly == false && "cursor: pointer";
 });
 var RadioInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
@@ -44860,7 +44838,7 @@ RadioInput.propTypes = {
 };
 var _excluded$_ = ["defaultValue", "value", "min", "max", "disabled", "tabIndex", "onChange", "onInput", "color", "size", "className", "style"];
-var _templateObject$1a, _templateObject2$s, _templateObject3$g;
+var _templateObject$1a, _templateObject2$r, _templateObject3$g;
 var standardCssFields$2 = function standardCssFields(_ref) {
   var theme = _ref.theme,
     size = _ref.size;
@@ -44875,7 +44853,7 @@ var ThumbSize$1 = {
 var StyledRangeSlider = newStyled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteral(["\n  position: relative;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n"])), function (props) {
   return standardCssFields$2(props);
 });
-var InputSlider = newStyled.input(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n  -webkit-appearance: none; /* Override default CSS styles */\n  appearance: none;\n  width: 100%; /* Full-width */\n  height: 0.25rem; /* Specified height */\n  border-radius: 3px;\n  outline: none; /* Remove outline */\n  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */\n  background: ", ";\n  transition: background 450ms ease-in;\n  -webkit-appearance: none;\n  border-radius: ", ";\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none; /* Override default look */\n    appearance: none;\n    width: ", "; /* Set a specific slider handle width */\n    height: ", "; /* Slider handle height */\n    border-radius: 50%;\n    background-color: ", ";\n    cursor: pointer; /* Cursor on hover */\n    border: none;\n  }\n  &::-moz-range-thumb {\n    width: ", "; /* Set a specific slider handle width */\n    height: ", "; /* Slider handle height */\n    border-radius: 50%;\n    background-color: ", ";\n    cursor: pointer; /* Cursor on hover */\n    border: none;\n  }\n"])), function (props) {
+var InputSlider = newStyled.input(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n  -webkit-appearance: none; /* Override default CSS styles */\n  appearance: none;\n  width: 100%; /* Full-width */\n  height: 0.25rem; /* Specified height */\n  border-radius: 3px;\n  outline: none; /* Remove outline */\n  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */\n  background: ", ";\n  transition: background 450ms ease-in;\n  -webkit-appearance: none;\n  border-radius: ", ";\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none; /* Override default look */\n    appearance: none;\n    width: ", "; /* Set a specific slider handle width */\n    height: ", "; /* Slider handle height */\n    border-radius: 50%;\n    background-color: ", ";\n    cursor: pointer; /* Cursor on hover */\n    border: none;\n  }\n  &::-moz-range-thumb {\n    width: ", "; /* Set a specific slider handle width */\n    height: ", "; /* Slider handle height */\n    border-radius: 50%;\n    background-color: ", ";\n    cursor: pointer; /* Cursor on hover */\n    border: none;\n  }\n"])), function (props) {
   return props.rangeBackground;
 }, function (props) {
   return getBorderRadiusValueWithUnits(props.theme, "regular");
@@ -45497,7 +45475,7 @@ TextAreaInput.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "information"])
 };
-var _templateObject$18, _templateObject2$r, _templateObject3$f, _templateObject4$6;
+var _templateObject$18, _templateObject2$q, _templateObject3$f, _templateObject4$6;
 var StyledWrapper = newStyled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -45513,7 +45491,7 @@ var StyledWrapper = newStyled.div(_templateObject$18 || (_templateObject$18 = _t
 }, function (props) {
   return props.disabled ? getDisabledStateCss(props.theme) : "";
 });
-var StyledPrefix = newStyled.span(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
+var StyledPrefix = newStyled.span(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "Input", props.focused ? "primary" : props.color, "enabled", "prefix");
 });
 var StyledSuffix = newStyled(StyledPrefix)(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral([""])));
@@ -46501,7 +46479,7 @@ Label$2.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "information"])
 };
-var _templateObject$$, _templateObject2$q, _templateObject3$e, _templateObject4$5, _templateObject5$3, _templateObject6$1;
+var _templateObject$$, _templateObject2$p, _templateObject3$e, _templateObject4$5, _templateObject5$3, _templateObject6$1;
 //=================================================
@@ -46528,7 +46506,7 @@ var commonCss$1 = function commonCss(props) {
 var LeadingIconContainer = newStyled.span(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n  padding-right: ", ";\n"])), function (props) {
   return props.size === "small" ? "0.25rem" : "0.5rem";
 });
-var TrailingIconContainer = newStyled.span(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n  padding-left: ", ";\n"])), function (props) {
+var TrailingIconContainer = newStyled.span(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n  padding-left: ", ";\n"])), function (props) {
   return props.size === "small" ? "0.25rem" : "0.5rem";
 });
 var FilledButton$1 = newStyled.button(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral(["\n  ", "\n\n  ", ";\n\n  background-color: ", ";\n  color: ", ";\n\n  min-height: ", ";\n  max-height: ", ";\n\n  &:disabled {\n    ", ";\n    cursor: default;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n    ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
@@ -46804,7 +46782,7 @@ Button$1.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large"])
 };
-var _templateObject$_, _templateObject2$p, _templateObject3$d, _templateObject4$4, _templateObject5$2;
+var _templateObject$_, _templateObject2$o, _templateObject3$d, _templateObject4$4, _templateObject5$2;
 //=================================================
@@ -46812,7 +46790,7 @@ var commonCss = function commonCss(props) {
   return "\n        outline: none;\n        display: inline-flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        border: none;\n        transition: all 50  ms ease-in;\n        cursor: pointer;\n        color: ".concat(!props.disabled && "white", ";\n\n        border-radius: ").concat(getBorderRadiusValueWithUnits(props.theme, props.borderRadius), ";\n\n        min-width: ").concat(getSizeValueWithUnits(props.theme, props.size), ";\n        max-width: ").concat(getSizeValueWithUnits(props.theme, props.size), ";\n    ");
 };
 var StyledIcon = newStyled.i(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral(["\n  font-size: 1.125rem;\n"])));
-var FilledButton = newStyled.button(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n  ", "\n\n  ", ";\n\n  background-color: ", ";\n  color: ", ";\n\n  min-height: ", ";\n  max-height: ", ";\n\n  &:disabled {\n    ", ";\n    cursor: default;\n    background-color: ", ";\n      color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n\n    ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n      color: ", ";\n  }\n"])), function (props) {
+var FilledButton = newStyled.button(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteral(["\n  ", "\n\n  ", ";\n\n  background-color: ", ";\n  color: ", ";\n\n  min-height: ", ";\n  max-height: ", ";\n\n  &:disabled {\n    ", ";\n    cursor: default;\n    background-color: ", ";\n      color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n\n    ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n      color: ", ";\n  }\n"])), function (props) {
   return commonCss(props);
 }, function (props) {
   return getComponentTypographyCss(props.theme, "ButtonFilled", props.size, "enabled");
@@ -47040,9 +47018,9 @@ Button.propTypes = {
 };
 var _excluded$P = ["goToPreviousView", "id", "data", "fields", "flexGridProps", "goBackText", "showBack", "showNext", "showPrevious", "showEdit", "disableGoBack", "disableNext", "disablePrevious", "disableEdit", "goToNext", "goToPrevious", "onEdit", "goBack", "className", "style", "color", "size", "children"];
-var _templateObject$Z, _templateObject2$o;
+var _templateObject$Z, _templateObject2$n;
 var StyledToolbar$3 = newStyled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
-var StyledDetailsView = newStyled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  box-shadow: ", ";\n  border-radius: ", ";\n  border-top: 1px solid rgba(0, 0, 0, 0.04);\n  padding: 12px;\n  background-color: ", ";\n"])), function (props) {
+var StyledDetailsView = newStyled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  box-shadow: ", ";\n  border-radius: ", ";\n  border-top: 1px solid rgba(0, 0, 0, 0.04);\n  padding: 12px;\n  background-color: ", ";\n"])), function (props) {
   return getComponentPropValue(props.theme, "Popover", props.color, "enabled", "boxShadow");
 }, function (props) {
   return getBorderRadiusValueWithUnits(props.theme, props.borderRadius);
@@ -47251,9 +47229,7 @@ TableHead.propTypes = {
 };
 var _templateObject$W;
-var HtmlRow$1 = newStyled.tr(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n& > td {\n  background-color: ", ";\n}\n  ", "\n  ", "\n", "\n  &:last-of-type > td:first-of-type {\n    border-radius: 0 0 0 0.5rem;\n  }\n  &:last-of-type > td:last-of-type {\n    border-radius: 0 0 0.5rem 0;\n  }\n  ", "\n  ", "\n"])), function (props) {
-  return getColorRgbaValue(props.theme, "TableRow", null, "enabled", "background");
-}, function (props) {
+var HtmlRow$1 = newStyled.tr(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  ", "\n  ", "\n", "\n  &:last-of-type > td:first-of-type {\n    border-radius: 0 0 0 0.5rem;\n  }\n  &:last-of-type > td:last-of-type {\n    border-radius: 0 0 0.5rem 0;\n  }\n  ", "\n  ", "\n"])), function (props) {
   return props.noBorder == false && "border-bottom: 1px solid ".concat(getColorRgbaValue(props.theme, "TableRow", null, "enabled", "border"), ";");
 }, function (props) {
   return props.noBorder == false && "border-left: 1px solid ".concat(getColorRgbaValue(props.theme, "TableRow", null, "enabled", "border"), ";");
@@ -47323,8 +47299,10 @@ TableRow.propTypes = {
 };
 var _templateObject$V;
-var HtmlCell$4 = newStyled.td(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: ", ";\n  padding: 0.875rem 1.5rem;\n  ", "\n\n  ", ";\n"])), function (props) {
+var HtmlCell$4 = newStyled.td(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: ", ";\n  padding: 0.875rem 1.5rem;\n\n  background-color: ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
   return props.width;
+}, function (props) {
+  return getColorRgbaValue(props.theme, "TableRow", null, "enabled", "background");
 }, function (props) {
   return props.bgColor;
 }, function (props) {
@@ -47531,7 +47509,7 @@ TableHeadRow.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "information", "neutral"])
 };
-var _templateObject$S, _templateObject2$n, _templateObject3$c, _templateObject4$3;
+var _templateObject$S, _templateObject2$m, _templateObject3$c, _templateObject4$3;
 var HtmlHeadCell$1 = newStyled.th(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\nwhite-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: left;\n  transition: all 250ms ease;\n  padding: 0.875rem 1.5rem;\n  cursor: ", ";\n  width: ", ";\n\n  &:hover {\n    ", "\n  }\n\n  ", ";\n\n  color: ", "};\n\n  background-color: ", "};\n\n  border-top: ", "};\n\n  border-bottom: ", "};\n\n\n  &:first-of-type {\n    border-radius: 0.5rem 0 0 0;\n    border-left: ", "};\n  }\n\n  &:last-of-type {\n    border-radius: 0 0.5rem 0 0;\n    border-right: ", "};\n  }\n"])), function (props) {
   return props.ordering ? "pointer" : "default";
 }, function (props) {
@@ -47553,7 +47531,7 @@ var HtmlHeadCell$1 = newStyled.th(_templateObject$S || (_templateObject$S = _tag
 }, function (props) {
   return "1px solid " + getColorRgbaValue(props.theme, "TableHeadCell", null, "enabled", "border");
 });
-var HeaderInnerCell = newStyled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
+var HeaderInnerCell = newStyled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 var HeaderCellText = newStyled.span(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n  padding-right: 0.25rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  color: ", ";\n\n  font-weight: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "TableHeadCell", props.color, "enabled", "text");
 }, function (props) {
@@ -47733,9 +47711,9 @@ TableHeadSelectionCell.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "information", "neutral"])
 };
-var _templateObject$Q, _templateObject2$m;
+var _templateObject$Q, _templateObject2$l;
 var HtmlCell$1 = newStyled.td(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 0.25rem 0.125rem;\n"])));
-var Indicator = newStyled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n  width: ", ";\n  height: 100%;\n  border-radius: 100px;\n  background-color: ", " !important;\n"])), function (props) {
+var Indicator = newStyled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n  width: ", ";\n  height: 100%;\n  border-radius: 100px;\n  background-color: ", " !important;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.bgColor;
@@ -47801,15 +47779,8 @@ TableRowStatusIndicatorCell.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "information", "neutral"])
 };
-var _templateObject$P, _templateObject2$l;
-newStyled.th(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: ", ";\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n\n  &:first-of-type {\n    border-radius: 8px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 8px 0 0;\n  }\n"])), function (props) {
-  return props.theme.typography[props.size].fontSize;
-}, function (props) {
-  return props.theme.palette.transparent.light;
-}, function (props) {
-  return props.theme.palette.transparent.light;
-});
-var HtmlHeadCell = newStyled.th(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n  padding: 0.125rem;\n\n  background-color: ", "};\n\n  border-bottom: ", "};\n  \n  border-radius: 0.5rem 0 0 0;\n"])), function (props) {
+var _templateObject$P;
+var HtmlHeadCell = newStyled.th(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n  padding: 0.125rem;\n  width: 8px;\n\n  background-color: ", "};\n\n  border-bottom: ", "};\n  \n  border-radius: 0.5rem 0 0 0;\n"])), function (props) {
   return getColorRgbaValue(props.theme, "TableHeadCell", null, "enabled", "background");
 }, function (props) {
   return "1px solid " + getColorRgbaValue(props.theme, "TableHeadCell", null, "enabled", "border");
@@ -53073,7 +53044,7 @@ var EditableTableCell = function EditableTableCell(props) {
       debounceTime: 0
     }, Column.inputProps), {}, {
       value: RowData[Column.accessor],
-      checked: RowData[Column.accessor],
+      defaultChecked: RowData[Column.accessor],
       focused: focused,
       onChange: standardOnChange,
       onBlur: function onBlur(e) {

package/lib/index.js CHANGED Viewed

@@ -14966,7 +14966,7 @@ var getDisabledBackgroundCss = function getDisabledBackgroundCss(theme) {
   return "\n    background-color: ".concat(bgColorRgba, ";\n  ");
 };
-var _excluded$1h = ["containerRef", "id", "name", "checked", "defaultValue", "indeterminate", "disabled", "readOnly", "label", "labelPosition", "tabIndex", "spaceBetween", "customCheckmark", "onChange", "onFocus", "onBlur", "onClick", "color", "size", "className", "style", "inputProps", "children"];
+var _excluded$1h = ["containerRef", "id", "name", "checked", "defaultChecked", "indeterminate", "disabled", "readOnly", "label", "labelPosition", "tabIndex", "spaceBetween", "customCheckmark", "onChange", "onFocus", "onBlur", "onClick", "color", "size", "className", "style", "inputProps", "children"];
 var _templateObject$1j;
 var getLabelDirection$2 = function getLabelDirection(direction) {
   if (direction == "left") return "row-reverse";
@@ -14975,7 +14975,7 @@ var getLabelDirection$2 = function getLabelDirection(direction) {
 var getCheckSize = function getCheckSize(theme, size) {
   return "calc(".concat(theme.components.Checkbox["default"].enabled.sizes[size], " / 2)");
 };
-var Container$d = newStyled.label(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteral__default["default"](["\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: pointer;\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  flex-direction: ", ";\n  ", "\n  width: 100%;\n  ", "\n  ", ";\n  gap: 0.75rem;\n  position: relative;\n  & .checkbox-label {\n    ", "\n    min-width: 0;\n    flex-shrink: 1;\n    min-height: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  & input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n  }\n  & .checkmark {\n    min-height: ", ";\n    min-width: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: all 0.2s ease;\n    background-color: transparent;\n    color: ", ";\n    border: 1px solid\n      ", ";\n    border-radius: ", ";\n    ", ";\n    ", "\n    & svg {\n      height: 0;\n      width: 0;\n      stroke: transparent;\n    }\n    & img {\n      max-height: 0;\n      max-width: 0;\n      filter: brightness(0) invert(1);\n    }\n  }\n  & input:checked ~ .checkmark {\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    & .checked {\n      height: ", ";\n      width: ", ";\n      stroke: white;\n    }\n    & .indeterminate {\n      height: 0;\n      width: 0;\n    }\n    & img {\n      max-height: ", ";\n      max-width: ", ";\n    }\n  }\n  & input:indeterminate ~ .checkmark {\n    & .checked {\n      height: 0;\n      width: 0;\n    }\n    background-color: ", ";\n    & .indeterminate {\n      height: ", ";\n      width: ", ";\n      stroke: white;\n    }\n  }\n  & input:disabled ~ .checkmark {\n    ", ";\n  }\n"])), function (props) {
+var Container$d = newStyled.label(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteral__default["default"](["\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: pointer;\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  flex-direction: ", ";\n  ", "\n  width: 100%;\n  ", "\n  ", ";\n  gap: 0.75rem;\n  position: relative;\n  & .checkbox-label {\n    ", "\n    min-width: 0;\n    flex-shrink: 1;\n    min-height: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  & input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n    z-index: 3;\n  }\n  & .checkmark {\n    min-height: ", ";\n    min-width: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: all 0.2s ease;\n    background-color: transparent;\n    color: ", ";\n    border: 1px solid\n      ", ";\n    border-radius: ", ";\n    ", ";\n    & svg {\n      height: 0;\n      width: 0;\n      stroke: transparent;\n    }\n    & img {\n      max-height: 0;\n      max-width: 0;\n      filter: brightness(0) invert(1);\n    }\n  }\n  & input:checked ~ .checkmark {\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    & .checked {\n      height: ", ";\n      width: ", ";\n      stroke: white;\n    }\n    & .indeterminate {\n      height: 0;\n      width: 0;\n    }\n    & img {\n      max-height: ", ";\n      max-width: ", ";\n    }\n  }\n  & input:indeterminate ~ .checkmark {\n    & .checked {\n      height: 0;\n      width: 0;\n    }\n    background-color: ", ";\n    & .indeterminate {\n      height: ", ";\n      width: ", ";\n      stroke: white;\n    }\n  }\n  & input:disabled ~ .checkmark {\n    ", ";\n  }\n  & input:focus ~ .checkmark {\n    ", ";\n  }\n  & input:active ~ .checkmark {\n    ", ";\n  }\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
@@ -15001,8 +15001,6 @@ var Container$d = newStyled.label(_templateObject$1j || (_templateObject$1j = _t
   return getBorderRadiusValueWithUnits(props.theme, "slight");
 }, function (props) {
   return props.disabled && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"));
-}, function (props) {
-  return props.focused && !props.disabled && !props.readOnly ? getOutlineCss(props.theme) : "";
 }, function (props) {
   return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "background", "backgroundOpacity");
 }, function (props) {
@@ -15023,15 +15021,19 @@ var Container$d = newStyled.label(_templateObject$1j || (_templateObject$1j = _t
   return getCheckSize(props.theme, props.size);
 }, function (props) {
   return props.readOnly == false && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n    border-color: ").concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n    ");
+}, function (props) {
+  return getOutlineCss(props.theme);
+}, function (props) {
+  return getOutlineCss(props.theme);
 });
 var CheckBoxInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var containerRef = props.containerRef;
     props.id;
     props.name;
     var checked = props.checked,
-    defaultValue = props.defaultValue,
-    indeterminate = props.indeterminate,
-    disabled = props.disabled,
+    defaultChecked = props.defaultChecked;
+    props.indeterminate;
+    var disabled = props.disabled,
     readOnly = props.readOnly,
     label = props.label,
     labelPosition = props.labelPosition,
@@ -15049,50 +15051,25 @@ var CheckBoxInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     inputProps = props.inputProps;
     props.children;
     var rest = _objectWithoutProperties__default["default"](props, _excluded$1h);
-  var checkboxRef = React.useRef();
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
   var theme = useTheme$1();
   var themeProps = {
     theme: theme,
     size: size,
     color: color,
     disabled: disabled,
-    readOnly: readOnly,
-    focused: focused
+    readOnly: readOnly
   };
-  var _useState3 = React.useState(checked == true || checked == false ? checked : defaultValue),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    checkBoxChecked = _useState4[0],
-    setCheckBoxChecked = _useState4[1];
-  useEffectOnce$1(function () {
-    var checkbox = ref !== null && ref !== void 0 && ref.current ? ref.current : checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current;
-    if (checkbox && indeterminate == true) checkbox.indeterminate = true;
-  });
+  var _useState = React.useState(checked == true || checked == false ? checked : defaultChecked),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    checkBoxChecked = _useState2[0],
+    setCheckBoxChecked = _useState2[1];
   useUpdateEffect$1(function () {
     setCheckBoxChecked(checked ? checked : false);
   }, [checked]);
-  //Expose functions through ref
-  React.useImperativeHandle(ref, function () {
-    return {
-      setIndeterminate: function setIndeterminate() {
-        _setIndeterminate();
-      }
-    };
-  });
-  var _setIndeterminate = function _setIndeterminate() {
-    var checkbox = ref !== null && ref !== void 0 && ref.current ? ref.current : checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current;
-    if (checkbox && indeterminate == true) checkbox.indeterminate = true;
-  };
   var handleOnBlur = function handleOnBlur(e) {
-    setFocused(false);
     if (onBlur) onBlur(e);
   };
   var handleOnFocus = function handleOnFocus(e) {
-    setFocused(true);
     if (onFocus) onFocus(e);
   };
   return /*#__PURE__*/React__default["default"].createElement(Container$d, _extends__default$1["default"]({
@@ -15106,9 +15083,9 @@ var CheckBoxInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     readOnly: readOnly,
     onClick: onClick,
     ref: containerRef
-  }, themeProps, rest), checkBoxChecked == true || checkBoxChecked == false ? /*#__PURE__*/React__default["default"].createElement("input", _extends__default$1["default"]({
+  }, themeProps, rest), checked == true || checked == false ? /*#__PURE__*/React__default["default"].createElement("input", _extends__default$1["default"]({
     type: "checkbox",
-    ref: ref ? ref : checkboxRef,
+    ref: ref,
     tabIndex: tabIndex,
     onBlur: handleOnBlur,
     onFocus: handleOnFocus,
@@ -15117,15 +15094,16 @@ var CheckBoxInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     disabled: disabled || readOnly
   }, inputProps)) : /*#__PURE__*/React__default["default"].createElement("input", _extends__default$1["default"]({
     type: "checkbox",
-    ref: ref ? ref : checkboxRef,
+    ref: ref,
     tabIndex: tabIndex,
     onBlur: handleOnBlur,
     onFocus: handleOnFocus,
-    defaultValue: defaultValue,
+    defaultChecked: defaultChecked,
     disabled: disabled || readOnly,
     onChange: onChange
   }, inputProps)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "checkmark"
+    className: "checkmark",
+    tabIndex: -1
   }, !customCheckmark && /*#__PURE__*/React__default["default"].createElement("svg", {
     viewBox: "0 0 8 6",
     fill: "none",
@@ -15188,7 +15166,7 @@ CheckBoxInput.propTypes = {
   containerRef: PropTypes__default["default"].any,
   id: PropTypes__default["default"].any,
   name: PropTypes__default["default"].string,
-  defaultValue: PropTypes__default["default"].bool,
+  defaultChecked: PropTypes__default["default"].bool,
   checked: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   readOnly: PropTypes__default["default"].bool,
@@ -15593,7 +15571,7 @@ function toNumber(value) {
 var lodash_debounce = debounce;
 var _excluded$1g = ["id", "name", "defaultValue", "value", "size", "tabIndex", "withInput", "className", "style", "color", "debounceTime", "readOnly", "disabled", "onChange", "onFocus", "onBlur", "onInput", "onKeyDown", "preventDefault", "labelRef", "inputProps"];
-var _templateObject$1i, _templateObject2$z, _templateObject3$m;
+var _templateObject$1i, _templateObject2$y, _templateObject3$m;
 var getSize$1 = function getSize(theme, size) {
   var componentSize = getSizeValueWithUnits(theme, size);
   return "calc(".concat(componentSize, " - 1rem)");
@@ -15619,7 +15597,7 @@ var StyledInput$4 = newStyled.label(_templateObject$1i || (_templateObject$1i =
 }, function (props) {
   return getColorRgbaValue(props.theme, "Input", props.color, "disabled", "border");
 });
-var StyledColorInput = newStyled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral__default["default"](["\n  ", "\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  & div {\n    &:focus {\n      ", ";\n    }\n    &:hover {\n      ", ";\n    }\n    ", "\n    box-sizing: border-box;\n    min-width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    overflow: hidden;\n    & input[type=\"color\"] {\n      border: 0;\n      padding: 0;\n      width: 200%;\n      height: 200%;\n      cursor: pointer;\n      transform: translate(-25%, -25%);\n      ", ";\n    }\n  }\n"])), function (props) {
+var StyledColorInput = newStyled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral__default["default"](["\n  ", "\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  & div {\n    &:focus {\n      ", ";\n    }\n    &:hover {\n      ", ";\n    }\n    ", "\n    box-sizing: border-box;\n    min-width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    overflow: hidden;\n    & input[type=\"color\"] {\n      border: 0;\n      padding: 0;\n      width: 200%;\n      height: 200%;\n      cursor: pointer;\n      transform: translate(-25%, -25%);\n      ", ";\n    }\n  }\n"])), function (props) {
   return !props.disabled && props.readOnly == false && "cursor: pointer;";
 }, function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
@@ -24873,7 +24851,7 @@ var Calendar = Calendar$1;
 var css_248z$6 = ".react-calendar {\n  width: 380px;\n  max-width: 100%;\n  padding: 3px;\n  background: white;\n  border: 1px solid #a0a096;\n  /* font-family: Arial, Helvetica, sans-serif; */\n  line-height: 1.125em;\n}\n.react-calendar--doubleView {\n  width: 760px;\n}\n.react-calendar--doubleView .react-calendar__viewContainer {\n  display: flex;\n  margin: -0.5em;\n}\n.react-calendar--doubleView .react-calendar__viewContainer > * {\n  width: 50%;\n  margin: 0.5em;\n}\n.react-calendar,\n.react-calendar *,\n.react-calendar *:before,\n.react-calendar *:after {\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n.react-calendar button {\n  margin: 0;\n  border: 0;\n  outline: none;\n}\n.react-calendar button:enabled:hover {\n  cursor: pointer;\n}\n.react-calendar__navigation {\n  display: flex;\n  height: 44px;\n  margin-bottom: 1em;\n}\n.react-calendar__navigation button {\n  min-width: 44px;\n  background: none;\n}\n.react-calendar__navigation button:disabled {\n  background-color: #f0f0f0;\n}\n.react-calendar__navigation button:enabled:hover,\n.react-calendar__navigation button:enabled:focus {\n  background-color: #e6e6e6;\n}\n.react-calendar__month-view__weekdays {\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n  font-size: inherit;\n}\n.react-calendar__month-view__weekdays__weekday {\n  padding: 0.5em;\n}\n.react-calendar__month-view__weekNumbers .react-calendar__tile {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: inherit;\n  font-weight: bold;\n}\n.react-calendar__month-view__days__day--weekend {\n  color: #d10000;\n}\n.react-calendar__month-view__days__day--neighboringMonth {\n  color: #757575;\n}\n.react-calendar__year-view .react-calendar__tile,\n.react-calendar__decade-view .react-calendar__tile,\n.react-calendar__century-view .react-calendar__tile {\n  padding: 2em 0.5em;\n}\n.react-calendar__tile {\n  max-width: 100%;\n  padding: 10px 6.6667px;\n  background: none;\n  text-align: center;\n  line-height: 16px;\n  transition: all 220ms ease;\n  border-radius: 3px;\n}\n.react-calendar__tile:disabled {\n  background-color: #f0f0f0;\n}\n.react-calendar__tile:enabled:hover,\n.react-calendar__tile:enabled:focus {\n  background-color: #e6e6e6;\n}\n.react-calendar__tile--now {\n  background: #ffff76;\n}\n.react-calendar__tile--now:enabled:hover,\n.react-calendar__tile--now:enabled:focus {\n  background: #ffffa9;\n}\n.react-calendar__tile--hasActive {\n  background: #76baff;\n}\n.react-calendar__tile--hasActive:enabled:hover,\n.react-calendar__tile--hasActive:enabled:focus {\n  background: #a9d4ff;\n}\n.react-calendar__tile--active {\n  background: #006edc;\n  color: white;\n}\n.react-calendar__tile--active:enabled:hover,\n.react-calendar__tile--active:enabled:focus {\n  background: #1087ff;\n}\n.react-calendar--selectRange .react-calendar__tile--hover {\n  background-color: #e6e6e6;\n}\n";
 styleInject(css_248z$6);
-var _templateObject$1h, _templateObject2$y, _templateObject3$l, _templateObject4$a, _templateObject5$5, _templateObject6$2;
+var _templateObject$1h, _templateObject2$x, _templateObject3$l, _templateObject4$a, _templateObject5$5, _templateObject6$2;
 var StyledContainer$1 = newStyled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n\n  & .react-calendar {\n    border-radius: 0.2rem;\n    font-size: ", ";\n    font-family: ", ";\n    border: 0.0625rem solid #2dd1d4;\n  }\n\n  & .react-calendar__navigation__arrow,\n  .react-calendar__navigation__label {\n    transition: all 220ms ease;\n    border-radius: 0.1875rem;\n  }\n\n  & .react-calendar__navigation__label {\n    font-size: ", ";\n    font-family: ", ";\n  }\n\n  & .react-calendar__month-view__weekdays__weekday {\n    color: #2dd1d4;\n    font-size: ", ";\n    font-family: ", ";\n\n    & abbr {\n      text-decoration: none;\n    }\n  }\n\n  & .react-calendar__tile {\n    font-size: ", ";\n    font-family: ", ";\n  }\n\n  & .react-calendar__tile--now {\n    background: #adf4f5;\n  }\n\n  & .react-calendar__tile--now:enabled:hover,\n  .react-calendar__tile--now:enabled:focus {\n    background: #adf4f5;\n  }\n\n  & .react-calendar__tile--active {\n    background: #2dd1d4;\n    color: white;\n  }\n\n  & .react-calendar__tile--active:enabled:hover,\n  .react-calendar__tile--active:enabled:focus {\n    background: #73e3e4;\n  }\n\n  & .react-calendar__tile--hasActive {\n    background: #2dd1d4;\n  }\n\n  & .react-calendar__tile--hasActive:enabled:hover,\n  .react-calendar__tile--hasActive:enabled:focus {\n    background: #73e3e4;\n  }\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -24905,7 +24883,7 @@ var StyledContainer$1 = newStyled.div(_templateObject$1h || (_templateObject$1h
 }, function (props) {
   return props.theme.typography.component.fontFamily;
 });
-var StyledInput$3 = newStyled.input(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral__default["default"](["\n  background: none;\n  border: none;\n  outline: none;\n  width: 100%;\n  padding: 0.625rem 0.75rem;\n\n  ", "\n  min-height: ", ";\n  max-height: ", ";\n  color: ", ";\n  caret-color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:read-only {\n    cursor: default;\n  }\n\n  &:disabled {\n    ", "\n    background: none;\n  }\n"])), function (props) {
+var StyledInput$3 = newStyled.input(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral__default["default"](["\n  background: none;\n  border: none;\n  outline: none;\n  width: 100%;\n  padding: 0.625rem 0.75rem;\n\n  ", "\n  min-height: ", ";\n  max-height: ", ";\n  color: ", ";\n  caret-color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:read-only {\n    cursor: default;\n  }\n\n  &:disabled {\n    ", "\n    background: none;\n  }\n"])), function (props) {
   return getComponentTypographyCss(props.theme, "Input", props.size, "enabled");
 }, function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
@@ -43860,7 +43838,7 @@ var lodash = {exports: {}};
 }.call(commonjsGlobal));
 }(lodash, lodash.exports));
-var _templateObject$1f, _templateObject2$x, _templateObject3$k;
+var _templateObject$1f, _templateObject2$w, _templateObject3$k;
 var StyledWrapper$3 = newStyled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  align-items: center;\n\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n  ", "\n\n  & input {\n    background: none;\n    border: none;\n    outline: none;\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    width: 100%;\n\n    ", "\n    min-height: ", ";\n    max-height: ", ";\n    color: ", ";\n    caret-color: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n  }\n\n  & input:disabled {\n    ", "\n    background: none;\n  }\n\n  & input:read-only {\n    cursor: default;\n  }\n\n  & input::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -43896,7 +43874,7 @@ var StyledWrapper$3 = newStyled.div(_templateObject$1f || (_templateObject$1f =
 }, function (props) {
   return getColorRgbaValue(props.theme, "Input", props.color, "enabled", "placeholder");
 });
-var StyledPrefix$3 = newStyled.span(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral__default["default"](["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
+var StyledPrefix$3 = newStyled.span(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral__default["default"](["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "Input", props.focused ? "primary" : props.color, "enabled", "prefix");
 });
 var StyledSuffix$3 = newStyled(StyledPrefix$3)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral__default["default"]([""])));
@@ -44100,7 +44078,7 @@ DecimalInput.propTypes = {
 };
 var _excluded$12 = ["id", "className", "style", "onChange", "onFocus", "onBlur", "disabled", "readOnly", "multiple", "accept", "label", "tabIndex", "color", "size"];
-var _templateObject$1e, _templateObject2$w, _templateObject3$j, _templateObject4$9;
+var _templateObject$1e, _templateObject2$v, _templateObject3$j, _templateObject4$9;
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); }
 function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
@@ -44113,7 +44091,7 @@ var Container$c = newStyled.label(_templateObject$1e || (_templateObject$1e = _t
 }, function (props) {
   return props.focused && props.readOnly == false ? getOutlineCss(props.theme) : "";
 });
-var Input$3 = newStyled.input(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral__default["default"](["\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: -1;\n"])));
+var Input$3 = newStyled.input(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral__default["default"](["\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: -1;\n"])));
 var Label$4 = newStyled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  padding: 0.625rem 0.75rem;\n  ", "\n  color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px 0 0 8px;\n\n  ", "\n"])), function (props) {
   return getComponentTypographyCss(props.theme, "Input", props.size, "enabled");
 }, function (props) {
@@ -44266,7 +44244,7 @@ FileInput.propTypes = {
   color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "danger", "warning", "information"])
 };
-var _templateObject$1d, _templateObject2$v, _templateObject3$i, _templateObject4$8;
+var _templateObject$1d, _templateObject2$u, _templateObject3$i, _templateObject4$8;
 var StyledWrapper$2 = newStyled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  align-items: center;\n\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -44282,7 +44260,7 @@ var StyledWrapper$2 = newStyled.div(_templateObject$1d || (_templateObject$1d =
 }, function (props) {
   return props.disabled ? getDisabledStateCss(props.theme) : "";
 });
-var StyledPrefix$2 = newStyled.span(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral__default["default"](["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
+var StyledPrefix$2 = newStyled.span(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral__default["default"](["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "Input", props.focused ? "primary" : props.color, "enabled", "prefix");
 });
 var StyledSuffix$2 = newStyled(StyledPrefix$2)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral__default["default"]([""])));
@@ -44502,7 +44480,7 @@ NumberInput.propTypes = {
   color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "danger", "warning", "information"])
 };
-var _templateObject$1c, _templateObject2$u, _templateObject3$h, _templateObject4$7, _templateObject5$4;
+var _templateObject$1c, _templateObject2$t, _templateObject3$h, _templateObject4$7, _templateObject5$4;
 var StyledWrapper$1 = newStyled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  align-items: center;\n\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -44518,7 +44496,7 @@ var StyledWrapper$1 = newStyled.div(_templateObject$1c || (_templateObject$1c =
 }, function (props) {
   return props.disabled ? getDisabledStateCss(props.theme) : "";
 });
-var StyledPrefix$1 = newStyled.span(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral__default["default"](["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
+var StyledPrefix$1 = newStyled.span(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral__default["default"](["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "Input", props.focused ? "primary" : props.color, "enabled", "prefix");
 });
 var StyledSuffix$1 = newStyled(StyledPrefix$1)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteral__default["default"]([""])));
@@ -44717,7 +44695,7 @@ PasswordInput.propTypes = {
 };
 var _excluded$$ = ["id", "name", "tabIndex", "checked", "className", "style", "color", "size", "onChange", "onFocus", "onBlur", "onClick", "onKeyDown", "value", "label", "labelPosition", "spaceBetween", "disabled", "readOnly", "inputProps"];
-var _templateObject$1b, _templateObject2$t;
+var _templateObject$1b, _templateObject2$s;
 var getLabelDirection$1 = function getLabelDirection(direction) {
   if (direction == "left") return "row-reverse";
   return "row";
@@ -44753,7 +44731,7 @@ var Container$b = newStyled.label(_templateObject$1b || (_templateObject$1b = _t
 }, function (props) {
   return getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
 });
-var Label$3 = newStyled.label(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral__default["default"](["\n  ", ";\n  min-width: 0;\n  flex-shrink: 1;\n  min-height: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
+var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral__default["default"](["\n  ", ";\n  min-width: 0;\n  flex-shrink: 1;\n  min-height: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return !props.disabled && props.readOnly == false && "cursor: pointer";
 });
 var RadioInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -44909,7 +44887,7 @@ RadioInput.propTypes = {
 };
 var _excluded$_ = ["defaultValue", "value", "min", "max", "disabled", "tabIndex", "onChange", "onInput", "color", "size", "className", "style"];
-var _templateObject$1a, _templateObject2$s, _templateObject3$g;
+var _templateObject$1a, _templateObject2$r, _templateObject3$g;
 var standardCssFields$2 = function standardCssFields(_ref) {
   var theme = _ref.theme,
     size = _ref.size;
@@ -44924,7 +44902,7 @@ var ThumbSize$1 = {
 var StyledRangeSlider = newStyled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n"])), function (props) {
   return standardCssFields$2(props);
 });
-var InputSlider = newStyled.input(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral__default["default"](["\n  -webkit-appearance: none; /* Override default CSS styles */\n  appearance: none;\n  width: 100%; /* Full-width */\n  height: 0.25rem; /* Specified height */\n  border-radius: 3px;\n  outline: none; /* Remove outline */\n  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */\n  background: ", ";\n  transition: background 450ms ease-in;\n  -webkit-appearance: none;\n  border-radius: ", ";\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none; /* Override default look */\n    appearance: none;\n    width: ", "; /* Set a specific slider handle width */\n    height: ", "; /* Slider handle height */\n    border-radius: 50%;\n    background-color: ", ";\n    cursor: pointer; /* Cursor on hover */\n    border: none;\n  }\n  &::-moz-range-thumb {\n    width: ", "; /* Set a specific slider handle width */\n    height: ", "; /* Slider handle height */\n    border-radius: 50%;\n    background-color: ", ";\n    cursor: pointer; /* Cursor on hover */\n    border: none;\n  }\n"])), function (props) {
+var InputSlider = newStyled.input(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral__default["default"](["\n  -webkit-appearance: none; /* Override default CSS styles */\n  appearance: none;\n  width: 100%; /* Full-width */\n  height: 0.25rem; /* Specified height */\n  border-radius: 3px;\n  outline: none; /* Remove outline */\n  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */\n  background: ", ";\n  transition: background 450ms ease-in;\n  -webkit-appearance: none;\n  border-radius: ", ";\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none; /* Override default look */\n    appearance: none;\n    width: ", "; /* Set a specific slider handle width */\n    height: ", "; /* Slider handle height */\n    border-radius: 50%;\n    background-color: ", ";\n    cursor: pointer; /* Cursor on hover */\n    border: none;\n  }\n  &::-moz-range-thumb {\n    width: ", "; /* Set a specific slider handle width */\n    height: ", "; /* Slider handle height */\n    border-radius: 50%;\n    background-color: ", ";\n    cursor: pointer; /* Cursor on hover */\n    border: none;\n  }\n"])), function (props) {
   return props.rangeBackground;
 }, function (props) {
   return getBorderRadiusValueWithUnits(props.theme, "regular");
@@ -45546,7 +45524,7 @@ TextAreaInput.propTypes = {
   color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "danger", "warning", "information"])
 };
-var _templateObject$18, _templateObject2$r, _templateObject3$f, _templateObject4$6;
+var _templateObject$18, _templateObject2$q, _templateObject3$f, _templateObject4$6;
 var StyledWrapper = newStyled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  align-items: center;\n\n  min-height: ", ";\n  max-height: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n\n  ", "\n  ", "\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, props.size);
 }, function (props) {
@@ -45562,7 +45540,7 @@ var StyledWrapper = newStyled.div(_templateObject$18 || (_templateObject$18 = _t
 }, function (props) {
   return props.disabled ? getDisabledStateCss(props.theme) : "";
 });
-var StyledPrefix = newStyled.span(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral__default["default"](["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
+var StyledPrefix = newStyled.span(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral__default["default"](["\n  padding: 0 12px;\n  color: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "Input", props.focused ? "primary" : props.color, "enabled", "prefix");
 });
 var StyledSuffix = newStyled(StyledPrefix)(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral__default["default"]([""])));
@@ -46550,7 +46528,7 @@ Label$2.propTypes = {
   color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "danger", "warning", "information"])
 };
-var _templateObject$$, _templateObject2$q, _templateObject3$e, _templateObject4$5, _templateObject5$3, _templateObject6$1;
+var _templateObject$$, _templateObject2$p, _templateObject3$e, _templateObject4$5, _templateObject5$3, _templateObject6$1;
 //=================================================
@@ -46577,7 +46555,7 @@ var commonCss$1 = function commonCss(props) {
 var LeadingIconContainer = newStyled.span(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral__default["default"](["\n  padding-right: ", ";\n"])), function (props) {
   return props.size === "small" ? "0.25rem" : "0.5rem";
 });
-var TrailingIconContainer = newStyled.span(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral__default["default"](["\n  padding-left: ", ";\n"])), function (props) {
+var TrailingIconContainer = newStyled.span(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral__default["default"](["\n  padding-left: ", ";\n"])), function (props) {
   return props.size === "small" ? "0.25rem" : "0.5rem";
 });
 var FilledButton$1 = newStyled.button(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral__default["default"](["\n  ", "\n\n  ", ";\n\n  background-color: ", ";\n  color: ", ";\n\n  min-height: ", ";\n  max-height: ", ";\n\n  &:disabled {\n    ", ";\n    cursor: default;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n    ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
@@ -46853,7 +46831,7 @@ Button$1.propTypes = {
   size: PropTypes__default["default"].oneOf(["small", "medium", "large"])
 };
-var _templateObject$_, _templateObject2$p, _templateObject3$d, _templateObject4$4, _templateObject5$2;
+var _templateObject$_, _templateObject2$o, _templateObject3$d, _templateObject4$4, _templateObject5$2;
 //=================================================
@@ -46861,7 +46839,7 @@ var commonCss = function commonCss(props) {
   return "\n        outline: none;\n        display: inline-flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        border: none;\n        transition: all 50  ms ease-in;\n        cursor: pointer;\n        color: ".concat(!props.disabled && "white", ";\n\n        border-radius: ").concat(getBorderRadiusValueWithUnits(props.theme, props.borderRadius), ";\n\n        min-width: ").concat(getSizeValueWithUnits(props.theme, props.size), ";\n        max-width: ").concat(getSizeValueWithUnits(props.theme, props.size), ";\n    ");
 };
 var StyledIcon = newStyled.i(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral__default["default"](["\n  font-size: 1.125rem;\n"])));
-var FilledButton = newStyled.button(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral__default["default"](["\n  ", "\n\n  ", ";\n\n  background-color: ", ";\n  color: ", ";\n\n  min-height: ", ";\n  max-height: ", ";\n\n  &:disabled {\n    ", ";\n    cursor: default;\n    background-color: ", ";\n      color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n\n    ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n      color: ", ";\n  }\n"])), function (props) {
+var FilledButton = newStyled.button(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteral__default["default"](["\n  ", "\n\n  ", ";\n\n  background-color: ", ";\n  color: ", ";\n\n  min-height: ", ";\n  max-height: ", ";\n\n  &:disabled {\n    ", ";\n    cursor: default;\n    background-color: ", ";\n      color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n\n    ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n      color: ", ";\n  }\n"])), function (props) {
   return commonCss(props);
 }, function (props) {
   return getComponentTypographyCss(props.theme, "ButtonFilled", props.size, "enabled");
@@ -47089,9 +47067,9 @@ Button.propTypes = {
 };
 var _excluded$P = ["goToPreviousView", "id", "data", "fields", "flexGridProps", "goBackText", "showBack", "showNext", "showPrevious", "showEdit", "disableGoBack", "disableNext", "disablePrevious", "disableEdit", "goToNext", "goToPrevious", "onEdit", "goBack", "className", "style", "color", "size", "children"];
-var _templateObject$Z, _templateObject2$o;
+var _templateObject$Z, _templateObject2$n;
 var StyledToolbar$3 = newStyled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  justify-content: space-between;\n"])));
-var StyledDetailsView = newStyled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  box-shadow: ", ";\n  border-radius: ", ";\n  border-top: 1px solid rgba(0, 0, 0, 0.04);\n  padding: 12px;\n  background-color: ", ";\n"])), function (props) {
+var StyledDetailsView = newStyled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  box-shadow: ", ";\n  border-radius: ", ";\n  border-top: 1px solid rgba(0, 0, 0, 0.04);\n  padding: 12px;\n  background-color: ", ";\n"])), function (props) {
   return getComponentPropValue(props.theme, "Popover", props.color, "enabled", "boxShadow");
 }, function (props) {
   return getBorderRadiusValueWithUnits(props.theme, props.borderRadius);
@@ -47300,9 +47278,7 @@ TableHead.propTypes = {
 };
 var _templateObject$W;
-var HtmlRow$1 = newStyled.tr(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral__default["default"](["\n& > td {\n  background-color: ", ";\n}\n  ", "\n  ", "\n", "\n  &:last-of-type > td:first-of-type {\n    border-radius: 0 0 0 0.5rem;\n  }\n  &:last-of-type > td:last-of-type {\n    border-radius: 0 0 0.5rem 0;\n  }\n  ", "\n  ", "\n"])), function (props) {
-  return getColorRgbaValue(props.theme, "TableRow", null, "enabled", "background");
-}, function (props) {
+var HtmlRow$1 = newStyled.tr(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral__default["default"](["\n  ", "\n  ", "\n", "\n  &:last-of-type > td:first-of-type {\n    border-radius: 0 0 0 0.5rem;\n  }\n  &:last-of-type > td:last-of-type {\n    border-radius: 0 0 0.5rem 0;\n  }\n  ", "\n  ", "\n"])), function (props) {
   return props.noBorder == false && "border-bottom: 1px solid ".concat(getColorRgbaValue(props.theme, "TableRow", null, "enabled", "border"), ";");
 }, function (props) {
   return props.noBorder == false && "border-left: 1px solid ".concat(getColorRgbaValue(props.theme, "TableRow", null, "enabled", "border"), ";");
@@ -47372,8 +47348,10 @@ TableRow.propTypes = {
 };
 var _templateObject$V;
-var HtmlCell$4 = newStyled.td(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral__default["default"](["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: ", ";\n  padding: 0.875rem 1.5rem;\n  ", "\n\n  ", ";\n"])), function (props) {
+var HtmlCell$4 = newStyled.td(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral__default["default"](["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: ", ";\n  padding: 0.875rem 1.5rem;\n\n  background-color: ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
   return props.width;
+}, function (props) {
+  return getColorRgbaValue(props.theme, "TableRow", null, "enabled", "background");
 }, function (props) {
   return props.bgColor;
 }, function (props) {
@@ -47580,7 +47558,7 @@ TableHeadRow.propTypes = {
   color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "danger", "warning", "information", "neutral"])
 };
-var _templateObject$S, _templateObject2$n, _templateObject3$c, _templateObject4$3;
+var _templateObject$S, _templateObject2$m, _templateObject3$c, _templateObject4$3;
 var HtmlHeadCell$1 = newStyled.th(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral__default["default"](["\nwhite-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: left;\n  transition: all 250ms ease;\n  padding: 0.875rem 1.5rem;\n  cursor: ", ";\n  width: ", ";\n\n  &:hover {\n    ", "\n  }\n\n  ", ";\n\n  color: ", "};\n\n  background-color: ", "};\n\n  border-top: ", "};\n\n  border-bottom: ", "};\n\n\n  &:first-of-type {\n    border-radius: 0.5rem 0 0 0;\n    border-left: ", "};\n  }\n\n  &:last-of-type {\n    border-radius: 0 0.5rem 0 0;\n    border-right: ", "};\n  }\n"])), function (props) {
   return props.ordering ? "pointer" : "default";
 }, function (props) {
@@ -47602,7 +47580,7 @@ var HtmlHeadCell$1 = newStyled.th(_templateObject$S || (_templateObject$S = _tag
 }, function (props) {
   return "1px solid " + getColorRgbaValue(props.theme, "TableHeadCell", null, "enabled", "border");
 });
-var HeaderInnerCell = newStyled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
+var HeaderInnerCell = newStyled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 var HeaderCellText = newStyled.span(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral__default["default"](["\n  padding-right: 0.25rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  color: ", ";\n\n  font-weight: ", ";\n"])), function (props) {
   return getColorRgbaValue(props.theme, "TableHeadCell", props.color, "enabled", "text");
 }, function (props) {
@@ -47782,9 +47760,9 @@ TableHeadSelectionCell.propTypes = {
   color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "danger", "warning", "information", "neutral"])
 };
-var _templateObject$Q, _templateObject2$m;
+var _templateObject$Q, _templateObject2$l;
 var HtmlCell$1 = newStyled.td(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral__default["default"](["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 0.25rem 0.125rem;\n"])));
-var Indicator = newStyled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral__default["default"](["\n  width: ", ";\n  height: 100%;\n  border-radius: 100px;\n  background-color: ", " !important;\n"])), function (props) {
+var Indicator = newStyled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral__default["default"](["\n  width: ", ";\n  height: 100%;\n  border-radius: 100px;\n  background-color: ", " !important;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.bgColor;
@@ -47850,15 +47828,8 @@ TableRowStatusIndicatorCell.propTypes = {
   color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "danger", "warning", "information", "neutral"])
 };
-var _templateObject$P, _templateObject2$l;
-newStyled.th(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral__default["default"](["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: ", ";\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n\n  &:first-of-type {\n    border-radius: 8px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 8px 0 0;\n  }\n"])), function (props) {
-  return props.theme.typography[props.size].fontSize;
-}, function (props) {
-  return props.theme.palette.transparent.light;
-}, function (props) {
-  return props.theme.palette.transparent.light;
-});
-var HtmlHeadCell = newStyled.th(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral__default["default"](["\n  padding: 0.125rem;\n\n  background-color: ", "};\n\n  border-bottom: ", "};\n  \n  border-radius: 0.5rem 0 0 0;\n"])), function (props) {
+var _templateObject$P;
+var HtmlHeadCell = newStyled.th(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral__default["default"](["\n  padding: 0.125rem;\n  width: 8px;\n\n  background-color: ", "};\n\n  border-bottom: ", "};\n  \n  border-radius: 0.5rem 0 0 0;\n"])), function (props) {
   return getColorRgbaValue(props.theme, "TableHeadCell", null, "enabled", "background");
 }, function (props) {
   return "1px solid " + getColorRgbaValue(props.theme, "TableHeadCell", null, "enabled", "border");
@@ -53122,7 +53093,7 @@ var EditableTableCell = function EditableTableCell(props) {
       debounceTime: 0
     }, Column.inputProps), {}, {
       value: RowData[Column.accessor],
-      checked: RowData[Column.accessor],
+      defaultChecked: RowData[Column.accessor],
       focused: focused,
       onChange: standardOnChange,
       onBlur: function onBlur(e) {

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@lanaco/lnc-react-ui",
   "type": "module",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.4",
   "description": "component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",