@helpdice/ui 2.6.1-beta.5 → 2.6.1

package/dist/form/Form.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type FormikFormProps = Pick<React.FormHTMLAttributes<HTMLFormElement>, Exclude<keyof React.FormHTMLAttributes<HTMLFormElement>, 'onReset' | 'onSubmit'>>;
+export declare const Form: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>;

package/dist/form/index.d.ts

@@ -1,5 +1,6 @@
 import connect from './connect';
 import { FormWrapper, useFormik, yupToFormErrors, validateYupSchema, prepareDataForValidation } from './FormWrapper';
+export * from './Form';
 import withFormik from './withFormik';
 import { isEmptyArray, isEmptyChildren, isInputEvent, isInteger, isObject, isPromise, isFunction, isNaN, isString, getActiveElement, getIn, setIn, setNestedObjectValues } from './utils';
 import ErrorMessage from './ErrorMessage';

package/dist/form/index.js

@@ -5025,7 +5025,7 @@ function setNestedObjectValues(object, value) {
 
 var __DEV__ = true;
 
-var _excluded$2 = ["validateOnChange", "validateOnBlur", "validateOnMount", "isInitialValid", "enableReinitialize", "onSubmit"];
+var _excluded$3 = ["validateOnChange", "validateOnBlur", "validateOnMount", "isInitialValid", "enableReinitialize", "onSubmit"];
 // State reducer
 function formikReducer(state, msg) {
   switch (msg.type) {
@@ -5109,7 +5109,7 @@ function useFormik(_ref) {
     _ref$enableReinitiali = _ref.enableReinitialize,
     enableReinitialize = _ref$enableReinitiali === void 0 ? false : _ref$enableReinitiali,
     onSubmit = _ref.onSubmit,
-    rest = _objectWithoutProperties(_ref, _excluded$2);
+    rest = _objectWithoutProperties(_ref, _excluded$3);
   var props = _objectSpread2({
     validateOnChange: validateOnChange,
     validateOnBlur: validateOnBlur,
@@ -5982,6 +5982,26 @@ function useEventCallback(fn) {
   }, []);
 }
 
+var _excluded$2 = ["action"];
+// @todo tests
+var Form = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  // iOS needs an "action" attribute for nice input: https://stackoverflow.com/a/39485162/406725
+  // We default the action to "#" in case the preventDefault fails (just updates the URL hash)
+  var action = props.action,
+    rest = _objectWithoutProperties(props, _excluded$2);
+  var _action = action !== null && action !== void 0 ? action : '#';
+  var _useFormikContext = useFormikContext(),
+    handleReset = _useFormikContext.handleReset,
+    handleSubmit = _useFormikContext.handleSubmit;
+  return /*#__PURE__*/jsxRuntime.jsx("form", _objectSpread2({
+    onSubmit: handleSubmit,
+    ref: ref,
+    onReset: handleReset,
+    action: _action
+  }, rest));
+});
+Form.displayName = 'Form';
+
 var _excluded$1 = ["mapPropsToValues"],
   _excluded2 = ["children"];
 /**
@@ -6094,6 +6114,7 @@ var ErrorMessageImpl = /*#__PURE__*/function (_React$Component) {
 var ErrorMessage = connect(ErrorMessageImpl);
 
 exports.ErrorMessage = ErrorMessage;
+exports.Form = Form;
 exports.FormWrapper = FormWrapper;
 exports.FormikConsumer = FormikConsumer;
 exports.FormikContext = FormikContext;

package/dist/index.js

@@ -7,7 +7,6 @@ var ArrowRight = require('@helpdice/icons/curved/ArrowRight');
 var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
 var reactDom$1 = require('@floating-ui/react-dom');
-var pro = require('@helpdice/pro');
 var ChevronLeft = require('@helpdice/icons/curved/ChevronLeft');
 var ChevronRight = require('@helpdice/icons/curved/ChevronRight');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
@@ -1173,7 +1172,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$1o = ["children"];
+var _excluded$1p = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -1183,7 +1182,7 @@ var withScale = function withScale(Render) {
   var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1o);
+      props = _objectWithoutProperties(_ref, _excluded$1p);
     var _useTheme = theme.useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1268,7 +1267,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$1n = ["children", "tag", "className", "color"];
+var _excluded$1o = ["children", "tag", "className", "color"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
     "default": 'inherit',
@@ -1286,7 +1285,7 @@ var TextChild = function TextChild(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$1n);
+    props = _objectWithoutProperties(_ref, _excluded$1o);
   var Component = tag;
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -1334,7 +1333,7 @@ var TextChild = function TextChild(_ref) {
 };
 TextChild.displayName = 'TextChild';
 
-var _excluded$1m = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className", "display", "alignItems", "justify"];
+var _excluded$1n = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className", "display", "alignItems", "justify"];
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -1381,7 +1380,7 @@ var TextComponent = function TextComponent(_ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     alignItems = _ref.alignItems,
     justify = _ref.justify,
-    props = _objectWithoutProperties(_ref, _excluded$1m);
+    props = _objectWithoutProperties(_ref, _excluded$1n);
   var elements = {
     h1: h1,
     h2: h2,
@@ -1576,7 +1575,7 @@ var getColors$7 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$1l = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth", "required"];
+var _excluded$1m = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth", "required"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1623,7 +1622,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     required = _ref.required,
-    props = _objectWithoutProperties(_ref, _excluded$1l);
+    props = _objectWithoutProperties(_ref, _excluded$1m);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1783,7 +1782,7 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$1k = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
+var _excluded$1l = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -1807,7 +1806,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     required = _ref.required,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$1k);
+    props = _objectWithoutProperties(_ref, _excluded$1l);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1931,11 +1930,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$1j = ["hideToggle", "children"];
+var _excluded$1k = ["hideToggle", "children"];
 var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1j);
+    props = _objectWithoutProperties(_ref, _excluded$1k);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -3543,7 +3542,7 @@ var repositionCursor = function repositionCursor(_ref) {
   };
 };
 
-var _excluded$1i = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
+var _excluded$1j = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
 var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$allowDecimals = _ref.allowDecimals,
     allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
@@ -3585,7 +3584,7 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$formatValueOnBlu = _ref.formatValueOnBlur,
     formatValueOnBlur = _ref$formatValueOnBlu === void 0 ? true : _ref$formatValueOnBlu,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1i);
+    props = _objectWithoutProperties(_ref, _excluded$1j);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var theme$1 = theme.useTheme();
@@ -3941,7 +3940,7 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var CurrencyInput = withScale(InputCurrency);
 
-var _excluded$1h = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var _excluded$1i = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
 var getItemLayout = function getItemLayout(val) {
   var display = val === 0 ? 'display: none;' : 'display: inherit;';
   if (typeof val === 'number') {
@@ -3979,7 +3978,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1h);
+    props = _objectWithoutProperties(_ref, _excluded$1i);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -4021,12 +4020,12 @@ var GridBasicItem = function GridBasicItem(_ref) {
 };
 GridBasicItem.displayName = 'GridBasicItem';
 
-var _excluded$1g = ["children", "className"];
+var _excluded$1h = ["children", "className"];
 var GridComponent = function GridComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1g);
+    props = _objectWithoutProperties(_ref, _excluded$1h);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _styles$className = {
@@ -4049,7 +4048,7 @@ var GridComponent = function GridComponent(_ref) {
 GridComponent.displayName = 'Grid';
 var Grid = withScale(GridComponent);
 
-var _excluded$1f = ["gap", "wrap", "children", "className"];
+var _excluded$1g = ["gap", "wrap", "children", "className"];
 var GridContainerComponent = function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 0 : _ref$gap,
@@ -4058,7 +4057,7 @@ var GridContainerComponent = function GridContainerComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1f);
+    props = _objectWithoutProperties(_ref, _excluded$1g);
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -4349,7 +4348,7 @@ var AutoCompleteEmpty = function AutoCompleteEmpty(_ref) {
 };
 AutoCompleteEmpty.displayName = 'AutoCompleteEmpty';
 
-var _excluded$1e = ["children", "type", "color", "className", "spaceRatio"];
+var _excluded$1f = ["children", "type", "color", "className", "spaceRatio"];
 var getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
     "default": palette.accents_6,
@@ -4369,7 +4368,7 @@ var LoadingComponent = function LoadingComponent(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$spaceRatio = _ref.spaceRatio,
     spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$1e);
+    props = _objectWithoutProperties(_ref, _excluded$1f);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -4401,7 +4400,7 @@ var LoadingComponent = function LoadingComponent(_ref) {
 LoadingComponent.displayName = 'Loading';
 var Loading = withScale(LoadingComponent);
 
-var _excluded$1d = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "color", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
+var _excluded$1e = ["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);
@@ -4450,7 +4449,7 @@ var AutoCompleteComponent = /*#__PURE__*/React.forwardRef(function (_ref, userRe
     _ref$disableFreeSolo = _ref.disableFreeSolo,
     disableFreeSolo = _ref$disableFreeSolo === void 0 ? false : _ref$disableFreeSolo,
     getPopupContainer = _ref.getPopupContainer,
-    props = _objectWithoutProperties(_ref, _excluded$1d);
+    props = _objectWithoutProperties(_ref, _excluded$1e);
   var resetTimer = React.useRef(0); // DEFAULT Value 0
   var _useScale = useScale(),
     SCALES = _useScale.SCALES,
@@ -4603,7 +4602,7 @@ AutoComplete.Option = AutoCompleteItemComponent;
 AutoComplete.Searching = AutoCompleteSearch;
 AutoComplete.Empty = AutoCompleteEmpty;
 
-var _excluded$1c = ["src", "errorSrc", "stacked", "text", "isSquare", "className", "children"];
+var _excluded$1d = ["src", "errorSrc", "stacked", "text", "isSquare", "className", "children"];
 var safeText = function safeText(text) {
   if (text.length <= 4) return text;
   return text.slice(0, 3);
@@ -4622,7 +4621,7 @@ var AvatarComponent = function AvatarComponent(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1c);
+    props = _objectWithoutProperties(_ref, _excluded$1d);
   var theme$1 = theme.useTheme();
   var fallbackSrc = theme$1.type === 'dark' ? errorImgDark : errorImgLight;
   var _useScale = useScale(),
@@ -4683,7 +4682,7 @@ var AvatarGroup = withScale(AvatarGroupComponent);
 
 Avatar.Group = AvatarGroup;
 
-var _excluded$1b = ["color", "className", "children", "dot"];
+var _excluded$1c = ["color", "className", "children", "dot"];
 var getBgColor = function getBgColor(type, palette) {
   var colors = {
     "default": palette.foreground,
@@ -4702,7 +4701,7 @@ var BadgeComponent = function BadgeComponent(_ref) {
     children = _ref.children,
     _ref$dot = _ref.dot,
     dot = _ref$dot === void 0 ? false : _ref$dot,
-    props = _objectWithoutProperties(_ref, _excluded$1b);
+    props = _objectWithoutProperties(_ref, _excluded$1c);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -4916,7 +4915,7 @@ var LinkIconComponent = function LinkIconComponent() {
 LinkIconComponent.displayName = 'LinkIcon';
 var LinkIcon = /*#__PURE__*/React.memo(LinkIconComponent);
 
-var _excluded$1a = ["href", "showColor", "underline", "children", "className", "block", "arrow", "icon"];
+var _excluded$1b = ["href", "showColor", "underline", "children", "className", "block", "arrow", "icon"];
 var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
     href = _ref$href === void 0 ? '' : _ref$href,
@@ -4932,7 +4931,7 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$arrow = _ref.arrow,
     arrow = _ref$arrow === void 0 ? false : _ref$arrow,
     icon = _ref.icon,
-    props = _objectWithoutProperties(_ref, _excluded$1a);
+    props = _objectWithoutProperties(_ref, _excluded$1b);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -4960,7 +4959,7 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 LinkComponent.displayName = 'Link';
 var Link = withScale(LinkComponent);
 
-var _excluded$19 = ["href", "nextLink", "onClick", "children", "className"];
+var _excluded$1a = ["href", "nextLink", "onClick", "children", "className"];
 var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var href = _ref.href,
     _ref$nextLink = _ref.nextLink,
@@ -4969,7 +4968,7 @@ var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$19);
+    props = _objectWithoutProperties(_ref, _excluded$1a);
   var isLink = React.useMemo(function () {
     return href !== undefined || nextLink;
   }, [href, nextLink]);
@@ -5076,7 +5075,7 @@ var ButtonLoading = function ButtonLoading(_ref) {
 };
 ButtonLoading.displayName = 'ButtonLoading';
 
-var _excluded$18 = ["isRight", "isSingle", "children", "className"];
+var _excluded$19 = ["isRight", "isSingle", "children", "className"];
 var ButtonIcon = function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
     isRight = _ref$isRight === void 0 ? false : _ref$isRight,
@@ -5084,7 +5083,7 @@ var ButtonIcon = function ButtonIcon(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$18);
+    props = _objectWithoutProperties(_ref, _excluded$19);
   var classes = theme.useClasses('icon', {
     right: isRight,
     single: isSingle
@@ -5351,7 +5350,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$17 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "relative", "replace", "a", "to", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var _excluded$18 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "relative", "replace", "a", "to", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme$1 = theme.useTheme();
   // const navigate = useNavigate();
@@ -5405,7 +5404,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     _filteredProps$classN = filteredProps.className,
     className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
     filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$17);
+    var props = _objectWithoutProperties(filteredProps, _excluded$18);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   var _useMemo = React.useMemo(function () {
@@ -5668,7 +5667,7 @@ var useButtonDropdown = function useButtonDropdown() {
   return React.useContext(ButtonDropdownContext);
 };
 
-var _excluded$16 = ["children", "onClick", "className", "main", "icon", "type"];
+var _excluded$17 = ["children", "onClick", "className", "main", "icon", "type"];
 var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
   var children = _ref.children,
     _ref$onClick = _ref.onClick,
@@ -5679,7 +5678,7 @@ var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
     main = _ref$main === void 0 ? false : _ref$main,
     icon = _ref.icon,
     selfType = _ref.type,
-    props = _objectWithoutProperties(_ref, _excluded$16);
+    props = _objectWithoutProperties(_ref, _excluded$17);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -5721,7 +5720,7 @@ var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
 };
 ButtonDropdownItem.displayName = 'ButtonDropdownItem';
 
-var _excluded$15 = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
+var _excluded$16 = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
 var stopPropagation$1 = function stopPropagation(event) {
   event.stopPropagation();
   event.nativeEvent.stopImmediatePropagation();
@@ -5739,7 +5738,7 @@ var ButtonDropdownComponent = function ButtonDropdownComponent(_ref) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     icon = _ref.icon,
-    props = _objectWithoutProperties(_ref, _excluded$15);
+    props = _objectWithoutProperties(_ref, _excluded$16);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var ref = React.useRef(null);
@@ -5821,7 +5820,7 @@ var ButtonDropdown = withScale(ButtonDropdownComponent);
 /* "use client" */
 ButtonDropdown.Item = ButtonDropdownItem;
 
-var _excluded$14 = ["disabled", "type", "ghost", "vertical", "children", "className"];
+var _excluded$15 = ["disabled", "type", "ghost", "vertical", "children", "className"];
 var getGroupBorderColors = function getGroupBorderColors(palette, props) {
   var _props$ghost = props.ghost,
     ghost = _props$ghost === void 0 ? false : _props$ghost,
@@ -5848,7 +5847,7 @@ var ButtonGroupComponent = function ButtonGroupComponent(groupProps) {
     vertical = groupProps.vertical,
     children = groupProps.children,
     className = groupProps.className,
-    props = _objectWithoutProperties(groupProps, _excluded$14);
+    props = _objectWithoutProperties(groupProps, _excluded$15);
   var initialValue = React.useMemo(function () {
     return {
       disabled: disabled,
@@ -5908,7 +5907,7 @@ var useProportions = function useProportions(value, max) {
   }, [value, max, maxFixed]);
 };
 
-var _excluded$13 = ["value", "limit", "color", "className"];
+var _excluded$14 = ["value", "limit", "color", "className"];
 var getColor$3 = function getColor(val, palette) {
   if (val < 33) return palette.cyan;
   if (val < 66) return palette.warning;
@@ -5922,7 +5921,7 @@ var CapacityComponent = function CapacityComponent(_ref) {
     userColor = _ref.color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$13);
+    props = _objectWithoutProperties(_ref, _excluded$14);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6001,14 +6000,14 @@ var getStyles$1 = function getStyles(type, palette, isShadow) {
   });
 };
 
-var _excluded$12 = ["children", "className", "disableAutoMargin"];
+var _excluded$13 = ["children", "className", "disableAutoMargin"];
 var CardFooterComponent = function CardFooterComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$disableAutoMargi = _ref.disableAutoMargin,
     disableAutoMargin = _ref$disableAutoMargi === void 0 ? false : _ref$disableAutoMargi,
-    props = _objectWithoutProperties(_ref, _excluded$12);
+    props = _objectWithoutProperties(_ref, _excluded$13);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6027,12 +6026,12 @@ var CardFooterComponent = function CardFooterComponent(_ref) {
 CardFooterComponent.displayName = 'CardFooter';
 var CardFooter = withScale(CardFooterComponent);
 
-var _excluded$11 = ["className", "children"];
+var _excluded$12 = ["className", "children"];
 var CardContentComponent = function CardContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$11);
+    props = _objectWithoutProperties(_ref, _excluded$12);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -6047,11 +6046,11 @@ var CardContentComponent = function CardContentComponent(_ref) {
 CardContentComponent.displayName = 'CardContent';
 var CardContent = withScale(CardContentComponent);
 
-var _excluded$10 = ["opacity"];
+var _excluded$11 = ["opacity"];
 var ImageSkeleton = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$opacity = _ref.opacity,
     opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
-    props = _objectWithoutProperties(_ref, _excluded$10);
+    props = _objectWithoutProperties(_ref, _excluded$11);
   var theme$1 = theme.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
     className: _JSXStyle.dynamic([["2946022605", [theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.palette.accents_2, theme$1.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton"),
@@ -6079,7 +6078,7 @@ var getHostFromUrl = function getHostFromUrl(url) {
   }
 };
 
-var _excluded$$ = ["src", "disableSkeleton", "className", "maxDelay"];
+var _excluded$10 = ["src", "disableSkeleton", "className", "maxDelay"];
 var ImageComponent = function ImageComponent(_ref) {
   var src = _ref.src,
     _ref$disableSkeleton = _ref.disableSkeleton,
@@ -6088,7 +6087,7 @@ var ImageComponent = function ImageComponent(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$maxDelay = _ref.maxDelay,
     maxDelay = _ref$maxDelay === void 0 ? 3000 : _ref$maxDelay,
-    props = _objectWithoutProperties(_ref, _excluded$$);
+    props = _objectWithoutProperties(_ref, _excluded$10);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES,
     getScaleProps = _useScale.getScaleProps;
@@ -6188,7 +6187,7 @@ var getBrowserColors = function getBrowserColors(invert, palette) {
   };
 };
 
-var _excluded$_ = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
+var _excluded$$ = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
 var getTitle = function getTitle(title, colors) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: _JSXStyle.dynamic([["524099755", [colors.titleColor]]]) + " " + "title",
@@ -6230,7 +6229,7 @@ var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     anchorProps = _ref$anchorProps === void 0 ? {} : _ref$anchorProps,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$_);
+    props = _objectWithoutProperties(_ref, _excluded$$);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6270,7 +6269,7 @@ var ImageBrowser = withScale(ImageBrowserComponent);
 
 Image.Browser = ImageBrowser;
 
-var _excluded$Z = ["children", "hoverable", "className", "shadow", "type"];
+var _excluded$_ = ["children", "hoverable", "className", "shadow", "type"];
 var CardComponent = function CardComponent(_ref) {
   var children = _ref.children,
     _ref$hoverable = _ref.hoverable,
@@ -6281,7 +6280,7 @@ var CardComponent = function CardComponent(_ref) {
     shadow = _ref$shadow === void 0 ? false : _ref$shadow,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'default' : _ref$type,
-    props = _objectWithoutProperties(_ref, _excluded$Z);
+    props = _objectWithoutProperties(_ref, _excluded$_);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6425,7 +6424,7 @@ var getColors$6 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$Y = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value", "block"];
+var _excluded$Z = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value", "block"];
 var CheckboxComponent = function CheckboxComponent(_ref) {
   var checked = _ref.checked,
     _ref$initialChecked = _ref.initialChecked,
@@ -6442,7 +6441,7 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     value = _ref$value === void 0 ? '' : _ref$value,
     _ref$block = _ref.block,
     block = _ref$block === void 0 ? false : _ref$block,
-    props = _objectWithoutProperties(_ref, _excluded$Y);
+    props = _objectWithoutProperties(_ref, _excluded$Z);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6525,7 +6524,7 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
 CheckboxComponent.displayName = 'Checkbox';
 var Checkbox = withScale(CheckboxComponent);
 
-var _excluded$X = ["disabled", "onChange", "value", "children", "className"];
+var _excluded$Y = ["disabled", "onChange", "value", "children", "className"];
 var CheckboxGroupComponent = function CheckboxGroupComponent(_ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -6534,7 +6533,7 @@ var CheckboxGroupComponent = function CheckboxGroupComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$X);
+    props = _objectWithoutProperties(_ref, _excluded$Y);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _useState = React.useState([]),
@@ -6584,7 +6583,7 @@ var CheckboxGroup = withScale(CheckboxGroupComponent);
 
 Checkbox.Group = CheckboxGroup;
 
-var _excluded$W = ["children", "block", "className", "name", "classic"];
+var _excluded$X = ["children", "block", "className", "name", "classic"];
 var CodeComponent = function CodeComponent(_ref) {
   var children = _ref.children,
     _ref$block = _ref.block,
@@ -6595,7 +6594,7 @@ var CodeComponent = function CodeComponent(_ref) {
     name = _ref$name === void 0 ? '' : _ref$name,
     _ref$classic = _ref.classic,
     classic = _ref$classic === void 0 ? false : _ref$classic,
-    props = _objectWithoutProperties(_ref, _excluded$W);
+    props = _objectWithoutProperties(_ref, _excluded$X);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var theme$1 = theme.useTheme();
@@ -6813,7 +6812,7 @@ var useCollapseContext = function useCollapseContext() {
   return React.useContext(CollapseContext);
 };
 
-var _excluded$V = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
+var _excluded$W = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
 var CollapseComponent = function CollapseComponent(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -6825,7 +6824,7 @@ var CollapseComponent = function CollapseComponent(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     index = _ref.index,
-    props = _objectWithoutProperties(_ref, _excluded$V);
+    props = _objectWithoutProperties(_ref, _excluded$W);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6889,14 +6888,14 @@ var CollapseComponent = function CollapseComponent(_ref) {
 CollapseComponent.displayName = 'Collapse';
 var Collapse = withScale(CollapseComponent);
 
-var _excluded$U = ["children", "accordion", "className"];
+var _excluded$V = ["children", "accordion", "className"];
 var CollapseGroupComponent = function CollapseGroupComponent(_ref) {
   var children = _ref.children,
     _ref$accordion = _ref.accordion,
     accordion = _ref$accordion === void 0 ? true : _ref$accordion,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$U);
+    props = _objectWithoutProperties(_ref, _excluded$V);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _useCurrentState = theme.useCurrentState([]),
@@ -6952,7 +6951,7 @@ var CollapseGroup = withScale(CollapseGroupComponent);
 
 Collapse.Group = CollapseGroup;
 
-var _excluded$T = ["title", "content", "className"];
+var _excluded$U = ["title", "content", "className"];
 var DescriptionComponent = function DescriptionComponent(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? 'Title' : _ref$title,
@@ -6960,7 +6959,7 @@ var DescriptionComponent = function DescriptionComponent(_ref) {
     content = _ref$content === void 0 ? '' : _ref$content,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$T);
+    props = _objectWithoutProperties(_ref, _excluded$U);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6983,7 +6982,7 @@ var DescriptionComponent = function DescriptionComponent(_ref) {
 DescriptionComponent.displayName = 'Description';
 var Description = withScale(DescriptionComponent);
 
-var _excluded$S = ["children", "caption", "shadow", "className"];
+var _excluded$T = ["children", "caption", "shadow", "className"];
 var DisplayComponent = function DisplayComponent(_ref) {
   var children = _ref.children,
     _ref$caption = _ref.caption,
@@ -6992,7 +6991,7 @@ var DisplayComponent = function DisplayComponent(_ref) {
     shadow = _ref$shadow === void 0 ? false : _ref$shadow,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$S);
+    props = _objectWithoutProperties(_ref, _excluded$T);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7018,7 +7017,7 @@ var DisplayComponent = function DisplayComponent(_ref) {
 DisplayComponent.displayName = 'Display';
 var Display = withScale(DisplayComponent);
 
-var _excluded$R = ["type", "align", "children", "className"];
+var _excluded$S = ["type", "align", "children", "className"];
 var getColor$2 = function getColor(type, palette) {
   var colors = {
     "default": palette.border,
@@ -7039,7 +7038,7 @@ var DividerComponent = function DividerComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$R);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7071,7 +7070,7 @@ var DividerComponent = function DividerComponent(_ref) {
 DividerComponent.displayName = 'Divider';
 var Divider = withScale(DividerComponent);
 
-var _excluded$Q = ["type", "children", "className"];
+var _excluded$R = ["type", "children", "className"];
 var getColor$1 = function getColor(type, theme) {
   var colors = {
     "default": theme.palette.accents_2,
@@ -7087,7 +7086,7 @@ var DotComponent = function DotComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7425,7 +7424,7 @@ var getDrawerTransform = function getDrawerTransform(placement) {
   return translates[placement];
 };
 
-var _excluded$P = ["className", "children", "visible", "placement"];
+var _excluded$Q = ["className", "children", "visible", "placement"];
 var DrawerWrapper = function DrawerWrapper(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -7433,7 +7432,7 @@ var DrawerWrapper = function DrawerWrapper(_ref) {
     _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? false : _ref$visible,
     placement = _ref.placement,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7496,7 +7495,7 @@ var DrawerWrapper = function DrawerWrapper(_ref) {
 };
 DrawerWrapper.displayName = 'DrawerWrapper';
 
-var _excluded$O = ["visible", "keyboard", "disableBackdropClick", "onClose", "onContentClick", "wrapClassName", "children", "placement"];
+var _excluded$P = ["visible", "keyboard", "disableBackdropClick", "onClose", "onContentClick", "wrapClassName", "children", "placement"];
 var DrawerComponent = function DrawerComponent(_ref) {
   var customVisible = _ref.visible,
     _ref$keyboard = _ref.keyboard,
@@ -7510,7 +7509,7 @@ var DrawerComponent = function DrawerComponent(_ref) {
     children = _ref.children,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'right' : _ref$placement,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   var portal = usePortal('drawer');
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -7559,12 +7558,12 @@ var DrawerComponent = function DrawerComponent(_ref) {
 };
 DrawerComponent.displayName = 'Drawer';
 
-var _excluded$N = ["className", "children"];
+var _excluded$O = ["className", "children"];
 var ModalTitleComponent = function ModalTitleComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7582,12 +7581,12 @@ var ModalTitleComponent = function ModalTitleComponent(_ref) {
 ModalTitleComponent.displayName = 'ModalTitle';
 var ModalTitle = withScale(ModalTitleComponent);
 
-var _excluded$M = ["className", "children"];
+var _excluded$N = ["className", "children"];
 var ModalSubtitleComponent = function ModalSubtitleComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7605,12 +7604,12 @@ var ModalSubtitleComponent = function ModalSubtitleComponent(_ref) {
 ModalSubtitleComponent.displayName = 'ModalSubtitle';
 var ModalSubtitle = withScale(ModalSubtitleComponent);
 
-var _excluded$L = ["className", "children"];
+var _excluded$M = ["className", "children"];
 var ModalContentComponent = function ModalContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$M);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -7632,12 +7631,12 @@ DrawerComponent.Title = ModalTitle;
 DrawerComponent.Subtitle = ModalSubtitle;
 DrawerComponent.Content = ModalContent;
 
-var _excluded$K = ["className", "children"];
+var _excluded$L = ["className", "children"];
 var FieldsetTitle = function FieldsetTitle(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   var classes = theme.useClasses('title', className);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -7651,12 +7650,12 @@ var FieldsetTitle = function FieldsetTitle(_ref) {
 };
 FieldsetTitle.displayName = 'FieldsetTitle';
 
-var _excluded$J = ["className", "children"];
+var _excluded$K = ["className", "children"];
 var FieldsetSubtitle = function FieldsetSubtitle(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
       className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || ""),
@@ -7669,12 +7668,12 @@ var FieldsetSubtitle = function FieldsetSubtitle(_ref) {
 };
 FieldsetSubtitle.displayName = 'FieldsetSubtitle';
 
-var _excluded$I = ["className", "children"];
+var _excluded$J = ["className", "children"];
 var FieldsetFooterComponent = function FieldsetFooterComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7690,12 +7689,12 @@ var FieldsetFooterComponent = function FieldsetFooterComponent(_ref) {
 FieldsetFooterComponent.displayName = 'FieldsetFooter';
 var FieldsetFooter = withScale(FieldsetFooterComponent);
 
-var _excluded$H = ["className", "children"];
+var _excluded$I = ["className", "children"];
 var FieldsetContentComponent = function FieldsetContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var classes = theme.useClasses('content', className);
@@ -7722,7 +7721,7 @@ var useFieldset = function useFieldset() {
   return React.useContext(FieldsetContext);
 };
 
-var _excluded$G = ["className", "title", "subtitle", "children", "value", "label"];
+var _excluded$H = ["className", "title", "subtitle", "children", "value", "label"];
 var FieldsetComponent = function FieldsetComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -7735,7 +7734,7 @@ var FieldsetComponent = function FieldsetComponent(_ref) {
     value = _ref$value === void 0 ? '' : _ref$value,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? '' : _ref$label,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7799,14 +7798,14 @@ var FieldsetComponent = function FieldsetComponent(_ref) {
 FieldsetComponent.displayName = 'Fieldset';
 var Fieldset = withScale(FieldsetComponent);
 
-var _excluded$F = ["className", "children", "value", "onChange"];
+var _excluded$G = ["className", "children", "value", "onChange"];
 var FieldsetGroupComponent = function FieldsetGroupComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
     value = _ref.value,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -12515,7 +12514,7 @@ function setNestedObjectValues(object, value) {
 
 var __DEV__ = true;
 
-var _excluded$E = ["validateOnChange", "validateOnBlur", "validateOnMount", "isInitialValid", "enableReinitialize", "onSubmit"];
+var _excluded$F = ["validateOnChange", "validateOnBlur", "validateOnMount", "isInitialValid", "enableReinitialize", "onSubmit"];
 // State reducer
 function formikReducer(state, msg) {
   switch (msg.type) {
@@ -12599,7 +12598,7 @@ function useFormik(_ref) {
     _ref$enableReinitiali = _ref.enableReinitialize,
     enableReinitialize = _ref$enableReinitiali === void 0 ? false : _ref$enableReinitiali,
     onSubmit = _ref.onSubmit,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   var props = _objectSpread2({
     validateOnChange: validateOnChange,
     validateOnBlur: validateOnBlur,
@@ -13472,6 +13471,26 @@ function useEventCallback(fn) {
   }, []);
 }
 
+var _excluded$E = ["action"];
+// @todo tests
+var Form = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  // iOS needs an "action" attribute for nice input: https://stackoverflow.com/a/39485162/406725
+  // We default the action to "#" in case the preventDefault fails (just updates the URL hash)
+  var action = props.action,
+    rest = _objectWithoutProperties(props, _excluded$E);
+  var _action = action !== null && action !== void 0 ? action : '#';
+  var _useFormikContext = useFormikContext(),
+    handleReset = _useFormikContext.handleReset,
+    handleSubmit = _useFormikContext.handleSubmit;
+  return /*#__PURE__*/jsxRuntime.jsx("form", _objectSpread2({
+    onSubmit: handleSubmit,
+    ref: ref,
+    onReset: handleReset,
+    action: _action
+  }, rest));
+});
+Form.displayName = 'Form';
+
 var _excluded$D = ["mapPropsToValues"],
   _excluded2 = ["children"];
 /**
@@ -35507,7 +35526,6 @@ function requireLodash () {
 }
 
 var lodashExports = requireLodash();
-var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
 var makeColgroup = function makeColgroup(width, columns) {
   var colId = lodashExports.uniqueId('col');
@@ -35946,10 +35964,9 @@ var TableBody = function TableBody(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("tbody", {
     className: _JSXStyle.dynamic([["1422656197", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.accents_6]]]),
     children: [data.map(function (row, index) {
-      var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
-      var qid = _.uniqueId();
+      // const qid = _.uniqueId();
       if (row === null || row === undefined) {
-        var uid = _.uniqueId();
+        var uid = lodashExports.uniqueId();
         return /*#__PURE__*/jsxRuntime.jsx("tr", {
           className: _JSXStyle.dynamic([["1422656197", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.accents_6]]]),
           children: /*#__PURE__*/jsxRuntime.jsx("td", {
@@ -35959,28 +35976,8 @@ var TableBody = function TableBody(_ref) {
           })
         }, uid);
       }
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [renderRow(columns, row, index), (row === null || row === void 0 ? void 0 : row.table) && /*#__PURE__*/jsxRuntime.jsx("tr", {
-          className: _JSXStyle.dynamic([["1422656197", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.accents_6]]]),
-          children: /*#__PURE__*/jsxRuntime.jsx("td", {
-            style: {
-              padding: '1rem'
-            },
-            colSpan: columns.length,
-            className: _JSXStyle.dynamic([["1422656197", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.accents_6]]]),
-            children: /*#__PURE__*/jsxRuntime.jsx(pro.DataTable, {
-              readOnly: true,
-              stickyHeader: false,
-              style: _objectSpread2({
-                height: 'auto !important'
-              }, row === null || row === void 0 || (_row$table = row.table) === null || _row$table === void 0 ? void 0 : _row$table.style),
-              menu: (_row$table2 = row.table) === null || _row$table2 === void 0 ? void 0 : _row$table2.menu,
-              rows: (_row$table3 = row.table) === null || _row$table3 === void 0 ? void 0 : _row$table3.rows,
-              heading: (_row$table4 = row.table) === null || _row$table4 === void 0 ? void 0 : _row$table4.heading,
-              cols: (_row$table5 = row.table) === null || _row$table5 === void 0 ? void 0 : _row$table5.cols
-            })
-          })
-        }, qid)]
+      return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: renderRow(columns, row, index)
       });
 
       // return (
@@ -39280,7 +39277,7 @@ var LoginSocialPinterest = function LoginSocialPinterest(_ref) {
             formBody = [];
             for (property in details) {
               encodedKey = encodeURIComponent(property);
-              encodedValue = encodeURIComponent(_.get(details, property));
+              encodedValue = encodeURIComponent(lodashExports.get(details, property));
               formBody.push(encodedKey + '=' + encodedValue);
             }
             formBody = formBody.join('&');
@@ -42792,6 +42789,7 @@ exports.Drawer = DrawerComponent;
 exports.ErrorMessage = ErrorMessage;
 exports.Expandable = Expandable;
 exports.Fieldset = Fieldset;
+exports.Form = Form;
 exports.FormWrapper = FormWrapper;
 exports.FormikConsumer = FormikConsumer;
 exports.FormikContext = FormikContext;

package/dist/table/index.js

@@ -6,7 +6,6 @@ var React = require('react');
 var theme = require('@helpdice/theme');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
-var pro = require('@helpdice/pro');
 var ChevronLeft = require('@helpdice/icons/curved/ChevronLeft');
 var ChevronRight = require('@helpdice/icons/curved/ChevronRight');
 
@@ -21138,7 +21137,6 @@ function requireLodash () {
 }
 
 var lodashExports = requireLodash();
-var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
 var SelectIconComponent = function SelectIconComponent() {
   return /*#__PURE__*/jsxRuntime.jsxs("svg", {
@@ -22716,10 +22714,9 @@ var TableBody = function TableBody(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("tbody", {
     className: _JSXStyle.dynamic([["1422656197", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.accents_6]]]),
     children: [data.map(function (row, index) {
-      var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
-      var qid = _.uniqueId();
+      // const qid = _.uniqueId();
       if (row === null || row === undefined) {
-        var uid = _.uniqueId();
+        var uid = lodashExports.uniqueId();
         return /*#__PURE__*/jsxRuntime.jsx("tr", {
           className: _JSXStyle.dynamic([["1422656197", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.accents_6]]]),
           children: /*#__PURE__*/jsxRuntime.jsx("td", {
@@ -22729,28 +22726,8 @@ var TableBody = function TableBody(_ref) {
           })
         }, uid);
       }
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [renderRow(columns, row, index), (row === null || row === void 0 ? void 0 : row.table) && /*#__PURE__*/jsxRuntime.jsx("tr", {
-          className: _JSXStyle.dynamic([["1422656197", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.accents_6]]]),
-          children: /*#__PURE__*/jsxRuntime.jsx("td", {
-            style: {
-              padding: '1rem'
-            },
-            colSpan: columns.length,
-            className: _JSXStyle.dynamic([["1422656197", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.accents_6]]]),
-            children: /*#__PURE__*/jsxRuntime.jsx(pro.DataTable, {
-              readOnly: true,
-              stickyHeader: false,
-              style: _objectSpread2({
-                height: 'auto !important'
-              }, row === null || row === void 0 || (_row$table = row.table) === null || _row$table === void 0 ? void 0 : _row$table.style),
-              menu: (_row$table2 = row.table) === null || _row$table2 === void 0 ? void 0 : _row$table2.menu,
-              rows: (_row$table3 = row.table) === null || _row$table3 === void 0 ? void 0 : _row$table3.rows,
-              heading: (_row$table4 = row.table) === null || _row$table4 === void 0 ? void 0 : _row$table4.heading,
-              cols: (_row$table5 = row.table) === null || _row$table5 === void 0 ? void 0 : _row$table5.cols
-            })
-          })
-        }, qid)]
+      return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: renderRow(columns, row, index)
       });
 
       // return (

package/esm/form/Form.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type FormikFormProps = Pick<React.FormHTMLAttributes<HTMLFormElement>, Exclude<keyof React.FormHTMLAttributes<HTMLFormElement>, 'onReset' | 'onSubmit'>>;
+export declare const Form: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>;

package/esm/form/index.d.ts

@@ -1,5 +1,6 @@
 import connect from './connect';
 import { FormWrapper, useFormik, yupToFormErrors, validateYupSchema, prepareDataForValidation } from './FormWrapper';
+export * from './Form';
 import withFormik from './withFormik';
 import { isEmptyArray, isEmptyChildren, isInputEvent, isInteger, isObject, isPromise, isFunction, isNaN, isString, getActiveElement, getIn, setIn, setNestedObjectValues } from './utils';
 import ErrorMessage from './ErrorMessage';

package/esm/form/index.js

@@ -2,7 +2,7 @@
 import connect from './connect';
 import { FormWrapper, useFormik, yupToFormErrors, validateYupSchema, prepareDataForValidation } from './FormWrapper';
 // export * from './Field';
-// export * from './Form';
+export * from './Form';
 import withFormik from './withFormik';
 // import * as FieldArray from './FieldArray';
 import { isEmptyArray, isEmptyChildren, isInputEvent, isInteger, isObject, isPromise, isFunction, isNaN, isString, getActiveElement, getIn, setIn, setNestedObjectValues } from './utils';

package/esm/login-with/LoginSocialPinterest/index.js

@@ -11,7 +11,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /* "use client" */
 
 import React, { memo, useCallback, useEffect } from 'react';
-import _ from 'lodash';
+import { get } from 'lodash';
 var PINTEREST_URL = 'https://www.pinterest.com/oauth';
 var PINTEREST_URL_API = 'https://api.pinterest.com/v5';
 var PREVENT_CORS_URL = '';
@@ -87,7 +87,7 @@ export var LoginSocialPinterest = function LoginSocialPinterest(_ref) {
             formBody = [];
             for (property in details) {
               encodedKey = encodeURIComponent(property);
-              encodedValue = encodeURIComponent(_.get(details, property));
+              encodedValue = encodeURIComponent(get(details, property));
               formBody.push(encodedKey + '=' + encodedValue);
             }
             formBody = formBody.join('&');

package/esm/table/table-body.js

@@ -3,11 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useState } from 'react';
 import { useTheme, useClasses } from '@helpdice/theme';
-import _ from 'lodash';
+import { uniqueId } from 'lodash';
 // import Placeholder from '../placeholder';
 import TableCell from './table-cell';
 import { useTableContext } from './table-context';
-import { DataTable } from '@helpdice/pro';
+
+// import { DataTable } from '@helpdice/pro';
+
 var TableBody = function TableBody(_ref) {
   var data = _ref.data,
     emptyText = _ref.emptyText,
@@ -138,10 +140,9 @@ var TableBody = function TableBody(_ref) {
   return /*#__PURE__*/React.createElement("tbody", {
     className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
   }, data.map(function (row, index) {
-    var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
-    var qid = _.uniqueId();
+    // const qid = _.uniqueId();
     if (row === null || row === undefined) {
-      var uid = _.uniqueId();
+      var uid = uniqueId();
       return /*#__PURE__*/React.createElement("tr", {
         key: uid,
         className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
@@ -150,26 +151,7 @@ var TableBody = function TableBody(_ref) {
         className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
       }, "\u2003"));
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === void 0 ? void 0 : row.table) && /*#__PURE__*/React.createElement("tr", {
-      key: qid,
-      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    }, /*#__PURE__*/React.createElement("td", {
-      style: {
-        padding: '1rem'
-      },
-      colSpan: columns.length,
-      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    }, /*#__PURE__*/React.createElement(DataTable, {
-      readOnly: true,
-      stickyHeader: false,
-      style: _extends({
-        height: 'auto !important'
-      }, row === null || row === void 0 || (_row$table = row.table) === null || _row$table === void 0 ? void 0 : _row$table.style),
-      menu: (_row$table2 = row.table) === null || _row$table2 === void 0 ? void 0 : _row$table2.menu,
-      rows: (_row$table3 = row.table) === null || _row$table3 === void 0 ? void 0 : _row$table3.rows,
-      heading: (_row$table4 = row.table) === null || _row$table4 === void 0 ? void 0 : _row$table4.heading,
-      cols: (_row$table5 = row.table) === null || _row$table5 === void 0 ? void 0 : _row$table5.cols
-    }))));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index));
 
     // return (
     //   <tr

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.6.1-beta.5",
+  "version": "2.6.1",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",