@sb1/ffe-form-react 100.12.3 → 101.0.0

package/lib/ToggleSwitch.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,32 +32,20 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleSwitch = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var i18n_1 = __importDefault(require("./i18n/i18n"));
-var ToggleSwitch = function (_a) {
-    var children = _a.children, className = _a.className, description = _a.description, hideOnOff = _a.hideOnOff, onText = _a.onText, offText = _a.offText, providedId = _a.id, _b = _a.value, value = _b === void 0 ? 'on' : _b, _c = _a.locale, locale = _c === void 0 ? 'nb' : _c, checked = _a.checked, rest = __rest(_a, ["children", "className", "description", "hideOnOff", "onText", "offText", "id", "value", "locale", "checked"]);
-    var generatedId = (0, react_1.useId)();
-    var id = providedId !== null && providedId !== void 0 ? providedId : generatedId;
-    var text = i18n_1.default[locale];
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const i18n_1 = __importDefault(require("./i18n/i18n"));
+const ToggleSwitch = ({ children, className, description, hideOnOff, onText, offText, id: providedId, value = 'on', locale = 'nb', checked, ...rest }) => {
+    const generatedId = (0, react_1.useId)();
+    const id = providedId !== null && providedId !== void 0 ? providedId : generatedId;
+    const text = i18n_1.default[locale];
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-toggle-switch', { 'ffe-toggle-switch--hide-on-off': hideOnOff }, className) },
-        react_1.default.createElement("input", __assign({ className: "ffe-toggle-switch__input", type: "checkbox", role: "switch", id: id, value: value, checked: !!checked }, rest)),
+        react_1.default.createElement("input", { className: "ffe-toggle-switch__input", type: "checkbox", role: "switch", id: id, value: value, checked: !!checked, ...rest }),
         react_1.default.createElement("label", { className: "ffe-toggle-switch__label", htmlFor: id },
             react_1.default.createElement("span", { className: "ffe-toggle-switch__label-text" },
                 children,

package/lib/Tooltip.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,25 +37,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ffe_collapse_react_1 = require("@sb1/ffe-collapse-react");
-var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
-exports.Tooltip = react_1.default.forwardRef(function (_a, ref) {
-    var initialIsOpen = _a.isOpen, ariaControls = _a["aria-controls"], _b = _a["aria-label"], ariaLabel = _b === void 0 ? 'Vis hjelpetekst' : _b, children = _a.children, className = _a.className, onClick = _a.onClick, tabIndex = _a.tabIndex, containerProps = _a.containerProps;
-    var tooltipButtonId = (0, react_1.useId)();
-    var tooltipId = (0, react_1.useId)();
-    var _c = (0, react_1.useState)(!!initialIsOpen), isOpen = _c[0], setIsOpen = _c[1];
-    var handleClick = function (evt) {
-        setIsOpen(function (prev) { return !prev; });
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ffe_collapse_react_1 = require("@sb1/ffe-collapse-react");
+const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
+exports.Tooltip = react_1.default.forwardRef(({ isOpen: initialIsOpen, 'aria-controls': ariaControls, 'aria-label': ariaLabel = 'Vis hjelpetekst', children, className, onClick, tabIndex, containerProps, }, ref) => {
+    const tooltipButtonId = (0, react_1.useId)();
+    const tooltipId = (0, react_1.useId)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(!!initialIsOpen);
+    const handleClick = (evt) => {
+        setIsOpen(prev => !prev);
         if (onClick) {
             onClick(evt);
         }
     };
-    var helpIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIj48cGF0aCBkPSJNNDgwLTI0MHEyMCAwIDM0LTE0dDE0LTM0cTAtMjAtMTQtMzR0LTM0LTE0cS0yMCAwLTM0IDE0dC0xNCAzNHEwIDIwIDE0IDM0dDM0IDE0Wm0tMzYtMTUzaDczcTAtMzcgNi41LTUyLjVUNTU1LTQ4NXEzNS0zNCA0OC41LTU4dDEzLjUtNTNxMC01NS0zNy41LTg5LjVUNDg0LTcyMHEtNTEgMC04OC41IDI3VDM0My02MjBsNjUgMjdxOS0yOCAyOC41LTQzLjVUNDgyLTY1MnEyOCAwIDQ2IDE2dDE4IDQycTAgMjMtMTUuNSA0MVQ0OTYtNTE4cS0zNSAzMi00My41IDUyLjVUNDQ0LTM5M1ptMzYgMjk3cS03OSAwLTE0OS0zMHQtMTIyLjUtODIuNVExNTYtMjYxIDEyNi0zMzFUOTYtNDgwcTAtODAgMzAtMTQ5LjV0ODIuNS0xMjJRMjYxLTgwNCAzMzEtODM0dDE0OS0zMHE4MCAwIDE0OS41IDMwdDEyMiA4Mi41UTgwNC02OTkgODM0LTYyOS41VDg2NC00ODBxMCA3OS0zMCAxNDl0LTgyLjUgMTIyLjVRNjk5LTE1NiA2MjkuNS0xMjZUNDgwLTk2Wm0wLTcycTEzMCAwIDIyMS05MXQ5MS0yMjFxMC0xMzAtOTEtMjIxdC0yMjEtOTFxLTEzMCAwLTIyMSA5MXQtOTEgMjIxcTAgMTMwIDkxIDIyMXQyMjEgOTFabTAtMzEyWiIvPjwvc3ZnPg==';
-    return (react_1.default.createElement("div", __assign({}, containerProps, { className: (0, classnames_1.default)('ffe-tooltip', {
+    const helpIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIj48cGF0aCBkPSJNNDgwLTI0MHEyMCAwIDM0LTE0dDE0LTM0cTAtMjAtMTQtMzR0LTM0LTE0cS0yMCAwLTM0IDE0dC0xNCAzNHEwIDIwIDE0IDM0dDM0IDE0Wm0tMzYtMTUzaDczcTAtMzcgNi41LTUyLjVUNTU1LTQ4NXEzNS0zNCA0OC41LTU4dDEzLjUtNTNxMC01NS0zNy41LTg5LjVUNDg0LTcyMHEtNTEgMC04OC41IDI3VDM0My02MjBsNjUgMjdxOS0yOCAyOC41LTQzLjVUNDgyLTY1MnEyOCAwIDQ2IDE2dDE4IDQycTAgMjMtMTUuNSA0MVQ0OTYtNTE4cS0zNSAzMi00My41IDUyLjVUNDQ0LTM5M1ptMzYgMjk3cS03OSAwLTE0OS0zMHQtMTIyLjUtODIuNVExNTYtMjYxIDEyNi0zMzFUOTYtNDgwcTAtODAgMzAtMTQ5LjV0ODIuNS0xMjJRMjYxLTgwNCAzMzEtODM0dDE0OS0zMHE4MCAwIDE0OS41IDMwdDEyMiA4Mi41UTgwNC02OTkgODM0LTYyOS41VDg2NC00ODBxMCA3OS0zMCAxNDl0LTgyLjUgMTIyLjVRNjk5LTE1NiA2MjkuNS0xMjZUNDgwLTk2Wm0wLTcycTEzMCAwIDIyMS05MXQ5MS0yMjFxMC0xMzAtOTEtMjIxdC0yMjEtOTFxLTEzMCAwLTIyMSA5MXQtOTEgMjIxcTAgMTMwIDkxIDIyMXQyMjEgOTFabTAtMzEyWiIvPjwvc3ZnPg==';
+    return (react_1.default.createElement("div", { ...containerProps, className: (0, classnames_1.default)('ffe-tooltip', {
             'ffe-tooltip--open': isOpen,
-        }) }),
+        }) },
         react_1.default.createElement("button", { ref: ref, "aria-expanded": isOpen, "aria-controls": children ? tooltipId : ariaControls, "aria-label": ariaLabel, className: "ffe-tooltip__icon", onClick: handleClick, type: "button", tabIndex: tabIndex, id: tooltipButtonId },
             react_1.default.createElement("span", { "aria-hidden": true },
                 react_1.default.createElement(ffe_icons_react_1.Icon, { className: "ffe-button__icon", fileUrl: helpIcon, size: "sm", ariaLabel: "?" }))),

package/lib/documentation/RadioButton-example.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -44,23 +33,23 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var RadioButton_1 = require("../RadioButton");
-var RadioButtonInputGroup_1 = require("../RadioButtonInputGroup");
-exports.default = (function () {
-    var _a = (0, react_1.useState)('savings'), accountType = _a[0], setAccountType = _a[1];
-    var _b = (0, react_1.useState)('monthly'), paymentFreq = _b[0], setPaymentFreq = _b[1];
+const react_1 = __importStar(require("react"));
+const RadioButton_1 = require("../RadioButton");
+const RadioButtonInputGroup_1 = require("../RadioButtonInputGroup");
+exports.default = () => {
+    const [accountType, setAccountType] = (0, react_1.useState)('savings');
+    const [paymentFreq, setPaymentFreq] = (0, react_1.useState)('monthly');
     return (react_1.default.createElement("div", { className: "ffe-grid" },
         react_1.default.createElement("div", { className: "ffe-grid__row" },
             react_1.default.createElement("div", { className: "ffe-grid__col--md-12 ffe-grid__col--sm-12" },
-                react_1.default.createElement(RadioButtonInputGroup_1.RadioButtonInputGroup, { label: "Choose your account type", description: "Select the type of account that best suits your needs", name: "account-type", onChange: function (e) { return setAccountType(e.target.value); }, selectedValue: accountType }, function (inputProps) { return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(RadioButton_1.RadioButton, __assign({ value: "savings", tooltip: "Best for long-term savings with higher interest rates" }, inputProps), "Savings Account"),
-                    react_1.default.createElement(RadioButton_1.RadioButton, __assign({ value: "checking", tooltip: "Perfect for daily transactions and bill payments" }, inputProps), "Checking Account"),
-                    react_1.default.createElement(RadioButton_1.RadioButton, __assign({ value: "investment", tooltip: "Ideal for growing your wealth through various investment options" }, inputProps), "Investment Account"))); }))),
+                react_1.default.createElement(RadioButtonInputGroup_1.RadioButtonInputGroup, { label: "Choose your account type", description: "Select the type of account that best suits your needs", name: "account-type", onChange: e => setAccountType(e.target.value), selectedValue: accountType }, inputProps => (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(RadioButton_1.RadioButton, { value: "savings", tooltip: "Best for long-term savings with higher interest rates", ...inputProps }, "Savings Account"),
+                    react_1.default.createElement(RadioButton_1.RadioButton, { value: "checking", tooltip: "Perfect for daily transactions and bill payments", ...inputProps }, "Checking Account"),
+                    react_1.default.createElement(RadioButton_1.RadioButton, { value: "investment", tooltip: "Ideal for growing your wealth through various investment options", ...inputProps }, "Investment Account")))))),
         react_1.default.createElement("div", { className: "ffe-grid__row", style: { marginTop: '2rem' } },
             react_1.default.createElement("div", { className: "ffe-grid__col--md-12 ffe-grid__col--sm-12" },
-                react_1.default.createElement(RadioButtonInputGroup_1.RadioButtonInputGroup, { label: "Payment frequency", name: "payment-frequency", onChange: function (e) { return setPaymentFreq(e.target.value); }, selectedValue: paymentFreq, inline: true }, function (inputProps) { return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(RadioButton_1.RadioButton, __assign({ value: "monthly" }, inputProps), "Monthly"),
-                    react_1.default.createElement(RadioButton_1.RadioButton, __assign({ value: "quarterly" }, inputProps), "Quarterly"),
-                    react_1.default.createElement(RadioButton_1.RadioButton, __assign({ value: "yearly" }, inputProps), "Yearly"))); })))));
-});
+                react_1.default.createElement(RadioButtonInputGroup_1.RadioButtonInputGroup, { label: "Payment frequency", name: "payment-frequency", onChange: e => setPaymentFreq(e.target.value), selectedValue: paymentFreq, inline: true }, inputProps => (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(RadioButton_1.RadioButton, { value: "monthly", ...inputProps }, "Monthly"),
+                    react_1.default.createElement(RadioButton_1.RadioButton, { value: "quarterly", ...inputProps }, "Quarterly"),
+                    react_1.default.createElement(RadioButton_1.RadioButton, { value: "yearly", ...inputProps }, "Yearly"))))))));
+};

package/lib/documentation/RadioSwitch-example.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -44,10 +33,10 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var RadioButtonInputGroup_1 = require("../RadioButtonInputGroup");
-var RadioSwitch_1 = require("../RadioSwitch");
-exports.default = (function () {
-    var _a = (0, react_1.useState)('yes'), selected = _a[0], setSelected = _a[1]; // Initialize with a default value
-    return (react_1.default.createElement(RadioButtonInputGroup_1.RadioButtonInputGroup, { label: "Do you want email notifications?", description: "Choose whether to receive email notifications for important updates", name: "email-notifications", onChange: function (e) { return setSelected(e.target.value); }, selectedValue: selected }, function (inputProps) { return (react_1.default.createElement(RadioSwitch_1.RadioSwitch, __assign({ leftLabel: "Yes", leftValue: "yes", rightLabel: "No", rightValue: "no" }, inputProps))); }));
-});
+const react_1 = __importStar(require("react"));
+const RadioButtonInputGroup_1 = require("../RadioButtonInputGroup");
+const RadioSwitch_1 = require("../RadioSwitch");
+exports.default = () => {
+    const [selected, setSelected] = (0, react_1.useState)('yes'); // Initialize with a default value
+    return (react_1.default.createElement(RadioButtonInputGroup_1.RadioButtonInputGroup, { label: "Do you want email notifications?", description: "Choose whether to receive email notifications for important updates", name: "email-notifications", onChange: e => setSelected(e.target.value), selectedValue: selected }, inputProps => (react_1.default.createElement(RadioSwitch_1.RadioSwitch, { leftLabel: "Yes", leftValue: "yes", rightLabel: "No", rightValue: "no", ...inputProps }))));
+};

package/lib/i18n/i18n.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var en_1 = __importDefault(require("./en"));
-var nn_1 = __importDefault(require("./nn"));
-var nb_1 = __importDefault(require("./nb"));
+const en_1 = __importDefault(require("./en"));
+const nn_1 = __importDefault(require("./nn"));
+const nb_1 = __importDefault(require("./nb"));
 exports.default = {
     nb: nb_1.default,
     nn: nn_1.default,

package/lib/message/BaseFieldMessage.js

@@ -1,45 +1,23 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseFieldMessage = void 0;
-var react_1 = __importDefault(require("react"));
-var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
-var classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * Internal factory component
  * @ignore
  */
-var BaseFieldMessage = function (props) {
-    var children = props.children, className = props.className, _a = props.as, Comp = _a === void 0 ? 'div' : _a, type = props.type, _b = props.role, role = _b === void 0 ? 'status' : _b, rest = __rest(props, ["children", "className", "as", "type", "role"]);
-    var priorityHighIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+';
-    var checkIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0zOTUtMzcyLjM4NCAyNzAuNTM5LTI2OS41MzhxNy45MjMtNy45MjMgMTcuNjkyLTcuNjE2IDkuNzY5LjMwOCAxOC4wNzYgOC42MTYgOC4zMDggOC4zMDcgOC4zMDggMTcuODg0IDAgOS41NzYtOC4zMDggMTcuODg0bC0yODMgMjgyLjk5OXEtOS44NDYgOS44NDYtMjIuODA3IDkuODQ2LTEyLjk2MSAwLTIyLjgwNy05Ljg0NmwtMTE0LTExMy45OTlxLTcuOTIzLTcuOTIzLTguMzA4LTE3LjY5Mi0uMzg0LTkuNzY5IDcuOTIzLTE4LjA3NiA4LjMwOC04LjMwOCAxNy44ODQtOC4zMDggOS41NzcgMCAxNy44ODQgOC4zMDhMMzk1LTM3Mi4zODRaIi8+PC9zdmc+';
-    var infoIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg==';
-    return (react_1.default.createElement(Comp, __assign({ className: (0, classnames_1.default)("ffe-field-message", "ffe-field-message--".concat(type), className), role: role }, rest),
-        react_1.default.createElement("span", { className: (0, classnames_1.default)("ffe-field-message__icon", "ffe-field-message__icon--".concat(type, "'")) }, (function () {
+const BaseFieldMessage = props => {
+    const { children, className, as: Comp = 'div', type, role = 'status', ...rest } = props;
+    const priorityHighIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+';
+    const checkIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0zOTUtMzcyLjM4NCAyNzAuNTM5LTI2OS41MzhxNy45MjMtNy45MjMgMTcuNjkyLTcuNjE2IDkuNzY5LjMwOCAxOC4wNzYgOC42MTYgOC4zMDggOC4zMDcgOC4zMDggMTcuODg0IDAgOS41NzYtOC4zMDggMTcuODg0bC0yODMgMjgyLjk5OXEtOS44NDYgOS44NDYtMjIuODA3IDkuODQ2LTEyLjk2MSAwLTIyLjgwNy05Ljg0NmwtMTE0LTExMy45OTlxLTcuOTIzLTcuOTIzLTguMzA4LTE3LjY5Mi0uMzg0LTkuNzY5IDcuOTIzLTE4LjA3NiA4LjMwOC04LjMwOCAxNy44ODQtOC4zMDggOS41NzcgMCAxNy44ODQgOC4zMDhMMzk1LTM3Mi4zODRaIi8+PC9zdmc+';
+    const infoIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg==';
+    return (react_1.default.createElement(Comp, { className: (0, classnames_1.default)(`ffe-field-message`, `ffe-field-message--${type}`, className), role: role, ...rest },
+        react_1.default.createElement("span", { className: (0, classnames_1.default)(`ffe-field-message__icon`, `ffe-field-message__icon--${type}'`) }, (() => {
             switch (type) {
                 case 'error':
                     return (react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: priorityHighIcon, ariaLabel: "Utropstegn", size: "sm" }));

package/lib/message/ErrorFieldMessage.js

@@ -1,35 +1,12 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorFieldMessage = void 0;
-var react_1 = __importDefault(require("react"));
-var BaseFieldMessage_1 = require("./BaseFieldMessage");
-var ErrorFieldMessage = function (_a) {
-    var _b = _a.role, role = _b === void 0 ? 'alert' : _b, rest = __rest(_a, ["role"]);
-    return react_1.default.createElement(BaseFieldMessage_1.BaseFieldMessage, __assign({ role: role }, rest, { type: "error" }));
+const react_1 = __importDefault(require("react"));
+const BaseFieldMessage_1 = require("./BaseFieldMessage");
+const ErrorFieldMessage = ({ role = 'alert', ...rest }) => {
+    return react_1.default.createElement(BaseFieldMessage_1.BaseFieldMessage, { role: role, ...rest, type: "error" });
 };
 exports.ErrorFieldMessage = ErrorFieldMessage;

package/lib/message/InfoFieldMessage.js

@@ -1,35 +1,12 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoFieldMessage = void 0;
-var react_1 = __importDefault(require("react"));
-var BaseFieldMessage_1 = require("./BaseFieldMessage");
-var InfoFieldMessage = function (_a) {
-    var rest = __rest(_a, []);
-    return react_1.default.createElement(BaseFieldMessage_1.BaseFieldMessage, __assign({ role: "none" }, rest, { type: "info" }));
+const react_1 = __importDefault(require("react"));
+const BaseFieldMessage_1 = require("./BaseFieldMessage");
+const InfoFieldMessage = ({ ...rest }) => {
+    return react_1.default.createElement(BaseFieldMessage_1.BaseFieldMessage, { role: "none", ...rest, type: "info" });
 };
 exports.InfoFieldMessage = InfoFieldMessage;

package/lib/message/SuccessFieldMessage.js

@@ -1,35 +1,12 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SuccessFieldMessage = void 0;
-var react_1 = __importDefault(require("react"));
-var BaseFieldMessage_1 = require("./BaseFieldMessage");
-var SuccessFieldMessage = function (_a) {
-    var rest = __rest(_a, []);
-    return react_1.default.createElement(BaseFieldMessage_1.BaseFieldMessage, __assign({ role: "none" }, rest, { type: "success" }));
+const react_1 = __importDefault(require("react"));
+const BaseFieldMessage_1 = require("./BaseFieldMessage");
+const SuccessFieldMessage = ({ ...rest }) => {
+    return react_1.default.createElement(BaseFieldMessage_1.BaseFieldMessage, { role: "none", ...rest, type: "success" });
 };
 exports.SuccessFieldMessage = SuccessFieldMessage;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-form-react",
-    "version": "100.12.3",
+    "version": "101.0.0",
     "description": "React component for form elements in ffe",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -25,14 +25,14 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-collapse-react": "^100.12.3",
-        "@sb1/ffe-form": "^100.12.3",
-        "@sb1/ffe-icons-react": "^100.12.3",
-        "classnames": "^2.3.1"
+        "@sb1/ffe-collapse-react": "^101.0.0",
+        "@sb1/ffe-form": "^101.0.0",
+        "@sb1/ffe-icons-react": "^101.0.0",
+        "classnames": "^2.5.1"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.12.3",
-        "eslint": "^9.22.0",
+        "@sb1/ffe-buildtool": "^101.0.0",
+        "eslint": "^10.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
@@ -42,5 +42,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c250edc3d20e5ed115c5c5951495d700e96a3be3"
+    "gitHead": "7714019dbb9001551cb5d1c262c58afd609d4fb0"
 }

package/types/TextField.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-export interface TextFieldProps extends React.ComponentPropsWithoutRef<'input'> {
+export interface TextFieldProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'suffix'> {
     /** Text fields default to `display: block;`. Set this to `true` to apply the inline modifier. */
     inline?: boolean;
     /** Make the text right aligned */
     textRightAlign?: boolean;
     /** Add a prefix inside the input */
-    prefix?: string;
+    prefix?: React.ReactNode;
     /** Add a suffix inside the input */
-    suffix?: string;
+    suffix?: React.ReactNode;
 }
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;