@magmamath/students-features 1.7.10-rc.2 → 1.8.0-rc.0

package/dist/commonjs/features/fluency-teacher/assets/{SortDefaultIcon.js → DivisionIcon.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SortDefaultIcon = void 0;
+exports.DivisionIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _reactNativeUi = require("@magmamath/react-native-ui");
@@ -11,21 +11,24 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SortDefaultIcon = ({
+const DivisionIcon = ({
   color = _reactNativeUi.COLORS.NEUTRAL_9,
-  size = 10
+  size = 16
 }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
   width: size,
   height: size,
-  viewBox: "0 0 10 10",
+  viewBox: "0 0 16 16",
   fill: "none",
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-    d: "M5 1 L8 4 H2 Z",
+    d: "M8.0002 10.7996C8.82854 10.7996 9.50006 11.4713 9.5002 12.2996C9.5002 13.128 8.82862 13.7996 8.0002 13.7996C7.17177 13.7996 6.5002 13.128 6.5002 12.2996C6.50033 11.4713 7.17185 10.7996 8.0002 10.7996Z",
     fill: color
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-    d: "M5 9 L2 6 H8 Z",
+    d: "M14.4006 7.2C14.8423 7.20019 15.2004 7.55809 15.2004 7.9998C15.2004 8.4415 14.8422 8.79942 14.4006 8.79961H1.59981C1.15819 8.79937 0.800026 8.44146 0.8 7.9998C0.8 7.55812 1.15818 7.20024 1.5998 7.2H14.4006Z",
+    fill: color
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+    d: "M8.0002 2.2C8.82862 2.2 9.5002 2.87157 9.5002 3.7C9.50006 4.52831 8.82854 5.2 8.0002 5.2C7.17185 5.2 6.50033 4.52831 6.5002 3.7C6.5002 2.87157 7.17177 2.2 8.0002 2.2Z",
     fill: color
   })]
 });
-exports.SortDefaultIcon = SortDefaultIcon;
-//# sourceMappingURL=SortDefaultIcon.js.map
+exports.DivisionIcon = DivisionIcon;
+//# sourceMappingURL=DivisionIcon.js.map

package/dist/commonjs/features/fluency-teacher/assets/DivisionIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeSvg","_interopRequireWildcard","_reactNativeUi","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DivisionIcon","color","COLORS","NEUTRAL_9","size","jsxs","width","height","viewBox","fill","children","jsx","Path","d","exports"],"sourceRoot":"../../../../../src","sources":["features/fluency-teacher/assets/DivisionIcon.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAA8D,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAf,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAI,UAAA,GAAAJ,CAAA,KAAAK,OAAA,EAAAL,CAAA;AAEvD,MAAMmB,YAAY,GAAGA,CAAC;EAAEC,KAAK,GAAGC,qBAAM,CAACC,SAAS;EAAEC,IAAI,GAAG;AAAc,CAAC,kBAC7E,IAAAzB,WAAA,CAAA0B,IAAA,EAAC7B,eAAA,CAAAU,OAAG;EAACoB,KAAK,EAAEF,IAAK;EAACG,MAAM,EAAEH,IAAK;EAACI,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAAAC,QAAA,gBAC7D,IAAA/B,WAAA,CAAAgC,GAAA,EAACnC,eAAA,CAAAoC,IAAI;IACHC,CAAC,EAAC,0MAA0M;IAC5MJ,IAAI,EAAER;EAAM,CACb,CAAC,eACF,IAAAtB,WAAA,CAAAgC,GAAA,EAACnC,eAAA,CAAAoC,IAAI;IACHC,CAAC,EAAC,gNAAgN;IAClNJ,IAAI,EAAER;EAAM,CACb,CAAC,eACF,IAAAtB,WAAA,CAAAgC,GAAA,EAACnC,eAAA,CAAAoC,IAAI;IACHC,CAAC,EAAC,wKAAwK;IAC1KJ,IAAI,EAAER;EAAM,CACb,CAAC;AAAA,CACC,CACN;AAAAa,OAAA,CAAAd,YAAA,GAAAA,YAAA","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/FluencyTeacher.js

@@ -9,10 +9,10 @@ var _effectorReact = require("effector-react");
 var _reactNative = require("react-native");
 var _reactNativeUi = require("@magmamath/react-native-ui");
 var _FluencyTeacherStudentsTable = require("./table/FluencyTeacherStudentsTable.js");
+var _FluencyTeacherFooter = require("./FluencyTeacherFooter.js");
 var _FluencyTeacherFilters = require("./table/FluencyTeacherFilters.js");
 var _FluencyTeacherHeader = require("./header/FluencyTeacherHeader.js");
 var _FluencyTeacherDrawer = require("./drawer/FluencyTeacherDrawer.js");
-var _FluencyTeacherFooter = require("./FluencyTeacherFooter.js");
 var _TeacherFluencyContext = require("../context/TeacherFluencyContext.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,11 +27,12 @@ const FluencyTeacher = ({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TeacherFluencyContext.TeacherFluencyProvider, {
     value: {
-      model
+      model,
+      grade
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherHeader.FluencyTeacherHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherFilters.FluencyTeacherFilters, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherStudentsTable.FluencyTeacherStudentsTable, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherDrawer.FluencyTeacherDrawer, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherFooter.FluencyTeacherFooter, {})]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherHeader.FluencyTeacherHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherFilters.FluencyTeacherFilters, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherStudentsTable.FluencyTeacherStudentsTable, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherFooter.FluencyTeacherFooter, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluencyTeacherDrawer.FluencyTeacherDrawer, {})]
     })
   });
 };

package/dist/commonjs/features/fluency-teacher/components/FluencyTeacher.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_effectorReact","_reactNative","_reactNativeUi","_FluencyTeacherStudentsTable","_FluencyTeacherFilters","_FluencyTeacherHeader","_FluencyTeacherDrawer","_FluencyTeacherFooter","_TeacherFluencyContext","_jsxRuntime","e","__esModule","default","FluencyTeacher","model","students","grade","useGate","gate","jsx","TeacherFluencyProvider","value","children","jsxs","View","style","styles","container","FluencyTeacherHeader","FluencyTeacherFilters","FluencyTeacherStudentsTable","FluencyTeacherDrawer","FluencyTeacherFooter","exports","StyleSheet","create","flex","gap","SPACING"],"sourceRoot":"../../../../../src","sources":["features/fluency-teacher/components/FluencyTeacher.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAEA,IAAAI,4BAAA,GAAAJ,OAAA;AACA,IAAAK,sBAAA,GAAAL,OAAA;AACA,IAAAM,qBAAA,GAAAN,OAAA;AACA,IAAAO,qBAAA,GAAAP,OAAA;AACA,IAAAQ,qBAAA,GAAAR,OAAA;AAEA,IAAAS,sBAAA,GAAAT,OAAA;AAAyE,IAAAU,WAAA,GAAAV,OAAA;AAAA,SAAAD,uBAAAY,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQlE,MAAMG,cAAc,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAK;EACjF,IAAAC,sBAAO,EAACH,KAAK,CAACI,IAAI,EAAE;IAAEH,QAAQ;IAAEC;EAAM,CAAC,CAAC;EAExC,oBACE,IAAAP,WAAA,CAAAU,GAAA,EAACX,sBAAA,CAAAY,sBAAsB;IAACC,KAAK,EAAE;MAAEP;IAAM,CAAE;IAAAQ,QAAA,eACvC,IAAAb,WAAA,CAAAc,IAAA,EAACtB,YAAA,CAAAuB,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;MAAAL,QAAA,gBAC5B,IAAAb,WAAA,CAAAU,GAAA,EAACd,qBAAA,CAAAuB,oBAAoB,IAAE,CAAC,eACxB,IAAAnB,WAAA,CAAAU,GAAA,EAACf,sBAAA,CAAAyB,qBAAqB,IAAE,CAAC,eACzB,IAAApB,WAAA,CAAAU,GAAA,EAAChB,4BAAA,CAAA2B,2BAA2B,IAAE,CAAC,eAC/B,IAAArB,WAAA,CAAAU,GAAA,EAACb,qBAAA,CAAAyB,oBAAoB,IAAE,CAAC,eACxB,IAAAtB,WAAA,CAAAU,GAAA,EAACZ,qBAAA,CAAAyB,oBAAoB,IAAE,CAAC;IAAA,CACpB;EAAC,CACe,CAAC;AAE7B,CAAC;AAAAC,OAAA,CAAApB,cAAA,GAAAA,cAAA;AAED,MAAMa,MAAM,GAAGQ,uBAAU,CAACC,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,IAAI,EAAE,CAAC;IACPC,GAAG,EAAEC,sBAAO,CAAC,GAAG;EAClB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_effectorReact","_reactNative","_reactNativeUi","_FluencyTeacherStudentsTable","_FluencyTeacherFooter","_FluencyTeacherFilters","_FluencyTeacherHeader","_FluencyTeacherDrawer","_TeacherFluencyContext","_jsxRuntime","e","__esModule","default","FluencyTeacher","model","students","grade","useGate","gate","jsx","TeacherFluencyProvider","value","children","jsxs","View","style","styles","container","FluencyTeacherHeader","FluencyTeacherFilters","FluencyTeacherStudentsTable","FluencyTeacherFooter","FluencyTeacherDrawer","exports","StyleSheet","create","flex","gap","SPACING"],"sourceRoot":"../../../../../src","sources":["features/fluency-teacher/components/FluencyTeacher.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAEA,IAAAI,4BAAA,GAAAJ,OAAA;AACA,IAAAK,qBAAA,GAAAL,OAAA;AACA,IAAAM,sBAAA,GAAAN,OAAA;AACA,IAAAO,qBAAA,GAAAP,OAAA;AACA,IAAAQ,qBAAA,GAAAR,OAAA;AAEA,IAAAS,sBAAA,GAAAT,OAAA;AAAyE,IAAAU,WAAA,GAAAV,OAAA;AAAA,SAAAD,uBAAAY,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQlE,MAAMG,cAAc,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAK;EACjF,IAAAC,sBAAO,EAACH,KAAK,CAACI,IAAI,EAAE;IAAEH,QAAQ;IAAEC;EAAM,CAAC,CAAC;EAExC,oBACE,IAAAP,WAAA,CAAAU,GAAA,EAACX,sBAAA,CAAAY,sBAAsB;IAACC,KAAK,EAAE;MAAEP,KAAK;MAAEE;IAAM,CAAE;IAAAM,QAAA,eAC9C,IAAAb,WAAA,CAAAc,IAAA,EAACtB,YAAA,CAAAuB,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;MAAAL,QAAA,gBAC5B,IAAAb,WAAA,CAAAU,GAAA,EAACb,qBAAA,CAAAsB,oBAAoB,IAAE,CAAC,eACxB,IAAAnB,WAAA,CAAAU,GAAA,EAACd,sBAAA,CAAAwB,qBAAqB,IAAE,CAAC,eACzB,IAAApB,WAAA,CAAAU,GAAA,EAAChB,4BAAA,CAAA2B,2BAA2B,IAAE,CAAC,eAC/B,IAAArB,WAAA,CAAAU,GAAA,EAACf,qBAAA,CAAA2B,oBAAoB,IAAE,CAAC,eACxB,IAAAtB,WAAA,CAAAU,GAAA,EAACZ,qBAAA,CAAAyB,oBAAoB,IAAE,CAAC;IAAA,CACpB;EAAC,CACe,CAAC;AAE7B,CAAC;AAAAC,OAAA,CAAApB,cAAA,GAAAA,cAAA;AAED,MAAMa,MAAM,GAAGQ,uBAAU,CAACC,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,IAAI,EAAE,CAAC;IACPC,GAAG,EAAEC,sBAAO,CAAC,GAAG;EAClB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerHeader.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeUi = require("@magmamath/react-native-ui");
 var _i18n = require("../../../../i18n/i18n.js");
+var _AverageCell = require("../table/AverageCell.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerHeader = ({
@@ -17,31 +18,36 @@ const DrawerHeader = ({
   const t = (0, _i18n.useText)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.left,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeUi.Typography, {
-        variant: _reactNativeUi.HeadingVariants.H9,
-        style: styles.label,
-        children: t('teacher.fluency.studentFluency')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.name,
-        children: student.name
-      })]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.name,
+      numberOfLines: 1,
+      children: student.name
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.right,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.masteryLabel,
-        children: t('teacher.fluency.overallMastery')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: styles.masteryValue,
-        children: [student.averagePercent, "%"]
+      style: styles.mastery,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.masteryRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.masteryLabel,
+          numberOfLines: 1,
+          children: t('teacher.fluency.overallMastery')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.masteryValue,
+          children: [student.averagePercent, "%"]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.masteryBar,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AverageCell.AverageCell, {
+          percent: student.averagePercent,
+          height: 22,
+          showPercent: false
+        })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeUi.Button, {
-      variant: _reactNativeUi.ButtonVariant.SECONDARY,
+      variant: _reactNativeUi.ButtonVariant.TERTIARY,
       colorScheme: _reactNativeUi.ButtonColor.WHITE,
       icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeUi.CrossIcon, {
         size: 18,
-        color: _reactNativeUi.COLORS.NEUTRAL_7
+        color: _reactNativeUi.COLORS.NEUTRAL_9
       }),
       onPress: onClose,
       style: {
@@ -55,45 +61,44 @@ const styles = _reactNative.StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: _reactNativeUi.SPACING[500],
-    paddingHorizontal: _reactNativeUi.SPACING[700],
-    borderTopWidth: 1,
+    gap: _reactNativeUi.SPACING[400],
+    padding: _reactNativeUi.SPACING[400],
     borderBottomWidth: 1,
     borderColor: _reactNativeUi.COLORS.NEUTRAL_4
   },
-  left: {
-    marginLeft: 48
-  },
-  label: {
-    color: _reactNativeUi.COLORS.GREEN_7,
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '600'
-  },
   name: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 22,
+    flex: 1,
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24,
     color: _reactNativeUi.COLORS.NEUTRAL_10
   },
-  right: {
+  mastery: {
+    alignItems: 'flex-end'
+  },
+  masteryBar: {
+    width: 150
+  },
+  masteryRow: {
+    flexDirection: 'row',
     alignItems: 'flex-end',
-    marginLeft: 'auto'
+    gap: _reactNativeUi.SPACING[100]
   },
   masteryLabel: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAires,
+    fontWeight: '400',
     fontSize: 13,
+    lineHeight: 26,
     color: _reactNativeUi.COLORS.NEUTRAL_7
   },
   masteryValue: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 28,
-    color: _reactNativeUi.COLORS.GREEN_7
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24,
+    color: _reactNativeUi.COLORS.PRIMARY_YELLOW
   },
   closeButton: {
-    alignSelf: 'center',
-    marginLeft: _reactNativeUi.SPACING[600]
+    alignSelf: 'center'
   }
 });
 //# sourceMappingURL=DrawerHeader.js.map

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_jsxRuntime","e","__esModule","default","DrawerHeader","student","onClose","t","useText","jsxs","View","style","styles","container","children","left","jsx","Typography","variant","HeadingVariants","H9","label","Text","name","right","masteryLabel","masteryValue","averagePercent","Button","ButtonVariant","SECONDARY","colorScheme","ButtonColor","WHITE","icon","CrossIcon","size","color","COLORS","NEUTRAL_7","onPress","closeButton","exports","StyleSheet","create","flexDirection","alignItems","paddingVertical","SPACING","paddingHorizontal","borderTopWidth","borderBottomWidth","borderColor","NEUTRAL_4","marginLeft","GREEN_7","fontFamily","FONT_FAMILY","buenosAiresSemiBold","fontWeight","buenosAiresBold","fontSize","NEUTRAL_10","alignSelf"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerHeader.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_AverageCell","_jsxRuntime","e","__esModule","default","DrawerHeader","student","onClose","t","useText","jsxs","View","style","styles","container","children","jsx","Text","name","numberOfLines","mastery","masteryRow","masteryLabel","masteryValue","averagePercent","masteryBar","AverageCell","percent","height","showPercent","Button","variant","ButtonVariant","TERTIARY","colorScheme","ButtonColor","WHITE","icon","CrossIcon","size","color","COLORS","NEUTRAL_9","onPress","closeButton","exports","StyleSheet","create","flexDirection","alignItems","gap","SPACING","padding","borderBottomWidth","borderColor","NEUTRAL_4","flex","fontFamily","FONT_FAMILY","buenosAiresSemiBold","fontWeight","fontSize","NEUTRAL_10","width","buenosAires","lineHeight","NEUTRAL_7","PRIMARY_YELLOW","alignSelf"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerHeader.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerMatrixes.js

@@ -8,39 +8,23 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeUi = require("@magmamath/react-native-ui");
 var _i18n = require("../../../../i18n/i18n.js");
+var _TeacherFluencyContext = require("../../context/TeacherFluencyContext.js");
 var _DrawerOperatorBox = require("./DrawerOperatorBox.js");
 var _fluencyTeacherConstants = require("../../fluencyTeacher.constants.js");
+var _fluencyTeacherHelpers = require("../../fluencyTeacher.helpers.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerMatrixes = () => {
   const t = (0, _i18n.useText)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const {
+    grade
+  } = (0, _TeacherFluencyContext.useTeacherFluency)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.grid,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
-      title: t('student.fluency.addition'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.ADDITION,
-      iconBg: _reactNativeUi.COLORS.GREEN_1,
-      iconColor: _reactNativeUi.COLORS.GREEN_7,
-      operator: _fluencyTeacherConstants.FluencyOperator.ADDITION
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
-      title: t('student.fluency.subtraction'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.SUBTRACTION,
-      iconBg: _reactNativeUi.COLORS.ORANGE_1,
-      iconColor: _reactNativeUi.COLORS.ORANGE_7,
-      operator: _fluencyTeacherConstants.FluencyOperator.SUBTRACTION
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
-      title: t('student.fluency.multiplication'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.MULTIPLICATION,
-      iconBg: _reactNativeUi.COLORS.BLUE_1,
-      iconColor: _reactNativeUi.COLORS.BLUE_7,
-      operator: _fluencyTeacherConstants.FluencyOperator.MULTIPLICATION
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
-      title: t('student.fluency.division'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.DIVISION,
-      iconBg: _reactNativeUi.COLORS.PURPLE_1,
-      iconColor: _reactNativeUi.COLORS.PURPLE_7,
-      operator: _fluencyTeacherConstants.FluencyOperator.DIVISION
-    })]
+    children: (0, _fluencyTeacherHelpers.getOperatorsForGrade)(grade).map(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
+      title: t(_fluencyTeacherConstants.OPERATOR_CARD_CONFIG[operator].labelKey),
+      operator: operator
+    }, operator))
   });
 };
 exports.DrawerMatrixes = DrawerMatrixes;
@@ -48,8 +32,7 @@ const styles = _reactNative.StyleSheet.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: _reactNativeUi.SPACING[300],
-    marginTop: _reactNativeUi.SPACING[300],
+    gap: _reactNativeUi.SPACING[400],
     marginBottom: _reactNativeUi.SPACING[600]
   }
 });

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerMatrixes.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_DrawerOperatorBox","_fluencyTeacherConstants","_jsxRuntime","e","__esModule","default","DrawerMatrixes","t","useText","jsxs","View","style","styles","grid","children","jsx","DrawerOperatorBox","title","symbol","FluencyMathOperatorSymbol","ADDITION","iconBg","COLORS","GREEN_1","iconColor","GREEN_7","operator","FluencyOperator","SUBTRACTION","ORANGE_1","ORANGE_7","MULTIPLICATION","BLUE_1","BLUE_7","DIVISION","PURPLE_1","PURPLE_7","exports","StyleSheet","create","flexDirection","flexWrap","gap","SPACING","marginTop","marginBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerMatrixes.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,wBAAA,GAAAL,OAAA;AAA2F,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpF,MAAMG,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EACnB,oBACE,IAAAN,WAAA,CAAAO,IAAA,EAACZ,YAAA,CAAAa,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,gBACvB,IAAAZ,WAAA,CAAAa,GAAA,EAACf,kBAAA,CAAAgB,iBAAiB;MAChBC,KAAK,EAAEV,CAAC,CAAC,0BAA0B,CAAE;MACrCW,MAAM,EAAEC,kDAAyB,CAACC,QAAS;MAC3CC,MAAM,EAAEC,qBAAM,CAACC,OAAQ;MACvBC,SAAS,EAAEF,qBAAM,CAACG,OAAQ;MAC1BC,QAAQ,EAAEC,wCAAe,CAACP;IAAS,CACpC,CAAC,eACF,IAAAlB,WAAA,CAAAa,GAAA,EAACf,kBAAA,CAAAgB,iBAAiB;MAChBC,KAAK,EAAEV,CAAC,CAAC,6BAA6B,CAAE;MACxCW,MAAM,EAAEC,kDAAyB,CAACS,WAAY;MAC9CP,MAAM,EAAEC,qBAAM,CAACO,QAAS;MACxBL,SAAS,EAAEF,qBAAM,CAACQ,QAAS;MAC3BJ,QAAQ,EAAEC,wCAAe,CAACC;IAAY,CACvC,CAAC,eACF,IAAA1B,WAAA,CAAAa,GAAA,EAACf,kBAAA,CAAAgB,iBAAiB;MAChBC,KAAK,EAAEV,CAAC,CAAC,gCAAgC,CAAE;MAC3CW,MAAM,EAAEC,kDAAyB,CAACY,cAAe;MACjDV,MAAM,EAAEC,qBAAM,CAACU,MAAO;MACtBR,SAAS,EAAEF,qBAAM,CAACW,MAAO;MACzBP,QAAQ,EAAEC,wCAAe,CAACI;IAAe,CAC1C,CAAC,eACF,IAAA7B,WAAA,CAAAa,GAAA,EAACf,kBAAA,CAAAgB,iBAAiB;MAChBC,KAAK,EAAEV,CAAC,CAAC,0BAA0B,CAAE;MACrCW,MAAM,EAAEC,kDAAyB,CAACe,QAAS;MAC3Cb,MAAM,EAAEC,qBAAM,CAACa,QAAS;MACxBX,SAAS,EAAEF,qBAAM,CAACc,QAAS;MAC3BV,QAAQ,EAAEC,wCAAe,CAACO;IAAS,CACpC,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAAAG,OAAA,CAAA/B,cAAA,GAAAA,cAAA;AAED,MAAMM,MAAM,GAAG0B,uBAAU,CAACC,MAAM,CAAC;EAC/B1B,IAAI,EAAE;IACJ2B,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,MAAM;IAChBC,GAAG,EAAEC,sBAAO,CAAC,GAAG,CAAC;IACjBC,SAAS,EAAED,sBAAO,CAAC,GAAG,CAAC;IACvBE,YAAY,EAAEF,sBAAO,CAAC,GAAG;EAC3B;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_TeacherFluencyContext","_DrawerOperatorBox","_fluencyTeacherConstants","_fluencyTeacherHelpers","_jsxRuntime","e","__esModule","default","DrawerMatrixes","t","useText","grade","useTeacherFluency","jsx","View","style","styles","grid","children","getOperatorsForGrade","map","operator","DrawerOperatorBox","title","OPERATOR_CARD_CONFIG","labelKey","exports","StyleSheet","create","flexDirection","flexWrap","gap","SPACING","marginBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerMatrixes.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA;AACA,IAAAM,wBAAA,GAAAN,OAAA;AACA,IAAAO,sBAAA,GAAAP,OAAA;AAAmE,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE5D,MAAMG,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EACnB,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,wCAAiB,EAAC,CAAC;EACrC,oBACE,IAAAR,WAAA,CAAAS,GAAA,EAAChB,YAAA,CAAAiB,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,EACtB,IAAAC,2CAAoB,EAACR,KAAK,CAAC,CAACS,GAAG,CAAEC,QAAQ,iBACxC,IAAAjB,WAAA,CAAAS,GAAA,EAACZ,kBAAA,CAAAqB,iBAAiB;MAEhBC,KAAK,EAAEd,CAAC,CAACe,6CAAoB,CAACH,QAAQ,CAAC,CAACI,QAAQ,CAAE;MAClDJ,QAAQ,EAAEA;IAAS,GAFdA,QAGN,CACF;EAAC,CACE,CAAC;AAEX,CAAC;AAAAK,OAAA,CAAAlB,cAAA,GAAAA,cAAA;AAED,MAAMQ,MAAM,GAAGW,uBAAU,CAACC,MAAM,CAAC;EAC/BX,IAAI,EAAE;IACJY,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,MAAM;IAChBC,GAAG,EAAEC,sBAAO,CAAC,GAAG,CAAC;IACjBC,YAAY,EAAED,sBAAO,CAAC,GAAG;EAC3B;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerOperatorBox.js

@@ -11,14 +11,13 @@ var _reactNativeUi = require("@magmamath/react-native-ui");
 var _i18n = require("../../../../i18n/i18n.js");
 var _useDrawerMatrix = require("../../hooks/useDrawerMatrix.js");
 var _DrawerMatrix = require("../matrix/DrawerMatrix.js");
+var _MatrixLegend = require("../matrix/MatrixLegend.js");
 var _TeacherFluencyContext = require("../../context/TeacherFluencyContext.js");
+var _fluencyTeacherConstants = require("../../fluencyTeacher.constants.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerOperatorBox = ({
   title,
-  symbol,
-  iconBg,
-  iconColor,
   operator
 }) => {
   const t = (0, _i18n.useText)();
@@ -32,24 +31,14 @@ const DrawerOperatorBox = ({
     rows: matrixProps.grid.rows.length
   }) : '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
+    style: [styles.container, {
+      borderColor: _fluencyTeacherConstants.OPERATOR_PALETTES[operator].boxBorder
+    }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.header,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.iconBox, {
-          backgroundColor: iconBg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.symbol, {
-            color: iconColor
-          }],
-          children: symbol
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.title,
         children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.spacer
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.factsLabel,
         children: factsLabel
@@ -62,8 +51,13 @@ const DrawerOperatorBox = ({
           size: "large",
           color: _reactNativeUi.COLORS.PRIMARY_BLUE
         })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerMatrix.DrawerMatrix, {
-        ...matrixProps
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerMatrix.DrawerMatrix, {
+          ...matrixProps
+        }), matrixProps.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MatrixLegend.MatrixLegend, {
+          operator: operator,
+          grid: matrixProps.grid
+        })]
       })
     })]
   });
@@ -71,48 +65,37 @@ const DrawerOperatorBox = ({
 exports.DrawerOperatorBox = DrawerOperatorBox;
 const styles = _reactNative.StyleSheet.create({
   container: {
-    width: 315,
-    height: 315,
+    flexGrow: 1,
+    flexBasis: '45%',
     borderWidth: 1,
-    borderColor: _reactNativeUi.COLORS.NEUTRAL_4,
     borderRadius: _reactNativeUi.BORDER_RADIUS[300],
-    padding: _reactNativeUi.SPACING[400]
+    backgroundColor: _reactNativeUi.COLORS.NEUTRAL_1,
+    padding: _reactNativeUi.SPACING[400],
+    gap: _reactNativeUi.SPACING[300]
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: _reactNativeUi.SPACING[200],
-    marginBottom: _reactNativeUi.SPACING[300]
-  },
-  iconBox: {
-    width: 24,
-    height: 24,
-    borderRadius: 6,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  symbol: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontSize: 20,
-    marginBottom: 2
+    gap: _reactNativeUi.SPACING[200]
   },
   title: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '700',
-    fontSize: 15,
+    flex: 1,
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAires,
+    fontWeight: '400',
+    fontSize: 16,
     color: _reactNativeUi.COLORS.NEUTRAL_10
   },
-  spacer: {
-    flex: 1
-  },
   factsLabel: {
     fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
     fontSize: 13,
     fontWeight: '600',
+    textTransform: 'uppercase',
     color: _reactNativeUi.COLORS.NEUTRAL_7
   },
   content: {
-    flex: 1
+    height: 210,
+    flexDirection: 'row',
+    gap: _reactNativeUi.SPACING[200]
   },
   loader: {
     flex: 1,

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerOperatorBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_effectorReact","_reactNativeUi","_i18n","_useDrawerMatrix","_DrawerMatrix","_TeacherFluencyContext","_jsxRuntime","e","__esModule","default","DrawerOperatorBox","title","symbol","iconBg","iconColor","operator","t","useText","model","useTeacherFluency","isLoading","useUnit","api","getStudentDetailsFx","pending","matrixProps","useDrawerMatrix","factsLabel","grid","cols","colLabels","length","rows","jsxs","View","style","styles","container","children","header","jsx","iconBox","backgroundColor","Text","color","spacer","content","loader","ActivityIndicator","size","COLORS","PRIMARY_BLUE","DrawerMatrix","exports","StyleSheet","create","width","height","borderWidth","borderColor","NEUTRAL_4","borderRadius","BORDER_RADIUS","padding","SPACING","flexDirection","alignItems","gap","marginBottom","justifyContent","fontFamily","FONT_FAMILY","buenosAiresBold","fontSize","buenosAiresSemiBold","fontWeight","NEUTRAL_10","flex","NEUTRAL_7"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_effectorReact","_reactNativeUi","_i18n","_useDrawerMatrix","_DrawerMatrix","_MatrixLegend","_TeacherFluencyContext","_fluencyTeacherConstants","_jsxRuntime","e","__esModule","default","DrawerOperatorBox","title","operator","t","useText","model","useTeacherFluency","isLoading","useUnit","api","getStudentDetailsFx","pending","matrixProps","useDrawerMatrix","factsLabel","grid","cols","colLabels","length","rows","jsxs","View","style","styles","container","borderColor","OPERATOR_PALETTES","boxBorder","children","header","jsx","Text","content","loader","ActivityIndicator","size","color","COLORS","PRIMARY_BLUE","Fragment","DrawerMatrix","MatrixLegend","exports","StyleSheet","create","flexGrow","flexBasis","borderWidth","borderRadius","BORDER_RADIUS","backgroundColor","NEUTRAL_1","padding","SPACING","gap","flexDirection","alignItems","flex","fontFamily","FONT_FAMILY","buenosAires","fontWeight","fontSize","NEUTRAL_10","buenosAiresSemiBold","textTransform","NEUTRAL_7","height","justifyContent"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerOperatorStatCard.js

@@ -7,71 +7,78 @@ exports.DrawerOperatorStatCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeUi = require("@magmamath/react-native-ui");
+var _fluencyTeacherHelpers = require("../../fluencyTeacher.helpers.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerOperatorStatCard = ({
   title,
   value,
   symbol,
-  color
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-  style: styles.container,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.iconContainer, {
-      backgroundColor: color + '26'
+  operator
+}) => {
+  const {
+    background,
+    border,
+    text
+  } = (0, _fluencyTeacherHelpers.getOperatorBandColors)(operator, value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: background,
+      borderColor: border
     }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.symbol, {
-        color
-      }],
-      children: symbol
-    })
-  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.title,
-      children: title
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.titleRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.symbol, {
+          color: text
+        }],
+        children: symbol
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.title, {
+          color: text
+        }],
+        numberOfLines: 1,
+        children: title
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-      style: styles.value,
+      style: [styles.value, {
+        color: text
+      }],
       children: [value, "%"]
     })]
-  })]
-});
+  });
+};
 exports.DrawerOperatorStatCard = DrawerOperatorStatCard;
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: _reactNativeUi.SPACING[300],
-    padding: _reactNativeUi.SPACING[300],
-    borderRadius: _reactNativeUi.SPACING[300],
-    borderWidth: 1,
-    borderColor: _reactNativeUi.COLORS.NEUTRAL_4,
-    backgroundColor: _reactNativeUi.COLORS.NEUTRAL_2
+    justifyContent: 'center',
+    gap: _reactNativeUi.SPACING[100],
+    padding: _reactNativeUi.SPACING[200],
+    borderRadius: _reactNativeUi.BORDER_RADIUS[200],
+    borderWidth: 1
   },
-  iconContainer: {
-    width: 32,
-    height: 32,
-    borderRadius: _reactNativeUi.SPACING[200],
+  titleRow: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
+    gap: _reactNativeUi.SPACING[100]
   },
   symbol: {
+    width: 16,
     fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontSize: 28,
-    marginBottom: 2
+    fontSize: 16,
+    textAlign: 'center'
   },
   title: {
+    flexShrink: 1,
     fontFamily: _reactNativeUi.FONT_FAMILY.buenosAires,
     fontWeight: '400',
-    fontSize: 12,
-    color: _reactNativeUi.COLORS.NEUTRAL_7
+    fontSize: 16
   },
   value: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 18,
-    color: _reactNativeUi.COLORS.NEUTRAL_10
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24
   }
 });
 //# sourceMappingURL=DrawerOperatorStatCard.js.map