import { css , system } from '@twilio-paste/styling-library' ; import type { CSSObject } from '@twilio-paste/styling-library' ; import type { PasteCustomCSS } from '@twilio-paste/customization' ; import { PseudoPropStyles } from './PseudoPropStyles' ; import type { StyledTextProps } from './types' ; const merge = require ( 'deepmerge' ) ; export const PasteStyleProps = system ( { color : { property : 'color' , scale : 'textColors' , } , cursor : true , outline : true , transition : true , textDecoration : true , textTransform : true , whiteSpace : true , wordBreak : true , wordWrap : true , fontVariantNumeric : true , } ) ; param { StyledTextProps } props return { * } export const getPseudoStyles = ( props ) : ( ( props ? : Record < string , unknown > | undefined ) => CSSObject ) | Record < string , never > => { const pseudoProps = Object . keys ( props ) . filter ( ( propName ) => propName . startsWith ( '_' ) ) as Array < keyof typeof PseudoPropStyles > ; if ( pseudoProps . length === 0 ) { return { } ; } const pseudoStyles = { } ; pseudoProps . forEach ( ( pseudoProp ) => { if ( PseudoPropStyles [ pseudoProp ] != null ) { pseudoStyles [ PseudoPropStyles [ pseudoProp ] ] = props [ pseudoProp ] ; } } ) ; return css ( pseudoStyles ) ; } ; param { StyledTextProps } props return { * } export const getCustomElementStyles = ( props ) : ( ( ) => CSSObject ) | Record < string , never > => { if ( props != null && props . theme != null && props . theme . elements != null ) { const themeElements = props . theme . elements ; const targetElement = props [ 'data-paste-element' ] ; if ( themeElements [ targetElement ] != null ) { const elementOverrides = themeElements [ targetElement ] ; const computedStyles = css ( elementOverrides ) ( props ) as PasteCustomCSS ; const { variants , ... elementStyles } = computedStyles ; let variantStyles = { } ; if ( props . variant != null && variants != null && variants [ props . variant ] != null ) { variantStyles = variants [ props . variant ] ; } return ( ) => merge ( elementStyles , variantStyles ) ; } } return { } ; } ;