@lanaco/lnc-react-ui 3.0.0-rc.3 → 3.0.0-rc.5

package/lib/index.esm.js

@@ -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  & input:focus {\n    outline: none;\n    background: transparent;\n  }\n  & input:active {\n    outline: none;\n    background: transparent;\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([""])));
@@ -46224,7 +46202,7 @@ var Align = {
 
 var _excluded$S = ["className", "children"];
 var _templateObject$12;
-var StyledFlexbox = newStyled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n"])), function (props) {
+var StyledFlexbox = newStyled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  column-gap: ", ";\n  row-gap: ", ";\n"])), function (props) {
   return Direction$1[props.direction];
 }, function (props) {
   return Wrap[props.wrap];
@@ -46232,6 +46210,10 @@ var StyledFlexbox = newStyled.div(_templateObject$12 || (_templateObject$12 = _t
   return Justify[props.justifyContent];
 }, function (props) {
   return Align[props.alignItems];
+}, function (props) {
+  return props.columnGap ? props.columnGap : props.gap;
+}, function (props) {
+  return props.rowGap ? props.rowGap : props.gap;
 });
 var FlexBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   //============================================== PROPS ===============================================
@@ -46251,9 +46233,13 @@ FlexBox.defaultProps = {
   direction: "Row",
   wrap: "NoWrap",
   justifyContent: "Start",
-  alignItems: "Stretch"
+  alignItems: "Stretch",
+  gap: "0"
 };
 FlexBox.propTypes = {
+  rowGap: PropTypes.string,
+  columnGap: PropTypes.string,
+  gap: PropTypes.string,
   /**
    * Controls the direction of items in FlexBox.
    */
@@ -46501,7 +46487,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 +46514,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 +46790,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 +46798,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 +47026,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 +47237,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 +47307,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 +47517,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 +47539,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 +47719,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 +47787,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 +53052,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) {
@@ -65295,7 +65274,7 @@ var isPropValid = /* #__PURE__ */memoize$4(function (prop) {
 function v(){return (v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);}return e}).apply(this,arguments)}var g=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},S=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!reactIs.exports.typeOf(t)},w=Object.freeze([]),E=Object.freeze({});function b$1(e){return "function"==typeof e}function _$1(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function N(e){return e&&"string"==typeof e.styledComponentId}var A="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",I="undefined"!=typeof window&&"HTMLElement"in window,P=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),O={},R="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function D(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach((function(t){e=e.replace(/%[a-z]/,t);})),e}function j(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw "production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(D.apply(void 0,[R[e]].concat(n)).trim())}var T=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&j(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=0,c=t.length;a<c;a++)this.tag.insertRule(i,t[a])&&(this.groupSizes[e]++,i++);},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+=this.tag.getRule(s)+"/*!sc*/\n";return t},e}(),x=new Map,k=new Map,V=1,B=function(e){if(x.has(e))return x.get(e);for(;k.has(V);)V++;var t=V++;return "production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&j(16,""+t),x.set(e,t),k.set(t,e),t},z=function(e){return k.get(e)},M=function(e,t){t>=V&&(V=t+1),x.set(e,t),k.set(t,e);},G="style["+A+'][data-styled-version="5.3.6"]',L=new RegExp("^"+A+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),F=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r);},Y=function(e,t){for(var n=(t.textContent||"").split("/*!sc*/\n"),r=[],o=0,s=n.length;o<s;o++){var i=n[o].trim();if(i){var a=i.match(L);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(M(u,c),F(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0;}else r.push(i);}}},q=function(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},H=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(A))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(A,"active"),r.setAttribute("data-styled-version","5.3.6");var i=q();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},$=function(){function e(e){var t=this.element=H(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}j(17);}(t),this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return !1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),W=function(){function e(e){var t=this.element=H(e);this.nodes=t.childNodes,this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return !1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),U=function(){function e(e){this.rules=[],this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--;},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),J=I,X={isServer:!I,useCSSOMInjection:!P},Z=function(){function e(e,t,n){void 0===e&&(e=E),void 0===t&&(t={}),this.options=v({},X,{},e),this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&I&&J&&(J=!1,function(e){for(var t=document.querySelectorAll(G),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(A)&&(Y(e,o),o.parentNode&&o.parentNode.removeChild(o));}}(this));}e.registerId=function(e){return B(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(v({},this.options,{},t),this.gs,n&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(n=(t=this.options).isServer,r=t.useCSSOMInjection,o=t.target,e=n?new U(o):r?new $(o):new W(o),new T(e)));var e,t,n,r,o;},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(B(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(B(e),n);},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},t.clearRules=function(e){this.getTag().clearGroup(B(e)),this.clearNames(e);},t.clearTag=function(){this.tag=void 0;},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var s=z(o);if(void 0!==s){var i=e.names.get(s),a=t.getGroup(o);if(i&&a&&i.size){var c=A+".g"+o+'[id="'+s+'"]',u="";void 0!==i&&i.forEach((function(e){e.length>0&&(u+=e+",");})),r+=""+a+c+'{content:"'+u+'"}/*!sc*/\n';}}}return r}(this)},e}(),K=/(a)(d)/gi,Q=function(e){return String.fromCharCode(e+(e>25?39:97))};function ee(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=Q(t%52)+n;return (Q(t%52)+n).replace(K,"$1-$2")}var te=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},ne=function(e){return te(5381,e)};function re(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(b$1(n)&&!N(n))return !1}return !0}var oe=ne("5.3.6"),se=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&re(e),this.componentId=t,this.baseHash=te(oe,t),this.baseStyle=n,Z.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else {var s=Ne(this.rules,e,t,n).join(""),i=ee(te(this.baseHash,s)>>>0);if(!t.hasNameForId(r,i)){var a=n(s,"."+i,void 0,r);t.insertRules(r,i,a);}o.push(i),this.staticRulesId=i;}else {for(var c=this.rules.length,u=te(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h,"production"!==process.env.NODE_ENV&&(u=te(u,h+d));else if(h){var p=Ne(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=te(u,f+d),l+=f;}}if(l){var m=ee(u>>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y);}o.push(m);}}return o.join(" ")},e}(),ie=/^\s*\/\/.*$/gm,ae=[":","[",".","#"];function ce(e){var t,n,r,o,s=void 0===e?E:e,i=s.options,a=void 0===i?E:i,c=s.plugins,u=void 0===c?w:c,l=new stylis_min(a),d=[],h=function(e){function t(t){if(t)try{e(t+"}");}catch(e){}}return function(n,r,o,s,i,a,c,u,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===d?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t);}}}((function(e){d.push(e);})),f=function(e,r,s){return 0===r&&-1!==ae.indexOf(s[n.length])||s.match(o)?e:"."+t};function m(e,s,i,a){void 0===a&&(a="&");var c=e.replace(ie,""),u=s&&i?i+" "+s+" { "+c+" }":c;return t=a,n=s,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),l(i||!s?"":s,u)}return l.use([].concat(u,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,f));},h,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||j(15),te(e,t.name)}),5381).toString():"",m}var ue=React__default.createContext();ue.Consumer;var de=React__default.createContext(),he=(de.Consumer,new Z),pe=ce();function fe(){return useContext(ue)||he}function me(){return useContext(de)||pe}var ve=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=pe);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"));},this.toString=function(){return j(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t;}return e.prototype.getName=function(e){return void 0===e&&(e=pe),this.name+e.hash},e}(),ge=/([A-Z])/,Se=/([A-Z])/g,we=/^ms-/,Ee=function(e){return "-"+e.toLowerCase()};function be(e){return ge.test(e)?e.replace(Se,Ee).replace(we,"-ms-"):e}var _e=function(e){return null==e||!1===e||""===e};function Ne(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a<c;a+=1)""!==(s=Ne(e[a],n,r,o))&&(Array.isArray(s)?i.push.apply(i,s):i.push(s));return i}if(_e(e))return "";if(N(e))return "."+e.styledComponentId;if(b$1(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return "production"!==process.env.NODE_ENV&&reactIs.exports.isElement(u)&&console.warn(_$1(e)+" is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."),Ne(u,n,r,o)}var l;return e instanceof ve?r?(e.inject(r,o),e.getName(o)):e:S(e)?function e(t,n){var r,o,s=[];for(var i in t)t.hasOwnProperty(i)&&!_e(t[i])&&(Array.isArray(t[i])&&t[i].isCss||b$1(t[i])?s.push(be(i)+":",t[i],";"):S(t[i])?s.push.apply(s,e(t[i],i)):s.push(be(i)+": "+(r=i,null==(o=t[i])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in unitlessKeys?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(s,["}"]):s}(e):e.toString()}var Ae=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function Ce(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return b$1(e)||S(e)?Ae(Ne(g(w,[e].concat(n)))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:Ae(Ne(g(e,n)))}var Ie=/invalid hook call/i,Pe=new Set,Oe=function(e,t){if("production"!==process.env.NODE_ENV){var n="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",r=console.error;try{var o=!0;console.error=function(e){if(Ie.test(e))o=!1,Pe.delete(n);else {for(var t=arguments.length,s=new Array(t>1?t-1:0),i=1;i<t;i++)s[i-1]=arguments[i];r.apply(void 0,[e].concat(s));}},useRef(),o&&!Pe.has(n)&&(console.warn(n),Pe.add(n));}catch(e){Ie.test(e.message)&&Pe.delete(n);}finally{console.error=r;}}},Re=function(e,t,n){return void 0===n&&(n=E),e.theme!==n.theme&&e.theme||t||n.theme},De=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,je=/(^-|-$)/g;function Te(e){return e.replace(De,"-").replace(je,"")}var xe=function(e){return ee(ne(e)>>>0)};function ke(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var Ve=function(e){return "function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},Be=function(e){return "__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function ze(e,t,n){var r=e[n];Ve(t)&&Ve(r)?Me(r,t):e[n]=t;}function Me(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,s=n;o<s.length;o++){var i=s[o];if(Ve(i))for(var a in i)Be(a)&&ze(e,i[a],a);}return e}var Ge=React__default.createContext();Ge.Consumer;var Ye={};function qe(e,t,n){var o=N(e),i=!ke(e),a=t.attrs,c=void 0===a?w:a,d=t.componentId,h=void 0===d?function(e,t){var n="string"!=typeof e?"sc":Te(e);Ye[n]=(Ye[n]||0)+1;var r=n+"-"+xe("5.3.6"+n+Ye[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):d,p=t.displayName,f=void 0===p?function(e){return ke(e)?"styled."+e:"Styled("+_$1(e)+")"}(e):p,g=t.displayName&&t.componentId?Te(t.displayName)+"-"+t.componentId:t.componentId||h,S=o&&e.attrs?Array.prototype.concat(e.attrs,c).filter(Boolean):c,A=t.shouldForwardProp;o&&e.shouldForwardProp&&(A=t.shouldForwardProp?function(n,r,o){return e.shouldForwardProp(n,r,o)&&t.shouldForwardProp(n,r,o)}:e.shouldForwardProp);var C,I=new se(n,g,o?e.componentStyle:void 0),P=I.isStatic&&0===c.length,O=function(e,t){return function(e,t,n,r){var o=e.attrs,i=e.componentStyle,a=e.defaultProps,c=e.foldedComponentIds,d=e.shouldForwardProp,h=e.styledComponentId,p=e.target;"production"!==process.env.NODE_ENV&&useDebugValue(h);var f=function(e,t,n){void 0===e&&(e=E);var r=v({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,s,i=e;for(t in b$1(i)&&(i=i(r)),i)r[t]=o[t]="className"===t?(n=o[t],s=i[t],n&&s?n+" "+s:n||s):i[t];})),[r,o]}(Re(t,useContext(Ge),a)||E,t,o),y=f[0],g=f[1],S=function(e,t,n,r){var o=fe(),s=me(),i=t?e.generateAndInjectStyles(E,o,s):e.generateAndInjectStyles(n,o,s);return "production"!==process.env.NODE_ENV&&useDebugValue(i),"production"!==process.env.NODE_ENV&&!t&&r&&r(i),i}(i,r,y,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),w=n,_=g.$as||t.$as||g.as||t.as||p,N=ke(_),A=g!==t?v({},t,{},g):t,C={};for(var I in A)"$"!==I[0]&&"as"!==I&&("forwardedAs"===I?C.as=A[I]:(d?d(I,isPropValid,_):!N||isPropValid(I))&&(C[I]=A[I]));return t.style&&g.style!==t.style&&(C.style=v({},t.style,{},g.style)),C.className=Array.prototype.concat(c,h,S!==h?S:null,t.className,g.className).filter(Boolean).join(" "),C.ref=w,createElement(_,C)}(C,e,t,P)};return O.displayName=f,(C=React__default.forwardRef(O)).attrs=S,C.componentStyle=I,C.displayName=f,C.shouldForwardProp=A,C.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):w,C.styledComponentId=g,C.target=o?e.target:e,C.withComponent=function(e){var r=t.componentId,o=function(e,t){if(null==e)return {};var n,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(t,["componentId"]),s=r&&r+"-"+(ke(e)?e:Te(_$1(e)));return qe(e,v({},o,{attrs:S,componentId:s}),n)},Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?Me({},e.defaultProps,t):t;}}),"production"!==process.env.NODE_ENV&&(Oe(f,g),C.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'+t+'"':"";console.warn("Over 200 classes were generated for component "+e+s+".\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={};}}}(f,g)),C.toString=function(){return "."+C.styledComponentId},i&&hoistNonReactStatics_cjs(C,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),C}var He=function(e){return function e(t,r,o){if(void 0===o&&(o=E),!reactIs.exports.isValidElementType(r))return j(1,String(r));var s=function(){return t(r,o,Ce.apply(void 0,arguments))};return s.withConfig=function(n){return e(t,r,v({},o,{},n))},s.attrs=function(n){return e(t,r,v({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},s}(qe,e)};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","textPath","tspan"].forEach((function(e){He[e]=He(e);}));var $e=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=re(e),Z.registerId(this.componentId+1);}var t=e.prototype;return t.createStyles=function(e,t,n,r){var o=r(Ne(this.rules,t,n,r).join(""),""),s=this.componentId+e;n.insertRules(s,s,o);},t.removeStyles=function(e,t){t.clearRules(this.componentId+e);},t.renderStyles=function(e,t,n,r){e>2&&Z.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r);},e}();function We(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var i=Ce.apply(void 0,[e].concat(n)),a="sc-global-"+xe(JSON.stringify(i)),u=new $e(i,a);function l(e){var t=fe(),n=me(),o=useContext(Ge),l=useRef(t.allocateGSInstance(a)).current;return "production"!==process.env.NODE_ENV&&React__default.Children.count(e.children)&&console.warn("The global style component "+a+" was given child JSX. createGlobalStyle does not render children."),"production"!==process.env.NODE_ENV&&i.some((function(e){return "string"==typeof e&&-1!==e.indexOf("@import")}))&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),t.server&&h(l,e,t,o,n),useLayoutEffect((function(){if(!t.server)return h(l,e,t,o,n),function(){return u.removeStyles(l,t)}}),[l,e,t,o,n]),null}function h(e,t,n,r,o){if(u.isStatic)u.renderStyles(e,O,n,o);else {var s=v({},t,{theme:Re(t,r,l.defaultProps)});u.renderStyles(e,s,n,o);}}return "production"!==process.env.NODE_ENV&&Oe(a),React__default.memo(l)}"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native"),"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window["__styled-components-init__"]=window["__styled-components-init__"]||0,1===window["__styled-components-init__"]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window["__styled-components-init__"]+=1);
 
 var _templateObject$D;
-var GlobalStyle = We(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n* {\n  --size-small: ", ";\n  --size-medium: ", ";\n  --size-large: ", ";\n  --disabled-text: ", ";\n  --disabled-bg: ", ";\n\n  box-sizing: border-box;\n  font-family: ", ";\n  \n  & i {\n    font-family: \"Font Awesome 5 Free\";\n  }\n\n  & .lnc-doc {\n    & th {\n      background-color: ", " !important;\n        color: ", " !important;\n    }\n    & td {\n      background-color: ", " !important;\n        color: ", " !important;\n    }\n  }\n\n  & .sbdocs {\n    background-color: ", " !important;\n    color: ", " !important;\n  }\n}\n  body {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+var GlobalStyle = We(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n* {\n  --size-small: ", ";\n  --size-medium: ", ";\n  --size-large: ", ";\n  --disabled-text: ", ";\n  --disabled-bg: ", ";\n\n  box-sizing: border-box;\n  font-family: ", ";\n  -webkit-tap-highlight-color: transparent;\n\n  & i {\n    font-family: \"Font Awesome 5 Free\";\n  }\n\n  & .lnc-doc {\n    & th {\n      background-color: ", " !important;\n        color: ", " !important;\n    }\n    & td {\n      background-color: ", " !important;\n        color: ", " !important;\n    }\n  }\n\n  & .sbdocs {\n    background-color: ", " !important;\n    color: ", " !important;\n  }\n}\n  body {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, "small");
 }, function (props) {
   return getSizeValueWithUnits(props.theme, "medium");
@@ -75469,7 +75448,7 @@ var getHeight = function getHeight(size) {
   if (size == "medium") return "3.375rem";
   return "3.625rem";
 };
-var Tab = newStyled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  ", ";\n  min-width: 5.25rem;\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  height: ", ";\n  ", ";\n  ", ";\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", ";\n  ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    ", ";\n  }\n"])), function (props) {
+var Tab = newStyled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  ", ";\n  min-width: 5.25rem;\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  height: ", ";\n  ", ";\n  ", ";\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", ";\n  ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    ", ";\n  }\n  &:active {\n    background: ", ";\n  }\n"])), function (props) {
   return props.disabled && getDisabledStateCss(props.theme);
 }, function (props) {
   return props.fullWidth && "width: 100%";
@@ -75495,6 +75474,8 @@ var Tab = newStyled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplat
   return props.type == "regular" ? "transparent" : !props.disabled && getColorRgbaValue(props.theme, getTypeName(props.type), props.color, "hover", "background", "backgroundOpacity");
 }, function (props) {
   return getBottomLine(props.theme, props.type, props.active, props.disabled, props.color, "hover");
+}, function (props) {
+  return getColorRgbaValue(props.theme, getTypeName(props.type), props.color, "active", "background", "backgroundOpacity");
 });
 var getTypeName = function getTypeName(type) {
   if (type == "underline") {

package/lib/index.js

@@ -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  & input:focus {\n    outline: none;\n    background: transparent;\n  }\n  & input:active {\n    outline: none;\n    background: transparent;\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"]([""])));
@@ -46273,7 +46251,7 @@ var Align = {
 
 var _excluded$S = ["className", "children"];
 var _templateObject$12;
-var StyledFlexbox = newStyled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: ", ";\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n"])), function (props) {
+var StyledFlexbox = newStyled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: ", ";\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  column-gap: ", ";\n  row-gap: ", ";\n"])), function (props) {
   return Direction$1[props.direction];
 }, function (props) {
   return Wrap[props.wrap];
@@ -46281,6 +46259,10 @@ var StyledFlexbox = newStyled.div(_templateObject$12 || (_templateObject$12 = _t
   return Justify[props.justifyContent];
 }, function (props) {
   return Align[props.alignItems];
+}, function (props) {
+  return props.columnGap ? props.columnGap : props.gap;
+}, function (props) {
+  return props.rowGap ? props.rowGap : props.gap;
 });
 var FlexBox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   //============================================== PROPS ===============================================
@@ -46300,9 +46282,13 @@ FlexBox.defaultProps = {
   direction: "Row",
   wrap: "NoWrap",
   justifyContent: "Start",
-  alignItems: "Stretch"
+  alignItems: "Stretch",
+  gap: "0"
 };
 FlexBox.propTypes = {
+  rowGap: PropTypes__default["default"].string,
+  columnGap: PropTypes__default["default"].string,
+  gap: PropTypes__default["default"].string,
   /**
    * Controls the direction of items in FlexBox.
    */
@@ -46550,7 +46536,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 +46563,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 +46839,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 +46847,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 +47075,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 +47286,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 +47356,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 +47566,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 +47588,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 +47768,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 +47836,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 +53101,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) {
@@ -65344,7 +65323,7 @@ var isPropValid = /* #__PURE__ */memoize$4(function (prop) {
 function v(){return (v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);}return e}).apply(this,arguments)}var g=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},S=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!reactIs.exports.typeOf(t)},w=Object.freeze([]),E=Object.freeze({});function b$1(e){return "function"==typeof e}function _$1(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function N(e){return e&&"string"==typeof e.styledComponentId}var A="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",I="undefined"!=typeof window&&"HTMLElement"in window,P=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),O={},R="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function D(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach((function(t){e=e.replace(/%[a-z]/,t);})),e}function j(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw "production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(D.apply(void 0,[R[e]].concat(n)).trim())}var T=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&j(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=0,c=t.length;a<c;a++)this.tag.insertRule(i,t[a])&&(this.groupSizes[e]++,i++);},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+=this.tag.getRule(s)+"/*!sc*/\n";return t},e}(),x=new Map,k=new Map,V=1,B=function(e){if(x.has(e))return x.get(e);for(;k.has(V);)V++;var t=V++;return "production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&j(16,""+t),x.set(e,t),k.set(t,e),t},z=function(e){return k.get(e)},M=function(e,t){t>=V&&(V=t+1),x.set(e,t),k.set(t,e);},G="style["+A+'][data-styled-version="5.3.6"]',L=new RegExp("^"+A+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),F=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r);},Y=function(e,t){for(var n=(t.textContent||"").split("/*!sc*/\n"),r=[],o=0,s=n.length;o<s;o++){var i=n[o].trim();if(i){var a=i.match(L);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(M(u,c),F(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0;}else r.push(i);}}},q=function(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},H=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(A))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(A,"active"),r.setAttribute("data-styled-version","5.3.6");var i=q();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},$=function(){function e(e){var t=this.element=H(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}j(17);}(t),this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return !1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),W=function(){function e(e){var t=this.element=H(e);this.nodes=t.childNodes,this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return !1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),U=function(){function e(e){this.rules=[],this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--;},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),J=I,X={isServer:!I,useCSSOMInjection:!P},Z=function(){function e(e,t,n){void 0===e&&(e=E),void 0===t&&(t={}),this.options=v({},X,{},e),this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&I&&J&&(J=!1,function(e){for(var t=document.querySelectorAll(G),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(A)&&(Y(e,o),o.parentNode&&o.parentNode.removeChild(o));}}(this));}e.registerId=function(e){return B(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(v({},this.options,{},t),this.gs,n&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(n=(t=this.options).isServer,r=t.useCSSOMInjection,o=t.target,e=n?new U(o):r?new $(o):new W(o),new T(e)));var e,t,n,r,o;},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(B(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(B(e),n);},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},t.clearRules=function(e){this.getTag().clearGroup(B(e)),this.clearNames(e);},t.clearTag=function(){this.tag=void 0;},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var s=z(o);if(void 0!==s){var i=e.names.get(s),a=t.getGroup(o);if(i&&a&&i.size){var c=A+".g"+o+'[id="'+s+'"]',u="";void 0!==i&&i.forEach((function(e){e.length>0&&(u+=e+",");})),r+=""+a+c+'{content:"'+u+'"}/*!sc*/\n';}}}return r}(this)},e}(),K=/(a)(d)/gi,Q=function(e){return String.fromCharCode(e+(e>25?39:97))};function ee(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=Q(t%52)+n;return (Q(t%52)+n).replace(K,"$1-$2")}var te=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},ne=function(e){return te(5381,e)};function re(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(b$1(n)&&!N(n))return !1}return !0}var oe=ne("5.3.6"),se=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&re(e),this.componentId=t,this.baseHash=te(oe,t),this.baseStyle=n,Z.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else {var s=Ne(this.rules,e,t,n).join(""),i=ee(te(this.baseHash,s)>>>0);if(!t.hasNameForId(r,i)){var a=n(s,"."+i,void 0,r);t.insertRules(r,i,a);}o.push(i),this.staticRulesId=i;}else {for(var c=this.rules.length,u=te(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h,"production"!==process.env.NODE_ENV&&(u=te(u,h+d));else if(h){var p=Ne(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=te(u,f+d),l+=f;}}if(l){var m=ee(u>>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y);}o.push(m);}}return o.join(" ")},e}(),ie=/^\s*\/\/.*$/gm,ae=[":","[",".","#"];function ce(e){var t,n,r,o,s=void 0===e?E:e,i=s.options,a=void 0===i?E:i,c=s.plugins,u=void 0===c?w:c,l=new stylis_min(a),d=[],h=function(e){function t(t){if(t)try{e(t+"}");}catch(e){}}return function(n,r,o,s,i,a,c,u,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===d?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t);}}}((function(e){d.push(e);})),f=function(e,r,s){return 0===r&&-1!==ae.indexOf(s[n.length])||s.match(o)?e:"."+t};function m(e,s,i,a){void 0===a&&(a="&");var c=e.replace(ie,""),u=s&&i?i+" "+s+" { "+c+" }":c;return t=a,n=s,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),l(i||!s?"":s,u)}return l.use([].concat(u,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,f));},h,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||j(15),te(e,t.name)}),5381).toString():"",m}var ue=React__default["default"].createContext();ue.Consumer;var de=React__default["default"].createContext(),he=(de.Consumer,new Z),pe=ce();function fe(){return React.useContext(ue)||he}function me(){return React.useContext(de)||pe}var ve=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=pe);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"));},this.toString=function(){return j(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t;}return e.prototype.getName=function(e){return void 0===e&&(e=pe),this.name+e.hash},e}(),ge=/([A-Z])/,Se=/([A-Z])/g,we=/^ms-/,Ee=function(e){return "-"+e.toLowerCase()};function be(e){return ge.test(e)?e.replace(Se,Ee).replace(we,"-ms-"):e}var _e=function(e){return null==e||!1===e||""===e};function Ne(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a<c;a+=1)""!==(s=Ne(e[a],n,r,o))&&(Array.isArray(s)?i.push.apply(i,s):i.push(s));return i}if(_e(e))return "";if(N(e))return "."+e.styledComponentId;if(b$1(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return "production"!==process.env.NODE_ENV&&reactIs.exports.isElement(u)&&console.warn(_$1(e)+" is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."),Ne(u,n,r,o)}var l;return e instanceof ve?r?(e.inject(r,o),e.getName(o)):e:S(e)?function e(t,n){var r,o,s=[];for(var i in t)t.hasOwnProperty(i)&&!_e(t[i])&&(Array.isArray(t[i])&&t[i].isCss||b$1(t[i])?s.push(be(i)+":",t[i],";"):S(t[i])?s.push.apply(s,e(t[i],i)):s.push(be(i)+": "+(r=i,null==(o=t[i])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in unitlessKeys?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(s,["}"]):s}(e):e.toString()}var Ae=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function Ce(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return b$1(e)||S(e)?Ae(Ne(g(w,[e].concat(n)))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:Ae(Ne(g(e,n)))}var Ie=/invalid hook call/i,Pe=new Set,Oe=function(e,t){if("production"!==process.env.NODE_ENV){var n="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",r=console.error;try{var o=!0;console.error=function(e){if(Ie.test(e))o=!1,Pe.delete(n);else {for(var t=arguments.length,s=new Array(t>1?t-1:0),i=1;i<t;i++)s[i-1]=arguments[i];r.apply(void 0,[e].concat(s));}},React.useRef(),o&&!Pe.has(n)&&(console.warn(n),Pe.add(n));}catch(e){Ie.test(e.message)&&Pe.delete(n);}finally{console.error=r;}}},Re=function(e,t,n){return void 0===n&&(n=E),e.theme!==n.theme&&e.theme||t||n.theme},De=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,je=/(^-|-$)/g;function Te(e){return e.replace(De,"-").replace(je,"")}var xe=function(e){return ee(ne(e)>>>0)};function ke(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var Ve=function(e){return "function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},Be=function(e){return "__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function ze(e,t,n){var r=e[n];Ve(t)&&Ve(r)?Me(r,t):e[n]=t;}function Me(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,s=n;o<s.length;o++){var i=s[o];if(Ve(i))for(var a in i)Be(a)&&ze(e,i[a],a);}return e}var Ge=React__default["default"].createContext();Ge.Consumer;var Ye={};function qe(e,t,n){var o=N(e),i=!ke(e),a=t.attrs,c=void 0===a?w:a,d=t.componentId,h=void 0===d?function(e,t){var n="string"!=typeof e?"sc":Te(e);Ye[n]=(Ye[n]||0)+1;var r=n+"-"+xe("5.3.6"+n+Ye[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):d,p=t.displayName,f=void 0===p?function(e){return ke(e)?"styled."+e:"Styled("+_$1(e)+")"}(e):p,g=t.displayName&&t.componentId?Te(t.displayName)+"-"+t.componentId:t.componentId||h,S=o&&e.attrs?Array.prototype.concat(e.attrs,c).filter(Boolean):c,A=t.shouldForwardProp;o&&e.shouldForwardProp&&(A=t.shouldForwardProp?function(n,r,o){return e.shouldForwardProp(n,r,o)&&t.shouldForwardProp(n,r,o)}:e.shouldForwardProp);var C,I=new se(n,g,o?e.componentStyle:void 0),P=I.isStatic&&0===c.length,O=function(e,t){return function(e,t,n,r){var o=e.attrs,i=e.componentStyle,a=e.defaultProps,c=e.foldedComponentIds,d=e.shouldForwardProp,h=e.styledComponentId,p=e.target;"production"!==process.env.NODE_ENV&&React.useDebugValue(h);var f=function(e,t,n){void 0===e&&(e=E);var r=v({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,s,i=e;for(t in b$1(i)&&(i=i(r)),i)r[t]=o[t]="className"===t?(n=o[t],s=i[t],n&&s?n+" "+s:n||s):i[t];})),[r,o]}(Re(t,React.useContext(Ge),a)||E,t,o),y=f[0],g=f[1],S=function(e,t,n,r){var o=fe(),s=me(),i=t?e.generateAndInjectStyles(E,o,s):e.generateAndInjectStyles(n,o,s);return "production"!==process.env.NODE_ENV&&React.useDebugValue(i),"production"!==process.env.NODE_ENV&&!t&&r&&r(i),i}(i,r,y,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),w=n,_=g.$as||t.$as||g.as||t.as||p,N=ke(_),A=g!==t?v({},t,{},g):t,C={};for(var I in A)"$"!==I[0]&&"as"!==I&&("forwardedAs"===I?C.as=A[I]:(d?d(I,isPropValid,_):!N||isPropValid(I))&&(C[I]=A[I]));return t.style&&g.style!==t.style&&(C.style=v({},t.style,{},g.style)),C.className=Array.prototype.concat(c,h,S!==h?S:null,t.className,g.className).filter(Boolean).join(" "),C.ref=w,React.createElement(_,C)}(C,e,t,P)};return O.displayName=f,(C=React__default["default"].forwardRef(O)).attrs=S,C.componentStyle=I,C.displayName=f,C.shouldForwardProp=A,C.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):w,C.styledComponentId=g,C.target=o?e.target:e,C.withComponent=function(e){var r=t.componentId,o=function(e,t){if(null==e)return {};var n,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(t,["componentId"]),s=r&&r+"-"+(ke(e)?e:Te(_$1(e)));return qe(e,v({},o,{attrs:S,componentId:s}),n)},Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?Me({},e.defaultProps,t):t;}}),"production"!==process.env.NODE_ENV&&(Oe(f,g),C.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'+t+'"':"";console.warn("Over 200 classes were generated for component "+e+s+".\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={};}}}(f,g)),C.toString=function(){return "."+C.styledComponentId},i&&hoistNonReactStatics_cjs(C,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),C}var He=function(e){return function e(t,r,o){if(void 0===o&&(o=E),!reactIs.exports.isValidElementType(r))return j(1,String(r));var s=function(){return t(r,o,Ce.apply(void 0,arguments))};return s.withConfig=function(n){return e(t,r,v({},o,{},n))},s.attrs=function(n){return e(t,r,v({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},s}(qe,e)};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","textPath","tspan"].forEach((function(e){He[e]=He(e);}));var $e=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=re(e),Z.registerId(this.componentId+1);}var t=e.prototype;return t.createStyles=function(e,t,n,r){var o=r(Ne(this.rules,t,n,r).join(""),""),s=this.componentId+e;n.insertRules(s,s,o);},t.removeStyles=function(e,t){t.clearRules(this.componentId+e);},t.renderStyles=function(e,t,n,r){e>2&&Z.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r);},e}();function We(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var i=Ce.apply(void 0,[e].concat(n)),a="sc-global-"+xe(JSON.stringify(i)),u=new $e(i,a);function l(e){var t=fe(),n=me(),o=React.useContext(Ge),l=React.useRef(t.allocateGSInstance(a)).current;return "production"!==process.env.NODE_ENV&&React__default["default"].Children.count(e.children)&&console.warn("The global style component "+a+" was given child JSX. createGlobalStyle does not render children."),"production"!==process.env.NODE_ENV&&i.some((function(e){return "string"==typeof e&&-1!==e.indexOf("@import")}))&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),t.server&&h(l,e,t,o,n),React.useLayoutEffect((function(){if(!t.server)return h(l,e,t,o,n),function(){return u.removeStyles(l,t)}}),[l,e,t,o,n]),null}function h(e,t,n,r,o){if(u.isStatic)u.renderStyles(e,O,n,o);else {var s=v({},t,{theme:Re(t,r,l.defaultProps)});u.renderStyles(e,s,n,o);}}return "production"!==process.env.NODE_ENV&&Oe(a),React__default["default"].memo(l)}"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native"),"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window["__styled-components-init__"]=window["__styled-components-init__"]||0,1===window["__styled-components-init__"]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window["__styled-components-init__"]+=1);
 
 var _templateObject$D;
-var GlobalStyle = We(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral__default["default"](["\n* {\n  --size-small: ", ";\n  --size-medium: ", ";\n  --size-large: ", ";\n  --disabled-text: ", ";\n  --disabled-bg: ", ";\n\n  box-sizing: border-box;\n  font-family: ", ";\n  \n  & i {\n    font-family: \"Font Awesome 5 Free\";\n  }\n\n  & .lnc-doc {\n    & th {\n      background-color: ", " !important;\n        color: ", " !important;\n    }\n    & td {\n      background-color: ", " !important;\n        color: ", " !important;\n    }\n  }\n\n  & .sbdocs {\n    background-color: ", " !important;\n    color: ", " !important;\n  }\n}\n  body {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+var GlobalStyle = We(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral__default["default"](["\n* {\n  --size-small: ", ";\n  --size-medium: ", ";\n  --size-large: ", ";\n  --disabled-text: ", ";\n  --disabled-bg: ", ";\n\n  box-sizing: border-box;\n  font-family: ", ";\n  -webkit-tap-highlight-color: transparent;\n\n  & i {\n    font-family: \"Font Awesome 5 Free\";\n  }\n\n  & .lnc-doc {\n    & th {\n      background-color: ", " !important;\n        color: ", " !important;\n    }\n    & td {\n      background-color: ", " !important;\n        color: ", " !important;\n    }\n  }\n\n  & .sbdocs {\n    background-color: ", " !important;\n    color: ", " !important;\n  }\n}\n  body {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
   return getSizeValueWithUnits(props.theme, "small");
 }, function (props) {
   return getSizeValueWithUnits(props.theme, "medium");
@@ -75518,7 +75497,7 @@ var getHeight = function getHeight(size) {
   if (size == "medium") return "3.375rem";
   return "3.625rem";
 };
-var Tab = newStyled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default["default"](["\n  box-sizing: border-box;\n  ", ";\n  min-width: 5.25rem;\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  height: ", ";\n  ", ";\n  ", ";\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", ";\n  ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    ", ";\n  }\n"])), function (props) {
+var Tab = newStyled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default["default"](["\n  box-sizing: border-box;\n  ", ";\n  min-width: 5.25rem;\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  height: ", ";\n  ", ";\n  ", ";\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", ";\n  ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    ", ";\n  }\n  &:active {\n    background: ", ";\n  }\n"])), function (props) {
   return props.disabled && getDisabledStateCss(props.theme);
 }, function (props) {
   return props.fullWidth && "width: 100%";
@@ -75544,6 +75523,8 @@ var Tab = newStyled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplat
   return props.type == "regular" ? "transparent" : !props.disabled && getColorRgbaValue(props.theme, getTypeName(props.type), props.color, "hover", "background", "backgroundOpacity");
 }, function (props) {
   return getBottomLine(props.theme, props.type, props.active, props.disabled, props.color, "hover");
+}, function (props) {
+  return getColorRgbaValue(props.theme, getTypeName(props.type), props.color, "active", "background", "backgroundOpacity");
 });
 var getTypeName = function getTypeName(type) {
   if (type == "underline") {

package/package.json

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