@magmamath/students-features 0.9.0-rc9 → 0.9.0

package/src/features/keyboard/types/MathKeysGroups/calculusOperators.tsx

@@ -1,42 +1,33 @@
 import React from 'react'
-import { MathKeysGroup } from '../types'
 import { COLORS } from '@magmamath/react-native-ui'
-import { IntegralIcon } from '../../../../shared/icons/MATH/IntegralIcon/IntegralIcon'
-import { DoubleIntegralIcon } from '../../../../shared/icons/MATH/DoubleIntegralIcon/DoubleIntegralIcon'
-import { DefiniteIntegralIcon } from '../../../../shared/icons/MATH/DefiniteIntegralIcon/DefiniteIntegralIcon'
-import { DerivativeIcon } from '../../../../shared/icons/MATH/DerivativeIcon/DerivativeIcon'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
+import { IntegralIcon } from '../../../../shared/icons/keyboard/IntegralIcon/IntegralIcon'
+import { DoubleIntegralIcon } from '../../../../shared/icons/keyboard/DoubleIntegralIcon/DoubleIntegralIcon'
+import { DefiniteIntegralIcon } from '../../../../shared/icons/keyboard/DefiniteIntegralIcon/DefiniteIntegralIcon'
+import { DerivativeIcon } from '../../../../shared/icons/keyboard/DerivativeIcon/DerivativeIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
+import { createMathKeysGroup } from './helpers'
 
-export enum MathIntegralsAndDerivativesOperator {
-  INTEGRAL = 'INTEGRAL',
-  DOUBLE_INTEGRAL = 'DOUBLEINTEGRAL',
-  DEFINITE_INTEGRAL = 'DEFINITEINTEGRAL',
-  DERIVATIVE = 'DERIVATIVE',
-}
-
-export const MATH_INTEGRALS_AND_DERIVATIVES: MathKeysGroup<
-  typeof MathIntegralsAndDerivativesOperator
-> = {
-  [MathIntegralsAndDerivativesOperator.INTEGRAL]: {
+export const MATH_INTEGRALS_AND_DERIVATIVES = createMathKeysGroup({
+  INTEGRAL: {
     icon: <IntegralIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\int',
     katexValue: '∫',
   },
-  [MathIntegralsAndDerivativesOperator.DOUBLE_INTEGRAL]: {
+  DOUBLEINTEGRAL: {
     icon: <DoubleIntegralIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
     mathliveValue: '$\\iint_{\\placeholder{}}^{\\placeholder{}}$',
     katexValue: '∬',
   },
-  [MathIntegralsAndDerivativesOperator.DEFINITE_INTEGRAL]: {
+  DEFINITEINTEGRAL: {
     icon: (
       <DefiniteIntegralIcon {...DEFAULT_KEY_ICON_PROPS} size={20} extraColor={COLORS.NEUTRAL_6} />
     ),
     mathliveValue: '\\int_{\\placeholder{lower}}^{\\placeholder{upper}}',
     katexValue: '\\int_{a}^{b}',
   },
-  [MathIntegralsAndDerivativesOperator.DERIVATIVE]: {
+  DERIVATIVE: {
     icon: <DerivativeIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
     mathliveValue: '$\\frac{dx}{dy}$',
     katexValue: 'd/dx',
   },
-}
+})

package/src/features/keyboard/types/MathKeysGroups/geometry.tsx

@@ -1,43 +1,48 @@
 import React from 'react'
-import { DegreeIcon } from '../../../../shared/icons/MATH/DegreeIcon/DegreeIcon'
-import { AngleIcon } from '../../../../shared/icons/MATH/AngleIcon/AngleIcon'
-import { ParallelIcon } from '../../../../shared/icons/MATH/ParallelIcon/ParallelIcon'
-import { PerpendicularIcon } from '../../../../shared/icons/MATH/PerpendicularIcon/PerpendicularIcon'
-import { MathKeysGroup } from '../types'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
+import { DegreeIcon } from '../../../../shared/icons/keyboard/DegreeIcon/DegreeIcon'
+import { AngleIcon } from '../../../../shared/icons/keyboard/AngleIcon/AngleIcon'
+import { ParallelIcon } from '../../../../shared/icons/keyboard/ParallelIcon/ParallelIcon'
+import { PerpendicularIcon } from '../../../../shared/icons/keyboard/PerpendicularIcon/PerpendicularIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { createMathKeysGroup } from './helpers'
 
-export enum MathGeometrySymbols {
-  DEGREE = 'DEGREE',
-  ANGLE = 'ANGLE',
-  PARALLEL = 'PARALLEL',
-  PERPENDICULAR = 'PERPENDICULAR',
-  RADIAN = 'RADIAN',
-}
-
-export const MATH_GEOMETRY_SYMBOLS: MathKeysGroup<typeof MathGeometrySymbols> = {
-  [MathGeometrySymbols.DEGREE]: {
+export const MATH_GEOMETRY_SYMBOLS = createMathKeysGroup({
+  DEGREE: {
     icon: <DegreeIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\degree',
     katexValue: '°',
   },
-  [MathGeometrySymbols.ANGLE]: {
+  ANGLE: {
     icon: <AngleIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\angle',
     katexValue: '∠',
   },
-  [MathGeometrySymbols.PARALLEL]: {
+  PARALLEL: {
     icon: <ParallelIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\parallel',
     katexValue: '∥',
   },
-  [MathGeometrySymbols.PERPENDICULAR]: {
+  PERPENDICULAR: {
     icon: <PerpendicularIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\perp',
     katexValue: '⊥',
   },
-  [MathGeometrySymbols.RADIAN]: {
+  RADIAN: {
     label: 'rad',
     mathliveValue: 'rad',
     katexValue: 'rad',
+    style: {
+      text: {
+        fontSize: 14,
+        fontWeight: 700,
+      },
+      button: {
+        width: IS_MOBILE ? 50 : 40,
+      },
+      container: {
+        flexBasis: IS_MOBILE ? 55 : 'auto',
+      },
+    },
   },
-}
+})

package/src/features/keyboard/types/MathKeysGroups/helpers.ts

@@ -0,0 +1,5 @@
+import { MathKeysGroup } from '../types'
+
+export function createMathKeysGroup<T extends MathKeysGroup<any>>(value: T) {
+  return value
+}

package/src/features/keyboard/types/MathKeysGroups/specialOperators.tsx

@@ -1,40 +1,52 @@
 import React from 'react'
-import { MathKeysGroup } from '../types'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
-import { BackspaceIcon } from '../../../../shared/icons/MATH/BackspaceIcon/BackspaceIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
+import { BackspaceIcon } from '../../../../shared/icons/keyboard/BackspaceIcon/BackspaceIcon'
+import { createMathKeysGroup } from './helpers'
 
-export enum MathSpecialOperator {
-  LIM = 'LIM',
-  LN = 'LN',
-  LOG = 'LOG',
-  LOG10 = 'LOG10',
-  BACKSPACE = 'BACKSPACE',
-}
-
-export const MATH_SPECIAL_OPERATORS: MathKeysGroup<typeof MathSpecialOperator> = {
-  [MathSpecialOperator.LIM]: {
+export const MATH_SPECIAL_OPERATORS = createMathKeysGroup({
+  LIM: {
     label: 'lim',
     mathliveValue: '$\\lim_{\\placeholder{}}^{\\placeholder{}}$',
     katexValue: 'lim',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathSpecialOperator.LN]: {
+  LN: {
     label: 'ln',
     mathliveValue: '$\\ln(\\placeholder{})$',
     katexValue: 'ln',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathSpecialOperator.LOG]: {
+  LOG: {
     label: 'log',
     mathliveValue: '$\\log_{\\placeholder{}}$',
     katexValue: 'log',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathSpecialOperator.LOG10]: {
+  LOG10: {
     label: 'log10',
     mathliveValue: '$\\log_{10}(\\placeholder{})$',
     katexValue: 'log₁₀',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathSpecialOperator.BACKSPACE]: {
+  BACKSPACE: {
     icon: <BackspaceIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
     mathliveValue: 'backspace',
     katexValue: 'backspace',
   },
-}
+})

package/src/features/keyboard/types/MathKeysGroups/symbols.tsx

@@ -1,121 +1,102 @@
-import { PiIcon } from '../../../../shared/icons/MATH/PiIcon/PiIcon'
-import { MathKeysGroup } from '../types'
-import { AlphaIcon } from '../../../../shared/icons/MATH/AlphaIcon/AlphaIcon'
-import { BetaIcon } from '../../../../shared/icons/MATH/BetaIcon/BetaIcon'
-import { GammaIcon } from '../../../../shared/icons/MATH/GammaIcon/GammaIcon'
-import { LambdaIcon } from '../../../../shared/icons/MATH/LambdaIcon/LambdaIcon'
-import { DeltaIcon } from '../../../../shared/icons/MATH/DeltaIcon/DeltaIcon'
-import { ThetaIcon } from '../../../../shared/icons/MATH/ThetaIcon/ThetaIcon'
-import { OmegaUppercaseIcon } from '../../../../shared/icons/MATH/OmegaUppercaseIcon/OmegaUppercaseIcon'
-import { OmegaLowercaseIcon } from '../../../../shared/icons/MATH/OmegaLowercaseIcon/OmegaLowercaseIcon'
-import { MuIcon } from '../../../../shared/icons/MATH/MuIcon/MuIcon'
-import { EtaIcon } from '../../../../shared/icons/MATH/EtaIcon/EtaIcon'
-import { EpsilonIcon } from '../../../../shared/icons/MATH/EpsilonIcon/EpsilonIcon'
-import { SigmaIcon } from '../../../../shared/icons/MATH/SigmaIcon/SigmaIcon'
-import { SigmaSumIcon } from '../../../../shared/icons/MATH/SigmaSumIcon/SigmaSumIcon'
-import { RhoIcon } from '../../../../shared/icons/MATH/RhoIcon/RhoIcon'
-import { PhiIcon } from '../../../../shared/icons/MATH/PhiIcon/PhiIcon'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
+import { PiIcon } from '../../../../shared/icons/keyboard/PiIcon/PiIcon'
+import { AlphaIcon } from '../../../../shared/icons/keyboard/AlphaIcon/AlphaIcon'
+import { BetaIcon } from '../../../../shared/icons/keyboard/BetaIcon/BetaIcon'
+import { GammaIcon } from '../../../../shared/icons/keyboard/GammaIcon/GammaIcon'
+import { LambdaIcon } from '../../../../shared/icons/keyboard/LambdaIcon/LambdaIcon'
+import { DeltaIcon } from '../../../../shared/icons/keyboard/DeltaIcon/DeltaIcon'
+import { ThetaIcon } from '../../../../shared/icons/keyboard/ThetaIcon/ThetaIcon'
+import { OmegaUppercaseIcon } from '../../../../shared/icons/keyboard/OmegaUppercaseIcon/OmegaUppercaseIcon'
+import { OmegaLowercaseIcon } from '../../../../shared/icons/keyboard/OmegaLowercaseIcon/OmegaLowercaseIcon'
+import { MuIcon } from '../../../../shared/icons/keyboard/MuIcon/MuIcon'
+import { EtaIcon } from '../../../../shared/icons/keyboard/EtaIcon/EtaIcon'
+import { EpsilonIcon } from '../../../../shared/icons/keyboard/EpsilonIcon/EpsilonIcon'
+import { SigmaIcon } from '../../../../shared/icons/keyboard/SigmaIcon/SigmaIcon'
+import { SigmaSumIcon } from '../../../../shared/icons/keyboard/SigmaSumIcon/SigmaSumIcon'
+import { RhoIcon } from '../../../../shared/icons/keyboard/RhoIcon/RhoIcon'
+import { PhiIcon } from '../../../../shared/icons/keyboard/PhiIcon/PhiIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
 import React from 'react'
+import { createMathKeysGroup } from './helpers'
 
-export enum MathSymbol {
-  ALPHA = 'ALPHA',
-  BETA = 'BETA',
-  GAMMA = 'GAMMA',
-  LAMBDA = 'LAMBDA',
-  DELTA = 'DELTA',
-  THETA = 'THETA',
-  OMEGA_UPPERCASE = 'OMEGAUPPERCASE',
-  OMEGA_LOWERCASE = 'OMEGALOWERCASE',
-  MU = 'MU',
-  ETA = 'ETA',
-  EPSILON = 'EPSILON',
-  SIGMA = 'SIGMA',
-  SIGMA_SUM = 'SIGMA_SUM',
-  RHO = 'RHO',
-  PI = 'PI',
-  PHI = 'PHI',
-}
-
-export const MATH_SYMBOLS: MathKeysGroup<typeof MathSymbol> = {
-  [MathSymbol.ALPHA]: {
+export const MATH_SYMBOLS = createMathKeysGroup({
+  ALPHA: {
     icon: <AlphaIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\alpha$',
     katexValue: 'α',
   },
-  [MathSymbol.BETA]: {
+  BETA: {
     icon: <BetaIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\beta$',
     katexValue: 'β',
   },
-  [MathSymbol.GAMMA]: {
+  GAMMA: {
     icon: <GammaIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\gamma$',
     katexValue: 'γ',
   },
-  [MathSymbol.LAMBDA]: {
+  LAMBDA: {
     icon: <LambdaIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\lambda$',
     katexValue: 'λ',
   },
-  [MathSymbol.DELTA]: {
+  DELTA: {
     icon: <DeltaIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\delta$',
     katexValue: 'δ',
   },
-  [MathSymbol.THETA]: {
+  THETA: {
     icon: <ThetaIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\theta$',
     katexValue: 'θ',
   },
-  [MathSymbol.OMEGA_UPPERCASE]: {
+  OMEGAUPPERCASE: {
     icon: <OmegaUppercaseIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\Omega$',
     katexValue: 'Ω',
   },
-  [MathSymbol.OMEGA_LOWERCASE]: {
+  OMEGALOWERCASE: {
     icon: <OmegaLowercaseIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\omega$',
     katexValue: 'ω',
   },
-  [MathSymbol.MU]: {
+  MU: {
     icon: <MuIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\mu$',
     katexValue: 'μ',
   },
-  [MathSymbol.ETA]: {
+  ETA: {
     icon: <EtaIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\eta$',
     katexValue: 'η',
   },
-  [MathSymbol.EPSILON]: {
+  EPSILON: {
     icon: <EpsilonIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\epsilon$',
     katexValue: 'ε',
   },
-  [MathSymbol.SIGMA]: {
+  SIGMA: {
     icon: <SigmaIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\sigma$',
     katexValue: 'σ',
   },
-  [MathSymbol.SIGMA_SUM]: {
+  SIGMA_SUM: {
     icon: <SigmaSumIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\Sigma$',
     katexValue: 'Σ',
   },
-  [MathSymbol.RHO]: {
+  RHO: {
     icon: <RhoIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\rho$',
     katexValue: 'ρ',
   },
-  [MathSymbol.PI]: {
+  PI: {
     icon: <PiIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\pi$',
     katexValue: 'π',
   },
-  [MathSymbol.PHI]: {
+  PHI: {
     icon: <PhiIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\phi$',
     katexValue: 'φ',
   },
-}
+})

package/src/features/keyboard/types/MathKeysGroups/textSymbols.tsx

@@ -1,66 +1,54 @@
-import { MathKeysGroup } from '../types'
-import { XIcon } from '../../../../shared/icons/MATH/XIcon/XIcon'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
+import { XIcon } from '../../../../shared/icons/keyboard/XIcon/XIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
 import React from 'react'
-import { YIcon } from '../../../../shared/icons/MATH/YIcon/YIcon'
-import { ZIcon } from '../../../../shared/icons/MATH/ZIcon/ZIcon'
+import { YIcon } from '../../../../shared/icons/keyboard/YIcon/YIcon'
+import { ZIcon } from '../../../../shared/icons/keyboard/ZIcon/ZIcon'
+import { createMathKeysGroup } from './helpers'
 
-export enum MathTextSymbol {
-  A = 'A',
-  B = 'B',
-  C = 'C',
-  F = 'F',
-  G = 'G',
-  H = 'H',
-  X = 'X',
-  Y = 'Y',
-  Z = 'Z',
-}
-
-export const MATH_TEXT_SYMBOLS: MathKeysGroup<typeof MathTextSymbol> = {
-  [MathTextSymbol.A]: {
+export const MATH_TEXT_SYMBOLS = createMathKeysGroup({
+  A: {
     label: 'a',
-    mathliveValue: '$a$',
+    mathliveValue: 'a',
     katexValue: 'a',
   },
-  [MathTextSymbol.B]: {
+  B: {
     label: 'b',
-    mathliveValue: '$b$',
+    mathliveValue: 'b',
     katexValue: 'b',
   },
-  [MathTextSymbol.C]: {
+  C: {
     label: 'c',
-    mathliveValue: '$c$',
+    mathliveValue: 'c',
     katexValue: 'c',
   },
-  [MathTextSymbol.F]: {
+  F: {
     label: 'f',
-    mathliveValue: '$f$',
+    mathliveValue: 'f',
     katexValue: 'f',
   },
-  [MathTextSymbol.G]: {
+  G: {
     label: 'g',
-    mathliveValue: '$g$',
+    mathliveValue: 'g',
     katexValue: 'g',
   },
-  [MathTextSymbol.H]: {
+  H: {
     label: 'h',
-    mathliveValue: '$h$',
+    mathliveValue: 'h',
     katexValue: 'h',
   },
-  [MathTextSymbol.X]: {
+  X: {
     icon: <XIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '$x$',
+    mathliveValue: 'x',
     katexValue: 'x',
   },
-  [MathTextSymbol.Y]: {
+  Y: {
     icon: <YIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '$y$',
+    mathliveValue: 'y',
     katexValue: 'y',
   },
-  [MathTextSymbol.Z]: {
+  Z: {
     icon: <ZIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '$z$',
+    mathliveValue: 'z',
     katexValue: 'z',
   },
-}
+})

package/src/features/keyboard/types/MathKeysGroups/trigonometric.tsx

@@ -1,89 +1,145 @@
-import { MathKeysGroup } from '../types'
+import { createMathKeysGroup } from './helpers'
 
-export enum MathBasicTrigonometricFunction {
-  SIN = 'SIN',
-  COS = 'COS',
-  TAN = 'TAN',
-  COT = 'COT',
-  SEC = 'SEC',
-  CSC = 'CSC',
-}
-
-export enum MathInverseTrigonometricFunction {
-  ARCSIN = 'ARCSIN',
-  ARCCOS = 'ARCCOS',
-  ARCTAN = 'ARCTAN',
-  ARCCOT = 'ARCCOT',
-  ARCSEC = 'ARCSEC',
-  ARCCSC = 'ARCCSC',
-}
-
-export const MATH_BASIC_TRIGONOMETRIC_FUNCTIONS: MathKeysGroup<
-  typeof MathBasicTrigonometricFunction
-> = {
-  [MathBasicTrigonometricFunction.SIN]: {
+export const MATH_BASIC_TRIGONOMETRIC_FUNCTIONS = createMathKeysGroup({
+  SIN: {
     label: 'sin',
     mathliveValue: '$\\sin(\\placeholder{})$',
     katexValue: 'sin()',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathBasicTrigonometricFunction.COS]: {
+  COS: {
     label: 'cos',
     mathliveValue: '$\\cos(\\placeholder{})$',
-    katexValue: 'cos()',
+    katexValue: 'cos',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathBasicTrigonometricFunction.TAN]: {
+  TAN: {
     label: 'tan',
     mathliveValue: '$\\tan(\\placeholder{})$',
-    katexValue: 'tan()',
+    katexValue: 'tan',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathBasicTrigonometricFunction.COT]: {
+  COT: {
     label: 'cot',
     mathliveValue: '$\\cot(\\placeholder{})$',
     katexValue: 'cot',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathBasicTrigonometricFunction.SEC]: {
+  SEC: {
     label: 'sec',
     mathliveValue: '$\\sec(\\placeholder{})$',
     katexValue: 'sec',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathBasicTrigonometricFunction.CSC]: {
+  CSC: {
     label: 'csc',
     mathliveValue: '$\\csc(\\placeholder{})$',
     katexValue: 'csc',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-}
+})
 
-export const MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS: MathKeysGroup<
-  typeof MathInverseTrigonometricFunction
-> = {
-  [MathInverseTrigonometricFunction.ARCSIN]: {
+export const MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS = createMathKeysGroup({
+  ARCSIN: {
     label: 'arcsin',
     mathliveValue: '$\\arcsin(\\placeholder{})$',
-    katexValue: 'arcsin()',
+    katexValue: 'arcsin',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathInverseTrigonometricFunction.ARCCOS]: {
+  ARCCOS: {
     label: 'arccos',
     mathliveValue: '$\\arccos(\\placeholder{})$',
-    katexValue: 'arccos()',
+    katexValue: 'arccos',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathInverseTrigonometricFunction.ARCTAN]: {
+  ARCTAN: {
     label: 'arctan',
     mathliveValue: '$\\arctan(\\placeholder{})$',
-    katexValue: 'arctan()',
+    katexValue: 'arctan',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathInverseTrigonometricFunction.ARCCOT]: {
+  ARCCOT: {
     label: 'arccot',
     mathliveValue: '$\\operatorname{arccot}(\\placeholder{})$',
-    katexValue: 'arccot()',
+    katexValue: 'arccot',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathInverseTrigonometricFunction.ARCSEC]: {
+  ARCSEC: {
     label: 'arcsec',
     mathliveValue: '$\\operatorname{arcsec}(\\placeholder{})$',
     katexValue: 'arcsec',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-  [MathInverseTrigonometricFunction.ARCCSC]: {
+  ARCCSC: {
     label: 'arccsc',
     mathliveValue: '$\\operatorname{arccsc}(\\placeholder{})$',
     katexValue: 'arccsc',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
-}
+})