@comet/admin 9.0.0-beta.3 → 9.0.0-beta.5

package/lib/form/__stories__/RangeInput.stories.js

@@ -0,0 +1,239 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Box, Card, CardContent, SliderThumb, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { Form } from "react-final-form";
+import { Button } from "../../common/buttons/Button";
+import { ToolbarTitleItem } from "../../common/toolbar/titleitem/ToolbarTitleItem";
+import { Toolbar } from "../../common/toolbar/Toolbar";
+import { Field } from "../../form/Field";
+import { FinalFormRangeInput } from "../../form/FinalFormRangeInput";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var Thumb = /*#__PURE__*/styled(SliderThumb, process.env.NODE_ENV === "production" ? {
+  target: "e7nmzrx0"
+} : {
+  target: "e7nmzrx0",
+  label: "Thumb"
+})(process.env.NODE_ENV === "production" ? {
+  name: "309e23",
+  styles: "&&{&:hover,&.Mui-focusVisible{box-shadow:none;}&:after{width:auto;height:auto;border-radius:0;border:solid white;border-width:0 2px 2px 0;transform:rotate(-45deg);display:inline-block;position:relative;padding:2px;content:\"\";left:-1px;top:0;}&[data-index=\"1\"]:after{transform:rotate(135deg);left:1px;}}"
+} : {
+  name: "309e23",
+  styles: "&&{&:hover,&.Mui-focusVisible{box-shadow:none;}&:after{width:auto;height:auto;border-radius:0;border:solid white;border-width:0 2px 2px 0;transform:rotate(-45deg);display:inline-block;position:relative;padding:2px;content:\"\";left:-1px;top:0;}&[data-index=\"1\"]:after{transform:rotate(135deg);left:1px;}}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9mb3JtL19fc3Rvcmllc19fL1JhbmdlSW5wdXQuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVWlDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9mb3JtL19fc3Rvcmllc19fL1JhbmdlSW5wdXQuc3Rvcmllcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIENhcmQsIENhcmRDb250ZW50LCBTbGlkZXJUaHVtYiwgVHlwb2dyYXBoeSB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5pbXBvcnQgeyBzdHlsZWQgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcbmltcG9ydCB7IEZvcm0gfSBmcm9tIFwicmVhY3QtZmluYWwtZm9ybVwiO1xuXG5pbXBvcnQgeyBCdXR0b24gfSBmcm9tIFwiLi4vLi4vY29tbW9uL2J1dHRvbnMvQnV0dG9uXCI7XG5pbXBvcnQgeyBUb29sYmFyVGl0bGVJdGVtIH0gZnJvbSBcIi4uLy4uL2NvbW1vbi90b29sYmFyL3RpdGxlaXRlbS9Ub29sYmFyVGl0bGVJdGVtXCI7XG5pbXBvcnQgeyBUb29sYmFyIH0gZnJvbSBcIi4uLy4uL2NvbW1vbi90b29sYmFyL1Rvb2xiYXJcIjtcbmltcG9ydCB7IEZpZWxkIH0gZnJvbSBcIi4uLy4uL2Zvcm0vRmllbGRcIjtcbmltcG9ydCB7IEZpbmFsRm9ybVJhbmdlSW5wdXQgfSBmcm9tIFwiLi4vLi4vZm9ybS9GaW5hbEZvcm1SYW5nZUlucHV0XCI7XG5cbmNvbnN0IFRodW1iID0gc3R5bGVkKFNsaWRlclRodW1iKWBcbiAgICAmJiB7XG4gICAgICAgICY6aG92ZXIsXG4gICAgICAgICYuTXVpLWZvY3VzVmlzaWJsZSB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICB9XG5cbiAgICAgICAgJjphZnRlciB7XG4gICAgICAgICAgICB3aWR0aDogYXV0bztcbiAgICAgICAgICAgIGhlaWdodDogYXV0bztcbiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDA7XG4gICAgICAgICAgICBib3JkZXI6IHNvbGlkIHdoaXRlO1xuICAgICAgICAgICAgYm9yZGVyLXdpZHRoOiAwIDJweCAycHggMDtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC00NWRlZyk7XG4gICAgICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBwYWRkaW5nOiAycHg7XG4gICAgICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgICAgICAgbGVmdDogLTFweDtcbiAgICAgICAgICAgIHRvcDogMDtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGF0YS1pbmRleD1cIjFcIl06YWZ0ZXIge1xuICAgICAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTM1ZGVnKTtcbiAgICAgICAgICAgIGxlZnQ6IDFweDtcbiAgICAgICAgfVxuICAgIH1cbmA7XG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgICB0aXRsZTogXCJjb21wb25lbnRzL2Zvcm1cIixcbn07XG5cbmV4cG9ydCBjb25zdCBSYW5nZUlucHV0ID0gKCkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAgICA8Qm94IG1hcmdpbkJvdHRvbT17NH0+XG4gICAgICAgICAgICAgICAgPFRvb2xiYXI+XG4gICAgICAgICAgICAgICAgICAgIDxUb29sYmFyVGl0bGVJdGVtPkZpbmFsIEZvcm0gUmFuZ2UgSW5wdXQ8L1Rvb2xiYXJUaXRsZUl0ZW0+XG4gICAgICAgICAgICAgICAgPC9Ub29sYmFyPlxuICAgICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgICA8ZGl2IHN0eWxlPXt7IHdpZHRoOiA0MDAgfX0+XG4gICAgICAgICAgICAgICAgPEJveCBtYXJnaW5Cb3R0b209ezR9PlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZCB2YXJpYW50PVwib3V0bGluZWRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxDYXJkQ29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VHlwb2dyYXBoeSB2YXJpYW50PVwiaDNcIiBndXR0ZXJCb3R0b20+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHdpdGggaW5pdGlhbFZhbHVlc1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvVHlwb2dyYXBoeT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Rm9ybVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvblN1Ym1pdD17KHZhbHVlcykgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgLy8gdmFsdWVzXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGluaXRpYWxWYWx1ZXM9e3sgcHJpY2U6IHsgbWluOiAwLCBtYXg6IDEwMCB9IH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJlbmRlcj17KHsgaGFuZGxlU3VibWl0LCB2YWx1ZXMsIGZvcm0sIGluaXRpYWxWYWx1ZXMgfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8RmllbGRcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29tcG9uZW50PXtGaW5hbEZvcm1SYW5nZUlucHV0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBuYW1lPVwicHJpY2VcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBtaW49ezB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heD17MTAwfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbmRBZG9ybm1lbnQ9ezxzcGFuPuKCrDwvc3Bhbj59XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNsaWRlclByb3BzPXt7IGNvbXBvbmVudHM6IHsgVGh1bWIgfSB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmb3JtLnJlc2V0KCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBSZXNldFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwcmU+e0pTT04uc3RyaW5naWZ5KHZhbHVlcywgdW5kZWZpbmVkLCAyKX08L3ByZT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NhcmRDb250ZW50PlxuICAgICAgICAgICAgICAgICAgICA8L0NhcmQ+XG4gICAgICAgICAgICAgICAgPC9Cb3g+XG5cbiAgICAgICAgICAgICAgICA8Qm94IG1hcmdpbkJvdHRvbT17NH0+XG4gICAgICAgICAgICAgICAgICAgIDxDYXJkIHZhcmlhbnQ9XCJvdXRsaW5lZFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPENhcmRDb250ZW50PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUeXBvZ3JhcGh5IHZhcmlhbnQ9XCJoM1wiIGd1dHRlckJvdHRvbT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgd2l0aG91dCBpbml0aWFsVmFsdWVzXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UeXBvZ3JhcGh5PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGb3JtXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uU3VibWl0PXsodmFsdWVzKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvLyB2YWx1ZXNcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVuZGVyPXsoeyB2YWx1ZXMsIGZvcm0gfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8RmllbGRcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29tcG9uZW50PXtGaW5hbEZvcm1SYW5nZUlucHV0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBuYW1lPVwicHJpY2VcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBtaW49ezB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heD17MTUwfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbmRBZG9ybm1lbnQ9ezxzcGFuPuKCrDwvc3Bhbj59XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNsaWRlclByb3BzPXt7IGNvbXBvbmVudHM6IHsgVGh1bWIgfSB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmb3JtLnJlc2V0KCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBSZXNldFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwcmU+e0pTT04uc3RyaW5naWZ5KHZhbHVlcywgdW5kZWZpbmVkLCAyKX08L3ByZT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NhcmRDb250ZW50PlxuICAgICAgICAgICAgICAgICAgICA8L0NhcmQ+XG4gICAgICAgICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgICAgICAgPEJveCBtYXJnaW5Cb3R0b209ezR9PlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZCB2YXJpYW50PVwib3V0bGluZWRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxDYXJkQ29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VHlwb2dyYXBoeSB2YXJpYW50PVwiaDNcIiBndXR0ZXJCb3R0b20+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHdpdGggaW5pdGlhbFZhbHVlcyBhbmQgZGlmZmVyZW50IE1pbk1heCBWYWx1ZXNcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L1R5cG9ncmFwaHk+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPEZvcm1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb25TdWJtaXQ9eyh2YWx1ZXMpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8vIHZhbHVlc1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbml0aWFsVmFsdWVzPXt7IHByaWNlOiB7IG1pbjogNTAsIG1heDogODAgfSB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByZW5kZXI9eyh7IHZhbHVlcywgZm9ybSwgaW5pdGlhbFZhbHVlcyB9KSA9PiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGaWVsZFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb21wb25lbnQ9e0ZpbmFsRm9ybVJhbmdlSW5wdXR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG5hbWU9XCJwcmljZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1pbj17MjB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heD17MTUwfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbmRBZG9ybm1lbnQ9ezxzcGFuPuKCrDwvc3Bhbj59XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNsaWRlclByb3BzPXt7IGNvbXBvbmVudHM6IHsgVGh1bWIgfSB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmb3JtLnJlc2V0KCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBSZXNldFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwcmU+e0pTT04uc3RyaW5naWZ5KHZhbHVlcywgdW5kZWZpbmVkLCAyKX08L3ByZT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NhcmRDb250ZW50PlxuICAgICAgICAgICAgICAgICAgICA8L0NhcmQ+XG4gICAgICAgICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgICAgICAgPEJveCBtYXJnaW5Cb3R0b209ezR9PlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZCB2YXJpYW50PVwib3V0bGluZWRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxDYXJkQ29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VHlwb2dyYXBoeSB2YXJpYW50PVwiaDNcIiBndXR0ZXJCb3R0b20+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc2FibGVkXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UeXBvZ3JhcGh5PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGb3JtXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uU3VibWl0PXsodmFsdWVzKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvLyB2YWx1ZXNcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaW5pdGlhbFZhbHVlcz17eyBwcmljZTogeyBtaW46IDUwLCBtYXg6IDgwIH0gfX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVuZGVyPXsoeyB2YWx1ZXMsIGZvcm0sIGluaXRpYWxWYWx1ZXMgfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8RmllbGRcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29tcG9uZW50PXtGaW5hbEZvcm1SYW5nZUlucHV0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBuYW1lPVwicHJpY2VcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBtaW49ezB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heD17MTAwfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbmRBZG9ybm1lbnQ9ezxzcGFuPuKCrDwvc3Bhbj59XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNsaWRlclByb3BzPXt7IGNvbXBvbmVudHM6IHsgVGh1bWIgfSB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkaXNhYmxlZFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByZWFkT25seVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmb3JtLnJlc2V0KCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBSZXNldFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwcmU+e0pTT04uc3RyaW5naWZ5KHZhbHVlcywgdW5kZWZpbmVkLCAyKX08L3ByZT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NhcmRDb250ZW50PlxuICAgICAgICAgICAgICAgICAgICA8L0NhcmQ+XG4gICAgICAgICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC8+XG4gICAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export default {
+  title: "components/form"
+};
+export var RangeInput = function RangeInput() {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      marginBottom: 4,
+      children: /*#__PURE__*/_jsx(Toolbar, {
+        children: /*#__PURE__*/_jsx(ToolbarTitleItem, {
+          children: "Final Form Range Input"
+        })
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        width: 400
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        marginBottom: 4,
+        children: /*#__PURE__*/_jsx(Card, {
+          variant: "outlined",
+          children: /*#__PURE__*/_jsxs(CardContent, {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h3",
+              gutterBottom: true,
+              children: "with initialValues"
+            }), /*#__PURE__*/_jsx(Form, {
+              onSubmit: function onSubmit(values) {
+                // values
+              },
+              initialValues: {
+                price: {
+                  min: 0,
+                  max: 100
+                }
+              },
+              render: function render(_ref) {
+                var handleSubmit = _ref.handleSubmit,
+                  values = _ref.values,
+                  form = _ref.form,
+                  initialValues = _ref.initialValues;
+                return /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [/*#__PURE__*/_jsx(Field, {
+                    component: FinalFormRangeInput,
+                    name: "price",
+                    min: 0,
+                    max: 100,
+                    endAdornment: /*#__PURE__*/_jsx("span", {
+                      children: "\u20AC"
+                    }),
+                    sliderProps: {
+                      components: {
+                        Thumb: Thumb
+                      }
+                    }
+                  }), /*#__PURE__*/_jsx(Button, {
+                    onClick: function onClick() {
+                      form.reset();
+                    },
+                    children: "Reset"
+                  }), /*#__PURE__*/_jsx("pre", {
+                    children: JSON.stringify(values, undefined, 2)
+                  })]
+                });
+              }
+            })]
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        marginBottom: 4,
+        children: /*#__PURE__*/_jsx(Card, {
+          variant: "outlined",
+          children: /*#__PURE__*/_jsxs(CardContent, {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h3",
+              gutterBottom: true,
+              children: "without initialValues"
+            }), /*#__PURE__*/_jsx(Form, {
+              onSubmit: function onSubmit(values) {
+                // values
+              },
+              render: function render(_ref2) {
+                var values = _ref2.values,
+                  form = _ref2.form;
+                return /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [/*#__PURE__*/_jsx(Field, {
+                    component: FinalFormRangeInput,
+                    name: "price",
+                    min: 0,
+                    max: 150,
+                    endAdornment: /*#__PURE__*/_jsx("span", {
+                      children: "\u20AC"
+                    }),
+                    sliderProps: {
+                      components: {
+                        Thumb: Thumb
+                      }
+                    }
+                  }), /*#__PURE__*/_jsx(Button, {
+                    onClick: function onClick() {
+                      form.reset();
+                    },
+                    children: "Reset"
+                  }), /*#__PURE__*/_jsx("pre", {
+                    children: JSON.stringify(values, undefined, 2)
+                  })]
+                });
+              }
+            })]
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        marginBottom: 4,
+        children: /*#__PURE__*/_jsx(Card, {
+          variant: "outlined",
+          children: /*#__PURE__*/_jsxs(CardContent, {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h3",
+              gutterBottom: true,
+              children: "with initialValues and different MinMax Values"
+            }), /*#__PURE__*/_jsx(Form, {
+              onSubmit: function onSubmit(values) {
+                // values
+              },
+              initialValues: {
+                price: {
+                  min: 50,
+                  max: 80
+                }
+              },
+              render: function render(_ref3) {
+                var values = _ref3.values,
+                  form = _ref3.form,
+                  initialValues = _ref3.initialValues;
+                return /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [/*#__PURE__*/_jsx(Field, {
+                    component: FinalFormRangeInput,
+                    name: "price",
+                    min: 20,
+                    max: 150,
+                    endAdornment: /*#__PURE__*/_jsx("span", {
+                      children: "\u20AC"
+                    }),
+                    sliderProps: {
+                      components: {
+                        Thumb: Thumb
+                      }
+                    }
+                  }), /*#__PURE__*/_jsx(Button, {
+                    onClick: function onClick() {
+                      form.reset();
+                    },
+                    children: "Reset"
+                  }), /*#__PURE__*/_jsx("pre", {
+                    children: JSON.stringify(values, undefined, 2)
+                  })]
+                });
+              }
+            })]
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        marginBottom: 4,
+        children: /*#__PURE__*/_jsx(Card, {
+          variant: "outlined",
+          children: /*#__PURE__*/_jsxs(CardContent, {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h3",
+              gutterBottom: true,
+              children: "disabled"
+            }), /*#__PURE__*/_jsx(Form, {
+              onSubmit: function onSubmit(values) {
+                // values
+              },
+              initialValues: {
+                price: {
+                  min: 50,
+                  max: 80
+                }
+              },
+              render: function render(_ref4) {
+                var values = _ref4.values,
+                  form = _ref4.form,
+                  initialValues = _ref4.initialValues;
+                return /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [/*#__PURE__*/_jsx(Field, {
+                    component: FinalFormRangeInput,
+                    name: "price",
+                    min: 0,
+                    max: 100,
+                    endAdornment: /*#__PURE__*/_jsx("span", {
+                      children: "\u20AC"
+                    }),
+                    sliderProps: {
+                      components: {
+                        Thumb: Thumb
+                      }
+                    },
+                    disabled: true,
+                    readOnly: true
+                  }), /*#__PURE__*/_jsx(Button, {
+                    onClick: function onClick() {
+                      form.reset();
+                    },
+                    children: "Reset"
+                  }), /*#__PURE__*/_jsx("pre", {
+                    children: JSON.stringify(values, undefined, 2)
+                  })]
+                });
+              }
+            })]
+          })
+        })
+      })]
+    })]
+  });
+};

package/lib/form/__stories__/RouterTabs.stories.js

@@ -0,0 +1,96 @@
+var _excluded = ["pristine", "dirty", "hasValidationErrors", "submitting", "hasSubmitErrors", "handleSubmit"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { Card, CardContent } from "@mui/material";
+import { FillSpace } from "../../common/FillSpace";
+import { ToolbarActions } from "../../common/toolbar/actions/ToolbarActions";
+import { ToolbarBackButton } from "../../common/toolbar/backbutton/ToolbarBackButton";
+import { Toolbar } from "../../common/toolbar/Toolbar";
+import { FinalForm } from "../../FinalForm";
+import { FinalFormSaveButton } from "../../FinalFormSaveButton";
+import { Field } from "../../form/Field";
+import { FinalFormInput } from "../../form/FinalFormInput";
+import { Stack } from "../../stack/Stack";
+import { RouterTab, RouterTabs } from "../../tabs/RouterTabs";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default {
+  title: "components/form"
+};
+export var FormWithRouterTabs = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(Stack, {
+      topLevelTitle: "Root Stack",
+      children: /*#__PURE__*/_jsxs(RouterTabs, {
+        children: [/*#__PURE__*/_jsx(RouterTab, {
+          label: "Top 1",
+          path: "",
+          children: /*#__PURE__*/_jsxs(RouterTabs, {
+            children: [/*#__PURE__*/_jsx(RouterTab, {
+              label: "Form 1",
+              path: "",
+              forceRender: true,
+              children: /*#__PURE__*/_jsx(Card, {
+                variant: "outlined",
+                children: /*#__PURE__*/_jsx(CardContent, {
+                  children: /*#__PURE__*/_jsx(FinalForm, {
+                    mode: "edit",
+                    onSubmit: function onSubmit(values) {
+                      alert(JSON.stringify(values));
+                    },
+                    initialValues: {
+                      foo: "foo",
+                      bar: "bar"
+                    },
+                    children: function children(_ref) {
+                      var pristine = _ref.pristine,
+                        dirty = _ref.dirty,
+                        hasValidationErrors = _ref.hasValidationErrors,
+                        submitting = _ref.submitting,
+                        hasSubmitErrors = _ref.hasSubmitErrors,
+                        handleSubmit = _ref.handleSubmit,
+                        formVars = _objectWithoutProperties(_ref, _excluded);
+                      return /*#__PURE__*/_jsxs(_Fragment, {
+                        children: ["Pristine: ", String(pristine), " ", /*#__PURE__*/_jsx("br", {}), "Dirty: ", String(dirty), /*#__PURE__*/_jsxs(Toolbar, {
+                          children: [/*#__PURE__*/_jsx(ToolbarBackButton, {}), /*#__PURE__*/_jsx(FillSpace, {}), /*#__PURE__*/_jsx(ToolbarActions, {
+                            children: /*#__PURE__*/_jsx(FinalFormSaveButton, {})
+                          })]
+                        }), /*#__PURE__*/_jsx(Card, {
+                          variant: "outlined",
+                          children: /*#__PURE__*/_jsx(Field, {
+                            label: "Foo",
+                            name: "foo",
+                            component: FinalFormInput
+                          })
+                        })]
+                      });
+                    }
+                  })
+                })
+              })
+            }), /*#__PURE__*/_jsx(RouterTab, {
+              label: "Outside Form",
+              path: "/outside-form",
+              forceRender: true,
+              children: /*#__PURE__*/_jsx(Card, {
+                variant: "outlined",
+                children: /*#__PURE__*/_jsx(CardContent, {
+                  children: "Outside Form"
+                })
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsx(RouterTab, {
+          label: "Top 2",
+          path: "/top2",
+          children: /*#__PURE__*/_jsx(Card, {
+            variant: "outlined",
+            children: /*#__PURE__*/_jsx(CardContent, {
+              children: "Top2"
+            })
+          })
+        })]
+      })
+    });
+  },
+  name: "Form with router tabs"
+};

package/lib/form/__stories__/RouterTabsInForm.stories.js

@@ -0,0 +1,73 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import { FinalForm } from "../../FinalForm";
+import { Field } from "../../form/Field";
+import { FinalFormInput } from "../../form/FinalFormInput";
+import { RouterTab, RouterTabs } from "../../tabs/RouterTabs";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function Path() {
+  var location = useLocation();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[1];
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      rerender(new Date().getTime());
+    }, 1000);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    children: location.pathname
+  });
+}
+export default {
+  title: "components/form"
+};
+export var RouterTabsInForm = {
+  render: function render() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Path, {}), /*#__PURE__*/_jsx(FinalForm, {
+        mode: "edit",
+        onSubmit: function onSubmit(values) {
+          alert(JSON.stringify(values));
+        },
+        initialValues: {
+          foo: "foo",
+          bar: "bar"
+        },
+        children: function children() {
+          return /*#__PURE__*/_jsxs(RouterTabs, {
+            children: [/*#__PURE__*/_jsx(RouterTab, {
+              label: "Form 1",
+              path: "",
+              forceRender: true,
+              children: /*#__PURE__*/_jsx(Field, {
+                label: "Foo",
+                name: "foo",
+                component: FinalFormInput
+              })
+            }), /*#__PURE__*/_jsx(RouterTab, {
+              label: "Form 2",
+              path: "/form2",
+              forceRender: true,
+              children: /*#__PURE__*/_jsx(Field, {
+                label: "Bar",
+                name: "bar",
+                component: FinalFormInput
+              })
+            })]
+          });
+        }
+      })]
+    });
+  },
+  name: "RouterTabsInForm"
+};

package/lib/form/__stories__/RouterTabsInFormWithSubroutes.stories.js

@@ -0,0 +1,96 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import { Button } from "../../common/buttons/Button";
+import { FinalForm } from "../../FinalForm";
+import { Field } from "../../form/Field";
+import { FinalFormInput } from "../../form/FinalFormInput";
+import { StackPage } from "../../stack/Page";
+import { Stack } from "../../stack/Stack";
+import { StackLink } from "../../stack/StackLink";
+import { StackSwitch } from "../../stack/Switch";
+import { RouterTab, RouterTabs } from "../../tabs/RouterTabs";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function Path() {
+  var location = useLocation();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[1];
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      rerender(new Date().getTime());
+    }, 1000);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    children: location.pathname
+  });
+}
+export default {
+  title: "components/form"
+};
+export var RouterTabsInFormWithSubroutes = {
+  render: function render() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Path, {}), /*#__PURE__*/_jsx(FinalForm, {
+        mode: "edit",
+        onSubmit: function onSubmit(values) {
+          alert(JSON.stringify(values));
+        },
+        initialValues: {
+          foo: "foo",
+          bar: "bar"
+        },
+        children: function children() {
+          return /*#__PURE__*/_jsxs(RouterTabs, {
+            children: [/*#__PURE__*/_jsx(RouterTab, {
+              label: "Form 1",
+              path: "",
+              forceRender: true,
+              children: /*#__PURE__*/_jsx(Field, {
+                label: "Foo",
+                name: "foo",
+                component: FinalFormInput
+              })
+            }), /*#__PURE__*/_jsxs(RouterTab, {
+              label: "Form 2",
+              path: "/form2",
+              forceRender: true,
+              children: [/*#__PURE__*/_jsx(Field, {
+                label: "Bar",
+                name: "bar",
+                component: FinalFormInput
+              }), /*#__PURE__*/_jsx(Stack, {
+                topLevelTitle: "",
+                children: /*#__PURE__*/_jsxs(StackSwitch, {
+                  initialPage: "page1",
+                  children: [/*#__PURE__*/_jsxs(StackPage, {
+                    name: "page1",
+                    children: ["Form 2 Subpage 1", /*#__PURE__*/_jsx(StackLink, {
+                      pageName: "page2",
+                      payload: "test",
+                      children: /*#__PURE__*/_jsx(Button, {
+                        children: "To subpage 2"
+                      })
+                    })]
+                  }), /*#__PURE__*/_jsx(StackPage, {
+                    name: "page2",
+                    children: "Form 2 Subpage 2"
+                  })]
+                })
+              })]
+            })]
+          });
+        }
+      })]
+    });
+  },
+  name: "RouterTabsInFormWithSubroutes"
+};

package/lib/form/__stories__/ScrollToErrorField.stories.js

@@ -0,0 +1,82 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { Typography } from "@mui/material";
+import { useState } from "react";
+import { Button } from "../../common/buttons/Button";
+import { FinalForm } from "../../FinalForm";
+import { Field } from "../../form/Field";
+import { FinalFormInput } from "../../form/FinalFormInput";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function validate(_ref) {
+  var foo = _ref.foo,
+    bar = _ref.bar;
+  var errors = {};
+  if (foo !== "foo") {
+    errors.foo = "".concat(foo, " is not foo");
+  }
+  if (bar !== "bar") {
+    errors.bar = "".concat(bar, " is not bar");
+  }
+  return errors;
+}
+export default {
+  title: "components/form"
+};
+export var ScrollToErrorField = function ScrollToErrorField() {
+  var initialValues = {
+    foo: "foo",
+    bar: ""
+  };
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setOpen(function (s) {
+          return !s;
+        });
+      },
+      children: "Click to Render Form"
+    }), /*#__PURE__*/_jsx(Typography, {
+      children: "The page then scrolls to the 2nd field which has an error."
+    }), open && /*#__PURE__*/_jsxs(FinalForm, {
+      mode: "edit",
+      onSubmit: function onSubmit() {
+        // noop
+      },
+      initialValues: initialValues,
+      validate: validate,
+      formContext: {
+        shouldScrollToField: function shouldScrollToField(_ref2) {
+          var touched = _ref2.touched;
+          return !touched;
+        },
+        shouldShowFieldError: function shouldShowFieldError() {
+          return true;
+        }
+      },
+      children: [/*#__PURE__*/_jsx(Field, {
+        label: "Foo",
+        name: "foo",
+        component: FinalFormInput,
+        fullWidth: true
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          height: "2000px",
+          borderLeft: "1px solid black"
+        }
+      }), /*#__PURE__*/_jsx(Field, {
+        label: "Bar",
+        name: "bar",
+        component: FinalFormInput,
+        fullWidth: true
+      })]
+    })]
+  });
+};

package/lib/form/__stories__/SearchField.stories.js

@@ -0,0 +1,38 @@
+import { Alert } from "../../alert/Alert";
+import { FinalForm } from "../../FinalForm";
+import { SearchField } from "../../form/fields/SearchField";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var config = {
+  component: SearchField,
+  title: "components/form/SearchField"
+};
+export default config;
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      mode: "edit",
+      onSubmit: function onSubmit() {
+        // not handled
+      },
+      subscription: {
+        values: true
+      },
+      children: function children(_ref) {
+        var values = _ref.values;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(SearchField, {
+            name: "value",
+            label: "Search Field",
+            fullWidth: true,
+            variant: "horizontal"
+          }), /*#__PURE__*/_jsx(Alert, {
+            title: "FormState",
+            children: /*#__PURE__*/_jsx("pre", {
+              children: JSON.stringify(values, null, 2)
+            })
+          })]
+        });
+      }
+    });
+  }
+};