amotify 0.0.65 → 0.0.67

package/src/functions/Input/_.tsx

@@ -1,881 +0,0 @@
-import {
-  StyleConverter,
-  useStore,
-  React
-} from '@global'
-import {
-  Box,
-  Flex,
-  FAI,
-  Span
-} from '@atoms'
-import {
-  Row,
-  Text,
-  Column
-} from '@mols'
-import {
-  Buttons,
-  Tooltips
-} from '@fn'
-
-// as FontawesomeCore.IconProp
-import { faEye } from '@fortawesome/free-solid-svg-icons/faEye'
-import { faClock } from '@fortawesome/free-regular-svg-icons/faClock'
-import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons/faCalendarAlt'
-import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp'
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown'
-
-import style from './style.module.scss'
-
-import { HiddenInput } from './Hidden'
-import {
-  TextInput,
-  TextValidate
-} from './Text'
-import { TextAreaInput } from './TextArea'
-import { ContenteditableInput } from './Contenteditable'
-import { DigitCharactersInput } from './DigitCharacters'
-import {
-  TimeInput,
-  TimeFNs
-} from './Time/_'
-import { SelectInput } from './Select/_'
-import { RichSelectInput } from './RichSelect/_'
-import { ListInput } from './List/_'
-import { ChipsInput } from './Chips/_'
-import { SwitchInput } from './Switch/_'
-import { FileInput } from './File/_'
-import { SliderInput } from './Slider/_'
-import { Segmented } from './Segmented/_'
-
-const UniComponent: React.FC<{
-  componentID?: string
-  children: React.FC<any>
-  params: any
-}> = ( props ) => {
-  let [ val_componentID ] = React.useState( props.componentID || $.uuidGen() )
-
-  props = { ...props }
-  props.params = {
-    enableFormSubmit: true,
-    // override: 'beforeModified',
-    status_id: $.uuidGen(),
-    override: 'never',
-    name: $.uuidGen(),
-    id: $.uuidGen(),
-    'aria-label': 'Input-' + val_componentID,
-    ...props.params,
-    componentID: val_componentID,
-  }
-
-  let {
-    children: Children
-  } = props
-
-  return <Children { ...props.params } />
-}
-
-const TextInputs: amotify.fn.Input.Text.Methods = {
-  Validate: TextValidate,
-  Normal: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
-
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ TextInput }
-      params={ DefaultStyles.Boxish( rawParams ) }
-    />
-  },
-  Katakana: ( props ) => ( <TextInputs.Normal
-    restrict='katakana'
-    { ...props }
-  /> ),
-  HankakuKatakana: ( props ) => ( <TextInputs.Normal
-    restrict='hankaku.katakana'
-    { ...props }
-  /> ),
-  CreditCard: ( props ) => ( <TextInputs.Normal
-    restrict='creditCard'
-    { ...props }
-  /> ),
-  Tel: ( props ) => ( <TextInputs.Normal
-    restrict='tel'
-    placeholder='xxx-xxxx-xxxx'
-    { ...props }
-  /> ),
-  Number: ( props ) => ( <TextInputs.Normal restrict='number' { ...props } /> ),
-  DigitNumber: ( props ) => ( <TextInputs.Normal restrict='digitNumber' { ...props } /> ),
-  Email: ( props ) => ( <TextInputs.Normal restrict='email' { ...props } /> ),
-  Url: ( props ) => ( <TextInputs.Normal
-    restrict='url'
-    placeholder='https://example.com'
-    { ...props }
-  /> ),
-  Postal: ( params ) => {
-    let [ val_postalEventID ] = React.useState( $.uuidGen() )
-    React.useEffect( () => {
-      return () => {
-        useStore.delete( val_postalEventID )
-      }
-    },[] )
-
-    return <TextInputs.Normal
-      restrict='postal'
-      placeholder='郵便番号'
-      leftIndicator={ <Input.Comps.LeftIndicator children={ '〒' } /> }
-      { ...params }
-    />
-  },
-  Password: ( props ) => {
-    return <TextInputs.Normal
-      restrict='password'
-      placeholder='パスワードを入力'
-      rightIndicator={
-        <Input.Comps.RightIndicator
-          padding={ 0 }
-        >
-          <Buttons.Button.Normal.R
-            padding={ [ 0,1 ] }
-            fontColor='theme'
-            borderRadius={ 'inherit' }
-            backgroundColor='inherit'
-            height={ 1 }
-            ssEffectsOnActive={ [ 'expand' ] }
-            onMouseOver={ ( event ) => {
-              Tooltips.open( {
-                parent: event.currentTarget,
-                gravityPoint: 24,
-                padding: [ 1,0 ],
-                content: <Tooltips.Comps.Body>
-                  パスワードを表示
-                </Tooltips.Comps.Body>
-              } )
-            } }
-            tabIndex={ -1 }
-            onClick={ ( event ) => {
-              $( event.target )
-                .parent().parent().parent()
-                .find( 'input' )
-                .callback( ( input ) => {
-                  let Input = input[ 0 ]
-                  Input.type = Input.type === 'password' ? 'text' : 'password'
-                } )
-            } }
-          >
-            <FAI
-              icon={ faEye }
-              freeCSS={ {
-                pointerEvents: 'none'
-              } }
-            />
-          </Buttons.Button.Normal.R>
-        </Input.Comps.RightIndicator>
-      }
-      { ...props }
-    />
-  },
-  Money: {
-    JPY: ( props ) => ( <TextInputs.DigitNumber
-      placeholder="金額を入力"
-      rightIndicator={ <Input.Comps.RightIndicator
-        children={ '円' }
-      /> }
-      { ...props }
-    /> )
-  }
-}
-
-const TimeInputs: amotify.fn.Input.Time.Methods & {
-  Origin: ( props: amotify.fn.Input.Time.OriginParams ) => JSX.Element
-} = {
-  Origin: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    let [ val_componentID ] = React.useState( rawParams.componentID || $.uuidGen() )
-    rawParams.componentID = val_componentID
-
-    if ( $.is.nullish( rawParams.rightIndicator ) ) {
-      let icon = ( rawParams.restrict || '' ).match( /clock/ )
-        ? faClock
-        : faCalendarAlt
-
-      rawParams.rightIndicator = <Input.Comps.RightIndicator
-        padding={ 0 }
-      >
-        <Buttons.Button.Sub.R
-          color='cloud'
-          border='unset'
-          padding={ [ 0,1 ] }
-          fontColor='theme'
-          borderRadius={ 'inherit' }
-          backgroundColor='inherit'
-          flexCenter
-          height={ 1 }
-          ssEffectsOnActive={ [ 'ripple.cloud' ] }
-          tabIndex={ -1 }
-          id={ 'Picker-' + rawParams.componentID }
-          onClick={ () => {
-            let component = useStore.get( rawParams.componentID! )
-            if ( component ) component.openPicker()
-          } }
-        >
-          <FAI icon={ icon } />
-        </Buttons.Button.Sub.R>
-      </Input.Comps.RightIndicator>
-    }
-
-    return <UniComponent
-      componentID={ rawParams.componentID! }
-      children={ TimeInput }
-      params={ DefaultStyles.Boxish( rawParams ) }
-    />
-  },
-  Clock: ( props ) => ( <TimeInputs.Origin restrict='clock' era='clock' { ...props } /> ),
-  Date: ( props ) => ( <TimeInputs.Origin restrict='date' { ...props } /> ),
-  Week: ( props ) => ( <TimeInputs.Origin restrict='week' { ...props } /> ),
-  Month: ( props ) => ( <TimeInputs.Origin restrict='month' { ...props } /> ),
-  Year: ( props ) => ( <TimeInputs.Origin restrict='year' { ...props } /> ),
-  DateWareki: ( params ) => {
-    params = { ...params }
-    let [ val_componentID ] = React.useState( params.componentID || $.uuidGen() )
-    params.componentID = val_componentID
-    let {
-      defaultEra = 'wareki',
-    } = params
-
-    let [ val_era,set_era ] = React.useState<amotify.fn.Input.Time.EraTypes>( ( () => {
-      let era: amotify.fn.Input.Time.EraTypes = 'year'
-      if ( defaultEra == 'wareki' ) {
-        era = 'reiwa'
-        if ( params.value ) {
-          let [ year,month,date ] = params.value.split( /\D/ )
-          if ( year && month && date ) {
-            let Year = Number( year )
-            if ( Year >= 2019 ) {
-              Year -= 2019,era = 'reiwa'
-            } else if ( Year >= 1989 ) {
-              Year -= 1989,era = 'heisei'
-            } else if ( Year >= 1926 ) {
-              Year -= 1926,era = 'shouwa'
-            } else if ( Year >= 1912 ) {
-              Year -= 1912,era = 'taisho'
-            } else if ( Year >= 1868 ) {
-              Year -= 1868,era = 'meiji'
-            }
-            Year += 1
-          }
-        }
-      }
-      return era
-    } )() as amotify.fn.Input.Time.EraTypes )
-
-    React.useEffect( () => {
-      useStore.set( {
-        key: 'refreshEra_' + val_componentID,
-        value: {
-          refreshEra: ( value: amotify.fn.Input.Time.EraTypes ) => {
-            set_era( value )
-          }
-        }
-      } )
-    },[] )
-
-    return <TimeInputs.Origin
-      restrict='dateWareki'
-      leftIndicator={ <Input.Select
-        enableUnSelected={ false }
-        value={ val_era }
-        tone={ params.tone }
-        override='force'
-        flexCenter
-        borderTopRightRadius={ '2/3' }
-        borderBottomRightRadius={ '2/3' }
-        height={ 1 }
-        freeCSS={ {
-          whiteSpace: 'nowrap'
-        } }
-        options={ [
-          { value: 'year',label: '西暦' },
-          { value: 'reiwa',label: '令和' },
-          { value: 'heisei',label: '平成' },
-          { value: 'shouwa',label: '昭和' },
-          { value: 'taisho',label: '大正' },
-          { value: 'meiji',label: '明治' }
-        ] }
-        onUpdateValidValue={ ( { value,eventType } ) => {
-          set_era( value )
-          let component = useStore.get( params.componentID! )
-          component && component.resetEra && component.resetEra( value )
-        } }
-      /> }
-      { ...params }
-      era={ val_era }
-    />
-  },
-  Periods: {
-    Date: ( props ) => ( <TimeInputs.Origin restrict='dates' { ...props } /> ),
-    Month: ( props ) => ( <TimeInputs.Origin restrict='months' { ...props } /> ),
-  },
-  fn: TimeFNs
-}
-
-const ChipsInputs = ( rawParams: amotify.fn.Input.Chips.PlainParams ) => {
-  rawParams = { ...rawParams }
-  rawParams = {
-    gap: 1,
-    display: 'flex',
-    horizontalAlign: 'left',
-    verticalAlign: 'center',
-    flexWrap: true,
-    ...rawParams
-  }
-  let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Chips.PlainParams
-
-  return <UniComponent
-    componentID={ rawParams.componentID }
-    children={ ChipsInput }
-    params={ params }
-  />
-}
-ChipsInputs.fn = ChipsInput.fn
-
-const FileInputs = ( rawParams: amotify.fn.Input.Filer.PlainParams ) => {
-  rawParams = { ...rawParams }
-  rawParams.override = 'force'
-  let params = StyleConverter.ToClassName( rawParams )
-  params.cellClassName = [
-    params.cellClassName,
-    DefaultStyles.Boxish( {
-      ...params.cellStyles,
-      tone: params.tone
-    } ).className,
-  ].join( ' ' )
-
-  return <UniComponent
-    componentID={ rawParams.componentID }
-    children={ FileInput }
-    params={ params }
-  />
-}
-FileInputs.fn = FileInput.fn
-
-export const ListInputs: amotify.fn.Input.List.Methods & {
-  Origin: ( props: amotify.fn.Input.List.OriginParams ) => JSX.Element
-} = {
-  Origin: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    let params = DefaultStyles.ListCell( rawParams )
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ ListInput }
-      params={ params }
-    />
-  },
-  Radio: ( params ) => ( <ListInputs.Origin
-    iconType='radio'
-    tone={ params.tone as any }
-    { ...params }
-    type='radio'
-  /> ),
-  Checkbox: ( params ) => ( <ListInputs.Origin
-    iconType='checkbox'
-    tone={ params.tone as any }
-    { ...params }
-    type='checkbox'
-  /> )
-}
-export const Input: amotify.fn.Input.Methods = {
-  Plain: ( params ) => ( <input { ...StyleConverter.ToClassName( params ) } /> ),
-  Hidden: ( rawParams ) => {
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ HiddenInput }
-      params={ rawParams }
-    />
-  },
-  Text: TextInputs,
-  TextArea: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
-
-    let params = DefaultStyles.Boxish( rawParams )
-    params.rows = params.rows || 5
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ TextAreaInput }
-      params={ params }
-    />
-  },
-  Contenteditable: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
-    rawParams = {
-      ...rawParams,
-      freeCSS: {
-        whiteSpace: 'pre-wrap',
-        ...rawParams.freeCSS
-      },
-    }
-
-    let params = DefaultStyles.Boxish( rawParams )
-    params.rows = params.rows || 5
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ ContenteditableInput }
-      params={ params }
-    />
-  },
-  DigitCharacters: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    rawParams = {
-      textAlign: 'center',
-      width: 0,
-      ...rawParams
-    }
-    if ( rawParams.combineInput ) {
-      rawParams = {
-        textAlign: 'center',
-        width: 0,
-        ...rawParams,
-        freeCSS: {
-          minWidth: 12 * 2,
-          marginRight: -1,
-          ...rawParams.freeCSS
-        },
-        listStyles: {
-          borderRadius: '2.tone.secondary',
-          border: 'unset',
-          gap: 0,
-          ...rawParams.listStyles
-        },
-      }
-    }
-    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.DigitCharacters.PlainParams
-
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ DigitCharactersInput }
-      params={ params }
-    />
-  },
-  Time: TimeInputs,
-  Select: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    if ( $.is.nullish( rawParams.rightIcon ) ) {
-      rawParams.rightIcon = <Input.Comps.RightIcon
-        flexType='col'
-        className={ style.IndicatorIcon }
-        { ...rawParams.rightIconStyles }
-      >
-        <FAI.AngleDown />
-      </Input.Comps.RightIcon>
-    }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
-
-    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Select.PlainParams
-    delete params.rightIconStyles
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ SelectInput }
-      params={ params }
-    />
-  },
-  RichSelect: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    if ( $.is.nullish( rawParams.rightIcon ) ) {
-      rawParams.rightIcon = <Input.Comps.RightIcon
-        flexType='col'
-        className={ style.IndicatorIcon }
-        { ...rawParams.rightIconStyles }
-      >
-        <FAI.AngleDown />
-      </Input.Comps.RightIcon>
-    }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
-
-    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Select.PlainParams
-    delete params.rightIconStyles
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ RichSelectInput }
-      params={ params }
-    />
-  },
-  Radio: ListInputs.Radio,
-  Checkbox: ListInputs.Checkbox,
-  Chips: ChipsInputs,
-  Search: ( params: amotify.fn.Input.Search.PlainParams ) => {
-    return <ChipsInputs
-      AddButtonComponent={ ( props ) => {
-        if ( props.selected.length ) return null
-        return <Box>
-          選択してください
-        </Box>
-      } }
-      SelectedCellComponent={ ( props ) => {
-        return <Box
-          width={ 1 }
-          textAlign='left'
-        >
-          <Row.Separate>
-            { props.label }
-            { props.defaultRemoveButton }
-          </Row.Separate>
-        </Box>
-      } }
-      paddingLeft={ 3 }
-      rightIcon={ <Input.Comps.LeftIcon>
-        <Column
-          gap={ 0 }
-        >
-          <FAI icon={ faAngleUp } />
-          <FAI icon={ faAngleDown } freeCSS={ { marginTop: -6 } } />
-        </Column>
-      </Input.Comps.LeftIcon> }
-      limit={ 1 }
-      { ...params }
-    />
-  },
-  File: FileInputs,
-  Switch: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    rawParams.color = rawParams.color || 'theme'
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ SwitchInput }
-      params={ rawParams }
-    />
-  },
-  Slider: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    return <UniComponent
-      componentID={ rawParams.componentID }
-      children={ SliderInput }
-      params={ StyleConverter.ToClassName( rawParams ) }
-    />
-  },
-  Checker: ( rawParams ) => {
-    rawParams = { ...rawParams }
-    return <ListInputs.Origin
-      { ...rawParams }
-      tone='plain'
-      icon
-      type='checker'
-      iconType='checkbox'
-      value={ rawParams.value ? true : null }
-      cellStyles={ {
-        padding: 0,
-        ...rawParams.cellStyles
-      } }
-      options={ [
-        { value: true,label: rawParams.label }
-      ] }
-      onUpdateValidValue={ ( args ) => {
-        let Value = !!args.value[ 0 ]
-        if ( rawParams.onUpdateValidValue )
-          rawParams.onUpdateValidValue( {
-            ...args,
-            value: Value
-          } )
-      } }
-    />
-  },
-
-  Segmented: Segmented,
-
-  Comps: {
-    RequiredSign: ( params ) => {
-      return <Span
-        fontColor='white'
-        fontSize={ '0.xs' }
-        padding={ [ '1/4','1/3' ] }
-        backgroundColor='nega'
-        borderRadius={ '3.tone.tertiary' }
-        children={ '必須' }
-        { ...params }
-      />
-    },
-    RequiredShortSign: ( params ) => {
-      return <Span
-        fontColor='nega'
-        padding={ [ '1/4','1/3' ] }
-        borderRadius={ '3.tone.tertiary' }
-        children={ '*' }
-        { ...params }
-      />
-    },
-    OmitSign: ( params ) => {
-      return <Span
-        fontColor='white'
-        fontSize={ '0.xs' }
-        padding={ [ '1/4','1/3' ] }
-        borderRadius={ '3.tone.tertiary' }
-        backgroundColor='6.layer.darkest'
-        children={ '省略可' }
-        { ...params }
-      />
-    },
-    LeftIndicator: ( params ) => {
-      let {
-        tone,
-        ...others
-      } = params
-
-      return <Box
-        { ...DefaultStyles.Indicator( tone! ) }
-        borderTopRightRadius={ '2/3' }
-        borderBottomRightRadius={ '2/3' }
-        { ...others }
-      />
-    },
-    RightIndicator: ( params ) => {
-      let {
-        tone,
-        ...others
-      } = params
-
-      return <Box
-        { ...DefaultStyles.Indicator( tone! ) }
-        borderTopLeftRadius={ '2/3' }
-        borderBottomLeftRadius={ '2/3' }
-        { ...others }
-      />
-    },
-    RightIcon: ( params ) => {
-      let {
-        tone = 'border',
-        ...others
-      } = params
-
-      return <Box
-        { ...DefaultStyles.IndicatorIcon }
-        right={ '3/4' }
-        className={ style.IndicatorIcon }
-        { ...others }
-        freeCSS={ {
-          zIndex: 6,
-          pointerEvents: 'none',
-          ...others.freeCSS
-        } }
-      />
-    },
-    LeftIcon: ( params ) => {
-      let {
-        tone = 'border',
-        ...others
-      } = params
-
-      return <Box
-        { ...DefaultStyles.IndicatorIcon }
-        left={ '3/4' }
-        className={ style.IndicatorIcon }
-        { ...others }
-        freeCSS={ {
-          zIndex: 6,
-          pointerEvents: 'none',
-          ...others.freeCSS
-        } }
-      />
-    },
-  }
-}
-
-const DefaultStyles = {
-  Input: ( type: amotify.fn.Input.BoxToneTypes ) => {
-    if ( type == 'plain' ) return {}
-    let Styles: amotifyUniStyleParams = {
-      padding: '3/4',
-      transition: 'middle',
-      flexSizing: 'auto',
-      boxShadow: '0.thin'
-    }
-    if ( type == 'border' ) {
-      Styles = {
-        ...Styles,
-        border: true,
-        borderRadius: '2.tone.secondary',
-        backgroundColor: '1.layer.base'
-      }
-    } else if ( type == 'cloud' ) {
-      Styles = {
-        ...Styles,
-        border: '1.thin',
-        borderRadius: '2.tone.secondary',
-        backgroundColor: 'cloud'
-      }
-    } else if ( type == 'bottomBorder' ) {
-      Styles = {
-        ...Styles,
-        borderRadius: 0,
-        border: 'unset',
-        borderBottom: true,
-        backgroundColor: 'cloud'
-      }
-    }
-    return Styles
-  },
-  ListCell: ( params: amotify.fn.Input.List.OriginParams ) => {
-    params = { ...params }
-    if ( !params.tone ) {
-      params.tone = 'border'
-
-      if ( amotify.config.tone == 'flat' ) params.tone = 'cloud'
-    }
-
-    let { tone } = params
-
-    if ( tone == 'plain' ) {
-
-    } else {
-      params = {
-        ...params,
-        cellStyles: {
-          position: 'relative',
-          padding: [ '3/4',1 ],
-          borderRadius: '2.tone.secondary',
-          transition: 'middle',
-          ...params.cellStyles,
-        }
-      }
-
-      if ( tone == 'normal' ) {
-        params = {
-          gap: '1/2',
-          ...params,
-          cellStyles: {
-            isSemiBoldFont: true,
-            ...params.cellStyles,
-          },
-          cellCheckedStyles: {
-            backgroundColor: 'cloud'
-          }
-        }
-      }
-      else {
-        params = {
-          gap: '3/4',
-          ...params,
-          cellStyles: {
-            boxShadow: '0.thin',
-            ...params.cellStyles
-          }
-        }
-
-        if ( tone == 'cloud' || tone == 'vivid' ) {
-          params.cellStyles = {
-            border: '1.thin',
-            backgroundColor: '2.layer.cloud',
-            ...params.cellStyles,
-          }
-        }
-
-        if ( tone == 'border' ) {
-          params.cellStyles = {
-            border: true,
-            backgroundColor: '1.layer.base',
-            ...params.cellStyles,
-          }
-          params.cellCheckedStyles = {
-            borderColor: 'theme',
-            fontColor: 'theme',
-            ...params.cellCheckedStyles
-          }
-        } else if ( tone == 'cloud' ) {
-          params.cellCheckedStyles = {
-            backgroundColor: 'tcOpFew',
-            fontColor: 'theme',
-            borderColor: 'theme',
-            ...params.cellCheckedStyles
-          }
-        } else if ( tone == 'vivid' ) {
-          params.cellCheckedStyles = {
-            backgroundColor: 'theme',
-            fontColor: 'white',
-            borderColor: 'theme',
-            ...params.cellCheckedStyles
-          }
-        }
-      }
-    }
-    return StyleConverter.ToClassName( params )
-  },
-  Boxish: ( params: any ) => {
-    params = { ...params }
-    if ( !params.tone ) {
-      params.tone = 'border'
-      if ( amotify.config.tone == 'sharp' ) params.tone = 'bottomBorder'
-      else if ( amotify.config.tone == 'flat' ) params.tone = 'cloud'
-    }
-
-    let Styles: amotifyUniStyleParams = {
-      ...DefaultStyles.Input( params.tone ),
-      fontColor: '2.normal',
-      ...params,
-      ...params.leftIndicator ? {
-        borderTopLeftRadius: '2/3',
-        borderBottomLeftRadius: '2/3',
-        marginLeft: '1/4'
-      } : null,
-      ...params.rightIndicator ? {
-        borderTopRightRadius: '2/3',
-        borderBottomRightRadius: '2/3',
-        marginRight: '1/4'
-      } : null,
-      className: [
-        style.Input,
-        params.className
-      ].join( ' ' ),
-    }
-
-    return StyleConverter.ToClassName( Styles ) as any
-  },
-  Indicator: ( type: amotify.fn.Input.BoxToneTypes ) => {
-    if ( !type ) {
-      type = 'border'
-      if ( amotify.config.tone == 'sharp' ) type = 'bottomBorder'
-    }
-    if ( type == 'plain' ) return {}
-    let styles: amotifyUniStyleParams = {
-      flexSizing: 'none',
-      flexCenter: true,
-      padding: [ 0,1 ],
-      borderRadius: '2.tone.secondary',
-      backgroundColor: 'cloud'
-    }
-
-    if ( type == 'border' ) {
-      styles = {
-        ...styles,
-        border: true
-      }
-    } else if ( type == 'cloud' ) {
-      styles = {
-        ...styles,
-        border: '1.thin'
-      }
-    } else if ( type == 'bottomBorder' ) {
-      styles = {
-        ...styles,
-        borderRadius: 0,
-        borderBottom: true
-      }
-    }
-    return styles
-  },
-  IndicatorIcon: {
-    position: 'absolute',
-    unitWidth: 2,
-    unitHeight: 2,
-    top: '50%',
-    flexCenter: true,
-    fontColor: 'theme',
-    fontSize: '1.mini',
-    backgroundColor: 'inherit',
-  } as amotifyUniStyleParams
-}