@magmamath/students-features 1.1.3 → 1.2.0

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

@@ -1,8 +1,19 @@
-import { ReactNode } from 'react'
-import { ButtonStyle, SelectOptionColor } from '@magmamath/react-native-ui'
+import type { ReactNode } from 'react'
+import { SelectOptionColor } from '@magmamath/react-native-ui'
 import { GestureResponderEvent } from 'react-native'
 
-export const enum KeyboardType {
+export type KeyboardKey = {
+  icon?: ReactNode
+  mathliveValue: string
+  katexValue: string
+  isSpecialSymbol?: boolean
+  mathQuillValue?: string
+  spreadsheetValue?: string
+  label?: string
+  style?: Record<string, any>
+}
+
+export enum KeyboardType {
   AlgebraAdvanced = 'AlgebraAdvanced',
   Basic = 'Basic',
   BasicPlus = 'BasicPlus',
@@ -16,15 +27,32 @@ export const enum KeyboardType {
   Underlined = 'Underlined',
 }
 
-export type KeyboardKey = {
-  katexValue: string
-  label?: string
-  isSpecialSymbol?: boolean
-  mathliveValue?: string
-  spreadsheetValue?: string
-  mathQuillValue?: string
-  icon?: ReactNode
-  style?: ButtonStyle
+export enum KeyboardUnitsGroupType {
+  LENGTH = 'length',
+  AREA = 'area',
+  VOLUME = 'volume',
+  WEIGHT = 'weight',
+  TIME = 'time',
+}
+
+export type MathOperatorsGroup = Record<string, KeyboardKey>
+
+export type KeyboardGroup = {
+  keys: KeyboardKey[]
+  numOfRows?: number
+}
+
+export type KeyboardGroups = Record<string, KeyboardGroup>
+
+export type KeyboardRowsGroup = {
+  keys: KeyboardKey[][]
+}
+
+export type KeyboardRowsGroups = Record<string, KeyboardRowsGroup>
+
+export type ResolvedKeyboard = {
+  operators: Record<KeyboardType, KeyboardGroup>
+  units: Record<KeyboardUnitsGroupType, KeyboardRowsGroup>
 }
 
 export type KeyboardKeyValue = {
@@ -36,21 +64,11 @@ export type KeyboardKeyValue = {
   mathQuillValue?: string
 }
 
-export type KeyboardGroup = {
-  id: string
-  className?: string
-  keys: KeyboardKey[]
-  numOfRows?: number
-}
-
 export type KeyboardLayoutProps = {
+  keys: ResolvedKeyboard
   onKeyPress: (key: KeyboardKeyValue) => void
   onLayoutChange?: (isSecondaryLayout: boolean) => void
   color?: SelectOptionColor
   isDisabled?: boolean
   disabledKeys?: KeyboardKey[]
 }
-
-export type MathKeysGroup<T extends Record<string, string>> = {
-  [K in keyof T as T[K]]: KeyboardKey
-}

package/src/index.ts

@@ -1,4 +1,4 @@
-export { useFeaturesLocalization, setFeaturesLocalization, Locale } from './shared/translation'
+export { useFeaturesLocalization, setFeaturesLocalization } from './shared/translation'
 export { generateRandomId } from './lib/helpers/helpers'
 export * from './features/chatbot'
 export * from './features/feedback'

package/src/shared/icons/IntegralABIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+const ASPECT_RATIO = 25 / 23
+
+export const IntegralABIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 25 23" fill="none">
+      <Path
+        d="M17.8511 18.9484C17.8511 19.2204 18.0271 19.3324 18.2111 19.3324C18.2991 19.3324 18.3871 19.3084 18.4671 19.2604L18.7391 20.2204C18.4671 20.4204 18.1471 20.5164 17.8431 20.5164C17.3551 20.5164 16.9071 20.2684 16.7631 19.7804C16.5151 20.2364 16.0031 20.5164 15.3391 20.5164C14.1791 20.5164 13.4111 19.6044 13.4111 18.3644C13.4111 17.1404 14.1391 16.2124 15.3471 16.2124C15.9551 16.2124 16.3871 16.4524 16.5631 16.8044V16.3084H17.8511V18.9484ZM14.7391 18.3644C14.7391 18.9484 15.0911 19.3484 15.6191 19.3484C16.1631 19.3484 16.5231 18.9484 16.5231 18.3644C16.5231 17.7804 16.1631 17.3804 15.6191 17.3804C15.0911 17.3804 14.7391 17.7804 14.7391 18.3644Z"
+        fill={color}
+      />
+      <Path
+        d="M20.6816 3.21241C21.8896 3.21241 22.6176 4.14841 22.6176 5.36441C22.6176 6.58041 21.8816 7.51641 20.6896 7.51641C20.1296 7.51641 19.6416 7.30041 19.4336 6.97241V7.46841H18.1856V1.86841H19.5136V3.72441C19.6816 3.42841 20.1216 3.21241 20.6816 3.21241ZM19.5056 5.36441C19.5056 5.94841 19.8656 6.34841 20.4096 6.34841C20.9376 6.34841 21.2896 5.94841 21.2896 5.36441C21.2896 4.78041 20.9376 4.38041 20.4096 4.38041C19.8656 4.38041 19.5056 4.78041 19.5056 5.36441Z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.5676 3.77312C14.455 3.54723 15.2655 4.02731 15.6466 4.78955C15.8319 5.16003 15.6817 5.61053 15.3112 5.79578C14.9407 5.98102 14.4902 5.83085 14.305 5.46036C14.1861 5.22259 14.0323 5.20267 13.9376 5.22677C13.8103 5.25918 13.445 5.46266 13.197 6.33098C12.712 8.02849 12.3606 10.1799 12.0559 12.1602C12.0252 12.3594 11.995 12.5571 11.9651 12.7523C11.8481 13.5176 11.737 14.2449 11.6273 14.8821C11.4916 15.6712 11.35 16.3742 11.1873 16.8621C10.8623 17.8373 10.1532 18.4524 9.31885 18.5567C8.50281 18.6587 7.69698 18.2443 7.30499 17.4604C7.11975 17.0899 7.26992 16.6394 7.6404 16.4541C8.01089 16.2689 8.46139 16.4191 8.64664 16.7895C8.75465 17.0056 8.94882 17.0912 9.13278 17.0682C9.29841 17.0475 9.58935 16.9126 9.7643 16.3878C9.88671 16.0205 10.0126 15.4209 10.149 14.6278C10.2561 14.0058 10.3644 13.2968 10.4812 12.5333C10.5113 12.3363 10.542 12.1357 10.5733 11.932C10.876 9.96487 11.2397 7.72139 11.7547 5.9189C12.078 4.78723 12.7128 3.99071 13.5676 3.77312Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path, Rect } from 'react-native-svg'
+
+export const AbsoluteValueIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 21 21" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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={color} />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.6216 3.29272C19.0635 3.29272 19.4216 3.63597 19.4216 4.05939L19.4216 16.3261C19.4216 16.7495 19.0635 17.0927 18.6216 17.0927C18.1798 17.0927 17.8216 16.7495 17.8216 16.3261L17.8216 4.05939C17.8216 3.63597 18.1798 3.29272 18.6216 3.29272Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +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">
+      <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>
+  )
+}

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

@@ -0,0 +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">
+      <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>
+  )
+}

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

@@ -0,0 +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">
+      <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>
+  )
+}

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

@@ -0,0 +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">
+      <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
+        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>
+  )
+}

package/src/shared/icons/keyboard/BackspaceIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { G, Path } from 'react-native-svg'
+
+export const BackspaceIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 21 21" fill="none">
+      <G clipPath="url(#clip0_1683_234)">
+        <Path
+          d="M17.8252 2.7644H7.23593C6.80314 2.7644 6.39561 2.96817 6.13593 3.3144L1.54218 9.4394C1.17551 9.92829 1.17551 10.6005 1.54218 11.0894L6.13593 17.2144C6.39561 17.5606 6.80314 17.7644 7.23593 17.7644H17.8252C18.5846 17.7644 19.2002 17.1488 19.2002 16.3894V4.1394C19.2002 3.38001 18.5846 2.7644 17.8252 2.7644Z"
+          stroke={color}
+          strokeWidth="1.75"
+          strokeLinecap="round"
+        />
+        <Path
+          d="M8.62332 13.3894L14.8733 7.1394"
+          stroke={color}
+          strokeWidth="1.75"
+          strokeLinecap="round"
+        />
+        <Path
+          d="M14.6847 13.3894L8.43472 7.1394"
+          stroke={color}
+          strokeWidth="1.75"
+          strokeLinecap="round"
+        />
+      </G>
+    </Svg>
+  )
+}

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

@@ -0,0 +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">
+      <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>
+  )
+}

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

@@ -0,0 +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">
+      <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
+        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>
+  )
+}

package/src/shared/icons/keyboard/CDotIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Circle } from 'react-native-svg'
+
+export const CDotIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 6 6" fill="none">
+      <Circle cx="3.00001" cy="3.00001" r="3.00001" fill={color} />
+    </Svg>
+  )
+}

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

@@ -0,0 +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">
+      <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>
+  )
+}

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

@@ -0,0 +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">
+      <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/keyboard/CommaIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+const ASPECT_RATIO = 18 / 20
+
+export const CommaIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 20 18" fill="none">
+      <Path
+        d="M8.39999 11.4C8.39999 12.2837 9.11634 13 9.99999 13C10 14.0001 8 14.1257 8 14.5001C8 14.8745 8.33333 15.0001 8.5 15.0001C10.2408 15.0001 11.6 13.2527 11.6 11.4C11.6 10.5164 10.8836 9.80005 9.99999 9.80005C9.11634 9.80005 8.39999 10.5164 8.39999 11.4Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +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">
+      <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
+        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
+        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>
+  )
+}

package/src/shared/icons/keyboard/CubePowerIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Svg, { Path, Rect } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+const ASPECT_RATIO = 21 / 20
+
+export const CubePowerIcon = ({ size = 20, color, extraColor }: IconProps) => {
+  return (
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 21 20" fill="none">
+      <Rect x="4.49902" y="6.57617" width="9.24" height="9.24" rx="1.548" stroke={extraColor} />
+      <Path
+        d="M18.9973 3.33C19.9673 3.57 20.4073 4.2 20.4073 4.98C20.4073 6.21 19.3073 7.06 17.9173 7.06C16.7173 7.06 15.7873 6.42 15.3973 5.4L16.8573 4.66C17.0173 5.22 17.4373 5.57 17.9973 5.57C18.4373 5.57 18.7573 5.36 18.7573 4.94C18.7573 4.39 18.2773 4.19 17.4273 4.19H17.0473V2.89C18.0573 2.89 18.5073 2.67 18.5073 2.13C18.5073 1.77 18.2173 1.55 17.8073 1.55C17.3273 1.55 16.8473 1.86 16.6473 2.3L15.4373 1.55C15.8273 0.59 16.7873 -4.76837e-07 17.9273 -4.76837e-07C19.2073 -4.76837e-07 20.1773 0.73 20.1773 1.73C20.1773 2.44 19.6973 3.09 18.9973 3.33Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +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">
+      <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
+        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>
+  )
+}

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

@@ -0,0 +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">
+      <Circle cx="10" cy="11.4" r="1.6" fill={color} />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,34 @@
+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">
+      <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
+        x="13.6216"
+        y="0.524023"
+        width="5.95203"
+        height="5.95203"
+        rx="0.950407"
+        stroke={extraColor}
+        strokeWidth={0.8}
+      />
+      <Rect
+        x="9.62156"
+        y="13.524"
+        width="5.95203"
+        height="5.95203"
+        rx="0.950407"
+        stroke={extraColor}
+        strokeWidth={0.8}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +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">
+      <Circle cx="7.6" cy="4.6" r="2.35" stroke={color} strokeWidth="1.5" />
+    </Svg>
+  )
+}

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

@@ -0,0 +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">
+      <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>
+  )
+}

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

@@ -0,0 +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">
+      <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
+        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
+        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
+        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
+        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>
+  )
+}

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

@@ -0,0 +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">
+      <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>
+  )
+}

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

@@ -0,0 +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">
+      <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>
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/DotIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Circle } from 'react-native-svg'
+
+export const DotIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Circle cx="8.00001" cy="8.00001" r="3.00001" fill={color} />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/DoubleIntegralIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const DoubleIntegralIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 18" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.84158 1.62884C9.72903 1.40295 10.5395 1.88302 10.9206 2.64526C11.1059 3.01574 10.9557 3.46625 10.5852 3.65149C10.2147 3.83673 9.76422 3.68656 9.57898 3.31608C9.46009 3.07831 9.30628 3.05838 9.21159 3.08249C9.08426 3.11489 8.71903 3.31837 8.47094 4.18669C7.98594 5.8842 7.6346 8.03558 7.32985 10.0159C7.29918 10.2152 7.26896 10.4128 7.23912 10.6081C7.12213 11.3733 7.01093 12.1006 6.90132 12.7378C6.76557 13.5269 6.62394 14.2299 6.46131 14.7178C6.13626 15.693 5.4272 16.3081 4.59283 16.4124C3.77679 16.5144 2.97096 16.1 2.57898 15.3161C2.39374 14.9456 2.5439 14.4951 2.91439 14.3098C3.28487 14.1246 3.73538 14.2748 3.92062 14.6453C4.02864 14.8613 4.2228 14.947 4.40677 14.924C4.57239 14.9033 4.86334 14.7683 5.03828 14.2435C5.16069 13.8762 5.28659 13.2766 5.42303 12.4835C5.53004 11.8615 5.63843 11.1526 5.75516 10.3891C5.78528 10.1921 5.81595 9.99142 5.8473 9.78771C6.15003 7.82058 6.51366 5.57711 7.02866 3.77461C7.35199 2.64294 7.98676 1.84642 8.84158 1.62884Z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.3419 1.62884C16.2294 1.40295 17.0399 1.88302 17.421 2.64526C17.6062 3.01574 17.4561 3.46625 17.0856 3.65149C16.7151 3.83673 16.2646 3.68656 16.0793 3.31608C15.9605 3.07831 15.8066 3.05838 15.712 3.08249C15.5846 3.11489 15.2194 3.31837 14.9713 4.18669C14.4863 5.8842 14.135 8.03558 13.8302 10.0159C13.7995 10.2152 13.7693 10.4128 13.7395 10.6081C13.6225 11.3733 13.5113 12.1006 13.4017 12.7378C13.2659 13.5269 13.1243 14.2299 12.9617 14.7178C12.6366 15.693 11.9276 16.3081 11.0932 16.4124C10.2772 16.5144 9.47133 16.1 9.07934 15.3161C8.8941 14.9456 9.04427 14.4951 9.41475 14.3098C9.78524 14.1246 10.2357 14.2748 10.421 14.6453C10.529 14.8613 10.7232 14.947 10.9071 14.924C11.0728 14.9033 11.3637 14.7683 11.5387 14.2435C11.6611 13.8762 11.787 13.2766 11.9234 12.4835C12.0304 11.8615 12.1388 11.1526 12.2555 10.3891C12.2856 10.1921 12.3163 9.99142 12.3477 9.78771C12.6504 7.82058 13.014 5.57711 13.529 3.77461C13.8524 2.64294 14.4871 1.84642 15.3419 1.62884Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/ElementOfIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const ElementOfIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M11.5 3.25C11.9142 3.25 12.25 3.58579 12.25 4C12.25 4.41421 11.9142 4.75 11.5 4.75H8.5C6.96328 4.75 5.67655 5.81675 5.33789 7.25H11.5C11.9142 7.25 12.25 7.58579 12.25 8C12.25 8.41421 11.9142 8.75 11.5 8.75H5.33789C5.67655 10.1832 6.96328 11.25 8.5 11.25H11.5C11.9142 11.25 12.25 11.5858 12.25 12C12.25 12.4142 11.9142 12.75 11.5 12.75H8.5C5.87665 12.75 3.75 10.6234 3.75 8C3.75 5.37665 5.87665 3.25 8.5 3.25H11.5Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}