@availity/mui-feedback 2.0.6 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [3.0.0](https://github.com/Availity/element/compare/@availity/mui-feedback@2.0.6...@availity/mui-feedback@3.0.0) (2026-06-16)
+
+### Dependency Updates
+
+* `mui-button` updated to version `2.0.6`
+* `mui-form-utils` updated to version `2.0.6`
+* `mui-icon` updated to version `2.0.6`
+* `mui-layout` updated to version `2.0.6`
+* `mui-popover` updated to version `2.0.6`
+* `mui-textfield` updated to version `2.0.6`
+* `mui-toggle-button` updated to version `2.0.6`
+* `mui-typography` updated to version `2.0.6`
+
+### ⚠ BREAKING CHANGES
+
+* CJS builds removed, packages are ESM-only.
+
+- Convert all packages to ESM (type: module)
+- Replace Jest with Vitest for all test targets
+- Migrate ESLint to v9 flat config (eslint.config.js)
+- Build output ESM-only (removed CJS dist/index.js require path)
+- Upgrade @tanstack/react-query from v4 to v5
+- Upgrade @availity/api-axios to v13
+- Drop Node 20 support (engines: ^22.0.0 || ^24.0.0)
+- Bump React to 19.2.7, MUI to 7.3.11, TypeScript to 5.9.3
+- Simplify CI caching with built-in yarn cache action + Nx cache
+- Modernize nx.json configuration
+- Update husky hooks to use yarn directly
+- Replace lint-staged nx affected with direct eslint
+
+### Features
+
+* migrate to ESM, Vitest, and ESLint 9 flat config ([cc22bb4](https://github.com/Availity/element/commit/cc22bb4a230bc1f3b190f187c4e61249d015b25b))
+
 ## [2.0.6](https://github.com/Availity/element/compare/@availity/mui-feedback@2.0.5...@availity/mui-feedback@2.0.6) (2026-05-27)
 
 ### Dependency Updates

package/dist/index.js

@@ -1,127 +1,40 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Feedback: () => Feedback
-});
-module.exports = __toCommonJS(index_exports);
-
 // src/lib/Feedback.tsx
-var import_react2 = require("react");
-var import_mui_popover = require("@availity/mui-popover");
-var import_mui_button3 = require("@availity/mui-button");
-var import_Container = __toESM(require("@mui/material/Container"));
-var import_styles3 = require("@mui/material/styles");
-var import_api_axios2 = require("@availity/api-axios");
+import { useState } from "react";
+import { Popover } from "@availity/mui-popover";
+import { Button as Button2 } from "@availity/mui-button";
+import Container from "@mui/material/Container";
+import { styled as styled3 } from "@mui/material/styles";
+import { avLogMessagesApiV2 } from "@availity/api-axios";
+import { CommentsIcon } from "@availity/mui-icon";
 
 // src/lib/FeedbackForm.tsx
-var import_react = require("react");
-var import_mui_textfield = require("@availity/mui-textfield");
-var import_mui_button = require("@availity/mui-button");
-var import_mui_toggle_button = require("@availity/mui-toggle-button");
-var import_mui_layout = require("@availity/mui-layout");
-var import_styles = require("@mui/material/styles");
-var import_mui_icon = require("@availity/mui-icon");
-var import_mui_form_utils = require("@availity/mui-form-utils");
-var import_api_axios = require("@availity/api-axios");
-var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime = require("react/jsx-runtime");
-var SmileButtons = (0, import_styles.styled)(import_mui_toggle_button.ToggleButtonGroup, { name: "AvFeedbackContainer", slot: "SmileButtons" })({});
-var FormActions = (0, import_styles.styled)(import_mui_layout.Grid, { name: "AvFeedbackContainer", slot: "FormActions" })({});
-var SmileButton = (_a) => {
-  var _b = _a, { disabled, Icon, label, value } = _b, props = __objRest(_b, ["disabled", "Icon", "label", "value"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_mui_toggle_button.ToggleButton,
-    __spreadProps(__spreadValues({
-      component: import_mui_button.IconButton,
-      disableRipple: true,
-      title: label,
-      "aria-label": value,
-      value
-    }, props), {
-      disabled,
-      size: "large",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
-    })
-  ) });
-};
+import { useEffect } from "react";
+import { TextField } from "@availity/mui-textfield";
+import { LoadingButton, Button, IconButton } from "@availity/mui-button";
+import { ToggleButtonGroup, ToggleButton } from "@availity/mui-toggle-button";
+import { Grid } from "@availity/mui-layout";
+import { styled } from "@mui/material/styles";
+import { FaceFrownIcon, FaceNeutralIcon, FaceSmileIcon } from "@availity/mui-icon";
+import { FormLabel } from "@availity/mui-form-utils";
+import { avRegionsApi } from "@availity/api-axios";
+import { useForm, Controller } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SmileButtons = styled(ToggleButtonGroup, { name: "AvFeedbackContainer", slot: "SmileButtons" })({});
+var FormActions = styled(Grid, { name: "AvFeedbackContainer", slot: "FormActions" })({});
+var SmileButton = ({ disabled, Icon, label, value, ...props }) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+  ToggleButton,
+  {
+    component: IconButton,
+    disableRipple: true,
+    title: label,
+    "aria-label": value,
+    value,
+    ...props,
+    disabled,
+    size: "large",
+    children: /* @__PURE__ */ jsx(Icon, {})
+  }
+) });
 var FeedbackForm = ({
   analytics,
   appName,
@@ -131,7 +44,6 @@ var FeedbackForm = ({
   setLoading,
   setSent
 }) => {
-  var _c;
   const {
     control,
     formState: { errors },
@@ -139,29 +51,30 @@ var FeedbackForm = ({
     register,
     setValue,
     watch
-  } = (0, import_react_hook_form.useForm)();
-  const onSubmit = (_a) => __async(null, null, function* () {
-    var _b = _a, { smileField } = _b, values = __objRest(_b, ["smileField"]);
+  } = useForm();
+  const onSubmit = async ({ smileField, ...values }) => {
     setLoading(true);
     try {
-      const response = yield import_api_axios.avRegionsApi.getCurrentRegion();
-      yield analytics.info(__spreadValues({
-        surveyId: `${appName.replace(/\s/g, "_")}_Smile_Survey`,
+      const response = await avRegionsApi.getCurrentRegion();
+      await analytics.info({
+        surveyId: `${appName.replaceAll(/\s/g, "_")}_Smile_Survey`,
         smileLocation: `${appName}`,
         smile: `icon-${smileField}`,
         url: window.location.href,
         region: response.data.regions[0] && response.data.regions[0].id,
         userAgent: window.navigator.userAgent,
-        submitTime: /* @__PURE__ */ new Date()
-      }, values));
+        submitTime: /* @__PURE__ */ new Date(),
+        ...values
+        // Spread the form values onto the logger
+      });
       setSent(true);
       setLoading(false);
-    } catch (e) {
+    } catch {
       setSent(false);
       setLoading(false);
     }
-  });
-  (0, import_react.useEffect)(() => {
+  };
+  useEffect(() => {
     if (sent) {
       setTimeout(() => {
         handleClose();
@@ -170,25 +83,25 @@ var FeedbackForm = ({
   }, [sent]);
   const options = [
     {
-      Icon: import_mui_icon.FaceSmileIcon,
+      Icon: FaceSmileIcon,
       label: "What do you like?",
       value: "smile"
     },
     {
-      Icon: import_mui_icon.FaceNeutralIcon,
+      Icon: FaceNeutralIcon,
       label: "What would you improve?",
       value: "meh"
     },
-    { Icon: import_mui_icon.FaceFrownIcon, label: "What don't you like?", value: "frown" }
+    { Icon: FaceFrownIcon, label: "What don't you like?", value: "frown" }
   ];
   const smileFieldValue = watch("smileField");
   const getFeedbackLabel = () => {
     const option = options.find((option2) => option2.value === smileFieldValue);
-    return (option == null ? void 0 : option.label) || "What would you improve?";
+    return option?.label || "What would you improve?";
   };
   if (!sent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_mui_layout.Grid,
+    return /* @__PURE__ */ jsxs(
+      Grid,
       {
         component: "form",
         container: true,
@@ -197,100 +110,95 @@ var FeedbackForm = ({
         "aria-label": "Feedback Form",
         "aria-describedby": "feedback-form-header",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_hook_form.Controller,
+          /* @__PURE__ */ jsx(
+            Controller,
             {
               control,
               name: "smileField",
-              render: ({ field }) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  SmileButtons,
-                  __spreadProps(__spreadValues({
-                    children: options.map((props, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SmileButton, __spreadValues({ autoFocus: index === 0, disabled: loading }, props), props.value))
-                  }, field), {
-                    "aria-labelledby": "feedback-form-header",
-                    onChange: (event, value) => {
-                      setValue(field.name, value);
-                    },
-                    size: "medium",
-                    exclusive: true
-                  })
-                );
-              }
+              render: ({ field }) => /* @__PURE__ */ jsx(
+                SmileButtons,
+                {
+                  children: options.map((props, index) => /* @__PURE__ */ jsx(SmileButton, { autoFocus: index === 0, disabled: loading, ...props }, props.value)),
+                  ...field,
+                  "aria-labelledby": "feedback-form-header",
+                  onChange: (event, value) => {
+                    setValue(field.name, value);
+                  },
+                  size: "medium",
+                  exclusive: true
+                }
+              )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_mui_textfield.TextField,
-            __spreadProps(__spreadValues({}, register("feedback", {
-              required: "This field is required",
-              maxLength: { value: 200, message: "This field must not exceed 200 characters" }
-            })), {
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              ...register("feedback", {
+                required: "This field is required",
+                maxLength: { value: 200, message: "This field must not exceed 200 characters" }
+              }),
               fullWidth: true,
               multiline: true,
               minRows: 3,
               maxRows: 3,
               label: getFeedbackLabel(),
               InputLabelProps: {
-                component: import_mui_form_utils.FormLabel,
+                component: FormLabel,
                 required: true
               },
               inputProps: { "aria-required": "true" },
-              helperText: ((_c = errors.feedback) == null ? void 0 : _c.message) || "Max 200 characters",
+              helperText: errors.feedback?.message || "Max 200 characters",
               error: !!errors.feedback,
               disabled: loading || !smileFieldValue
-            })
+            }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormActions, { container: true, direction: "row", width: "100%", spacing: 1, wrap: "wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.LoadingButton, { disabled: !smileFieldValue, loading, type: "submit", children: "Send Feedback" }) })
+          /* @__PURE__ */ jsxs(FormActions, { container: true, direction: "row", width: "100%", spacing: 1, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ jsx(Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
+            /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ jsx(LoadingButton, { disabled: !smileFieldValue, loading, type: "submit", children: "Send Feedback" }) })
           ] })
         ]
       }
     );
-  } else {
-    return null;
   }
+  return null;
 };
 
 // src/lib/FeedbackHeader.tsx
-var import_mui_button2 = require("@availity/mui-button");
-var import_mui_icon2 = require("@availity/mui-icon");
-var import_mui_typography = require("@availity/mui-typography");
-var import_mui_layout2 = require("@availity/mui-layout");
-var import_styles2 = require("@mui/material/styles");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FeedbackHeaderContainer = (0, import_styles2.styled)(import_mui_layout2.Grid, { name: "AvFeedbackContainer", slot: "FeedbackHeaderContainer" })({});
-var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    FeedbackHeaderContainer,
-    {
-      alignItems: "flex-start",
-      container: true,
-      direction: "row",
-      justifyContent: "space-between",
-      flexWrap: "nowrap",
-      id: "feedback-form-header",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout2.Grid, { sx: { whiteSpace: "normal" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout2.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_button2.IconButton, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.CloseIcon, { fontSize: "xsmall" }) }) })
-      ]
-    }
-  );
-};
+import { IconButton as IconButton2 } from "@availity/mui-button";
+import { CloseIcon } from "@availity/mui-icon";
+import { Typography } from "@availity/mui-typography";
+import { Grid as Grid2 } from "@availity/mui-layout";
+import { styled as styled2 } from "@mui/material/styles";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FeedbackHeaderContainer = styled2(Grid2, { name: "AvFeedbackContainer", slot: "FeedbackHeaderContainer" })({});
+var FeedbackHeader = ({ appName, handleClose, loading, sent }) => /* @__PURE__ */ jsxs2(
+  FeedbackHeaderContainer,
+  {
+    alignItems: "flex-start",
+    container: true,
+    direction: "row",
+    justifyContent: "space-between",
+    flexWrap: "nowrap",
+    id: "feedback-form-header",
+    children: [
+      /* @__PURE__ */ jsx2(Grid2, { sx: { whiteSpace: "normal" }, children: /* @__PURE__ */ jsx2(Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
+      /* @__PURE__ */ jsx2(Grid2, { children: /* @__PURE__ */ jsx2(IconButton2, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ jsx2(CloseIcon, { fontSize: "xsmall" }) }) })
+    ]
+  }
+);
 
 // src/lib/Feedback.tsx
-var import_mui_icon3 = require("@availity/mui-icon");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var FeedbackContainer = (0, import_styles3.styled)(import_Container.default, { name: "AvFeedbackContainer", slot: "root" })({});
-var FeedbackButton = (0, import_styles3.styled)(import_mui_button3.Button, { name: "AvFeedbackButton", slot: "root" })({});
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FeedbackContainer = styled3(Container, { name: "AvFeedbackContainer", slot: "root" })({});
+var FeedbackButton = styled3(Button2, { name: "AvFeedbackButton", slot: "root" })({});
 var Feedback = ({
-  analytics = import_api_axios2.avLogMessagesApiV2,
+  analytics = avLogMessagesApiV2,
   appName,
   buttonVariant = "secondary"
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
-  const [sent, setSent] = (0, import_react2.useState)(false);
-  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [sent, setSent] = useState(false);
+  const [loading, setLoading] = useState(false);
   const handlePopoverOpen = (event) => {
     setAnchorEl(event.currentTarget);
     setSent(false);
@@ -299,10 +207,10 @@ var Feedback = ({
     setAnchorEl(null);
   };
   const open = Boolean(anchorEl);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FeedbackButton, { onClick: handlePopoverOpen, color: buttonVariant, startIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_icon3.CommentsIcon, {}), children: "Feedback" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_mui_popover.Popover,
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(FeedbackButton, { onClick: handlePopoverOpen, color: buttonVariant, startIcon: /* @__PURE__ */ jsx3(CommentsIcon, {}), children: "Feedback" }),
+    /* @__PURE__ */ jsx3(
+      Popover,
       {
         anchorEl,
         anchorOrigin: {
@@ -317,9 +225,9 @@ var Feedback = ({
           vertical: "top",
           horizontal: "right"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FeedbackContainer, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FeedbackHeader, { appName, handleClose: handlePopoverClose, loading, sent }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        children: /* @__PURE__ */ jsxs3(FeedbackContainer, { children: [
+          /* @__PURE__ */ jsx3(FeedbackHeader, { appName, handleClose: handlePopoverClose, loading, sent }),
+          /* @__PURE__ */ jsx3(
             FeedbackForm,
             {
               analytics,
@@ -336,7 +244,6 @@ var Feedback = ({
     )
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   Feedback
-});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-feedback",
-  "version": "2.0.6",
+  "version": "3.0.0",
   "description": "Availity MUI Feedback Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -21,30 +21,28 @@
   "author": "Availity Developers <AVOSS@availity.com>",
   "browser": "./dist/index.js",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts",
-    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "build": "tsup src/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts --format esm --watch --dts",
     "clean": "rm -rf dist",
     "clean:nm": "rm -rf node_modules",
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
-    "@mui/material": "^7.3.4",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "tsup": "^8.4.0",
-    "typescript": "^5.4.5"
+    "@mui/material": "^7.3.11",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "@mui/material": "^7.0.0",
@@ -54,16 +52,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@availity/api-axios": "^12.2.1",
-    "@availity/mui-button": "^2.0.2",
-    "@availity/mui-form-utils": "^2.0.6",
-    "@availity/mui-icon": "^2.1.0",
-    "@availity/mui-layout": "^2.0.1",
-    "@availity/mui-popover": "^2.0.1",
-    "@availity/mui-textfield": "^2.0.6",
-    "@availity/mui-toggle-button": "^2.0.2",
-    "@availity/mui-typography": "^2.0.1",
-    "react-hook-form": "^7.55.0"
+    "@availity/api-axios": "^13.2.0",
+    "@availity/mui-button": "^3.0.0",
+    "@availity/mui-form-utils": "^3.0.0",
+    "@availity/mui-icon": "^3.0.0",
+    "@availity/mui-layout": "^3.0.0",
+    "@availity/mui-popover": "^3.0.0",
+    "@availity/mui-textfield": "^3.0.0",
+    "@availity/mui-toggle-button": "^3.0.0",
+    "@availity/mui-typography": "^3.0.0",
+    "react-hook-form": "^7.79.0"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "type": "module"
 }

package/project.json

@@ -8,23 +8,20 @@
     "lint": {
       "executor": "@nx/eslint:lint",
       "options": {
-        "eslintConfig": ".eslintrc.json",
         "silent": false,
         "fix": false,
         "cache": true,
         "cacheLocation": "./node_modules/.cache/feedback/.eslintcache",
         "maxWarnings": -1,
         "quiet": false,
-        "noEslintrc": false,
         "hasTypeAwareRules": true,
         "cacheStrategy": "metadata"
       }
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/feedback"],
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "packages/feedback/jest.config.js"
+        "command": "vitest run packages/feedback"
       }
     },
     "version": {
@@ -34,7 +31,9 @@
         "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
         "tagPrefix": "@availity/{projectName}@",
         "trackDeps": true,
-        "skipCommitTypes": ["docs"]
+        "skipCommitTypes": [
+          "docs"
+        ]
       }
     }
   }

package/src/lib/Feedback.tsx

@@ -4,9 +4,9 @@ import { Button } from '@availity/mui-button';
 import Container from '@mui/material/Container';
 import { styled } from '@mui/material/styles';
 import { avLogMessagesApiV2 } from '@availity/api-axios';
+import { CommentsIcon } from '@availity/mui-icon';
 import { FeedbackForm } from './FeedbackForm';
 import { FeedbackHeader } from './FeedbackHeader';
-import { CommentsIcon } from '@availity/mui-icon';
 
 export interface FeedbackProps {
   analytics?: { info: (entries: Record<string, unknown>) => void };

package/src/lib/FeedbackForm.test.tsx

@@ -1,10 +1,10 @@
 import { render, fireEvent } from '@testing-library/react';
 import { FeedbackForm } from './FeedbackForm';
 
-const analytics = { info: jest.fn() };
-const handleClose = jest.fn();
-const setLoading = jest.fn();
-const setSent = jest.fn();
+const analytics = { info: vi.fn() };
+const handleClose = vi.fn();
+const setLoading = vi.fn();
+const setSent = vi.fn();
 
 describe('Feedback', () => {
   test('should render Send Feedback button disabled', () => {

package/src/lib/FeedbackForm.tsx

@@ -38,7 +38,7 @@ const SmileButtons = styled(ToggleButtonGroup, { name: 'AvFeedbackContainer', sl
 
 const FormActions = styled(Grid, { name: 'AvFeedbackContainer', slot: 'FormActions' })({});
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ 
 const SmileButton = ({ disabled, Icon, label, value, ...props }: SmileButtonProps) => (
   <div>
     <ToggleButton
@@ -80,7 +80,7 @@ export const FeedbackForm = ({
       const response = await avRegionsApi.getCurrentRegion();
 
       await analytics.info({
-        surveyId: `${appName.replace(/\s/g, '_')}_Smile_Survey`,
+        surveyId: `${appName.replaceAll(/\s/g, '_')}_Smile_Survey`,
         smileLocation: `${appName}`,
         smile: `icon-${smileField}`,
         url: window.location.href,
@@ -140,8 +140,7 @@ export const FeedbackForm = ({
         <Controller
           control={control}
           name="smileField"
-          render={({ field }) => {
-            return (
+          render={({ field }) => (
               <SmileButtons
                 children={options.map((props, index) => (
                   <SmileButton autoFocus={index === 0} disabled={loading} key={props.value} {...props} />
@@ -154,8 +153,7 @@ export const FeedbackForm = ({
                 size="medium"
                 exclusive
               />
-            );
-          }}
+            )}
         />
         <TextField
           {...register('feedback', {
@@ -190,7 +188,7 @@ export const FeedbackForm = ({
         </FormActions>
       </Grid>
     );
-  } else {
+  } 
     return null;
-  }
+  
 };

package/src/lib/FeedbackHeader.test.tsx

@@ -3,7 +3,7 @@ import { FeedbackHeader } from './FeedbackHeader';
 
 describe('FeedbackHeader', () => {
   test('should render successfully', () => {
-    const handleClose = jest.fn();
+    const handleClose = vi.fn();
     const { getByText, getByLabelText } = render(
       <FeedbackHeader appName="This App" handleClose={handleClose} loading={false} sent={false} />
     );
@@ -18,9 +18,9 @@ describe('FeedbackHeader', () => {
   });
 
   test('should render sent text successfully', () => {
-    const handleClose = jest.fn();
+    const handleClose = vi.fn();
     const { getByText } = render(
-      <FeedbackHeader appName="This App" handleClose={handleClose} loading={false} sent={true} />
+      <FeedbackHeader appName="This App" handleClose={handleClose} loading={false} sent />
     );
 
     expect(getByText('Thank you for your feedback.')).toBeTruthy();

package/src/lib/FeedbackHeader.tsx

@@ -13,8 +13,7 @@ interface FeedbackHeaderProps {
 
 const FeedbackHeaderContainer = styled(Grid, { name: 'AvFeedbackContainer', slot: 'FeedbackHeaderContainer' })({});
 
-export const FeedbackHeader = ({ appName, handleClose, loading, sent }: FeedbackHeaderProps): React.JSX.Element => {
-  return (
+export const FeedbackHeader = ({ appName, handleClose, loading, sent }: FeedbackHeaderProps): React.JSX.Element => (
     <FeedbackHeaderContainer
       alignItems="flex-start"
       container
@@ -35,4 +34,3 @@ export const FeedbackHeader = ({ appName, handleClose, loading, sent }: Feedback
       </Grid>
     </FeedbackHeaderContainer>
   );
-};

package/dist/index.d.mts

@@ -1,10 +0,0 @@
-interface FeedbackProps {
-    analytics?: {
-        info: (entries: Record<string, unknown>) => void;
-    };
-    appName: string;
-    buttonVariant?: 'secondary' | 'tertiary';
-}
-declare const Feedback: ({ analytics, appName, buttonVariant, }: FeedbackProps) => React.JSX.Element;
-
-export { Feedback, type FeedbackProps };

package/dist/index.mjs

@@ -1,308 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/lib/Feedback.tsx
-import { useState } from "react";
-import { Popover } from "@availity/mui-popover";
-import { Button as Button2 } from "@availity/mui-button";
-import Container from "@mui/material/Container";
-import { styled as styled3 } from "@mui/material/styles";
-import { avLogMessagesApiV2 } from "@availity/api-axios";
-
-// src/lib/FeedbackForm.tsx
-import { useEffect } from "react";
-import { TextField } from "@availity/mui-textfield";
-import { LoadingButton, Button, IconButton } from "@availity/mui-button";
-import { ToggleButtonGroup, ToggleButton } from "@availity/mui-toggle-button";
-import { Grid } from "@availity/mui-layout";
-import { styled } from "@mui/material/styles";
-import { FaceFrownIcon, FaceNeutralIcon, FaceSmileIcon } from "@availity/mui-icon";
-import { FormLabel } from "@availity/mui-form-utils";
-import { avRegionsApi } from "@availity/api-axios";
-import { useForm, Controller } from "react-hook-form";
-import { jsx, jsxs } from "react/jsx-runtime";
-var SmileButtons = styled(ToggleButtonGroup, { name: "AvFeedbackContainer", slot: "SmileButtons" })({});
-var FormActions = styled(Grid, { name: "AvFeedbackContainer", slot: "FormActions" })({});
-var SmileButton = (_a) => {
-  var _b = _a, { disabled, Icon, label, value } = _b, props = __objRest(_b, ["disabled", "Icon", "label", "value"]);
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-    ToggleButton,
-    __spreadProps(__spreadValues({
-      component: IconButton,
-      disableRipple: true,
-      title: label,
-      "aria-label": value,
-      value
-    }, props), {
-      disabled,
-      size: "large",
-      children: /* @__PURE__ */ jsx(Icon, {})
-    })
-  ) });
-};
-var FeedbackForm = ({
-  analytics,
-  appName,
-  handleClose,
-  loading,
-  sent,
-  setLoading,
-  setSent
-}) => {
-  var _c;
-  const {
-    control,
-    formState: { errors },
-    handleSubmit,
-    register,
-    setValue,
-    watch
-  } = useForm();
-  const onSubmit = (_a) => __async(null, null, function* () {
-    var _b = _a, { smileField } = _b, values = __objRest(_b, ["smileField"]);
-    setLoading(true);
-    try {
-      const response = yield avRegionsApi.getCurrentRegion();
-      yield analytics.info(__spreadValues({
-        surveyId: `${appName.replace(/\s/g, "_")}_Smile_Survey`,
-        smileLocation: `${appName}`,
-        smile: `icon-${smileField}`,
-        url: window.location.href,
-        region: response.data.regions[0] && response.data.regions[0].id,
-        userAgent: window.navigator.userAgent,
-        submitTime: /* @__PURE__ */ new Date()
-      }, values));
-      setSent(true);
-      setLoading(false);
-    } catch (e) {
-      setSent(false);
-      setLoading(false);
-    }
-  });
-  useEffect(() => {
-    if (sent) {
-      setTimeout(() => {
-        handleClose();
-      }, 2e3);
-    }
-  }, [sent]);
-  const options = [
-    {
-      Icon: FaceSmileIcon,
-      label: "What do you like?",
-      value: "smile"
-    },
-    {
-      Icon: FaceNeutralIcon,
-      label: "What would you improve?",
-      value: "meh"
-    },
-    { Icon: FaceFrownIcon, label: "What don't you like?", value: "frown" }
-  ];
-  const smileFieldValue = watch("smileField");
-  const getFeedbackLabel = () => {
-    const option = options.find((option2) => option2.value === smileFieldValue);
-    return (option == null ? void 0 : option.label) || "What would you improve?";
-  };
-  if (!sent) {
-    return /* @__PURE__ */ jsxs(
-      Grid,
-      {
-        component: "form",
-        container: true,
-        sx: { justifyContent: "center" },
-        onSubmit: handleSubmit(onSubmit),
-        "aria-label": "Feedback Form",
-        "aria-describedby": "feedback-form-header",
-        children: [
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control,
-              name: "smileField",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsx(
-                  SmileButtons,
-                  __spreadProps(__spreadValues({
-                    children: options.map((props, index) => /* @__PURE__ */ jsx(SmileButton, __spreadValues({ autoFocus: index === 0, disabled: loading }, props), props.value))
-                  }, field), {
-                    "aria-labelledby": "feedback-form-header",
-                    onChange: (event, value) => {
-                      setValue(field.name, value);
-                    },
-                    size: "medium",
-                    exclusive: true
-                  })
-                );
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TextField,
-            __spreadProps(__spreadValues({}, register("feedback", {
-              required: "This field is required",
-              maxLength: { value: 200, message: "This field must not exceed 200 characters" }
-            })), {
-              fullWidth: true,
-              multiline: true,
-              minRows: 3,
-              maxRows: 3,
-              label: getFeedbackLabel(),
-              InputLabelProps: {
-                component: FormLabel,
-                required: true
-              },
-              inputProps: { "aria-required": "true" },
-              helperText: ((_c = errors.feedback) == null ? void 0 : _c.message) || "Max 200 characters",
-              error: !!errors.feedback,
-              disabled: loading || !smileFieldValue
-            })
-          ),
-          /* @__PURE__ */ jsxs(FormActions, { container: true, direction: "row", width: "100%", spacing: 1, wrap: "wrap", children: [
-            /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ jsx(Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
-            /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ jsx(LoadingButton, { disabled: !smileFieldValue, loading, type: "submit", children: "Send Feedback" }) })
-          ] })
-        ]
-      }
-    );
-  } else {
-    return null;
-  }
-};
-
-// src/lib/FeedbackHeader.tsx
-import { IconButton as IconButton2 } from "@availity/mui-button";
-import { CloseIcon } from "@availity/mui-icon";
-import { Typography } from "@availity/mui-typography";
-import { Grid as Grid2 } from "@availity/mui-layout";
-import { styled as styled2 } from "@mui/material/styles";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var FeedbackHeaderContainer = styled2(Grid2, { name: "AvFeedbackContainer", slot: "FeedbackHeaderContainer" })({});
-var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
-  return /* @__PURE__ */ jsxs2(
-    FeedbackHeaderContainer,
-    {
-      alignItems: "flex-start",
-      container: true,
-      direction: "row",
-      justifyContent: "space-between",
-      flexWrap: "nowrap",
-      id: "feedback-form-header",
-      children: [
-        /* @__PURE__ */ jsx2(Grid2, { sx: { whiteSpace: "normal" }, children: /* @__PURE__ */ jsx2(Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
-        /* @__PURE__ */ jsx2(Grid2, { children: /* @__PURE__ */ jsx2(IconButton2, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ jsx2(CloseIcon, { fontSize: "xsmall" }) }) })
-      ]
-    }
-  );
-};
-
-// src/lib/Feedback.tsx
-import { CommentsIcon } from "@availity/mui-icon";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var FeedbackContainer = styled3(Container, { name: "AvFeedbackContainer", slot: "root" })({});
-var FeedbackButton = styled3(Button2, { name: "AvFeedbackButton", slot: "root" })({});
-var Feedback = ({
-  analytics = avLogMessagesApiV2,
-  appName,
-  buttonVariant = "secondary"
-}) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [sent, setSent] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const handlePopoverOpen = (event) => {
-    setAnchorEl(event.currentTarget);
-    setSent(false);
-  };
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
-  const open = Boolean(anchorEl);
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx3(FeedbackButton, { onClick: handlePopoverOpen, color: buttonVariant, startIcon: /* @__PURE__ */ jsx3(CommentsIcon, {}), children: "Feedback" }),
-    /* @__PURE__ */ jsx3(
-      Popover,
-      {
-        anchorEl,
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        sx: { marginTop: "4px" },
-        disableRestoreFocus: true,
-        onClose: handlePopoverClose,
-        open,
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
-        },
-        children: /* @__PURE__ */ jsxs3(FeedbackContainer, { children: [
-          /* @__PURE__ */ jsx3(FeedbackHeader, { appName, handleClose: handlePopoverClose, loading, sent }),
-          /* @__PURE__ */ jsx3(
-            FeedbackForm,
-            {
-              analytics,
-              appName,
-              handleClose: handlePopoverClose,
-              loading,
-              sent,
-              setLoading,
-              setSent
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-};
-export {
-  Feedback
-};

package/jest.config.js

@@ -1,17 +0,0 @@
-const global = require('../../jest.config.global');
-
-module.exports = {
-  ...global,
-  displayName: 'feedback',
-  coverageDirectory: '../../coverage/feedback',
-  /* TODO: Update to latest Jest snapshotFormat
-   * By default Nx has kept the older style of Jest Snapshot formats
-   * to prevent breaking of any existing tests with snapshots.
-   * It's recommend you update to the latest format.
-   * You can do this by removing snapshotFormat property
-   * and running tests with --update-snapshot flag.
-   * Example: From within the project directory, run "nx test --update-snapshot"
-   * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
-   */
-  snapshotFormat: { escapeString: true, printBasicPrototype: true },
-};

package/tsconfig.spec.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"],
-    "allowJs": true
-  },
-  "include": ["jest.config.ts", "**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
-}