@magmamath/students-features 0.9.0-rc21 → 0.9.0-rc23

package/dist/module/features/keyboard/types/MathKeysGroups/units.js

@@ -9,6 +9,7 @@ import { YenIcon } from "../../../../shared/icons/MATH/YenIcon/YenIcon.js";
 import { CentIcon } from "../../../../shared/icons/MATH/CentIcon/CentIcon.js";
 import { DEFAULT_KEY_ICON_PROPS } from "../../constants/constants.js";
 import React from 'react';
+import { IS_MOBILE } from '@magmamath/react-native-ui';
 import { jsx as _jsx } from "react/jsx-runtime";
 export let MathCurrencyUnit = /*#__PURE__*/function (MathCurrencyUnit) {
   MathCurrencyUnit["KRONE"] = "KRONE";
@@ -100,6 +101,48 @@ export let MathTimeUnit = /*#__PURE__*/function (MathTimeUnit) {
   MathTimeUnit["PM"] = "PM";
   return MathTimeUnit;
 }({});
+const BASE_TEXT_STYLE = {
+  fontSize: 14,
+  fontWeight: 700
+};
+const STYLE_PRESETS = {
+  SMALL: {
+    button: {
+      width: IS_MOBILE ? 44 : 40
+    },
+    container: {
+      flexBasis: IS_MOBILE ? 48 : undefined
+    },
+    text: BASE_TEXT_STYLE
+  },
+  MEDIUM: {
+    button: {
+      width: IS_MOBILE ? 50 : 45
+    },
+    container: {
+      flexBasis: IS_MOBILE ? 54 : undefined
+    },
+    text: BASE_TEXT_STYLE
+  },
+  LARGE: {
+    button: {
+      width: IS_MOBILE ? 54 : 48
+    },
+    container: {
+      flexBasis: IS_MOBILE ? 58 : undefined
+    },
+    text: BASE_TEXT_STYLE
+  },
+  XL: {
+    button: {
+      width: IS_MOBILE ? 56 : 52
+    },
+    container: {
+      flexBasis: IS_MOBILE ? 60 : undefined
+    },
+    text: BASE_TEXT_STYLE
+  }
+};
 export const MATH_CURRENCY_UNITS = {
   [MathCurrencyUnit.KRONE]: {
     icon: /*#__PURE__*/_jsx(KroneIcon, {
@@ -113,7 +156,8 @@ export const MATH_CURRENCY_UNITS = {
       ...DEFAULT_KEY_ICON_PROPS
     }),
     mathliveValue: '\\$',
-    katexValue: '\$'
+    katexValue: '\$',
+    mathQuillValue: '\\$'
   },
   [MathCurrencyUnit.EURO]: {
     icon: /*#__PURE__*/_jsx(EuroIcon, {
@@ -156,169 +200,74 @@ export const MATH_LENGTH_UNITS = {
     label: 'km',
     mathliveValue: 'km',
     katexValue: 'km',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathLengthUnit.METER]: {
     label: 'm',
     mathliveValue: '\\mathrm{m}',
     katexValue: 'm',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathLengthUnit.DECIMETER]: {
     label: 'dm',
     mathliveValue: '\\mathrm{dm}',
     katexValue: 'dm',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathLengthUnit.CENTIMETER]: {
     label: 'cm',
     mathliveValue: '\\mathrm{cm}',
     katexValue: 'cm',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathLengthUnit.MILLIMETER]: {
     label: 'mm',
     mathliveValue: '\\mathrm{mm}',
     katexValue: 'mm',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathLengthUnit.HECTARE]: {
     label: 'ha',
     mathliveValue: '\\mathrm{ha}',
     katexValue: 'ha',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathLengthUnit.INCH]: {
     label: 'in',
     mathliveValue: '\\mathrm{in}',
     katexValue: 'in',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: '\\in',
+    style: STYLE_PRESETS.SMALL
   },
   [MathLengthUnit.FOOT]: {
     label: 'ft',
     mathliveValue: '\\mathrm{ft}',
     katexValue: 'ft',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathLengthUnit.YARD]: {
     label: 'yd',
     mathliveValue: '\\mathrm{yd}',
     katexValue: 'yd',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathLengthUnit.YARDS]: {
     label: 'yds',
     mathliveValue: '\\mathrm{yds}',
     katexValue: 'yds',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathLengthUnit.MILE]: {
     label: 'mi',
     mathliveValue: '\\mathrm{mi}',
     katexValue: 'mi',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathLengthUnit.MILE_SE]: {
     label: 'mil',
     mathliveValue: '\\mathrm{mil}',
     katexValue: 'mil',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   }
 };
 export const MATH_AREA_UNITS = {
@@ -326,141 +275,70 @@ export const MATH_AREA_UNITS = {
     label: 'km²',
     mathliveValue: '\\mathrm{km}^2',
     katexValue: 'km^2',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'km^{2}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathAreaUnit.SQUARE_METER]: {
     label: 'm²',
     mathliveValue: '\\mathrm{m}^2',
     katexValue: 'm^2',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'm^{2}',
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathAreaUnit.SQUARE_DECIMETER]: {
     label: 'dm²',
     mathliveValue: '\\mathrm{dm}^2',
     katexValue: 'dm^2',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'dm^{2}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathAreaUnit.SQUARE_CENTIMETER]: {
     label: 'cm²',
     mathliveValue: '\\mathrm{cm}^2',
     katexValue: 'cm^2',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'cm^{2}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathAreaUnit.SQUARE_MILLIMETER]: {
     label: 'mm²',
     mathliveValue: '\\mathrm{mm}^2',
     katexValue: 'mm^2',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'mm^{2}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathAreaUnit.SQUARE_INCH]: {
     label: 'in²',
     mathliveValue: '\\mathrm{in}^2',
     katexValue: 'in^2',
-    style: {
-      button: {
-        width: 43
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'in^{2}',
+    style: STYLE_PRESETS.SMALL
   },
   [MathAreaUnit.SQUARE_FOOT]: {
     label: 'ft²',
     mathliveValue: '\\mathrm{ft}^2',
     katexValue: 'ft^2',
-    style: {
-      button: {
-        width: 43
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'ft^{2}',
+    style: STYLE_PRESETS.SMALL
   },
   [MathAreaUnit.SQUARE_MILE]: {
     label: 'mi²',
     mathliveValue: '\\mathrm{mi}^2',
     katexValue: 'mi^2',
-    style: {
-      button: {
-        width: 43
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'mi^{2}',
+    style: STYLE_PRESETS.SMALL
   },
   [MathAreaUnit.SQUARE_YARD]: {
     label: 'yd²',
     mathliveValue: '\\mathrm{yd}^2',
     katexValue: 'yd^2',
-    style: {
-      button: {
-        width: 43
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'yd^{2}',
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathAreaUnit.HECTARE]: {
     label: 'ha',
     mathliveValue: '\\mathrm{ha}',
     katexValue: 'ha',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   }
 };
 export const MATH_VOLUME_UNITS = {
@@ -468,281 +346,131 @@ export const MATH_VOLUME_UNITS = {
     label: 'km³',
     mathliveValue: '\\mathrm{km}^3',
     katexValue: 'km^3',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'km^{3}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathVolumeUnit.CUBIC_METER]: {
     label: 'm³',
     mathliveValue: '\\mathrm{m}^3',
     katexValue: 'm^3',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'm^{3}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathVolumeUnit.CUBIC_DECIMETER]: {
     label: 'dm³',
     mathliveValue: '\\mathrm{dm}^3',
     katexValue: 'dm^3',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'dm^{3}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathVolumeUnit.CUBIC_CENTIMETER]: {
     label: 'cm³',
     mathliveValue: '\\mathrm{cm}^3',
     katexValue: 'cm^3',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'cm^{3}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathVolumeUnit.CUBIC_MILLIMETER]: {
     label: 'mm³',
     mathliveValue: '\\mathrm{mm}^3',
     katexValue: 'mm^3',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'mm^{3}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathVolumeUnit.CUBIC_INCH]: {
     label: 'in³',
     mathliveValue: '\\mathrm{in}^3',
     katexValue: 'in^3',
-    style: {
-      button: {
-        width: 43
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'in^{3}',
+    style: STYLE_PRESETS.SMALL
   },
   [MathVolumeUnit.CUBIC_FOOT]: {
     label: 'ft³',
     mathliveValue: '\\mathrm{ft}^3',
     katexValue: 'ft^3',
-    style: {
-      button: {
-        width: 43
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'ft^{3}',
+    style: STYLE_PRESETS.SMALL
   },
   [MathVolumeUnit.CUBIC_MILE]: {
     label: 'mi³',
     mathliveValue: '\\mathrm{mi}^3',
     katexValue: 'mi^3',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'mi^{3}',
+    style: STYLE_PRESETS.LARGE
   },
   [MathVolumeUnit.CUBIC_YARD]: {
     label: 'yd³',
     mathliveValue: '\\mathrm{yd}^3',
     katexValue: 'yd^3',
-    style: {
-      button: {
-        width: 43
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: 'yd^{3}',
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathVolumeUnit.MILLILITER]: {
     label: 'ml',
     mathliveValue: '\\mathrm{mL}',
     katexValue: 'ml',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathVolumeUnit.LITER]: {
     label: 'L',
     mathliveValue: '\\mathrm{L}',
     katexValue: 'L',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathVolumeUnit.MILLILITER_SE]: {
     label: 'ml',
     mathliveValue: '\\mathrm{ml}',
     katexValue: 'ml',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathVolumeUnit.LITER_SE]: {
     label: 'l',
     mathliveValue: '\\mathrm{l}',
     katexValue: 'l',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathVolumeUnit.DL]: {
     label: 'dl',
     mathliveValue: '\\mathrm{dl}',
     katexValue: 'dl',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathVolumeUnit.CUP]: {
     label: 'cup',
     mathliveValue: '\\mathrm{cup}',
     katexValue: 'cup',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    mathQuillValue: '\\cup',
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathVolumeUnit.GAL]: {
     label: 'gal',
     mathliveValue: '\\mathrm{gal}',
     katexValue: 'gal',
-    style: {
-      button: {
-        width: 44
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathVolumeUnit.PINT]: {
     label: 'pt',
     mathliveValue: '\\mathrm{pt}',
     katexValue: 'pt',
-    style: {
-      button: {
-        width: 48
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.LARGE
   },
   [MathVolumeUnit.QUART]: {
     label: 'qt',
     mathliveValue: '\\mathrm{qt}',
     katexValue: 'qt',
-    style: {
-      button: {
-        width: 44
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathVolumeUnit.FLOZ]: {
     label: 'floz',
     mathliveValue: '\\mathrm{floz}',
     katexValue: 'floz',
-    style: {
-      button: {
-        width: 52
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.XL
   },
   [MathVolumeUnit.CL]: {
     label: 'cl',
     mathliveValue: '\\mathrm{cl}',
     katexValue: 'cl',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   }
 };
 export const MATH_WEIGHT_UNITS = {
@@ -750,141 +478,61 @@ export const MATH_WEIGHT_UNITS = {
     label: 'kg',
     mathliveValue: '\\mathrm{kg}',
     katexValue: 'kg',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathWeightUnit.G]: {
     label: 'g',
     mathliveValue: '\\mathrm{g}',
     katexValue: 'g',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathWeightUnit.MG]: {
     label: 'mg',
     mathliveValue: '\\mathrm{mg}',
     katexValue: 'mg',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathWeightUnit.TON_SE]: {
     label: 'ton',
     mathliveValue: '\\mathrm{ton}',
     katexValue: 'ton',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathWeightUnit.TON]: {
     label: 'T',
     mathliveValue: '\\mathrm{T}',
     katexValue: 'T',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathWeightUnit.LB]: {
     label: 'lb',
     mathliveValue: '\\mathrm{lb}',
     katexValue: 'lb',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathWeightUnit.OZ]: {
     label: 'oz',
     mathliveValue: '\\mathrm{oz}',
     katexValue: 'oz',
-    style: {
-      button: {
-        width: 40
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.SMALL
   },
   [MathWeightUnit.GAL]: {
     label: 'gal',
     mathliveValue: '\\mathrm{gal}',
     katexValue: 'gal',
-    style: {
-      button: {
-        width: 44
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathWeightUnit.HG]: {
     label: 'hg',
     mathliveValue: '\\mathrm{hg}',
     katexValue: 'hg',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   },
   [MathWeightUnit.T]: {
     label: 't',
     mathliveValue: '\\mathrm{t}',
     katexValue: 't',
-    style: {
-      button: {
-        width: 45
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700
-      }
-    }
+    style: STYLE_PRESETS.MEDIUM
   }
 };
 export const MATH_TIME_UNITS = {