@magmamath/students-features 1.3.3-rc.3 → 1.3.3

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react'
+import { KeyboardLayoutProps } from '../../types/types'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
+
+export enum SelectedLayout {
+  BASIC = 'basic',
+  SECONDARY = 'secondary',
+}
+
+export type LayoutOption = {
+  key: SelectedLayout
+  title: ReactNode
+  onPressIn: () => void
+}
+
+export type SwitchableLayoutConfig = {
+  secondaryKeyboardType: keyof typeof KEYBOARD_LAYOUTS
+  BasicIcon: (isSelected: boolean) => ReactNode
+  SecondaryIcon: (isSelected: boolean) => ReactNode
+}
+
+export type SwitchableLayoutProps = KeyboardLayoutProps & {
+  config: SwitchableLayoutConfig
+}

package/src/features/keyboard/components/UnitsLayout/hooks/useUnitTabs.ts

@@ -1,4 +1,4 @@
-import { useText } from '../../../../../shared/translation/i18n'
+import { useText } from '../../../../../shared/translation'
 import { useMemo, useState } from 'react'
 import { KeyboardUnitsGroupType, UnitTab } from '../types'
 import { useWindowDimensions } from 'react-native'

package/src/features/keyboard/constants/groups/geometry.constants.ts

@@ -0,0 +1,25 @@
+import {
+  MATH_BASIC_OPERATORS,
+  MATH_GEOMETRY_SYMBOLS,
+} from '../keys'
+import { KeyboardGroup } from '../../types/types'
+
+export const KEYBOARD_GEOMETRY: KeyboardGroup = {
+  keys: [
+    MATH_GEOMETRY_SYMBOLS.ANGLE,
+    MATH_GEOMETRY_SYMBOLS.TRIANGLE,
+    MATH_GEOMETRY_SYMBOLS.THEREFORE,
+    MATH_GEOMETRY_SYMBOLS.IMPLIES,
+    MATH_BASIC_OPERATORS.SIMILARITY,
+    MATH_GEOMETRY_SYMBOLS.LINE_SEGMENT,
+    MATH_GEOMETRY_SYMBOLS.RIGHT_DIRECTED_SEGMENT,
+    MATH_GEOMETRY_SYMBOLS.BIDIRECTIONAL_SEGMENT,
+    MATH_GEOMETRY_SYMBOLS.PERPENDICULAR,
+    MATH_BASIC_OPERATORS.APPROXIMATELY_EQUAL,
+    MATH_GEOMETRY_SYMBOLS.A,
+    MATH_GEOMETRY_SYMBOLS.B,
+    MATH_GEOMETRY_SYMBOLS.C,
+    MATH_GEOMETRY_SYMBOLS.PARALLEL,
+    MATH_BASIC_OPERATORS.CONGRUENT,
+  ],
+}

package/src/features/keyboard/constants/groups/index.ts

@@ -3,6 +3,7 @@ export * from './basic.constants'
 export * from './basicPlus.constants'
 export * from './basicPlusPlus.constants'
 export * from './currency.constants'
+export * from './geometry.constants'
 export * from './numpad.constants'
 export * from './time.constants'
 export * from './underlined.constants'

package/src/features/keyboard/constants/keyboard.constants.ts

@@ -7,6 +7,12 @@ export const DEFAULT_KEY_ICON_PROPS = {
 
 export const MOBILE_LAYOUT_WIDTH = 1200
 
+export const MOBILE_BREAKPOINT = {
+  LARGE: 1300,
+  MEDIUM: 1220,
+  SMALL: 990,
+} as const
+
 export const KEYBOARD_DEFAULT_TEXT_STYLE = {
   fontSize: 14,
   fontWeight: 700,

package/src/features/keyboard/constants/keyboard.helpers.ts

@@ -18,6 +18,7 @@ import {
   KEYBOARD_BASIC_PLUS,
   KEYBOARD_BASIC_PLUS_PLUS,
   KEYBOARD_CURRENCY,
+  KEYBOARD_GEOMETRY,
   KEYBOARD_LENGTH,
   KEYBOARD_NUMPAD,
   KEYBOARD_TIME,
@@ -44,6 +45,7 @@ const PRESET_DOT_MIXED: KeyboardPresetConfig = {
     [KeyboardType.BasicPlusPlusMobile]: KEYBOARD_BASIC_PLUS_PLUS.MOBILE_DOT,
     [KeyboardType.BasicUnits]: { keys: KEYBOARD_LENGTH.MIXED.keys[0] },
     [KeyboardType.AlgebraAdvanced]: KEYBOARD_ALGEBRA,
+    [KeyboardType.Geometry]: KEYBOARD_GEOMETRY,
     [KeyboardType.Numpad]: KEYBOARD_NUMPAD.DOT,
     [KeyboardType.Underlined]: KEYBOARD_UNDERLINED,
   },
@@ -65,6 +67,7 @@ const PRESET_COMMA_METRIC: KeyboardPresetConfig = {
     [KeyboardType.BasicPlusPlusMobile]: KEYBOARD_BASIC_PLUS_PLUS.MOBILE_COMMA,
     [KeyboardType.BasicUnits]: { keys: KEYBOARD_LENGTH.METRIC.keys[0] },
     [KeyboardType.AlgebraAdvanced]: KEYBOARD_ALGEBRA,
+    [KeyboardType.Geometry]: KEYBOARD_GEOMETRY,
     [KeyboardType.Numpad]: KEYBOARD_NUMPAD.COMMA,
     [KeyboardType.Underlined]: KEYBOARD_UNDERLINED,
   },

package/src/features/keyboard/constants/keyboardLayouts.ts

@@ -5,8 +5,9 @@ import { TimeBasicLayout } from '../components/BasicLayout/TimeBasicLayout'
 import { CurrencyBasicLayout } from '../components/BasicLayout/CurrencyBasicLayout'
 import { UnitsLayout } from '../components/UnitsLayout/UnitsLayout'
 import { BasicPlusPlusLayout } from '../components/BasicPlusPlusLayout/BasicPlusPlusLayout'
+import { GeometryLayout } from '../components/GeometryLayout/GeometryLayout'
 import { MyScriptMathCharacterTypes } from '../../../types/characterTypes'
-import { MOBILE_LAYOUT_WIDTH } from './keyboard.constants'
+import { MOBILE_BREAKPOINT, MOBILE_LAYOUT_WIDTH } from './keyboard.constants'
 import { KeyboardType } from '../types/types'
 
 export const KEYBOARD_LAYOUTS = {
@@ -19,12 +20,12 @@ export const KEYBOARD_LAYOUTS = {
       MyScriptMathCharacterTypes.ALGEBRA_GREEK,
       MyScriptMathCharacterTypes.GENERAL_MATH,
     ],
-    mobileBreakpoint: 1300,
+    mobileBreakpoint: MOBILE_BREAKPOINT.LARGE,
   },
   [KeyboardType.Basic]: {
     Component: BasicLayout,
     characterTypes: [MyScriptMathCharacterTypes.NUMBERS_WHOLE],
-    mobileBreakpoint: 990,
+    mobileBreakpoint: MOBILE_BREAKPOINT.SMALL,
   },
   [KeyboardType.BasicPlus]: {
     Component: BasicPlusLayout,
@@ -37,14 +38,17 @@ export const KEYBOARD_LAYOUTS = {
       MyScriptMathCharacterTypes.PERCENT,
       MyScriptMathCharacterTypes.NUMBERS_RATIONAL,
     ],
+    mobileBreakpoint: MOBILE_LAYOUT_WIDTH,
   },
   [KeyboardType.BasicTime]: {
     Component: TimeBasicLayout,
     characterTypes: [MyScriptMathCharacterTypes.TIME],
+    mobileBreakpoint: MOBILE_LAYOUT_WIDTH,
   },
   [KeyboardType.BasicCurrency]: {
     Component: CurrencyBasicLayout,
     characterTypes: [MyScriptMathCharacterTypes.CURRENCY],
+    mobileBreakpoint: MOBILE_LAYOUT_WIDTH,
   },
   [KeyboardType.BasicUnits]: {
     Component: UnitsLayout,
@@ -52,14 +56,20 @@ export const KEYBOARD_LAYOUTS = {
       MyScriptMathCharacterTypes.NUMBERS_AND_UNITS,
       MyScriptMathCharacterTypes.UNITS,
     ],
+    mobileBreakpoint: MOBILE_LAYOUT_WIDTH,
   },
   [KeyboardType.BasicPlusPlus]: {
     Component: BasicPlusPlusLayout,
+    characterTypes: [] as MyScriptMathCharacterTypes[],
+    mobileBreakpoint: MOBILE_BREAKPOINT.MEDIUM,
+  },
+  [KeyboardType.Geometry]: {
+    Component: GeometryLayout,
     characterTypes: [
       MyScriptMathCharacterTypes.GEOM_ANGLES,
       MyScriptMathCharacterTypes.GEOM_COORDINATE,
     ],
-    mobileBreakpoint: 1220,
+    mobileBreakpoint: MOBILE_BREAKPOINT.LARGE,
   },
 }
 
@@ -95,7 +105,7 @@ export function isBasicPlusPlusLayout(charType?: number) {
   }
 
   return (
-    KEYBOARD_LAYOUTS[KeyboardType.BasicPlusPlus].characterTypes.includes(charType) ||
+    KEYBOARD_LAYOUTS[KeyboardType.Geometry].characterTypes.includes(charType) ||
     KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].characterTypes.includes(charType)
   )
 }

package/src/features/keyboard/constants/keys/geometry.constants.tsx

@@ -5,6 +5,15 @@ import { DegreeIcon } from '../../../../shared/icons/keyboard/DegreeIcon'
 import { AngleIcon } from '../../../../shared/icons/keyboard/AngleIcon'
 import { ParallelIcon } from '../../../../shared/icons/keyboard/ParallelIcon'
 import { PerpendicularIcon } from '../../../../shared/icons/keyboard/PerpendicularIcon'
+import { TriangleIcon } from '../../../../shared/icons/keyboard/TriangleIcon'
+import { ThereforeIcon } from '../../../../shared/icons/keyboard/ThereforeIcon'
+import { ImpliesIcon } from '../../../../shared/icons/keyboard/ImpliesIcon'
+import { LineSegmentIcon } from '../../../../shared/icons/keyboard/LineSegmentIcon'
+import { RightDirectedSegmentIcon } from '../../../../shared/icons/keyboard/RightDirectedSegmentIcon'
+import { BidirectionalSegmentIcon } from '../../../../shared/icons/keyboard/BidirectionalSegmentIcon'
+import { LetterAIcon } from '../../../../shared/icons/keyboard/LetterAIcon'
+import { LetterBIcon } from '../../../../shared/icons/keyboard/LetterBIcon'
+import { LetterCIcon } from '../../../../shared/icons/keyboard/LetterCIcon'
 import { DEFAULT_KEY_ICON_PROPS } from '../keyboard.constants'
 
 export const MATH_GEOMETRY_SYMBOLS: MathOperatorsGroup = {
@@ -14,7 +23,7 @@ export const MATH_GEOMETRY_SYMBOLS: MathOperatorsGroup = {
     katexValue: '°',
   },
   ANGLE: {
-    icon: <AngleIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    icon: <AngleIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
     mathliveValue: '\\angle',
     katexValue: '∠',
   },
@@ -45,4 +54,55 @@ export const MATH_GEOMETRY_SYMBOLS: MathOperatorsGroup = {
       },
     },
   },
+  TRIANGLE: {
+    icon: <TriangleIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+    mathliveValue: '\\triangle',
+    katexValue: '△',
+  },
+  THEREFORE: {
+    icon: <ThereforeIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+    mathliveValue: '\\therefore',
+    katexValue: '∴',
+  },
+  IMPLIES: {
+    icon: <ImpliesIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+    mathliveValue: '\\Rightarrow',
+    katexValue: '⇒',
+  },
+  LINE_SEGMENT: {
+    icon: <LineSegmentIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+    mathliveValue: '\\overline{\\placeholder{}}',
+    katexValue: 'LINE_SEGMENT',
+    spreadsheetValue: 'LINE_SEGMENT',
+    isSpecialSymbol: true,
+  },
+  RIGHT_DIRECTED_SEGMENT: {
+    icon: <RightDirectedSegmentIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+    mathliveValue: '\\overrightarrow{\\placeholder{}}',
+    katexValue: 'RIGHT_DIRECTED_SEGMENT',
+    spreadsheetValue: 'RIGHT_DIRECTED_SEGMENT',
+    isSpecialSymbol: true,
+  },
+  BIDIRECTIONAL_SEGMENT: {
+    icon: <BidirectionalSegmentIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+    mathliveValue: '\\overleftrightarrow{\\placeholder{}}',
+    katexValue: 'BIDIRECTIONAL_SEGMENT',
+    spreadsheetValue: 'BIDIRECTIONAL_SEGMENT',
+    isSpecialSymbol: true,
+  },
+  A: {
+    icon: <LetterAIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '𝐴',
+    katexValue: 'A',
+  },
+  B: {
+    icon: <LetterBIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '𝐵',
+    katexValue: 'B',
+  },
+  C: {
+    icon: <LetterCIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '𝐶',
+    katexValue: 'C',
+  },
 } as const

package/src/features/keyboard/constants/keys/text.constants.tsx

@@ -7,19 +7,19 @@ import { DEFAULT_KEY_ICON_PROPS } from '../keyboard.constants'
 
 export const MATH_TEXT_SYMBOLS: MathOperatorsGroup = {
   A: {
-    label: 'a',
-    mathliveValue: 'a',
-    katexValue: 'a',
+    label: 'A',
+    mathliveValue: 'A',
+    katexValue: 'A',
   },
   B: {
-    label: 'b',
-    mathliveValue: 'b',
-    katexValue: 'b',
+    label: 'B',
+    mathliveValue: 'B',
+    katexValue: 'B',
   },
   C: {
-    label: 'c',
-    mathliveValue: 'c',
-    katexValue: 'c',
+    label: 'C',
+    mathliveValue: 'C',
+    katexValue: 'C',
   },
   F: {
     label: 'f',

package/src/features/keyboard/constants/keys/units.constants.tsx

@@ -460,5 +460,6 @@ export const MATH_TIME_UNITS: MathOperatorsGroup = {
     label: 'pm',
     mathliveValue: '\\mathrm{pm}',
     katexValue: 'pm',
+    mathQuillValue: 'pm',
   },
 } as const

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

@@ -23,6 +23,7 @@ export enum KeyboardType {
   BasicUnits = 'BasicUnits',
   BasicPlusPlus = 'BasicPlusPlus',
   BasicPlusPlusMobile = 'BasicPlusPlusMobile',
+  Geometry = 'Geometry',
   Numpad = 'Numpad',
   Underlined = 'Underlined',
 }

package/src/features/voice/playing/components/VoiceTranscriptionsDropdown.tsx

@@ -24,7 +24,7 @@ import { useVoiceTranscriptionsDropdown } from '../hooks/useVoiceTranscriptionsD
 import { VoicePlayerModel, PlayerState } from '../model'
 import { VoiceTranscriptionsDropdownItem } from './VoiceTranscriptionsDropdownItem'
 import { DROPDOWN_MAX_CONTENT_HEIGHT, NO_AUDIO_BE_MESSAGE } from '../../constants'
-import { useText } from '../../../../shared/translation/i18n'
+import { useText } from '../../../../shared/translation'
 import { PlayButton } from '../../../../shared/components/PlayButton'
 import { getActiveAttempt, getAudioStatus } from '../../helpers'
 

package/src/features/voice/playing/components/VoiceTranscriptionsDropdownItem.tsx

@@ -12,7 +12,7 @@ import {
 } from '@magmamath/react-native-ui'
 import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
 import { useVoiceTranscriptionsDropdownItemAnimation } from '../hooks/useVoiceTranscriptionsDropdownItemAnimation'
-import { useText } from '../../../../shared/translation/i18n'
+import { useText } from '../../../../shared/translation'
 
 type VoiceTranscriptionsDropdownItemProps = {
   attempt: number

package/src/features/voice/recording/components/VoiceRecordButton.tsx

@@ -12,7 +12,7 @@ import { MicrophoneIcon, CheckIcon } from '@magmamath/react-native-ui'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
 import { VoiceRecorderState } from '../../constants'
-import { useText } from '../../../../shared/translation/i18n'
+import { useText } from '../../../../shared/translation'
 
 type VoiceRecordButtonProps = {
   style?: ButtonStyle

package/src/features/voice/recording/modal/ModalFooterButtons.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button, ButtonColor, ButtonSize, ButtonVariant, SPACING } from '@magmamath/react-native-ui'
 import { StyleSheet, View } from 'react-native'
-import { useText } from '../../../../shared/translation/i18n'
-import { TranslationKeys } from '../../../../shared/translation/i18n'
+import { useText } from '../../../../shared/translation'
+import { TranslationKeys } from '../../../../shared/translation/types'
 
 type ModalFooterButtonsProps = {
   onCancel: () => void

package/src/features/voice/recording/modal/VoiceRecordDeleteModal.tsx

@@ -3,7 +3,7 @@ import { BaseModal, ButtonColor } from '@magmamath/react-native-ui'
 import { StyleSheet } from 'react-native'
 import { useUnit } from 'effector-react'
 import { VoiceRecorderState } from '../../constants'
-import { useText } from '../../../../shared/translation/i18n'
+import { useText } from '../../../../shared/translation'
 import { ModalFooterButtons } from './ModalFooterButtons'
 import { VoiceRecordModalParams } from '../../types'
 

package/src/features/voice/recording/modal/VoiceRecordUndoModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { BaseModal } from '@magmamath/react-native-ui'
 import { StyleSheet } from 'react-native'
-import { useText } from '../../../../shared/translation/i18n'
+import { useText } from '../../../../shared/translation'
 import { ModalFooterButtons } from './ModalFooterButtons'
 import { VoiceRecordModalParams } from '../../types'
 

package/src/features/voice/recording/model/VoiceRecord.model.ts

@@ -10,7 +10,7 @@ import {
 } from '../../types'
 import { ensureRecordingPermissions, getAvailableInputs } from '../../helpers'
 import { VOICE_RECORDER_MIN_DURATION_MS } from '../../constants'
-import { getText as t } from '../../../../shared/translation/i18n'
+import { t } from '../../../../shared/translation'
 
 type VoiceRecordModelParams = {
   api: VoiceRecorderApi

package/src/index.ts

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

package/src/lib/helpers/helpers.ts

@@ -1,4 +1,4 @@
-import { getText } from '../../shared/translation/i18n'
+import { getText } from '../../shared/translation/helpers'
 
 export const noop = () => {}
 

package/src/lib/types/keys.ts

@@ -0,0 +1,18 @@
+type JoinKeys<K extends string, P extends string> = `${K}.${P}`
+
+type NestedKeys<T, Prefix extends string = ''> = T extends object
+  ? T extends Array<any>
+    ? never
+    : {
+        [K in keyof T & string]: T[K] extends object
+          ?
+              | JoinKeys<Prefix extends '' ? K : `${Prefix}.${K}`, NestedKeys<T[K], ''>>
+              | (Prefix extends '' ? K : `${Prefix}.${K}`)
+          : Prefix extends ''
+            ? K
+            : `${Prefix}.${K}`
+      }[keyof T & string]
+  : never
+
+type FlattenKeys<T> = T extends string ? T : never
+export type RetrieveKeys<T> = FlattenKeys<NestedKeys<T>>

package/src/shared/icons/GeometryIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { IconProps } from './keyboard/icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const GeometryIcon = ({ size = 16, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M15.499 16.0009H14.998L15.499 15.4999V16.0009ZM0.399414 15.9902C0.204051 15.9502 0.0497107 15.7968 0.00976562 15.6015L0 15.5009V0.500901C9.37645e-05 0.0555518 0.538555 -0.167482 0.853516 0.147385L15.8525 15.1474C16.1674 15.4624 15.9444 16.0009 15.499 16.0009V15.4999L14.998 16.0009H0.5L0.399414 15.9902ZM1.59961 14.4003H12.8428L1.59961 3.15715V14.4003Z"
+        fill={color}
+      />
+      <Path
+        d="M5.09541 10.7012C5.20587 10.7012 5.29541 10.7907 5.29541 10.9012V13.5055C5.29541 13.616 5.20587 13.7055 5.09541 13.7055H4.20604C4.09558 13.7055 4.00604 13.616 4.00604 13.5055V12.1898C4.00604 12.0793 3.9165 11.9898 3.80604 11.9898H2.49108C2.38062 11.9898 2.29108 11.9002 2.29108 11.7898V10.9012C2.29108 10.7907 2.38062 10.7012 2.49108 10.7012H5.09541Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -2,11 +2,13 @@ import React from 'react'
 import { IconProps } from './icon.types'
 import Svg, { Path } from 'react-native-svg'
 
+const ASPECT_RATIO = 20 / 18
+
 export const AngleIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 20 18" 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"
+        d="M11.841 3.87043C12.1077 3.5183 12.6099 3.44943 12.962 3.71614C13.3142 3.98288 13.384 4.48502 13.1173 4.83723L7.17238 12.6866C7.12249 12.7525 7.16947 12.847 7.25209 12.847H14.5587C15.0004 12.8471 15.3584 13.2051 15.3585 13.6468C15.3585 14.0885 15.0004 14.4465 14.5587 14.4466H5.44154C5.13785 14.4466 4.85992 14.2752 4.72474 14.0032C4.58961 13.7314 4.62065 13.4065 4.80384 13.1644L11.841 3.87043Z"
         fill={color}
       />
     </Svg>

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

@@ -1,20 +1,17 @@
 import React from 'react'
 import { IconProps } from './icon.types'
-import Svg, { Path } from 'react-native-svg'
+import Svg, { Path, Rect } from 'react-native-svg'
 
-const ASPECT_RATIO = 20 / 21
+const ASPECT_RATIO = 19 / 20
 
 export const BidirectionalSegmentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 20 21" fill="none">
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 19 20" 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"
+        d="M16.1464 1.52657C16.3173 1.35571 16.5813 1.33396 16.7754 1.46212L16.8535 1.52657L18.8535 3.52657L18.9179 3.6047C19.0461 3.79878 19.0243 4.06274 18.8535 4.23361L16.8535 6.23361C16.6582 6.42887 16.3417 6.42887 16.1464 6.23361C15.9512 6.03834 15.9512 5.72184 16.1464 5.52657L17.2929 4.38009H1.70699L2.85348 5.52657L2.91793 5.6047C3.0461 5.79878 3.02434 6.06274 2.85348 6.23361C2.68261 6.40447 2.41865 6.42622 2.22457 6.29806L2.14645 6.23361L0.146447 4.23361C-0.0488155 4.03834 -0.0488155 3.72184 0.146447 3.52657L2.14645 1.52657L2.22457 1.46212C2.41865 1.33396 2.68261 1.35571 2.85348 1.52657C3.02434 1.69744 3.0461 1.9614 2.91793 2.15548L2.85348 2.23361L1.70699 3.38009H17.2929L16.1464 2.23361L16.082 2.15548C15.9538 1.9614 15.9756 1.69744 16.1464 1.52657Z"
         fill={color}
       />
+      <Rect x="4.8801" y="8.87988" width="9.24" height="9.24" rx="1.548" stroke="#B3B3BC" />
     </Svg>
   )
 }

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+const ASPECT_RATIO = 20 / 18
+
+export const ImpliesIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 20 18" fill="none">
+      <Path
+        d="M11.1808 4.25566C11.4933 3.94351 12.0004 3.94333 12.3127 4.25566L16.4904 8.43438C16.8025 8.74673 16.8025 9.25289 16.4904 9.56524L12.3127 13.7439C12.0004 14.0563 11.4933 14.0561 11.1808 13.7439C10.8684 13.4315 10.8684 12.9245 11.1808 12.6121L11.5441 12.2488H4.07538C3.63366 12.2487 3.27557 11.8908 3.27557 11.449C3.27573 11.0074 3.63376 10.6494 4.07538 10.6492H12.9781C13.0841 10.6492 13.1859 10.6071 13.2609 10.5321L14.7224 9.07052C14.7615 9.03146 14.7615 8.96815 14.7224 8.92909L13.2599 7.46657C13.1849 7.39156 13.0832 7.34941 12.9771 7.34941H4.07538C3.63366 7.34928 3.27557 6.99136 3.27557 6.54961C3.27573 6.108 3.63376 5.74994 4.07538 5.74981H11.5432L11.1808 5.3875C10.8685 5.07514 10.8686 4.5681 11.1808 4.25566Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const LetterAIcon = ({ size = 16, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M10.352 14L9.92 11.2H5.152L3.424 14H1.584L8.608 2.8H10.16L12 14H10.352ZM6.064 9.68H9.712L8.976 4.96L6.064 9.68Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const LetterBIcon = ({ size = 16, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M9.752 2.8C11.592 2.8 12.488 3.984 12.488 5.248C12.488 6.496 11.688 7.76 10.152 8.08C11.448 8.432 12.04 9.424 12.04 10.464C12.04 12.208 10.504 14 7.848 14H3.544L6.136 2.8H9.752ZM5.496 12.512H8.04C9.64 12.512 10.408 11.472 10.408 10.464C10.408 9.616 9.752 8.864 8.52 8.864H6.344L5.496 12.512ZM6.632 7.552H8.712C10.088 7.552 10.856 6.56 10.856 5.648C10.856 4.8 10.328 4.288 9.224 4.288H7.384L6.632 7.552Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const LetterCIcon = ({ size = 16, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M7.98 12.688C9.596 12.688 10.716 11.808 11.516 10.272L12.86 11.024C11.692 13.232 10.012 14.256 7.82 14.256C4.444 14.256 2.732 11.808 2.732 9.024C2.732 5.68 5.148 2.544 8.94 2.544C10.876 2.544 12.348 3.376 13.324 4.88L11.996 5.856C11.356 4.752 10.316 4.096 8.796 4.096C5.948 4.096 4.38 6.464 4.38 8.816C4.38 10.896 5.612 12.688 7.98 12.688Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -1,18 +1,17 @@
 import React from 'react'
 import { IconProps } from './icon.types'
-import Svg, { Path } from 'react-native-svg'
+import Svg, { Path, Rect } from 'react-native-svg'
+
+const ASPECT_RATIO = 19 / 20
 
 export const LineSegmentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
-      <Path
-        d="M19 1C19.2761 1 19.5 1.22386 19.5 1.5C19.5 1.77614 19.2761 2 19 2H1C0.723858 2 0.5 1.77614 0.5 1.5C0.5 1.22386 0.723858 1 1 1H19Z"
-        fill={color}
-      />
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 19 20" fill="none">
       <Path
-        d="M8.07948 16L7.70148 13.55H3.52948L2.01748 16H0.407484L6.55348 6.2H7.91149L9.52148 16H8.07948ZM4.32748 12.22H7.51948L6.87548 8.09L4.32748 12.22ZM16.4822 6.2C18.0922 6.2 18.8762 7.236 18.8762 8.342C18.8762 9.434 18.1762 10.54 16.8322 10.82C17.9662 11.128 18.4842 11.996 18.4842 12.906C18.4842 14.432 17.1402 16 14.8162 16H11.0502L13.3182 6.2H16.4822ZM12.7582 14.698H14.9842C16.3842 14.698 17.0562 13.788 17.0562 12.906C17.0562 12.164 16.4822 11.506 15.4042 11.506H13.5002L12.7582 14.698ZM13.7522 10.358H15.5722C16.7762 10.358 17.4482 9.49 17.4482 8.692C17.4482 7.95 16.9862 7.502 16.0202 7.502H14.4102L13.7522 10.358Z"
+        d="M18.5 3.37988C18.7761 3.37988 19 3.60374 19 3.87988C19 4.15603 18.7761 4.37988 18.5 4.37988H0.5C0.223858 4.37988 0 4.15603 0 3.87988C0 3.60374 0.223858 3.37988 0.5 3.37988H18.5Z"
         fill={color}
       />
+      <Rect x="4.88" y="8.87988" width="9.24" height="9.24" rx="1.548" stroke="#B3B3BC" />
     </Svg>
   )
 }

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

@@ -1,20 +1,17 @@
 import React from 'react'
 import { IconProps } from './icon.types'
-import Svg, { Path } from 'react-native-svg'
+import Svg, { Path, Rect } from 'react-native-svg'
 
-const ASPECT_RATIO = 20 / 21
+const ASPECT_RATIO = 19 / 20
 
 export const RightDirectedSegmentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 20 21" fill="none">
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 19 20" fill="none">
       <Path
-        d="M16.6465 0.146692C16.8173 -0.0241721 17.0813 -0.0459256 17.2754 0.0822385L17.3535 0.146692L19.3535 2.14669L19.418 2.22482C19.5461 2.4189 19.5244 2.68286 19.3535 2.85372L17.3535 4.85372C17.1583 5.04899 16.8417 5.04899 16.6465 4.85372C16.4512 4.65846 16.4512 4.34195 16.6465 4.14669L17.793 3.00021H1C0.723858 3.00021 0.5 2.77635 0.5 2.50021C0.5 2.22406 0.723858 2.00021 1 2.00021H17.793L16.6465 0.853723L16.582 0.775598C16.4539 0.581519 16.4756 0.317555 16.6465 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"
+        d="M16.1465 1.52657C16.3173 1.35571 16.5813 1.33396 16.7754 1.46212L16.8535 1.52657L18.8535 3.52657L18.918 3.6047C19.0461 3.79878 19.0244 4.06274 18.8535 4.23361L16.8535 6.23361C16.6583 6.42887 16.3417 6.42887 16.1465 6.23361C15.9512 6.03834 15.9512 5.72184 16.1465 5.52657L17.293 4.38009H0.5C0.223858 4.38009 0 4.15623 0 3.88009C0 3.60395 0.223858 3.38009 0.5 3.38009H17.293L16.1465 2.23361L16.082 2.15548C15.9539 1.9614 15.9756 1.69744 16.1465 1.52657Z"
         fill={color}
       />
+      <Rect x="4.8801" y="8.87988" width="9.24" height="9.24" rx="1.548" stroke="#B3B3BC" />
     </Svg>
   )
 }

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Circle } from 'react-native-svg'
+
+const ASPECT_RATIO = 20 / 18
+
+export const ThereforeIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 20 18" fill="none">
+      <Circle cx="7.07972" cy="11.6398" r="1.8" fill={color} />
+      <Circle cx="12.9203" cy="11.6398" r="1.8" fill={color} />
+      <Circle cx="10" cy="6.36006" r="1.8" fill={color} />
+    </Svg>
+  )
+}