@codeleap/web 3.25.0 → 3.25.2

package/src/components/Tag/styles.ts

@@ -1,8 +1,9 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { BadgeComposition } from '../Badge'
 
 export type TagStates = 'pressable' | 'disabled'
 
-type TagBadgeParts =
+type TagBadgeParts = 
   | `leftBadge${Capitalize<BadgeComposition>}`
   | `rightBadge${Capitalize<BadgeComposition>}`
 
@@ -13,3 +14,10 @@ export type TagParts =
   | 'rightIcon'
 
 export type TagComposition = TagParts | TagBadgeParts | `${TagParts}:${TagStates}`
+
+const createTagStyle = createDefaultVariantFactory<TagComposition>()
+
+export const TagPresets = includePresets((styles) => createTagStyle(() => ({
+  wrapper: styles,
+})),
+)

package/src/components/Tag/types.ts

@@ -1,6 +1,6 @@
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { StylesOf, ComponentVariants, IconPlaceholder } from '@codeleap/common'
 import { ReactElement } from 'react'
-import { TagComposition } from './styles'
+import { TagComposition, TagPresets } from './styles'
 import { BadgeProps } from '../Badge'
 import { TextProps } from '../Text'
 import { IconProps } from '../Icon'
@@ -8,17 +8,17 @@ import { ComponentCommonProps } from '../../types'
 import { TouchableProps } from '../Touchable'
 import { ViewProps } from '../View'
 
-export type TagProps =
-  Omit<ViewProps, 'style'> &
-  Omit<TouchableProps, 'style'> &
-  ComponentCommonProps &
-  {
-    style?: StyledProp<TagComposition>
+export type TagProps = 
+  Omit<ViewProps<'div'>, 'styles' | 'variants' | 'responsiveVariants'> &
+  Omit<TouchableProps, 'styles' | 'variants' | 'responsiveVariants'> &
+  ComponentVariants<typeof TagPresets> &
+  ComponentCommonProps & {
+    styles?: StylesOf<TagComposition>
     text?: TextProps<'p'>['text'] | ReactElement
     textProps?: Partial<TextProps<'p'>>
-    leftIcon?: AppIcon
+    leftIcon?: IconPlaceholder
     leftIconProps?: Partial<IconProps>
-    rightIcon?: AppIcon
+    rightIcon?: IconPlaceholder
     rightIconProps?: Partial<IconProps>
     leftComponent?: ReactElement
     rightComponent?: ReactElement

package/src/components/Text/index.tsx

@@ -1,21 +1,38 @@
-import { TypeGuards } from '@codeleap/common'
+import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
 import { motion } from 'framer-motion'
-import React, { ElementType, forwardRef } from 'react'
+import React, { ElementType } from 'react'
+import { TextPresets } from './styles'
 import { TextProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
-export const Text = forwardRef<HTMLParagraphElement, TextProps>((textProps, ref) => {
+const defaultProps: Partial<TextProps<'p'>> = {
+  debugName: 'Text component',
+  component: 'p',
+  debounce: null,
+  pressDisabled: false,
+  animated: false,
+  animatedProps: {},
+}
+
+export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
+  const allProps = {
+    ...Text.defaultProps,
+    ...textProps,
+  }
+
   const {
-    style,
-    text,
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
+    style = {},
+    css,
+    text = null,
     children,
     component,
     debugName,
+    msg = null,
     onPress,
     debounce,
     pressDisabled,
@@ -23,17 +40,19 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>((textProps, ref)
     animated,
     animatedProps,
     ...props
-  } = {
-    ...Text.defaultProps,
-    ...textProps,
-  }
-
-  const styles = useStylesFor(Text.styleRegistryName, style)
+  } = allProps
 
-  const Component: ElementType = animated ? (motion?.[component as string] || motion.p) : (component || 'p')
+  const Component = animated ? (motion?.[component] || motion.p) : (component || 'p')
 
   const pressedRef = React.useRef(false)
 
+  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'text',
+  })
+
   const isPressable = (TypeGuards.isFunction(onPress) || TypeGuards.isFunction(onClick)) && !pressDisabled
 
   const disabled = isPressable === false
@@ -61,39 +80,31 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>((textProps, ref)
     }
   }
 
+  const _styles = React.useMemo(() => ([
+    variantStyles.text,
+    disabled && variantStyles['text:disabled'],
+    css,
+    style,
+  ]), [css, style, disabled])
+
   const pressProps = isPressable ? {
     onClick: disabled ? null : _onPress,
   } : {}
 
-  const componentProps: AnyRecord = {
+  const componentProps: any = {
     ...props,
     ...pressProps,
-    ...animatedProps,
+    ...animatedProps
   }
 
   return (
-    <Component {...componentProps} ref={ref} css={[styles.text, disabled && styles['text:disabled']]}>
+    <Component
+      css={_styles}
+      {...componentProps}
+    >
       {text || children}
     </Component>
   )
-}) as StyledComponentWithProps<TextProps>
-
-Text.styleRegistryName = 'Text'
-Text.elements = ['text']
-Text.rootElement = 'text'
-
-Text.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Text as <T extends ElementType = 'p'>(props: StyledComponentProps<TextProps<T>, typeof styles>) => IJSX
 }
 
-Text.defaultProps = {
-  debugName: 'Text component',
-  component: 'p',
-  text: null,
-  debounce: null,
-  pressDisabled: false,
-  animated: false,
-  animatedProps: {},
-} as Partial<TextProps>
-
-WebStyleRegistry.registerComponent(Text)
+Text.defaultProps = defaultProps

package/src/components/Text/styles.ts

@@ -1 +1,9 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
+
 export type TextComposition = 'text' | 'text:disabled'
+
+const createTextStyle = createDefaultVariantFactory<TextComposition>()
+
+export const TextPresets = includePresets((styles) => createTextStyle(() => ({ 
+  text: styles 
+})))

package/src/components/Text/types.ts

@@ -1,14 +1,14 @@
-import { ComponentPropsWithoutRef, ElementType } from 'react'
-import { TextComposition } from './styles'
-import { AnyRecord, StyledProp } from '@codeleap/styles'
+import { StylesOf, ComponentVariants } from '@codeleap/common'
 import { MotionProps } from 'framer-motion'
+import { ComponentPropsWithoutRef, ElementType } from 'react'
+import { TextComposition, TextPresets } from './styles'
 
-export type TextProps<T extends ElementType = 'p'> =
-  Omit<ComponentPropsWithoutRef<T>, 'style'> &
-  {
-    component?: ElementType<AnyRecord>
+export type TextProps<T extends ElementType> = ComponentPropsWithoutRef<T> &
+  ComponentVariants<typeof TextPresets> & {
+    component?: T
     text?: string
-    style?: StyledProp<TextComposition>
+    styles?: StylesOf<TextComposition>
+    msg?: string
     debugName?: string
     debounce?: number
     pressDisabled?: boolean

package/src/components/TextEditor/index.tsx

@@ -1,12 +1,9 @@
 import React from 'react'
-import { onUpdate, useCallback, useState, useValidate } from '@codeleap/common'
+import { onUpdate, useCallback, useDefaultComponentStyle, useState, useValidate } from '@codeleap/common'
 import { BubbleMenu, FloatingMenu, EditorContent } from '@tiptap/react'
 import { FileInput, Text, View } from '../components'
 import { TextEditorProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-
+import { TextEditorPresets } from './styles'
 export * from './styles'
 export * from './types'
 
@@ -14,19 +11,17 @@ export const TextEditor = (props: TextEditorProps) => {
   const {
     children,
     editor,
-    style,
+    variants = [],
+    styles = {},
+    responsiveVariants = {},
+    style = {},
     bubbleMenuProps,
     floatingMenuProps,
     toolbarComponent,
     fileInputRef,
     _error,
     validate,
-  } = {
-    ...TextEditor.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(TextEditor.styleRegistryName, style)
+  } = props
 
   const [_isFocused, setIsFocused] = useState(false)
   const validation = useValidate(editor?.getText() ?? '', validate)
@@ -35,6 +30,12 @@ export const TextEditor = (props: TextEditorProps) => {
   const errorMessage = validation.message || _error
   const isDisabled = !editor?.isEditable ?? null
 
+  const variantStyles = useDefaultComponentStyle<'u:TextEditor', typeof TextEditorPresets>('u:TextEditor', {
+    variants,
+    styles,
+    responsiveVariants,
+  })
+
   const handleBlur = React.useCallback(() => {
     validation?.onInputBlurred()
     setIsFocused(false)
@@ -57,9 +58,8 @@ export const TextEditor = (props: TextEditorProps) => {
 
   const _BubbleMenu = useCallback(() => {
     return (
-      // @ts-expect-error icss type
-      <BubbleMenu css={[styles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
-        <View style={styles.bubbleMenuInnerWrapper}>
+      <BubbleMenu css={[variantStyles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
+        <View style={variantStyles.bubbleMenuInnerWrapper}>
           {bubbleMenuProps?.renderContent}
         </View>
       </BubbleMenu>
@@ -68,9 +68,8 @@ export const TextEditor = (props: TextEditorProps) => {
 
   const _FloatingMenu = useCallback(() => {
     return (
-      // @ts-expect-error icss type
-      <FloatingMenu css={[styles.floatingMenu]} {...floatingMenuProps} editor={editor}>
-        <View style={styles.floatingMenuInnerWrapper}>
+      <FloatingMenu css={[variantStyles.floatingMenu]} {...floatingMenuProps} editor={editor}>
+        <View style={variantStyles.floatingMenuInnerWrapper}>
           {floatingMenuProps?.renderContent}
         </View>
       </FloatingMenu>
@@ -78,21 +77,21 @@ export const TextEditor = (props: TextEditorProps) => {
   }, [editor])
 
   const editorStyles = [
-    styles.editor,
-    hasError && styles['editor:error'],
-    isDisabled && styles['editor:disabled'],
+    variantStyles.editor,
+    hasError && variantStyles['editor:error'],
+    isDisabled && variantStyles['editor:disabled'],
   ]
 
   if (!editor) return null
-
   return (
     <View
-      style={[
-        styles.wrapper,
-        hasError && styles['wrapper:error'],
+      css={[
+        variantStyles.wrapper,
+        hasError && variantStyles['wrapper:error'],
         {
           '.tiptap': editorStyles,
         },
+        style,
       ]}
     >
       {toolbarComponent}
@@ -100,30 +99,10 @@ export const TextEditor = (props: TextEditorProps) => {
       <_BubbleMenu />
       <_FloatingMenu />
       <EditorContent editor={editor} />
-      {hasError ? <Text text={errorMessage as string} style={styles['errorMessage:error']} /> : null}
-      <FileInput ref={fileInputRef} />
+      {hasError ? <Text text={errorMessage as string} css={variantStyles['errorMessage:error']} /> : null}
+      <FileInput
+        ref={fileInputRef}
+      />
     </View>
   )
 }
-
-TextEditor.styleRegistryName = 'TextEditor'
-
-TextEditor.elements = [
-  'wrapper',
-  'editor',
-  'floatingMenu',
-  'bubbleMenu',
-  'bubbleMenuInnerWrapper',
-  'floatingMenuInnerWrapper',
-  'errorMessage',
-]
-
-TextEditor.rootElement = 'wrapper'
-
-TextEditor.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return TextEditor as (props: StyledComponentProps<TextEditorProps, typeof styles>) => IJSX
-}
-
-TextEditor.defaultProps = {} as Partial<TextEditorProps>
-
-WebStyleRegistry.registerComponent(TextEditor)

package/src/components/TextEditor/styles.ts

@@ -1,5 +1,12 @@
-export type TextEditorStates = 'error' | 'disabled'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
+export type TextEditorStates = 'error' | 'disabled'
 export type TextEditorParts = 'wrapper' | 'editor' | 'floatingMenu' | 'bubbleMenu' | 'bubbleMenuInnerWrapper' | 'floatingMenuInnerWrapper' | 'errorMessage'
 
 export type TextEditorComposition = `${TextEditorParts}:${TextEditorStates}` | TextEditorParts
+
+const createTextEditorStyle = createDefaultVariantFactory<TextEditorComposition>()
+
+export const TextEditorPresets = includePresets((styles) => createTextEditorStyle(() => ({
+  wrapper: styles,
+})))

package/src/components/TextEditor/types.ts

@@ -1,22 +1,17 @@
 import { RefObject } from 'react'
-import { AnyFunction, FormTypes, yup } from '@codeleap/common'
-import { StyledProp } from '@codeleap/styles'
+import { ComponentVariants, FormTypes, StylesOf, yup } from '@codeleap/common'
 import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
 import { FileInputRef } from '../FileInput'
-import { TextEditorComposition } from './styles'
+import { TextEditorComposition, TextEditorPresets } from './styles'
 
 export type TextEditorProps = React.PropsWithChildren<{
-  editor: Editor & {
-    getText: AnyFunction
-    isEditable: boolean
-    on: AnyFunction
-    off: AnyFunction
-  }
-  style?: StyledProp<TextEditorComposition>
+  editor: Editor
+  styles?: StylesOf<TextEditorComposition>
+  style?: React.CSSProperties
   bubbleMenuProps?: BubbleMenuProps & { renderContent: React.ReactNode }
   floatingMenuProps?: FloatingMenuProps & { renderContent: React.ReactNode }
   toolbarComponent?: JSX.Element
   fileInputRef?: RefObject<FileInputRef>
   _error?: boolean
   validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
-}>
+} & ComponentVariants<typeof TextEditorPresets>>

package/src/components/TextInput/index.tsx

@@ -1,4 +1,17 @@
-import { TypeGuards, useBooleanToggle, useValidate } from '@codeleap/common'
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+  TextInputComposition,
+  TypeGuards,
+  useBooleanToggle,
+  useDefaultComponentStyle,
+  useValidate,
+  yup,
+} from '@codeleap/common'
 import React, {
   forwardRef,
   useImperativeHandle,
@@ -7,21 +20,53 @@ import React, {
 } from 'react'
 import TextareaAutosize from 'react-autosize-textarea'
 import InputMask from 'react-input-mask'
-import { Touchable } from '../Touchable'
-import { InputBase, selectInputBaseProps } from '../InputBase'
-import { getMaskInputProps } from './mask'
+import { Touchable, TouchableProps } from '../Touchable'
+import { StylesOf, HTMLProps, ComponentWithDefaultProps } from '../../types/utility'
+import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { TextInputPresets } from './styles'
+import { getMaskInputProps, TextInputMaskingProps } from './mask'
 import { getTestId } from '../../lib/utils/test'
-import { InputRef, TextInputProps } from './types'
-import { FileInputRef } from '../FileInput'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 
-export * from './types'
 export * from './styles'
 export * from './mask'
 
-export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputRef) => {
+type NativeTextInputProps = HTMLProps<'input'>
+
+export type TextInputProps =
+  Omit<InputBaseProps, 'styles' | 'variants'> &
+  Omit<NativeTextInputProps, 'value' | 'crossOrigin' | 'ref'> & {
+    styles?: StylesOf<TextInputComposition>
+    password?: boolean
+    validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
+    debugName?: string
+    visibilityToggle?: boolean
+    value?: NativeTextInputProps['value']
+    multiline?: boolean
+    onPress?: TouchableProps['onPress']
+    onChangeText?: (textValue: string) => void
+    caretColor?: string
+    focused?: boolean
+    _error?: boolean
+    rows?: number
+    masking?: TextInputMaskingProps
+    visibleIcon?: IconPlaceholder
+    hiddenIcon?: IconPlaceholder
+  } & ComponentVariants<typeof TextInputPresets>
+
+type InputRef = {
+  isTextInput?: boolean
+  focus: () => void
+  getInputRef: () => HTMLInputElement
+}
+
+const defaultProps: Partial<TextInputProps> = {
+  hiddenIcon: 'input-visiblity:hidden' as IconPlaceholder,
+  visibleIcon: 'input-visiblity:visible' as IconPlaceholder,
+}
+
+export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, inputRef) => {
+  const innerInputRef = useRef<InputRef>(null)
+
   const {
     inputBaseProps,
     others,
@@ -31,7 +76,9 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
   })
 
   const {
-    style,
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
     value,
     validate,
     debugName,
@@ -42,16 +89,12 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
     caretColor,
     focused,
     _error,
-    masking,
+    masking = null,
     visibleIcon,
     hiddenIcon,
     ...textInputProps
   } = others as TextInputProps
 
-  const innerInputRef = useRef<InputRef>(null)
-
-  const styles = useStylesFor(TextInput.styleRegistryName, style)
-
   const [_isFocused, setIsFocused] = useState(false)
 
   const isFocused = _isFocused || focused
@@ -65,6 +108,12 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
 
   const InputElement = isMasked ? InputMask : isMultiline ? TextareaAutosize : 'input'
 
+  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputPresets>('u:TextInput', {
+    responsiveVariants,
+    variants,
+    styles,
+  })
+
   // @ts-ignore
   useImperativeHandle(inputRef, () => {
     return {
@@ -73,6 +122,7 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
           // @ts-expect-error
           innerInputRef.current?.getInputDOMNode()?.focus()
         }
+        
         innerInputRef.current?.focus?.()
       },
       isTextInput: true,
@@ -116,7 +166,7 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
 
   const visibilityToggleProps = visibilityToggle ? {
     onPress: toggleSecureTextEntry,
-    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as AppIcon,
+    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as IconPlaceholder,
     debugName: `${debugName} toggle visibility`,
   } : null
 
@@ -135,17 +185,17 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
   const errorMessage = validation.message || _error
 
   const placeholderStyles = [
-    styles.placeholder,
-    isFocused && styles['placeholder:focus'],
-    hasError && styles['placeholder:error'],
-    isDisabled && styles['placeholder:disabled'],
+    variantStyles.placeholder,
+    isFocused && variantStyles['placeholder:focus'],
+    hasError && variantStyles['placeholder:error'],
+    isDisabled && variantStyles['placeholder:disabled'],
   ]
 
   const selectionStyles = [
-    styles.selection,
-    isFocused && styles['selection:focus'],
-    hasError && styles['selection:error'],
-    isDisabled && styles['selection:disabled'],
+    variantStyles.selection,
+    isFocused && variantStyles['selection:focus'],
+    hasError && variantStyles['selection:error'],
+    isDisabled && variantStyles['selection:disabled'],
   ]
 
   const secureTextProps = (password && secureTextEntry) && {
@@ -158,7 +208,7 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
 
   const inputBaseAction = isPressable ? 'onPress' : 'onClick'
 
-  const testId = getTestId(textInputProps)
+  const testId = getTestId(others)
 
   return (
     <InputBase
@@ -166,13 +216,13 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
       {...inputBaseProps}
       debugName={debugName}
       error={hasError ? errorMessage : null}
-      style={{
-        ...styles,
-        innerWrapper: {
-          ...styles.innerWrapper,
-          ...(isMultiline ? styles['innerWrapper:multiline'] : {}),
-          ...(hasMultipleLines ? styles['innerWrapper:hasMultipleLines'] : {}),
-        },
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+          isMultiline && variantStyles['innerWrapper:multiline'],
+          hasMultipleLines && variantStyles['innerWrapper:hasMultipleLines'],
+        ],
       }}
       innerWrapperProps={{
         ...(inputBaseProps.innerWrapperProps || {}),
@@ -186,9 +236,10 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
         },
         debugName,
       }}
-      rightIcon={rightIcon as any}
+      rightIcon={rightIcon}
       focused={isFocused}
     >
+
       <InputElement
         editable={`${!isPressable && !isDisabled}`}
         {...buttonModeProps}
@@ -201,12 +252,12 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
         // @ts-ignore
         onFocus={handleFocus}
         css={[
-          styles.input,
-          isMultiline && styles['input:multiline'],
-          isFocused && styles['input:focus'],
-          hasError && styles['input:error'],
-          isDisabled && styles['input:disabled'],
-          hasMultipleLines && styles['input:hasMultipleLines'],
+          variantStyles.input,
+          isMultiline && variantStyles['input:multiline'],
+          isFocused && variantStyles['input:focus'],
+          hasError && variantStyles['input:error'],
+          isDisabled && variantStyles['input:disabled'],
+          hasMultipleLines && variantStyles['input:hasMultipleLines'],
           {
             '&::placeholder': placeholderStyles,
           },
@@ -216,7 +267,7 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
           {
             '&:focus': [
               { outline: 'none', borderWidth: 0, borderColor: 'transparent' },
-              isFocused && styles['input:focus'],
+              isFocused && variantStyles['input:focus'],
               caretColorStyle,
             ],
           },
@@ -227,21 +278,8 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
       />
     </InputBase>
   )
+})
 
-}) as StyledComponentWithProps<TextInputProps>
-
-TextInput.styleRegistryName = 'TextInput'
-TextInput.elements = [...InputBase.elements, 'input', 'placeholder', 'selection']
-TextInput.rootElement = 'wrapper'
-
-TextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return TextInput as (props: StyledComponentProps<TextInputProps, typeof styles>) => IJSX
-}
-
-TextInput.defaultProps = {
-  hiddenIcon: 'input-visiblity:hidden' as AppIcon,
-  visibleIcon: 'input-visiblity:visible' as AppIcon,
-  masking: null,
-} as TextInputProps
+export const TextInput = TextInputComponent as unknown as ComponentWithDefaultProps<TextInputProps>
 
-WebStyleRegistry.registerComponent(TextInput)
+TextInput.defaultProps = defaultProps as TextInputProps