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

package/src/features/keyboard/types/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './MathKeysGroups'

package/src/features/keyboard/{types.ts → types/types.ts}

@@ -1,14 +1,17 @@
 import { ReactNode } from 'react'
-import { SelectOptionColor } from '@magmamath/react-native-ui'
+import { ButtonStyle, SelectOptionColor } from '@magmamath/react-native-ui'
+import { GestureResponderEvent } from 'react-native'
 
 export const enum KeyboardType {
   AlgebraAdvanced = 'AlgebraAdvanced',
   Basic = 'Basic',
-  BasicExtended = 'BasicExtended',
+  BasicPlus = 'BasicPlus',
+  BasicPlusMobile = 'BasicPlusMobile',
   BasicTime = 'BasicTime',
   BasicCurrency = 'BasicCurrency',
   BasicUnits = 'BasicUnits',
-  BasicExtendedPlus = 'BasicExtendedPlus',
+  BasicPlusPlus = 'BasicPlusPlus',
+  BasicPlusPlusMobile = 'BasicPlusPlusMobile',
   Numpad = 'Numpad',
 }
 
@@ -17,12 +20,17 @@ export type KeyboardKey = {
   label?: string
   isSpecialSymbol?: boolean
   mathliveValue?: string
+  spreadsheetValue?: string
   icon?: ReactNode
+  style?: ButtonStyle
 }
 
 export type KeyboardKeyValue = {
+  event: GestureResponderEvent
   katexValue: string
   mathliveValue?: string
+  isSpecialSymbol?: boolean
+  spreadsheetValue?: string
 }
 
 export type KeyboardGroup = {
@@ -34,11 +42,10 @@ export type KeyboardGroup = {
 
 export type KeyboardLayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
-  onSpecialKeyPress?: (key: KeyboardKeyValue) => void
-  onBackspacePress?: () => void
   color?: SelectOptionColor
   isSpecialButtonsDisabled?: boolean
   isDisabled?: boolean
+  disabledKeys?: KeyboardKey[]
 }
 
 export type MathKeysGroup<T extends Record<string, string>> = {

package/src/features/problemSelector/constants.ts

@@ -15,6 +15,8 @@ export const PROBLEM_SELECTOR_BUTTON_STATE = {
   NOT_SOLVED: 'not-solved',
   MISTAKE: 'mistake',
   EXAM: 'exam',
+  ASSESSMENT: 'assessment',
+  SELECTED_ASSESSMENT: 'selected-assessment',
 } as const
 
 const colorPreset = (bg: string, border: string, color: string, raise: string = border) => ({
@@ -104,4 +106,34 @@ export const COLOR_SCHEME_MAP: Record<ProblemSelectorButtonState, ButtonColorPre
     ),
     [ButtonStates.DISABLED]: colorPreset(COLORS.PURPLE_3, COLORS.PURPLE_3, COLORS.NEUTRAL_1),
   },
+  [PROBLEM_SELECTOR_BUTTON_STATE.SELECTED_ASSESSMENT]: {
+    [ButtonStates.DEFAULT]: colorPreset(
+      COLORS.ORANGE_1,
+      COLORS.PRIMARY_ORANGE,
+      COLORS.PRIMARY_ORANGE,
+    ),
+    [ButtonStates.HOVER]: colorPreset(COLORS.ORANGE_1, COLORS.ORANGE_4, COLORS.ORANGE_4),
+    [ButtonStates.ACTIVE]: colorPreset(COLORS.ORANGE_1, COLORS.ORANGE_4, COLORS.ORANGE_4),
+    [ButtonStates.PRESSED]: colorPreset(COLORS.ORANGE_1, COLORS.ORANGE_4, COLORS.ORANGE_4),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.ORANGE_1, COLORS.ORANGE_3, COLORS.ORANGE_3),
+  },
+  [PROBLEM_SELECTOR_BUTTON_STATE.ASSESSMENT]: {
+    [ButtonStates.DEFAULT]: colorPreset(
+      COLORS.PRIMARY_ORANGE,
+      COLORS.PRIMARY_ORANGE,
+      COLORS.NEUTRAL_1,
+    ),
+    [ButtonStates.HOVER]: colorPreset(COLORS.ORANGE_4, COLORS.ORANGE_4, COLORS.NEUTRAL_1),
+    [ButtonStates.ACTIVE]: colorPreset(
+      COLORS.PRIMARY_ORANGE,
+      COLORS.PRIMARY_ORANGE,
+      COLORS.NEUTRAL_1,
+    ),
+    [ButtonStates.PRESSED]: colorPreset(
+      COLORS.PRIMARY_ORANGE,
+      COLORS.PRIMARY_ORANGE,
+      COLORS.NEUTRAL_1,
+    ),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.ORANGE_3, COLORS.ORANGE_3, COLORS.NEUTRAL_1),
+  },
 }

package/src/shared/icons/MATH/AbsoluteValueIcon/AbsoluteValueIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
-import Svg, { Path } from 'react-native-svg'
+import Svg, { Path, Rect } from 'react-native-svg'
 
 export const AbsoluteValueIcon = ({ size = 20, color }: IconProps) => {
   return (
@@ -11,7 +11,7 @@ export const AbsoluteValueIcon = ({ size = 20, color }: IconProps) => {
         d="M2.22164 3.29272C2.66346 3.29272 3.02164 3.63597 3.02164 4.05939L3.02164 16.3261C3.02164 16.7495 2.66346 17.0927 2.22164 17.0927C1.77981 17.0927 1.42164 16.7495 1.42164 16.3261L1.42164 4.05939C1.42164 3.63597 1.77981 3.29272 2.22164 3.29272Z"
         fill={color}
       />
-      <rect x="5.80164" y="5.57251" width="9.24" height="9.24" rx="1.548" stroke="#B3B3BC" />
+      <Rect x="5.80164" y="5.57251" width="9.24" height="9.24" rx="1.548" stroke="#B3B3BC" />
       <Path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/shared/icons/MATH/AdditionIcon/AdditionIcon.tsx

@@ -1,19 +1,14 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const AdditionIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         d="M7.2 14.4C7.2 14.8419 7.55818 15.2 8 15.2C8.44183 15.2 8.8 14.8419 8.8 14.4V8.80005H14.4C14.8418 8.80005 15.2 8.44188 15.2 8.00005C15.2 7.55822 14.8418 7.20005 14.4 7.20005H8.8V1.60005C8.8 1.15822 8.44183 0.800049 8 0.800049C7.55818 0.800049 7.2 1.15822 7.2 1.60005V7.20005H1.6C1.15818 7.20005 0.800003 7.55822 0.800003 8.00005C0.800003 8.44188 1.15818 8.80005 1.6 8.80005H7.2V14.4Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/AlphaIcon/AlphaIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const AlphaIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.25286 10.4025C5.57106 11.011 5.94998 11.25 6.35294 11.25C6.5739 11.25 6.82916 11.137 7.1427 10.7238C7.46105 10.3042 7.75394 9.68098 8.04205 8.90547C8.09833 8.75397 8.15346 8.59949 8.20779 8.44252C8.18637 8.35859 8.16517 8.27496 8.14411 8.19191C8.11514 8.07766 8.08645 7.9645 8.05786 7.85314C7.81932 6.9238 7.58378 6.09667 7.26216 5.50316C6.94446 4.91687 6.65394 4.75 6.35294 4.75C5.94998 4.75 5.57106 4.98896 5.25286 5.59752C4.93218 6.21083 4.75 7.08277 4.75 8C4.75 8.91723 4.93218 9.78917 5.25286 10.4025ZM9.04225 5.86421C8.90941 5.48225 8.75827 5.11569 8.58098 4.78851C8.15358 3.9998 7.4637 3.25 6.35294 3.25C5.18727 3.25 4.38972 4.01104 3.92361 4.90248C3.45998 5.78917 3.25 6.91723 3.25 8C3.25 9.08277 3.45998 10.2108 3.92361 11.0975C4.38972 11.989 5.18727 12.75 6.35294 12.75C7.23002 12.75 7.87673 12.238 8.33769 11.6304C8.55373 11.3457 8.74689 11.0178 8.92227 10.6657C9.2372 11.3308 9.77851 12.0833 10.7451 12.0833C11.4552 12.0833 11.9591 11.6235 12.2184 11.3283C12.3617 11.1652 12.4715 11.0056 12.5451 10.8882C12.5824 10.8287 12.6117 10.7781 12.6325 10.7406C12.643 10.7218 12.6514 10.7062 12.6577 10.6943L12.6656 10.6791L12.6683 10.6737L12.6694 10.6716L12.6699 10.6706C12.67 10.6704 12.6703 10.6698 12 10.3333L12.6699 10.6706C12.8557 10.3004 12.7067 9.84886 12.3365 9.66304C11.9664 9.47728 11.5158 9.62658 11.3299 9.99649L11.3304 9.99547C11.3311 9.99412 11.3317 9.99298 11.3315 9.99329L11.3309 9.99441L11.3304 9.99547L11.3214 10.012C11.3118 10.0292 11.296 10.0567 11.2745 10.091C11.2305 10.1611 11.1677 10.2515 11.0914 10.3384C10.9115 10.5432 10.788 10.5833 10.7451 10.5833C10.7038 10.5833 10.5072 10.5662 10.219 9.89251C10.0532 9.50502 9.91345 9.03144 9.77223 8.4981C9.89241 8.13493 10.0087 7.76662 10.1227 7.40576C10.1783 7.22976 10.2333 7.05553 10.2879 6.88453C10.558 6.03945 10.8195 5.26986 11.11 4.65268C11.2864 4.27789 11.1255 3.83109 10.7507 3.65472C10.3759 3.47835 9.92913 3.6392 9.75276 4.01399C9.49089 4.57046 9.25895 5.21101 9.04225 5.86421Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/AngleIcon/AngleIcon.tsx

@@ -1,19 +1,14 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const AngleIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         d="M8.94912 6.74144C9.20676 6.46187 9.63941 6.41761 9.9501 6.65062C10.2606 6.88377 10.3389 7.31141 10.1425 7.63695L10.0995 7.70043L6.49991 12.5002H10.9999C11.4141 12.5002 11.7499 12.836 11.7499 13.2502C11.7499 13.6644 11.4141 14.0002 10.9999 14.0002H4.99991C4.71583 14.0002 4.45605 13.8393 4.32901 13.5852C4.20219 13.3312 4.22994 13.0272 4.4003 12.8L8.9003 6.80004L8.94912 6.74144Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/ApproximatelyEqualIcon/ApproximatelyEqualIcon.tsx

@@ -1,27 +1,22 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const ApproximatelyEqualIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.12004 4.79995C4.59954 4.79995 4.03052 4.99646 3.54568 5.72371C3.3006 6.09133 2.8039 6.19067 2.43628 5.94559C2.06866 5.70051 1.96932 5.20381 2.2144 4.83619C3.00957 3.64344 4.08953 3.19995 5.12004 3.19995C6.68187 3.19995 7.67419 3.99434 8.45732 4.62126C8.47155 4.63265 8.4857 4.64398 8.4998 4.65526C9.31006 5.30347 9.91024 5.75995 10.88 5.75995C11.4211 5.75995 11.9674 5.56672 12.4544 4.83619C12.6995 4.46857 13.1962 4.36923 13.5638 4.61431C13.9314 4.85939 14.0308 5.35609 13.7857 5.72371C12.9927 6.91318 11.9392 7.35995 10.88 7.35995C9.31822 7.35995 8.32589 6.56556 7.54276 5.93865C7.52854 5.92726 7.51438 5.91592 7.50029 5.90465C6.69002 5.25643 6.08984 4.79995 5.12004 4.79995Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.12004 10.2399C4.59954 10.2399 4.03052 10.4364 3.54568 11.1637C3.3006 11.5313 2.8039 11.6306 2.43628 11.3855C2.06866 11.1405 1.96932 10.6438 2.2144 10.2761C3.00957 9.08339 4.08953 8.63989 5.12004 8.63989C6.68187 8.63989 7.67419 9.43428 8.45732 10.0612C8.47155 10.0726 8.4857 10.0839 8.4998 10.0952C9.31006 10.7434 9.91024 11.1999 10.88 11.1999C11.4211 11.1999 11.9674 11.0067 12.4544 10.2761C12.6995 9.90851 13.1962 9.80917 13.5638 10.0543C13.9314 10.2993 14.0308 10.796 13.7857 11.1637C12.9927 12.3531 11.9392 12.7999 10.88 12.7999C9.31822 12.7999 8.32589 12.0055 7.54276 11.3786C7.52854 11.3672 7.51438 11.3559 7.50029 11.3446C6.69002 10.6964 6.08984 10.2399 5.12004 10.2399Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/BetaIcon/BetaIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const BetaIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.47145 2.36074C6.14853 2.74065 6 3.19733 6 3.5V14.9995C6 14.9996 6 15 5.25 15C4.5 15 4.5 15 4.5 14.9999V3.5C4.5 2.80267 4.80148 2.00935 5.32854 1.38926C5.87049 0.751679 6.69336 0.25 7.75 0.25C8.76604 0.25 9.58344 0.759992 10.1269 1.38112C10.658 1.98807 11 2.78233 11 3.5V3.50148C11 3.63687 11.0001 4.43691 10.5112 5.21999C10.3411 5.49243 10.1215 5.74808 9.84412 5.9695C10.7447 6.52724 11.5 7.49051 11.5 9C11.5 10.2859 10.9801 11.394 10.1315 12.0513C9.26723 12.7207 8.10834 12.8768 7.02741 12.3051C6.66126 12.1114 6.52144 11.6576 6.7151 11.2914C6.90877 10.9253 7.3626 10.7855 7.72874 10.9791C8.26973 11.2653 8.79681 11.1878 9.213 10.8654C9.64487 10.5309 10 9.88904 10 9C10 8.06019 9.55684 7.53685 8.9971 7.21033C8.39399 6.85852 7.66023 6.75 7.25 6.75C6.83579 6.75 6.5 6.41421 6.5 6C6.5 5.58579 6.83579 5.25 7.25 5.25C8.52309 5.25 9.01685 4.78121 9.23879 4.42568C9.49814 4.01022 9.5 3.56329 9.5 3.5C9.5 3.21767 9.34199 2.76193 8.99806 2.36888C8.66655 1.99001 8.23395 1.75 7.75 1.75C7.20664 1.75 6.77951 1.99832 6.47145 2.36074ZM5.25 15.75C4.83579 15.75 4.5 15.4141 4.5 14.9999L5.25 15L6 14.9995C6 15.4137 5.66421 15.75 5.25 15.75Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/BidirectionalSegmentIcon/BidirectionalSegmentIcon.tsx

@@ -1,25 +1,20 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 const ASPECT_RATIO = 20 / 21
 
 export const BidirectionalSegmentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size * ASPECT_RATIO}
-      height={size}
-      viewBox="0 0 20 21"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 20 21" fill="none">
+      <Path
         d="M16.6464 0.146692C16.8173 -0.0241721 17.0813 -0.0459256 17.2754 0.0822385L17.3535 0.146692L19.3535 2.14669L19.4179 2.22482C19.5461 2.4189 19.5243 2.68286 19.3535 2.85372L17.3535 4.85372C17.1582 5.04899 16.8417 5.04899 16.6464 4.85372C16.4512 4.65846 16.4512 4.34195 16.6464 4.14669L17.7929 3.00021H2.20699L3.35348 4.14669L3.41793 4.22482C3.5461 4.4189 3.52434 4.68286 3.35348 4.85372C3.18261 5.02459 2.91865 5.04634 2.72457 4.91818L2.64645 4.85372L0.646447 2.85372C0.451184 2.65846 0.451184 2.34195 0.646447 2.14669L2.64645 0.146692L2.72457 0.0822385C2.91865 -0.0459256 3.18261 -0.0241721 3.35348 0.146692C3.52434 0.317555 3.5461 0.581519 3.41793 0.775598L3.35348 0.853723L2.20699 2.00021H17.7929L16.6464 0.853723L16.582 0.775598C16.4538 0.581519 16.4756 0.317555 16.6464 0.146692Z"
         fill={color}
       />
-      <path
+      <Path
         d="M8.07948 17L7.70148 14.55H3.52948L2.01748 17H0.407484L6.55348 7.2H7.91149L9.52148 17H8.07948ZM4.32748 13.22H7.51948L6.87548 9.09L4.32748 13.22ZM16.4822 7.2C18.0922 7.2 18.8762 8.236 18.8762 9.342C18.8762 10.434 18.1762 11.54 16.8322 11.82C17.9662 12.128 18.4842 12.996 18.4842 13.906C18.4842 15.432 17.1402 17 14.8162 17H11.0502L13.3182 7.2H16.4822ZM12.7582 15.698H14.9842C16.3842 15.698 17.0562 14.788 17.0562 13.906C17.0562 13.164 16.4822 12.506 15.4042 12.506H13.5002L12.7582 15.698ZM13.7522 11.358H15.5722C16.7762 11.358 17.4482 10.49 17.4482 9.692C17.4482 8.95 16.9862 8.502 16.0202 8.502H14.4102L13.7522 11.358Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/CentIcon/CentIcon.tsx

@@ -1,19 +1,14 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const CentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         d="M7.45801 13V11.8838C6.72701 11.7135 6.04825 11.3731 5.50977 10.8477C4.79613 10.1513 4.375 9.17855 4.375 8C4.375 6.82142 4.79608 5.84859 5.50977 5.15234C6.04833 4.62695 6.72694 4.28543 7.45801 4.11523V3C7.45801 2.5859 7.79394 2.25018 8.20801 2.25C8.62222 2.25 8.95801 2.58579 8.95801 3V4C9.75561 4.0591 10.5453 4.31112 11.1904 4.79297L11.3594 4.92773L11.416 4.98047C11.6795 5.25411 11.698 5.6881 11.4473 5.98438C11.1963 6.28087 10.7647 6.33436 10.4512 6.11914L10.3906 6.07227L10.292 5.99414C9.85066 5.66555 9.24106 5.48494 8.58105 5.48633L8.27344 5.5C7.57128 5.56083 6.97208 5.8203 6.55664 6.22559C6.15097 6.62138 5.875 7.19896 5.875 8C5.875 8.80097 6.151 9.37854 6.55664 9.77441C6.9721 10.1798 7.57133 10.4392 8.27344 10.5L8.58105 10.5137C9.29174 10.5152 9.94395 10.3058 10.3906 9.92773C10.7068 9.66023 11.1797 9.69957 11.4473 10.0156C11.7148 10.3318 11.6755 10.8047 11.3594 11.0723C10.686 11.6422 9.82677 11.9346 8.95801 11.999V13C8.95801 13.4142 8.62222 13.75 8.20801 13.75C7.79394 13.7498 7.45801 13.4141 7.45801 13Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/ColonIcon/ColonIcon.tsx

@@ -1,17 +1,12 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Circle } from 'react-native-svg'
 
 export const ColonIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="8.00002" cy="4.40005" r="1.6" fill={color} />
-      <circle cx="8.00002" cy="11.6" r="1.6" fill={color} />
-    </svg>
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Circle cx="8.00002" cy="4.40005" r="1.6" fill={color} />
+      <Circle cx="8.00002" cy="11.6" r="1.6" fill={color} />
+    </Svg>
   )
 }

package/src/shared/icons/MATH/CongruentIcon/CongruentIcon.tsx

@@ -1,33 +1,28 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const CongruentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.12004 3.35977C4.59954 3.35977 4.03052 3.55627 3.54568 4.28353C3.3006 4.65115 2.8039 4.75049 2.43628 4.50541C2.06866 4.26032 1.96932 3.76363 2.2144 3.39601C3.00957 2.20326 4.08953 1.75977 5.12004 1.75977C6.68187 1.75977 7.67419 2.55416 8.45732 3.18107C8.47155 3.19246 8.4857 3.2038 8.4998 3.21507C9.31006 3.86328 9.91024 4.31977 10.88 4.31977C11.4211 4.31977 11.9674 4.12654 12.4544 3.39601C12.6995 3.02838 13.1962 2.92904 13.5638 3.17413C13.9314 3.41921 14.0308 3.9159 13.7857 4.28353C12.9927 5.47299 11.9392 5.91977 10.88 5.91977C9.31822 5.91977 8.32589 5.12538 7.54276 4.49846C7.52854 4.48707 7.51438 4.47573 7.50029 4.46446C6.69002 3.81625 6.08984 3.35977 5.12004 3.35977Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0.800049 9.27998C0.800049 8.83815 1.15822 8.47998 1.60005 8.47998H14.4C14.8419 8.47998 15.2 8.83815 15.2 9.27998C15.2 9.72181 14.8419 10.08 14.4 10.08H1.60005C1.15822 10.08 0.800049 9.72181 0.800049 9.27998Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0.800049 13.4401C0.800049 12.9983 1.15822 12.6401 1.60005 12.6401H14.4C14.8419 12.6401 15.2 12.9983 15.2 13.4401C15.2 13.882 14.8419 14.2401 14.4 14.2401H1.60005C1.15822 14.2401 0.800049 13.882 0.800049 13.4401Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/CubeRootIcon/CubeRootIcon.tsx

@@ -1,25 +1,20 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const CubeRootIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M7.86126 2.37678C7.94629 2.01541 8.26875 1.76001 8.64 1.76001H14.08C14.5218 1.76001 14.88 2.11818 14.88 2.56001C14.88 3.00184 14.5218 3.36001 14.08 3.36001H9.27361L6.85873 13.6232C6.78236 13.9478 6.51273 14.1909 6.18204 14.2335C5.85135 14.276 5.52896 14.109 5.37296 13.8143L2.71833 8.80001H1.92C1.47817 8.80001 1.12 8.44184 1.12 8.00001C1.12 7.55818 1.47817 7.20001 1.92 7.20001H3.2C3.49632 7.20001 3.76838 7.36381 3.90703 7.6257L5.78955 11.1816L7.86126 2.37678Z"
         fill={color}
       />
-      <path
+      <Path
         d="M4.79782 3.5639C5.57382 3.7559 5.92582 4.2599 5.92582 4.8839C5.92582 5.8679 5.04582 6.5479 3.93382 6.5479C2.97382 6.5479 2.22982 6.0359 1.91782 5.2199L3.08582 4.6279C3.21382 5.0759 3.54982 5.3559 3.99782 5.3559C4.34982 5.3559 4.60582 5.1879 4.60582 4.8519C4.60582 4.4119 4.22182 4.2519 3.54182 4.2519H3.23782V3.2119C4.04582 3.2119 4.40582 3.0359 4.40582 2.6039C4.40582 2.3159 4.17382 2.1399 3.84582 2.1399C3.46182 2.1399 3.07782 2.3879 2.91782 2.7399L1.94982 2.1399C2.26182 1.3719 3.02982 0.899902 3.94182 0.899902C4.96582 0.899902 5.74182 1.4839 5.74182 2.2839C5.74182 2.8519 5.35782 3.3719 4.79782 3.5639Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/DecimalPointIcon/DecimalPointIcon.tsx

@@ -1,18 +1,13 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Circle } from 'react-native-svg'
 
 const ASPECT_RATIO = 20 / 18
 
 export const DecimalPointIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size * ASPECT_RATIO}
-      height={size}
-      viewBox="0 0 20 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="10" cy="11.4" r="1.6" fill={color} />
-    </svg>
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 20 18" fill="none">
+      <Circle cx="10" cy="11.4" r="1.6" fill={color} />
+    </Svg>
   )
 }

package/src/shared/icons/MATH/DefiniteIntegralIcon/DefiniteIntegralIcon.tsx

@@ -1,22 +1,17 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path, Rect } from 'react-native-svg'
 
 export const DefiniteIntegralIcon = ({ size = 20, color, extraColor }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10.3684 3.02093C11.2559 2.79504 12.0664 3.27511 12.4475 4.03735C12.6327 4.40783 12.4825 4.85834 12.1121 5.04358C11.7416 5.22882 11.2911 5.07865 11.1058 4.70817C10.9869 4.4704 10.8331 4.45047 10.7384 4.47458C10.6111 4.50698 10.2459 4.71046 9.9978 5.57878C9.51279 7.27629 9.16146 9.42767 8.85671 11.408C8.82604 11.6072 8.79582 11.8049 8.76597 12.0001C8.64898 12.7654 8.53779 13.4927 8.42817 14.1299C8.29242 14.919 8.1508 15.622 7.98817 16.1099C7.66312 17.0851 6.95406 17.7002 6.11969 17.8045C5.30365 17.9065 4.49781 17.4921 4.10583 16.7082C3.92059 16.3377 4.07076 15.8872 4.44124 15.7019C4.81173 15.5167 5.26223 15.6669 5.44747 16.0373C5.55549 16.2534 5.74966 16.339 5.93362 16.316C6.09925 16.2953 6.39019 16.1604 6.56514 15.6356C6.68755 15.2683 6.81344 14.6687 6.94989 13.8756C7.05689 13.2536 7.16529 12.5446 7.28202 11.7812C7.31214 11.5841 7.34281 11.3835 7.37416 11.1798C7.67689 9.21267 8.04051 6.9692 8.55551 5.1667C8.87884 4.03503 9.51361 3.23851 10.3684 3.02093Z"
         fill={color}
       />
-      <rect
+      <Rect
         x="13.6216"
         y="0.524023"
         width="5.95203"
@@ -25,7 +20,7 @@ export const DefiniteIntegralIcon = ({ size = 20, color, extraColor }: IconProps
         stroke={extraColor}
         strokeWidth={0.8}
       />
-      <rect
+      <Rect
         x="9.62156"
         y="13.524"
         width="5.95203"
@@ -34,6 +29,6 @@ export const DefiniteIntegralIcon = ({ size = 20, color, extraColor }: IconProps
         stroke={extraColor}
         strokeWidth={0.8}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/DegreeIcon/DegreeIcon.tsx

@@ -1,16 +1,11 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Circle } from 'react-native-svg'
 
 export const DegreeIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="7.6" cy="4.6" r="2.35" stroke={color} strokeWidth="1.5" />
-    </svg>
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Circle cx="7.6" cy="4.6" r="2.35" stroke={color} strokeWidth="1.5" />
+    </Svg>
   )
 }

package/src/shared/icons/MATH/DeltaIcon/DeltaIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const DeltaIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M4.91733 3.6343C5.08139 2.36935 6.21063 1.25 7.57665 1.25C9.48835 1.25 10.561 2.43157 11.1157 3.50077C11.3065 3.86845 11.163 4.32114 10.7954 4.51189C10.4277 4.70264 9.97499 4.55922 9.78424 4.19154C9.38116 3.41459 8.72984 2.75 7.57665 2.75C7.02712 2.75 6.48025 3.24603 6.40487 3.82724C6.3718 4.08218 6.43147 4.35774 6.66242 4.62484C6.90396 4.90418 7.37373 5.21811 8.23122 5.42471C10.7005 6.01968 11.7758 8.3985 11.7495 10.4497C11.7362 11.4923 11.4459 12.5462 10.8376 13.3595C10.2138 14.1934 9.26814 14.75 8.05555 14.75C6.71372 14.75 5.71038 14.1231 5.07877 13.1964C4.46664 12.2983 4.21952 11.1502 4.25297 10.054C4.28647 8.95629 4.60349 7.8263 5.21932 6.94893C5.45002 6.62025 5.72581 6.32417 6.04461 6.08123C5.84845 5.93617 5.67608 5.77747 5.52776 5.60593C5.01045 5.00765 4.83067 4.30244 4.91733 3.6343ZM7.96827 6.90576C7.34305 6.9333 6.83511 7.25784 6.44707 7.81069C6.03029 8.40447 5.77863 9.23602 5.75228 10.0998C5.72587 10.9652 5.92771 11.7786 6.31826 12.3516C6.68933 12.8961 7.24238 13.25 8.05555 13.25C8.75851 13.25 9.27306 12.9468 9.63648 12.461C10.0154 11.9544 10.2394 11.2284 10.2496 10.4305C10.2701 8.83202 9.46207 7.31578 7.96827 6.90576Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/DerivativeIcon/DerivativeIcon.tsx

@@ -1,37 +1,32 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const DerivativeIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
         d="M13.6777 2.57617H15.0057L14.0937 6.56817C13.7657 7.99217 12.7257 8.61617 11.5737 8.61617C10.6697 8.61617 9.95766 8.20017 9.59766 7.36017L10.7337 6.74417C10.9177 7.20017 11.2457 7.43217 11.7177 7.43217C12.2537 7.43217 12.6297 7.12817 12.7497 6.63217L12.8697 6.15217C12.5337 6.47217 12.1017 6.61617 11.6937 6.61617C10.9257 6.61617 10.3737 6.10417 10.3737 5.36017C10.3737 5.24017 10.3897 5.11217 10.4217 4.98417L10.9657 2.57617H12.2937L11.7977 4.75217C11.7817 4.82417 11.7737 4.88817 11.7737 4.94417C11.7737 5.27217 12.0057 5.44817 12.3417 5.44817C12.7337 5.44817 13.0857 5.21617 13.2057 4.68017L13.6777 2.57617Z"
         fill={color}
       />
-      <path
+      <Path
         d="M8.89038 6.73623H7.63439L7.73838 6.29623C7.52238 6.58423 7.21838 6.78423 6.67438 6.78423C5.53838 6.78423 4.99438 5.90423 4.99438 4.93623C4.99438 3.76823 5.78638 2.48023 7.25038 2.48023C7.89038 2.48023 8.26638 2.72823 8.42638 3.00823L8.85839 1.13623H10.1944L8.89038 6.73623ZM6.30638 4.73623C6.30638 5.19223 6.55438 5.61623 7.07438 5.61623C7.70638 5.61623 8.04239 5.05623 8.04239 4.52823C8.04239 4.07223 7.78638 3.64823 7.25838 3.64823C6.63438 3.64823 6.30638 4.20823 6.30638 4.73623Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M4.80005 10.9162C4.80005 10.4744 5.15822 10.1162 5.60005 10.1162H14.4C14.8419 10.1162 15.2 10.4744 15.2 10.9162C15.2 11.358 14.8419 11.7162 14.4 11.7162H5.60005C5.15822 11.7162 4.80005 11.358 4.80005 10.9162Z"
         fill={color}
       />
-      <path
+      <Path
         d="M14.1138 18.8158H12.5538L12.0978 17.7678L11.1378 18.8158H9.36975L11.5058 16.6558L10.4658 14.6558H12.0178L12.4898 15.7118L13.4258 14.6558H15.1778L13.0578 16.7998L14.1138 18.8158Z"
         fill={color}
       />
-      <path
+      <Path
         d="M8.71839 18.8158H7.46239L7.56639 18.3758C7.35039 18.6638 7.04639 18.8638 6.50239 18.8638C5.36639 18.8638 4.82239 17.9838 4.82239 17.0158C4.82239 15.8478 5.61439 14.5598 7.07839 14.5598C7.71839 14.5598 8.09439 14.8078 8.25439 15.0878L8.68639 13.2158H10.0224L8.71839 18.8158ZM6.13439 16.8158C6.13439 17.2718 6.38239 17.6958 6.90239 17.6958C7.53439 17.6958 7.87039 17.1358 7.87039 16.6078C7.87039 16.1518 7.61439 15.7278 7.08639 15.7278C6.46239 15.7278 6.13439 16.2878 6.13439 16.8158Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/DivisionIcon/DivisionIcon.tsx

@@ -1,23 +1,18 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path, Circle } from 'react-native-svg'
 
 export const DivisionIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="7.99999" cy="3.68008" r="1.6" fill={color} />
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Circle cx="7.99999" cy="3.68008" r="1.6" fill={color} />
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0.799988 7.99995C0.799988 7.55812 1.15816 7.19995 1.59999 7.19995H14.4C14.8418 7.19995 15.2 7.55812 15.2 7.99995C15.2 8.44178 14.8418 8.79995 14.4 8.79995H1.59999C1.15816 8.79995 0.799988 8.44178 0.799988 7.99995Z"
         fill={color}
       />
-      <circle cx="7.99999" cy="12.32" r="1.6" fill={color} />
-    </svg>
+      <Circle cx="7.99999" cy="12.32" r="1.6" fill={color} />
+    </Svg>
   )
 }

package/src/shared/icons/MATH/DollarIcon/DollarIcon.tsx

@@ -1,26 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path, G } from 'react-native-svg'
 
 export const DollarIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_1139_12149)">
-        <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <G clipPath="url(#clip0_1139_12149)">
+        <Path
           d="M8.63631 7.10029V3.90067C9.32077 4.01612 9.96616 4.29698 10.5179 4.71875C10.6279 4.79418 10.757 4.8351 10.8906 4.8369C11.3187 4.8369 11.6678 4.4924 11.6723 4.06427C11.6732 3.88067 11.6014 3.70433 11.4724 3.57343C10.6752 2.89077 9.67529 2.48811 8.62723 2.42811V1.3555C8.62723 1.04916 8.37908 0.801011 8.07274 0.801011C8.06638 0.800111 8.06 0.800111 8.05364 0.800111C7.74277 0.795554 7.48644 1.04373 7.48188 1.3555V2.39175C5.43667 2.53718 4.04593 3.80068 4.04593 5.48229C4.04593 7.54568 5.80027 8.11836 7.48188 8.57284V12.2088C6.5947 12.0897 5.75845 11.7216 5.07307 11.1453C4.944 11.0426 4.78399 10.9853 4.61856 10.9817C4.19952 11.0108 3.87684 11.3616 3.88227 11.7816C3.88137 11.9652 3.95317 12.1415 4.08224 12.2724C5.02123 13.1178 6.22837 13.6041 7.49094 13.645V14.6449C7.49094 14.6512 7.49184 14.6576 7.49184 14.664C7.50638 14.9749 7.7709 15.2148 8.08177 15.1994C8.38811 15.1994 8.63626 14.9512 8.63626 14.6449V13.6268C11.1178 13.4632 12.1177 11.9543 12.1177 10.3545C12.1177 8.20926 10.318 7.55479 8.63631 7.10029ZM7.49099 6.80941C6.5002 6.51854 5.72757 6.21859 5.72757 5.37322C5.72757 4.52786 6.42749 3.91884 7.49099 3.83705V6.80941ZM8.63631 12.227V8.91827C9.66348 9.20915 10.4634 9.6 10.4543 10.5544C10.4543 11.2453 9.9816 12.0634 8.63631 12.227Z"
           fill={color}
         />
-      </g>
-      <defs>
-        <clipPath id="clip0_1139_12149">
-          <rect width="14.4" height="14.4" fill="white" transform="translate(0.799988 0.800049)" />
-        </clipPath>
-      </defs>
-    </svg>
+      </G>
+    </Svg>
   )
 }