@helpdice/ui 1.6.1 → 1.6.3

package/dist/auto-complete/auto-complete.d.ts

@@ -9,7 +9,8 @@ export type AutoCompleteOption = {
 export type AutoCompleteOptions = Array<typeof AutoCompleteItem | AutoCompleteOption | React.ReactElement<AutoCompleteItemProps>>;
 interface Props {
     options?: Array<AutoCompleteOption>;
-    type?: AutoCompleteTypes;
+    color?: AutoCompleteTypes;
+    type?: string;
     initialValue?: string;
     value?: string;
     onChange?: (value: string) => void;

package/dist/auto-complete/index.js

@@ -1322,7 +1322,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$5 = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
+var _excluded$5 = ["label", "labelRight", "color", "error", "type", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1332,11 +1332,11 @@ var simulateChangeEvent = function simulateChangeEvent(el, event) {
 var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     labelRight = _ref.labelRight,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
     error = _ref.error,
-    _ref$htmlType = _ref.htmlType,
-    htmlType = _ref$htmlType === void 0 ? 'text' : _ref$htmlType,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
     icon = _ref.icon,
     iconRight = _ref.iconRight,
     _ref$iconClickable = _ref.iconClickable,
@@ -1388,7 +1388,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
   }, [icon, iconRight]);
   var _useMemo = React.useMemo(function () {
-      return getColors(theme.palette, type);
+      return getColors(theme.palette, _color);
     }, [theme.palette, type]),
     color = _useMemo.color,
     borderColor = _useMemo.borderColor,
@@ -1449,7 +1449,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, icon && /*#__PURE__*/React.createElement(InputIcon, _extends({
     icon: icon
   }, iconProps)), /*#__PURE__*/React.createElement("input", _extends({
-    type: htmlType,
+    type: type,
     ref: inputRef,
     placeholder: placeholder,
     disabled: disabled,
@@ -1653,7 +1653,7 @@ var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       ref: inputRef,
       iconClickable: true,
       onIconClick: iconClickHandler,
-      htmlType: visible ? 'text' : 'password'
+      type: visible ? 'text' : 'password'
     });
   }, [props, iconClickHandler, visible, inputRef]);
   var icon = React.useMemo(function () {
@@ -12041,7 +12041,7 @@ const HelpCircle = ({ color, strokeWidth, set }) => {
 HelpCircle.displayName = "HelpCircle";
 createIcon(HelpCircle);
 
-var _excluded = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
+var _excluded = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "color", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
 var childrenToOptionsNode = function childrenToOptionsNode(options) {
   return options.map(function (item, index) {
     var key = "auto-complete-item-".concat(index);
@@ -12077,6 +12077,7 @@ var AutoCompleteComponent = /*#__PURE__*/React.forwardRef(function (_ref, userRe
     searching = _ref.searching,
     children = _ref.children,
     type = _ref.type,
+    color = _ref.color,
     value = _ref.value,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
@@ -12201,6 +12202,7 @@ var AutoCompleteComponent = /*#__PURE__*/React.forwardRef(function (_ref, userRe
     fullWidth: true,
     ref: inputRef,
     type: type,
+    color: color,
     onChange: onInputChange,
     onFocus: function onFocus() {
       return toggleFocusHandler(true);

package/dist/button/button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonTypes } from '../utils/prop-types';
 interface Props {
-    type?: ButtonTypes;
+    color?: ButtonTypes;
     ghost?: boolean;
     loading?: boolean;
     shadow?: boolean;
@@ -9,7 +9,7 @@ interface Props {
     auto?: boolean;
     effect?: boolean;
     disabled?: boolean;
-    htmlType?: React.ButtonHTMLAttributes<any>['type'];
+    type?: React.ButtonHTMLAttributes<any>['type'];
     icon?: React.ReactNode;
     iconRight?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;

package/dist/button/index.js

@@ -1387,7 +1387,7 @@ var addColorAlpha = function addColorAlpha(color, alpha) {
   return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
 };
 
-var getButtonGhostColors = function getButtonGhostColors(palette, type) {
+var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
   var colors = {
     secondary: {
       bg: palette.background,
@@ -1410,10 +1410,10 @@ var getButtonGhostColors = function getButtonGhostColors(palette, type) {
       color: palette.error
     }
   };
-  return colors[type] || null;
+  return colors[_color] || null;
 };
 var getButtonColors = function getButtonColors(palette, props) {
-  var type = props.type,
+  var color = props.color,
     disabled = props.disabled,
     ghost = props.ghost;
   var colors = {
@@ -1461,12 +1461,12 @@ var getButtonColors = function getButtonColors(palette, props) {
    *   Color['success'] === Color['success-light']
    *   Color['warning'] === Color['warning-light']
    */
-  var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
+  var withoutLightType = color === null || color === void 0 ? void 0 : color.replace('-light', '');
   var defaultColor = colors["default"];
   if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
   return colors[withoutLightType] || defaultColor;
 };
-var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
+var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _color) {
   var colors = {
     secondary: {
       bg: palette.foreground,
@@ -1489,11 +1489,11 @@ var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type
       color: 'white'
     }
   };
-  var withoutLightType = type.replace('-light', '');
+  var withoutLightType = _color.replace('-light', '');
   return colors[withoutLightType] || null;
 };
 var getButtonHoverColors = function getButtonHoverColors(palette, props) {
-  var type = props.type,
+  var color = props.color,
     disabled = props.disabled,
     loading = props.loading,
     shadow = props.shadow,
@@ -1548,7 +1548,7 @@ var getButtonHoverColors = function getButtonHoverColors(palette, props) {
     color: 'transparent'
   });
   if (shadow) return defaultColor;
-  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors["default"];
+  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, color) : colors[color]) || colors["default"];
   return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
     color: hoverColor.color || hoverColor.border
   });
@@ -1574,7 +1574,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+var _excluded = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
   var _useScale = useScale(),
@@ -1601,7 +1601,7 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
   var children = filteredProps.children,
     _filteredProps$disabl = filteredProps.disabled,
     disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl;
-    filteredProps.type;
+    filteredProps.color;
     var _filteredProps$loadin = filteredProps.loading,
     loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
     _filteredProps$shadow = filteredProps.shadow,
@@ -1616,8 +1616,8 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
     _filteredProps$auto = filteredProps.auto,
     auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
     icon = filteredProps.icon,
-    _filteredProps$htmlTy = filteredProps.htmlType,
-    htmlType = _filteredProps$htmlTy === void 0 ? 'button' : _filteredProps$htmlTy,
+    _filteredProps$type = filteredProps.type,
+    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
     iconRight = filteredProps.iconRight,
     _filteredProps$classN = filteredProps.className,
     className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
@@ -1671,7 +1671,7 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
     paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
   return /*#__PURE__*/React$1.createElement("button", _extends({
     ref: buttonRef,
-    type: htmlType,
+    type: type,
     disabled: disabled,
     onClick: clickHandler
   }, props, {

package/dist/button/styles.d.ts

@@ -6,9 +6,9 @@ export interface ButtonColorGroup {
     border: string;
     color: string;
 }
-export declare const getButtonGhostColors: (palette: HUIThemesPalette, type: ButtonTypes) => ButtonColorGroup | null;
+export declare const getButtonGhostColors: (palette: HUIThemesPalette, _color: ButtonTypes) => ButtonColorGroup | null;
 export declare const getButtonColors: (palette: HUIThemesPalette, props: ButtonProps) => ButtonColorGroup;
-export declare const getButtonGhostHoverColors: (palette: HUIThemesPalette, type: ButtonTypes) => ButtonColorGroup | null;
+export declare const getButtonGhostHoverColors: (palette: HUIThemesPalette, _color: ButtonTypes) => ButtonColorGroup | null;
 export declare const getButtonHoverColors: (palette: HUIThemesPalette, props: ButtonProps) => ButtonColorGroup;
 export interface ButtonCursorGroup {
     cursor: string;

package/dist/checkbox/checkbox.d.ts

@@ -17,6 +17,7 @@ interface Props {
     initialChecked?: boolean;
     onChange?: (e: CheckboxEvent) => void;
     className?: string;
+    block?: boolean;
     value?: string;
 }
 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;

package/dist/checkbox/index.js

@@ -1275,7 +1275,7 @@ var useClasses = function useClasses() {
   return classes.trim();
 };
 
-var _excluded$1 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
+var _excluded$1 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value", "block"];
 var CheckboxComponent = function CheckboxComponent(_ref) {
   var checked = _ref.checked,
     _ref$initialChecked = _ref.initialChecked,
@@ -1290,6 +1290,8 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     type = _ref$type === void 0 ? 'default' : _ref$type,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var theme = useTheme();
   var _useScale = useScale(),
@@ -1341,7 +1343,13 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     setSelfChecked(checked);
   }, [checked]);
   return /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
+    style: block ? {
+      backgroundColor: '#efefef',
+      padding: '20px 15px',
+      height: '2.5rem',
+      width: '100%'
+    } : {},
+    className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     fill: fill,
     bg: bg,
@@ -1353,13 +1361,13 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     checked: selfChecked,
     onChange: changeHandle
   }, props, {
-    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
+    className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4126727675",
-    dynamic: [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
-  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
+    id: "204928356",
+    dynamic: [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
+  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1.1), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
 };
 CheckboxComponent.displayName = 'Checkbox';
 var Checkbox = withScale(CheckboxComponent);

package/dist/index.js

@@ -1814,7 +1814,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$1o = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
+var _excluded$1o = ["label", "labelRight", "color", "error", "type", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1824,11 +1824,11 @@ var simulateChangeEvent = function simulateChangeEvent(el, event) {
 var InputComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     labelRight = _ref.labelRight,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
     error = _ref.error,
-    _ref$htmlType = _ref.htmlType,
-    htmlType = _ref$htmlType === void 0 ? 'text' : _ref$htmlType,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
     icon = _ref.icon,
     iconRight = _ref.iconRight,
     _ref$iconClickable = _ref.iconClickable,
@@ -1880,7 +1880,7 @@ var InputComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
     return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
   }, [icon, iconRight]);
   var _useMemo = React$1.useMemo(function () {
-      return getColors$8(theme.palette, type);
+      return getColors$8(theme.palette, _color);
     }, [theme.palette, type]),
     color = _useMemo.color,
     borderColor = _useMemo.borderColor,
@@ -1941,7 +1941,7 @@ var InputComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
   }, icon && /*#__PURE__*/React$1.createElement(InputIcon, _extends({
     icon: icon
   }, iconProps)), /*#__PURE__*/React$1.createElement("input", _extends({
-    type: htmlType,
+    type: type,
     ref: inputRef,
     placeholder: placeholder,
     disabled: disabled,
@@ -2151,7 +2151,7 @@ var InputPasswordComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, ref
       ref: inputRef,
       iconClickable: true,
       onIconClick: iconClickHandler,
-      htmlType: visible ? 'text' : 'password'
+      type: visible ? 'text' : 'password'
     });
   }, [props, iconClickHandler, visible, inputRef]);
   var icon = React$1.useMemo(function () {
@@ -12566,7 +12566,7 @@ const HelpCircle = ({ color, strokeWidth, set }) => {
 HelpCircle.displayName = "HelpCircle";
 createIcon(HelpCircle);
 
-var _excluded$1j = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
+var _excluded$1j = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "color", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
 var childrenToOptionsNode = function childrenToOptionsNode(options) {
   return options.map(function (item, index) {
     var key = "auto-complete-item-".concat(index);
@@ -12602,6 +12602,7 @@ var AutoCompleteComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, user
     searching = _ref.searching,
     children = _ref.children,
     type = _ref.type,
+    color = _ref.color,
     value = _ref.value,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
@@ -12726,6 +12727,7 @@ var AutoCompleteComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, user
     fullWidth: true,
     ref: inputRef,
     type: type,
+    color: color,
     onChange: onInputChange,
     onFocus: function onFocus() {
       return toggleFocusHandler(true);
@@ -13259,7 +13261,7 @@ var useButtonGroupContext = function useButtonGroupContext() {
   return React$1.useContext(ButtonGroupContext);
 };
 
-var getButtonGhostColors = function getButtonGhostColors(palette, type) {
+var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
   var colors = {
     secondary: {
       bg: palette.background,
@@ -13282,10 +13284,10 @@ var getButtonGhostColors = function getButtonGhostColors(palette, type) {
       color: palette.error
     }
   };
-  return colors[type] || null;
+  return colors[_color] || null;
 };
 var getButtonColors = function getButtonColors(palette, props) {
-  var type = props.type,
+  var color = props.color,
     disabled = props.disabled,
     ghost = props.ghost;
   var colors = {
@@ -13333,12 +13335,12 @@ var getButtonColors = function getButtonColors(palette, props) {
    *   Color['success'] === Color['success-light']
    *   Color['warning'] === Color['warning-light']
    */
-  var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
+  var withoutLightType = color === null || color === void 0 ? void 0 : color.replace('-light', '');
   var defaultColor = colors["default"];
   if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
   return colors[withoutLightType] || defaultColor;
 };
-var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
+var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _color) {
   var colors = {
     secondary: {
       bg: palette.foreground,
@@ -13361,11 +13363,11 @@ var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type
       color: 'white'
     }
   };
-  var withoutLightType = type.replace('-light', '');
+  var withoutLightType = _color.replace('-light', '');
   return colors[withoutLightType] || null;
 };
 var getButtonHoverColors = function getButtonHoverColors(palette, props) {
-  var type = props.type,
+  var color = props.color,
     disabled = props.disabled,
     loading = props.loading,
     shadow = props.shadow,
@@ -13420,7 +13422,7 @@ var getButtonHoverColors = function getButtonHoverColors(palette, props) {
     color: 'transparent'
   });
   if (shadow) return defaultColor;
-  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors["default"];
+  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, color) : colors[color]) || colors["default"];
   return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
     color: hoverColor.color || hoverColor.border
   });
@@ -13446,7 +13448,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1d = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+var _excluded$1d = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
   var _useScale = useScale(),
@@ -13473,7 +13475,7 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
   var children = filteredProps.children,
     _filteredProps$disabl = filteredProps.disabled,
     disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl;
-    filteredProps.type;
+    filteredProps.color;
     var _filteredProps$loadin = filteredProps.loading,
     loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
     _filteredProps$shadow = filteredProps.shadow,
@@ -13488,8 +13490,8 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
     _filteredProps$auto = filteredProps.auto,
     auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
     icon = filteredProps.icon,
-    _filteredProps$htmlTy = filteredProps.htmlType,
-    htmlType = _filteredProps$htmlTy === void 0 ? 'button' : _filteredProps$htmlTy,
+    _filteredProps$type = filteredProps.type,
+    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
     iconRight = filteredProps.iconRight,
     _filteredProps$classN = filteredProps.className,
     className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
@@ -13543,7 +13545,7 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
     paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
   return /*#__PURE__*/React$1.createElement("button", _extends({
     ref: buttonRef,
-    type: htmlType,
+    type: type,
     disabled: disabled,
     onClick: clickHandler
   }, props, {
@@ -14442,7 +14444,7 @@ var getColors$7 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$12 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
+var _excluded$12 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value", "block"];
 var CheckboxComponent = function CheckboxComponent(_ref) {
   var checked = _ref.checked,
     _ref$initialChecked = _ref.initialChecked,
@@ -14457,6 +14459,8 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     type = _ref$type === void 0 ? 'default' : _ref$type,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
     props = _objectWithoutProperties(_ref, _excluded$12);
   var theme = useTheme();
   var _useScale = useScale(),
@@ -14508,7 +14512,13 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     setSelfChecked(checked);
   }, [checked]);
   return /*#__PURE__*/React$1.createElement("label", {
-    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
+    style: block ? {
+      backgroundColor: '#efefef',
+      padding: '20px 15px',
+      height: '2.5rem',
+      width: '100%'
+    } : {},
+    className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
   }, /*#__PURE__*/React$1.createElement(CheckboxIcon, {
     fill: fill,
     bg: bg,
@@ -14520,13 +14530,13 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     checked: selfChecked,
     onChange: changeHandle
   }, props, {
-    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React$1.createElement("span", {
-    className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
+    className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
   }, children), /*#__PURE__*/React$1.createElement(_JSXStyle, {
-    id: "4126727675",
-    dynamic: [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
-  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
+    id: "204928356",
+    dynamic: [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
+  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1.1), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
 };
 CheckboxComponent.displayName = 'Checkbox';
 var Checkbox = withScale(CheckboxComponent);
@@ -21843,7 +21853,7 @@ var makeToastActions = function makeToastActions(actions, cancelHandle) {
       auto: true,
       scale: 1 / 3,
       font: "13px",
-      type: action.passive ? 'default' : 'secondary',
+      color: action.passive ? 'default' : 'secondary',
       key: "action-".concat(index),
       onClick: function onClick(event) {
         return handler(event, action.handler);
@@ -26397,7 +26407,7 @@ var TableHead = function TableHead(props) {
       }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-date-${filterName}`}
       , {
-        htmlType: "date"
+        type: "date"
         // name={filterName}
         ,
         value: filters[filterName],
@@ -26407,7 +26417,7 @@ var TableHead = function TableHead(props) {
       }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-search-${filterName}`}
       , {
-        htmlType: "text",
+        type: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
         // name={filterName}
@@ -44463,7 +44473,7 @@ function DataTable(_ref) {
   //                     <Input
   //                         // id={`filter-date-${filterName}`}
   //                         // key={filterName}
-  //                         htmlType="date"
+  //                         type="date"
   //                         name={filterName}
   //                         value={filterValues[filterName]}
   //                         onChange={(e) => handleFilterChange(filterName, e.target.value)}
@@ -44473,7 +44483,7 @@ function DataTable(_ref) {
   //                     <Input
   //                         // id={`filter-search-${filterName}`}
   //                         // key={filterName}
-  //                         htmlType="text"
+  //                         type="text"
   //                         autoComplete="off"
   //                         // ref={filterRefs.current[filterName]} // Dynamically set ref}
   //                         name={filterName}
@@ -44536,7 +44546,7 @@ function DataTable(_ref) {
       fontSize: 'larger'
     }
   }, children && /*#__PURE__*/React$1.createElement(Button, {
-    htmlType: "button",
+    type: "button",
     auto: true,
     scale: 2 / 3,
     px: 0.6,
@@ -44566,7 +44576,7 @@ function DataTable(_ref) {
     },
     iconRight: /*#__PURE__*/React$1.createElement(Edit, null),
     auto: true,
-    htmlType: "button",
+    type: "button",
     scale: 2 / 3,
     px: 0.6
   })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React$1.createElement(Tooltip, {
@@ -44583,7 +44593,7 @@ function DataTable(_ref) {
     auto: true,
     scale: 2 / 3,
     px: 0.6,
-    htmlType: "button",
+    type: "button",
     iconRight: /*#__PURE__*/React$1.createElement(Delete$1, null)
   })) : null, onRefresh ? /*#__PURE__*/React$1.createElement(Tooltip, {
     text: "Refresh",
@@ -44593,7 +44603,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React$1.createElement(Button, {
-    htmlType: "button",
+    type: "button",
     onClick: function onClick() {
       return onRefresh();
     },
@@ -44609,7 +44619,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React$1.createElement(Button, {
-    htmlType: "button",
+    type: "button",
     onClick: handleShowFilter,
     auto: true,
     scale: 2 / 3,
@@ -44627,7 +44637,7 @@ function DataTable(_ref) {
     placement: "bottomEnd",
     child: content
   }, /*#__PURE__*/React$1.createElement(Button, {
-    htmlType: "button",
+    type: "button",
     onClick: function onClick() {},
     auto: true,
     scale: 2 / 3,