export { }
import $$,{ UUID,Filer } from 'jmini'
import React,{
  useState,
  useEffect
} from 'react'

import {
  Themecolor,
  ReactElement,
  Config,
  LaunchReactApp,
  ThemeColors,
  Box,
  Span,
  Grid,
  Flex,
  FAI,
  Img,
  Logo,
  Column,
  List,
  ListItem,
  Accordion,
  Row,
  Literal,
  PageViewController,
  SwipeView,
  TabBar,
  Plate,
  Table,
  Input,
  Button,
  Anchor,
  Label,
  Sheet,
  Snackbar,
  Tooltips,
  Tips,
  Loader,
  Effect,
  Cropper,
  RootViewController,
  StyleProps,
  Roundness,
  Card
} from 'amotify'
import { TimeTypes } from '../../dist/fn/Input/Time'

const Basic = {
  index: () => {
    return <>
      <Basic.Fonts />
      <Basic.Box />
      <Basic.Flex />
      <Basic.Grid />
      <Basic.Others />
    </>
  },
  Fonts: () => {
    return <Card padding={ 1 }>
      <Column>
        <Literal.SubTitle>Fonts</Literal.SubTitle>
        <Box overflow={ 'auto' }>
          <Column>
            <Row.Left
              ssCardBox
              padding={ 1.5 }
            >
              [GrayColor]
              <Box fontColor='1.clear'>1.clear</Box>
              <Box fontColor='2.normal'>2.normal</Box>
              <Box fontColor='3.blur'>3.blur</Box>
              <Box fontColor='4.thin'>4.thin</Box>
              <Box fontColor='5.translucent'>5.translucent</Box>
              <Box fontColor='6.clear'>6.clear</Box>
            </Row.Left>
            <Row.Left
              ssCardBox='plain'
              padding={ 1.5 }
              backgroundColor='dark'
            >
              <Box fontColor='white'>[GrayColor in Dark]</Box>
              <Box fontColor='1.clear'>1.clear</Box>
              <Box fontColor='2.normal'>2.normal</Box>
              <Box fontColor='3.blur'>3.blur</Box>
              <Box fontColor='4.thin'>4.thin</Box>
              <Box fontColor='5.translucent'>5.translucent</Box>
              <Box fontColor='6.clear'>6.clear</Box>
            </Row.Left>
            <Column ssCardBox padding={ 1.5 }>
              <Box>[size:Landing]</Box>
              <Box isSemiBoldFont fontSize='7.landing'>
                Visualize Your <Span fontColor='theme'>
                  Colors
                </Span> On a Real Website
              </Box>
            </Column>
            <Column ssCardBox padding={ 1.5 }>
              <Box>[size:Title]</Box>
              <Box fontSize='6.title'>
                令和４年度の国民負担率を公表します
              </Box>
            </Column>
            <Column ssCardBox padding={ 1.5 }>
              <Box>[size:Subtitle]</Box>
              <Box fontSize='5.subTitle'>
                支払いを受け付ける
              </Box>
            </Column>
            <Column ssCardBox padding={ 1.5 }>
              <Box>[size:Thirdtitle]</Box>
              <Box fontSize='4.thirdTitle'>
                租税負担率と社会保障負担率を合計した国民負担率について、令和４年度の見通しを推計しましたので、公表します。
              </Box>
            </Column>
            <Column ssCardBox padding={ 1.5 }>
              <Box>[size:Paragraph]</Box>
              <Literal.Paragraph>
                <Literal.Description>
                  { `This article discusses performance best practices for fonts.
There are a variety of ways in which web fonts impact performance`}
                </Literal.Description>
              </Literal.Paragraph>
            </Column>
            <Column ssCardBox padding={ 1.5 }>
              <Box>[size:Normal]</Box>
              <Literal>
                効率的で持続可能な財政への転換を図り、この財政構造を各般の構造改革とともに推進することで、民間需要主導の持続的経済成長の実現を目指します。
                少子・高齢化、国際化など経済社会の構造変化に対応できる21世紀のあるべき税制をきずきます。
                財政投融資は、行財政改革の趣旨を踏まえ、民間ではできない分野・事業などに重点化を行い、真に政策的に必要な資金需要には的確に対応します。
                金融庁と協力し、金融のセーフティネットを整備し、金融危機に素早く対応するなど、金融システムの安定の確保を目指します。
                国際的な協力等に積極的に取り組むことにより、国際通貨システムの安定・国際貿易の秩序ある発展を目指します。
              </Literal>
            </Column>
            <Column ssCardBox padding={ 1.5 }>
              <Box>[size:Mini]</Box>
              <Literal.Mini>
                Copyright © Ministry of Finance Japan. All Rights Reserved.
              </Literal.Mini>
            </Column>
            <Column ssCardBox padding={ 1.5 }>
              <Box>[size:Micro]</Box>
              <Literal.Micro>
                Copyright © Ministry of Finance Japan. All Rights Reserved.
              </Literal.Micro>
            </Column>
          </Column>
        </Box>
      </Column>
    </Card>
  },
  Box: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Box
      </Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Table.Normal
          ssCardBox={ false }
          borderRadius={ 0 }
          height={ 1 }
          tone='cellBorder'
          colLength={ 2 }
          head={ false }
          rows={ [
            [
              {
                children: <Literal.Description>
                  { `<Box>
helloWorld!!
</Box>`}
                </Literal.Description>
              },{
                children: <Box> helloWorld!! </Box>
              }
            ],[
              {
                children: <Literal.Description>
                  { `<Box
children={ 'helloWorld!!' }
/>`}
                </Literal.Description>
              },{
                children: <Box children={ 'helloWorld!!' } />
              },
            ],[
              {
                children: <Literal.Description>
                  { `<Box
fontColor={ '4.thin' }
padding={ 1 }
margin={ 1 }
textAlign='center'
borderRadius={ 2 }
border={ 'normal' }
children={ 'styleBox' }
/>
`}
                </Literal.Description>
              },{
                children: <Box
                  fontColor={ '4.thin' }
                  padding={ 1 }
                  margin={ 1 }
                  textAlign={ 'center' }
                  borderRadius={ 2 }
                  border
                  children={ 'styleBox' }
                />
              }
            ]
          ] }
        />
      </Box>
    </Box>
  },
  Flex: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Flex
      </Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Table.Normal
          ssCardBox={ false }
          borderRadius={ 0 }
          height={ 1 }
          colLength={ 2 }
          tone='cellBorder'
          head={ false }
          rows={ [
            [
              {
                children: <Literal.Description>
                  {
                    `<Flex flexType='row' gap={ 1 }>
<Box children={ 'FlexBox1' } />
<Box children={ 'FlexBox2' } />
<Box children={ 'FlexBox3' } />
<Box flexSizing={ 'auto' } children={ 'FlexBox3' } />
</Flex>`
                  }
                </Literal.Description>
              },{
                children: <Flex
                  gap={ 1 }
                  flexType='row'
                  fontColor='theme'
                >
                  <Card.Plain flexCenter padding={ 1 } backgroundColor='theme.opa.low'>FlexBox1</Card.Plain>
                  <Card.Plain flexCenter padding={ 1 } backgroundColor={ 'theme.opa.middle' }>FlexBox2</Card.Plain>
                  <Card.Plain flexCenter padding={ 1 } backgroundColor='theme.opa.high'>FlexBox3</Card.Plain>
                  <Card.Plain flexCenter flexSizing={ 'auto' } padding={ 1 } backgroundColor='theme.opa.high'>FlexBox4</Card.Plain>
                </Flex>
              },
            ],[
              {
                children: <Literal.Description textAlign='left'>
                  { `<Flex
flexType='col'
flexChilds={ 'auto' }
>
<Box />
<Box />
...
</Flex>`}
                </Literal.Description>
              },{
                children: <>
                  <Flex gap={ 1 } flexCenter>
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='theme.lightest' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='theme.lighter' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='theme.lighten' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='theme' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='theme.darken' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='theme.darker' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='theme.darkest' />
                  </Flex>
                  <Flex gap={ 1 } flexCenter>
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='layer.1' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='layer.2' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='layer.3' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='layer.4' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='layer.5' />
                    <Box flexCenter ssSphere={ 3 } boxShadow='0.normal' backgroundColor='layer.6' />
                  </Flex>
                </>
              },
            ],[
              {
                children: <Literal.Description>
                  {
                    `<Flex gap={ 1 }>
<Box flexGrid={ 2 } ... />
<Box flexGrid={ 3 } ... />
<Box flexGrid={ 4 } ... />
</Flex>`
                  }
                </Literal.Description>
              },{
                children: <Flex gap={ 1 } fontColor='white'>
                  <Card.Plain flexCenter padding={ 1 } backgroundColor='posi' flexGrid={ 2 }>Box1</Card.Plain>
                  <Card.Plain flexCenter padding={ 1 } backgroundColor='nega' flexGrid={ 3 }>Box2</Card.Plain>
                  <Card.Plain flexCenter padding={ 1 } backgroundColor='warn' flexGrid={ 4 }>Box3</Card.Plain>
                </Flex>
              },
            ]
          ] }
        />
      </Box>
    </Box>
  },
  Grid: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Grid
      </Literal.SubTitle>
      <Box style={ { padding: 1,overflow: 'auto' } }>
        <Table.Normal
          ssCardBox={ false }
          height={ 1 }
          backgroundColor='nega'
          borderRadius={ 0 }
          colLength={ 2 }
          tone='cellBorder'
          head={ false }
          rows={ [
            [
              {
                children: <Literal.Description>
                  {
                    `<Grid gridCols={ 3 } gap={ 1 }>
<Box children={ 'GridBox1' } />
<Box children={ 'GridBox2' } />
<Box children={ 'GridBox3' } />
<Box children={ 'GridBox4' } />
<Box children={ 'GridBox5' } />
<Box children={ 'GridBox6' } />
</Grid>`
                  }
                </Literal.Description>
              },{
                children: <Grid gridCols={ 3 } gap={ 1 }>
                  <Card.Plain padding={ 1 } backgroundColor='layer.1'>GridBox1</Card.Plain>
                  <Card.Plain padding={ 1 } backgroundColor='layer.2'>GridBox2</Card.Plain>
                  <Card.Plain padding={ 1 } backgroundColor='layer.3'>GridBox3</Card.Plain>
                  <Card.Plain padding={ 1 } backgroundColor='layer.4'>GridBox4</Card.Plain>
                  <Card.Plain padding={ 1 } backgroundColor='layer.5'>GridBox5</Card.Plain>
                  <Card.Plain padding={ 1 } backgroundColor='layer.6'>GridBox6</Card.Plain>
                </Grid>
              },
            ]
          ] }
        />
      </Box>
    </Box>
  },
  Others: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Others
      </Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Table.Normal
          ssCardBox={ false }
          height={ 1 }
          borderRadius={ 0 }
          colLength={ 2 }
          tone='cellBorder'
          head={ false }
          rows={ [
            [
              {
                children: <>
                  <Literal.Description>
                    {
                      `
<Button.Label
htmlFor='testAccordion'
type='sub'
children={ 'ToggleButton' }
/>
<Accordion
id='testAccordion'
open
children={
  <>
    in Accordion Element
  </>
}
/>`
                    }
                  </Literal.Description>
                </>
              },{
                children: <Column>
                  <Label.Sub
                    children={ 'ToggleButton' }
                    onClick={ () => {
                      Accordion.fn.toggle( 'testAccordion' )
                    } }
                  />
                  <Accordion
                    accordionID={ 'testAccordion' }
                    defaultOpen
                  >
                    in Accordion Element
                  </Accordion>
                </Column>
              }
            ],[
              {
                children: <Literal.Description>
                  {
                    `
<Img
maxheight={ 8 }
maxWidth={ 8 }
src='...'
alt='noImage'
/>
                        `
                  }
                </Literal.Description>
              },{
                children: <Row.Center>
                  <Column
                    ssCardBox
                    gap={ 0 }
                    overflow={ 'hidden' }
                  >
                    <Box>
                      <Img
                        className='test'
                        src={ Logo.Images.defaultIcon( 'user' ) }
                        alt='noImage'
                        xcss={ {
                          maxHeight: 12 * 8,
                          maxWidth: 12 * 8
                        } }
                      />
                    </Box>
                    <Literal
                      padding={ 1 }
                      borderTop
                    >
                      Image
                    </Literal>
                  </Column>
                </Row.Center>
              }
            ]
          ] }
        />
      </Box>
    </Box>
  }
}
const Logos = {
  index: () => {
    return <Row.Left flexWrap flexChilds='auto'>
      <Logos.Mingoo />
      <Logos.Google />
      <Logos.Facebook />
      <Logos.Line />
      <Logos.Twitter />
    </Row.Left>
  },
  Mingoo: () => {
    return <Card>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Mingoo
      </Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Row.Center
          gap={ 2 }
          padding={ 2 }
          flexType='col'
        >
          <Logo.Brands.MingooIcon size='S' />
          <Logo.Brands.MingooIcon size='R' />
          <Logo.Brands.MingooIcon size='L' />
          <Logo.Brands.MingooIcon size='2L' />
          <Logo.Brands.MingooIcon size='3L' />
        </Row.Center>
      </Box>
    </Card>
  },
  Google: () => {
    return <Card>
      <Literal.SubTitle borderBottom padding={ 1 }>Google</Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Row.Center flexType='col' gap={ 2 } padding={ 2 }>
          <Logo.Brands.Google size='S' />
          <Logo.Brands.Google size='R' />
          <Logo.Brands.Google size='L' />
          <Logo.Brands.Google size='2L' />
          <Logo.Brands.Google size='3L' />
        </Row.Center>
      </Box>
    </Card>
  },
  Facebook: () => {
    return <Card>
      <Literal.SubTitle borderBottom padding={ 1 }>Facebook</Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Row.Center flexType='col' gap={ 2 } padding={ 2 }>
          <Logo.Brands.Facebook size='S' />
          <Logo.Brands.Facebook size='R' />
          <Logo.Brands.Facebook size='L' />
          <Logo.Brands.Facebook size='2L' />
          <Logo.Brands.Facebook size='3L' />
        </Row.Center>
      </Box>
    </Card>
  },
  Line: () => {
    return <Card>
      <Literal.SubTitle borderBottom padding={ 1 }>LINE</Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Row.Center flexType='col' gap={ 2 } padding={ 2 }>
          <Logo.Brands.LINE size='S' />
          <Logo.Brands.LINE size='R' />
          <Logo.Brands.LINE size='L' />
          <Logo.Brands.LINE size='2L' />
          <Logo.Brands.LINE size='3L' />
        </Row.Center>
      </Box>
    </Card>
  },
  Twitter: () => {
    return <Card>
      <Literal.SubTitle borderBottom padding={ 1 }>Twitter</Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Row.Center flexType='col' gap={ 2 } padding={ 2 }>
          <Logo.Brands.Twitter size='S' />
          <Logo.Brands.Twitter size='R' />
          <Logo.Brands.Twitter size='L' />
          <Logo.Brands.Twitter size='2L' />
          <Logo.Brands.Twitter size='3L' />
        </Row.Center>
      </Box>
    </Card>
  }
}
const Effections = {
  index: () => {
    return <>
      <Effections.Ripple />
      <Effections.Variables />
      <Effections.Tooltips />
      <Effections.Snackbar />
    </>
  },
  Ripple: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Ripple
      </Literal.SubTitle>
      <Column padding={ 2 }>
        <Literal.Description>
          {
            `<Element
  ssEffectsOnActive={ 'ripple.( cloud | theme | nega | posi | warn )' }
/>`
          }
        </Literal.Description>
        <Row.Center>
          <Box
            ssCardBox
            padding={ 1 }
            ssEffectsOnActive={ 'ripple.theme' }
          >
            DIV
          </Box>
          <Button.Prime ssEffectsOnActive={ 'ripple.white' }>
            White
          </Button.Prime>
          <Button.Border ssEffectsOnActive={ 'ripple.cloud' }>
            Cloud
          </Button.Border>
          <Button.Border ssEffectsOnActive={ 'ripple.theme' }>
            Theme
          </Button.Border>
        </Row.Center>
      </Column>
    </Box>
  },
  Variables: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Effects
      </Literal.SubTitle>
      <Column padding={ 2 }>
        <Literal.Description>
          {
            `<Button
    ssEffectsOnActive={ 'shrink' }
/>`
          }
        </Literal.Description>
        <Row.Left>
          <Button
            onClick={ () => {
              Loader.fn.mini.active( 'testLoadingKey' )
              setTimeout( () => {
                Loader.fn.stopALL()
              },5000 )
            } }
          >
            <Row.Center gap={ 0 }>
              <Loader.White.S
                loaderID='testLoadingKey'
                marginRight={ 1 }
              />
              <Box textAlign='left'>
                Launch Mini Loader
              </Box>
            </Row.Center>
          </Button>
        </Row.Left>
        <Row.Left>
          <Button.Border ssEffectsOnActive={ 'shrink' }>
            Shrink
          </Button.Border>
          <Button.Border ssEffectsOnActive={ 'pudding' }>
            Pudding
          </Button.Border>
          <Button.Border ssEffectsOnActive={ 'expand' }>
            Expand
          </Button.Border>
          <Button.Border ssEffectsOnActive={ 'push' }>
            Push
          </Button.Border>
          <Button.Border
            children={ 'corner Loader' }
            onClick={ () => {
              Loader.fn.corner.active()
              setTimeout( () => {
                Loader.fn.corner.stop()
              },3000 )
            } }
          />
        </Row.Left>
      </Column>
    </Box>
  },
  Tooltips: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Tooltips
      </Literal.SubTitle>
      <Column padding={ 2 }>
        <Button
          onContextMenu={ event => {
            event.preventDefault()
            Tooltips.open( {
              tipsID: 'testTooltips',
              event,
              nextToCursor: true,
              gravityPoint: 10,
              closeAtParentBlur: false,
              padding: 0,
              xcss: {
                minWidth: 12 * 16
              },
              content: <Column
                ssCardBox
                gap={ 0 }
                borderRadius={ '3.tone.tertiary' }
                padding={ '1/2' }
              >
                <Button.Clear.S color='cloud' fontColor='2.normal' textAlign='left'>
                  Button Label1
                </Button.Clear.S>
                <Button.Clear.S color='cloud' fontColor='2.normal' textAlign='left'>
                  Button Label2
                </Button.Clear.S>
                <Button.Clear.S color='cloud' fontColor='2.normal' textAlign='left'>
                  Button Label3
                </Button.Clear.S>
                <Button.Clear.S color='cloud' fontColor='2.normal' textAlign='left'>
                  Button Label4
                </Button.Clear.S>
                <Button.Clear.S color='cloud' fontColor='2.normal' textAlign='left'>
                  Button Label5
                </Button.Clear.S>
              </Column>
            } )
          } }
        >
          OpenTooltips next to cursor
          <br />
          ( onContextMenu )
        </Button>
        <Grid gridCols={ 5 } gap={ 1 }>
          {
            Array.from( { length: 25 } ).map( ( a,index ) => {
              return <Button.Border
                key={ index }
                onMouseOver={ event => {
                  Tooltips.open( {
                    tipsID: 'tips-' + ( index + 1 ),
                    event,
                    gravityPoint: index + 1,
                    closeAtParentBlur: false,
                    padding: 0,
                    content: <Tooltips.Body
                      key={ index }
                    >
                      { ( index + 1 ).zeroEmbed( 2 ) }
                    </Tooltips.Body>
                  } )
                } }
              >
                { index + 1 }
              </Button.Border>
            } )
          }
        </Grid>
      </Column>
    </Box >
  },
  Snackbar: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Snackbars
      </Literal.SubTitle>
      <Row.Center padding={ 2 }>
        <Button
          onClick={ () => {
            Snackbar.add( {
              secondsToClose: 3,
              // snackID: 'testSnackID0',
              children: 'hello World!!'
            } )
          } }
        >
          Add Normal Snackbar
        </Button>
        <Button
          onClick={ () => {
            Snackbar.add( {
              snackID: 'testSnackID1',
              secondsToClose: 30,
              children: <Row.Separate
                verticalAlign='baseline'
                paddingLeft={ '2/3' }
              >
                予約時間が更新されました
                <Button.Sub.S
                  color='white'
                  fontColor='posi'
                >
                  元に戻す
                </Button.Sub.S>
              </Row.Separate>
            } )
          } }
        >
          Notices
        </Button>
        <Button
          onClick={ () => {
            let snackID = UUID()
            Snackbar.add( {
              snackID: snackID,
              children: <Column>
                <Row.Left verticalAlign='top'>
                  <Img
                    src={ Logo.Images.defaultIcon( 'user' ) }
                    ssSphere={ 4 }
                  />
                  <Literal.Description>
                    { `Some Text
Some Text
Some Text`}
                  </Literal.Description>
                </Row.Left>
                <Row.Separate>
                  <Button.Sub.S
                    color='white'
                    onClick={ () => {
                      Snackbar.remove( snackID )
                    } }
                  >
                    閉じる
                  </Button.Sub.S>
                  <Anchor.Prime.S
                    href=''
                  >
                    詳細
                  </Anchor.Prime.S>
                </Row.Separate>
              </Column>
            } )
          } }
        >
          Message
        </Button>
      </Row.Center>
    </Box>
  }
}
const Buttons = {
  index: () => {
    return <>
      <Buttons.Types />
      <Buttons.Tone />
    </>
  },
  Tone: () => {
    return <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Tone
      </Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Grid gridCols={ 2 } gap={ 2 }>
          <Box>
            <Box padding={ 1 } isBoldFont fontSize='3.paragraph'>
              ・Prime
            </Box>
            <Grid gridCols={ 3 } padding={ 1 } gap={ 1 }>
              <Button
                color='theme'
                children={ 'theme' }
              />
              <Button
                backgroundColor='coffee'
                children={ 'posi' }
              />
              <Button
                backgroundColor='ninja'
                children={ 'nega' }
              />
              <Button
                backgroundColor='droplet'
                children={ 'warn' }
              />
              <Button
                backgroundColor='googleBlue'
                children={ 'mono' }
              />
              <Button
                backgroundColor='poizon'
              >
                pozion
              </Button>
            </Grid>
          </Box>
          <Box>
            <Box padding={ 1 } isBoldFont fontSize='3.paragraph'>
              ・Sub
            </Box>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 }>
              <Button.Sub
                color='theme'
                children={ 'theme' }
              />
              <Button.Sub
                color='posi'
                children={ 'posi' }
              />
              <Button.Sub
                color='nega'
                children={ 'nega' }
              />
              <Button.Sub
                color='warn'
                children={ 'warn' }
              />
              <Button.Sub
                color='cloud'
                children={ 'cloud' }
              />
            </Grid>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 } ssCardBox backgroundColor='dark'>
              <Button.Sub
                color='white'
                children={ 'white' }
              />
              <Button.Sub
                color='cloud'
                children={ 'cloud' }
              />
            </Grid>
          </Box>
          <Box>
            <Box padding={ 1 } isBoldFont fontSize='3.paragraph'>
              ・Clear
            </Box>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 }>
              <Button.Clear
                color='theme'
                children={ 'theme' }
              />
              <Button.Clear
                color='posi'
                children={ 'posi' }
              />
              <Button.Clear
                color='nega'
                children={ 'nega' }
              />
              <Button.Clear
                color='warn'
                children={ 'warn' }
              />
              <Button.Clear
                color='cloud'
                children={ 'cloud' }
              />
            </Grid>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 } ssCardBox backgroundColor='dark'>
              <Button.Clear
                color='white'
                children={ 'white' }
              />
              <Button.Clear
                color='cloud'
                children={ 'cloud' }
              />
            </Grid>
          </Box>
          <Box>
            <Box padding={ 1 } isBoldFont fontSize='3.paragraph'>
              ・FillToBorder
            </Box>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 }>
              <Button.FillToBorder
                color='theme'
                children={ 'theme' }
              />
              <Button.FillToBorder
                color='posi'
                children={ 'posi' }
              />
              <Button.FillToBorder
                color='nega'
                children={ 'nega' }
              />
              <Button.FillToBorder
                color='warn'
                children={ 'warn' }
              />
            </Grid>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 } ssCardBox backgroundColor='dark'>
              <Button.FillToBorder
                color='white'
                children={ 'white' }
              />
              <Button.FillToBorder
                color='cloud'
                children={ 'cloud' }
              />
            </Grid>
          </Box>
          <Box>
            <Box padding={ 1 } isBoldFont fontSize='3.paragraph'>
              ・BorderToFill
            </Box>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 }>
              <Button.BorderToFill
                color='theme'
                fontColor='nega'
              >
                <Box>
                  theme
                </Box>
              </Button.BorderToFill>
              <Button.BorderToFill
                color='posi'
              >
                posi
              </Button.BorderToFill>
              <Button.BorderToFill
                color='nega'
              >
                nega
              </Button.BorderToFill>
              <Button.BorderToFill
                color='warn'
              >
                warn
              </Button.BorderToFill>
            </Grid>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 } ssCardBox backgroundColor='dark'>
              <Button.BorderToFill
                color='white'
                children={ 'white' }
              />
              <Button.BorderToFill
                color='cloud'
                children={ 'cloud' }
              />
            </Grid>
          </Box>
          <Box>
            <Box padding={ 1 } isBoldFont fontSize='3.paragraph'>
              ・Others
            </Box>
            <Grid gridCols={ 3 } gap={ 1 } padding={ 1 }>
              <Button.Border
                children={ 'Border' }
              />

              <Button.Normal
                children={ 'Normal' }
              />

              <Button.Link
                children={ 'Link' }
              />
              <Button.Plain
                children={ 'Plain' }
              />
            </Grid>
          </Box>
        </Grid>
      </Box>
    </Box>
  },
  Types: () => {
    return <Flex gap={ 2 } flexChilds='auto'>
      <Box ssCardBox>
        <Literal.ThirdTitle borderBottom padding={ 1 }>
          ・Button
        </Literal.ThirdTitle>
        <Box padding={ 1 } overflow={ 'auto' }>
          <List
            items={ [
              <>
                <Button.Prime>
                  Button.Prime
                </Button.Prime>
              </>,<>
                <Button.Sub>
                  Button.Sub
                </Button.Sub>
              </>,<>
                <Button.Border>
                  Button.Border
                </Button.Border>
              </>
            ] }
          />
        </Box>
      </Box>
      <Box ssCardBox>
        <Literal.ThirdTitle borderBottom padding={ 1 }>
          ・Label
        </Literal.ThirdTitle>
        <Box padding={ 1 } overflow={ 'auto' }>
          <List
            ListChildCallback={ ( { children } ) => {
              return <Column
                gap={ '1/3' }
                padding={ [ 1,0 ] }
                horizontalAlign='between'
                borderBottom='2.normal'
              >
                { children }
              </Column>
            } }
            items={ [
              <>
                Label.Prime
                <Label.Prime>
                  Label.Prime
                </Label.Prime>
              </>,<>
                Label.Sub
                <Label.Sub>
                  Label.Sub
                </Label.Sub>
              </>,<>
                Label.Border
                <Label.Border>
                  Label.Border
                </Label.Border>
              </>
            ] }
          />
        </Box>
      </Box>
      <Box ssCardBox>
        <Literal.ThirdTitle borderBottom padding={ 1 }>
          ・Anchor
        </Literal.ThirdTitle>
        <Box padding={ 1 } overflow={ 'auto' }>
          <List
            ListChildCallback={ ( { children } ) => {
              return <Column
                gap={ '1/3' }
                padding={ [ 1,0 ] }
                horizontalAlign='between'
                borderBottom='2.normal'
              >
                { children }
              </Column>
            } }
            items={ [
              <>
                Button.Anchor.Prime
                <Anchor.Prime
                  href=""
                >
                  Anchor.Prime
                </Anchor.Prime>
              </>,<>
                Button.Anchor.Sub
                <Anchor.Sub
                  href=""
                >
                  Anchor.Sub
                </Anchor.Sub>
              </>,<>
                Button.Anchor.Border
                <Anchor.Border
                  href=""
                >
                  Anchor.Border
                </Anchor.Border>
              </>
            ] }
          />
        </Box>
      </Box>
      <Box ssCardBox>
        <Literal.ThirdTitle borderBottom padding={ 1 }>
          ・Sizes
        </Literal.ThirdTitle>
        <Column padding={ 2 } gap={ 2 }>
          <Row.Left>
            <Button.Prime.XS>size="XS"</Button.Prime.XS>
          </Row.Left>
          <Row.Left>
            <Button.Prime.S>size="S"</Button.Prime.S>
          </Row.Left>
          <Row.Left>
            <Button.Prime>size="R"</Button.Prime>
          </Row.Left>
          <Row.Left>
            <Button.Prime.L>size="L"</Button.Prime.L>
          </Row.Left>
        </Column>
      </Box>
    </Flex>
  },
}
const Shadows = {
  index: () => {
    let Cell = ( p: Box.DefaultInput ) => {
      return <Box
        flexCenter
        ssCardBox={ 'plain' }
        textAlign={ 'center' }
        padding={ 2 }
        { ...p }
      />
    }
    return <Column gap={ 4 }>
      <Column>
        <Literal.Paragraph>
          Shadows
        </Literal.Paragraph>
        <Grid gap={ 2 } gridCols={ 4 }>
          <Cell boxShadow='0.min'>0.min</Cell>
          <Cell boxShadow='0.normal'>0.normal</Cell>
          <Cell boxShadow='0.remark'>0.remark</Cell>
          <Cell boxShadow='0.max'>0.max</Cell>

          <Cell boxShadow='1.min'>1.min</Cell>
          <Cell boxShadow='1.normal'>1.normal</Cell>
          <Cell boxShadow='1.remark'>1.remark</Cell>
          <Cell boxShadow='1.max'>1.max</Cell>

          <Cell boxShadow='2.min'>2.min</Cell>
          <Cell boxShadow='2.normal'>2.normal</Cell>
          <Cell boxShadow='2.remark'>2.remark</Cell>
          <Cell boxShadow='2.max'>2.max</Cell>

          <Cell boxShadow='3.min'>3.min</Cell>
          <Cell boxShadow='3.normal'>3.normal</Cell>
          <Cell boxShadow='3.remark'>3.remark</Cell>
          <Cell boxShadow='3.max'>3.max</Cell>

          <Cell boxShadow='4.min'>4.min</Cell>
          <Cell boxShadow='4.normal'>4.normal</Cell>
          <Cell boxShadow='4.remark'>4.remark</Cell>
          <Cell boxShadow='4.max'>4.max</Cell>

          <Cell boxShadow='5.min'>5.min</Cell>
          <Cell boxShadow='5.normal'>5.normal</Cell>
          <Cell boxShadow='5.remark'>5.remark</Cell>
          <Cell boxShadow='5.max'>5.max</Cell>
        </Grid>
      </Column>
      <Column>
        <Literal.Paragraph>
          Inset Shadows
        </Literal.Paragraph>
        <Grid gap={ 2 } gridCols={ 4 }>
          <Cell boxShadow='0.min.inset'>0.min.inset</Cell>
          <Cell boxShadow='0.normal.inset'>0.normal.inset</Cell>
          <Cell boxShadow='0.remark.inset'>0.remark.inset</Cell>
          <Cell boxShadow='0.max.inset'>0.max.inset</Cell>

          <Cell boxShadow='1.min.inset'>1.min.inset</Cell>
          <Cell boxShadow='1.normal.inset'>1.normal.inset</Cell>
          <Cell boxShadow='1.remark.inset'>1.remark.inset</Cell>
          <Cell boxShadow='1.max.inset'>1.max.inset</Cell>

          <Cell boxShadow='2.min.inset'>2.min.inset</Cell>
          <Cell boxShadow='2.normal.inset'>2.normal.inset</Cell>
          <Cell boxShadow='2.remark.inset'>2.remark.inset</Cell>
          <Cell boxShadow='2.max.inset'>2.max.inset</Cell>

          <Cell boxShadow='3.min.inset'>3.min.inset</Cell>
          <Cell boxShadow='3.normal.inset'>3.normal.inset</Cell>
          <Cell boxShadow='3.remark.inset'>3.remark.inset</Cell>
          <Cell boxShadow='3.max.inset'>3.max.inset</Cell>
        </Grid>
      </Column>
    </Column>
  }
}
const Inputs = () => {
  const InputComps = {
    Basic: () => {
      return <Box ssCardBox>
        <Literal.Paragraph borderBottom padding={ 1 }>
          TextInput
        </Literal.Paragraph>
        <Column
          padding={ 1 }
          gap={ 2 }
        >
          <Row.Separate
            marginBottom={ 2 }
          >
            <Literal.Description>
              {
                `<Input.Text
    required
    value={ 'hello React!!' }
  />`
              }
            </Literal.Description>
            <Input.TextField
              tone='cloud'
              name='textfield'
              label='testInputLabel'
              placeholder='testInputPlaceholder'
              isLabelActive
              required
              value={ 'helloReact' }
            />
          </Row.Separate>
          <Input.TextField.Email
            label='Input.TextField.Email'
            name='textfield.email'
            autoComplete="off"
            value={ 'test@gmail.com' }
          />
          <Input.TextField.Number
            label='Input.TextField.Number'
            value={ 324 }
            onUpdateValidValue={ value => {
              console.log( value )
            } }
          />
          <Input.TextField
            label='Input.TextField (number.zeroStart)'
            name='textfield.zeroStart'
            allowZeroStart
            allowDecimals
            value={ '0324' }
          />
          <Box>
            Input.DigitCharacters
            <Input.DigitCharacters
              numericOnly
              value={ '032421' }
              name='digitCharacters'
              digits={ 6 }
              onUpdateValidValue={ value => {
                console.log( value )
              } }
            />
          </Box>
          <Input.TextField.Tel
            label='Input.TextField.Tel'
            name='textfield.tel'
            value={ '080-6995-2229' }
          />
          <Input.TextField.Money.JPY
            value={ '3000' }
            label='Input.TextField.Money.JPY'
            name='textfield.money'
          />
          <Input.TextField.Url
            label='Input.TextField.Url'
            value={ 'http://google.com' }
            name='textfield.url'
          />
          <Box>
            <Input.TextField.Postal
              label='Input.TextField.Postal'
              name='textfield.postal'
              override="force"
              rightIcon={ <Input.RightIcon xcss={ { pointerEvents: 'all' } }>
                <Button.Sub.S
                  borderRadius={ '3.tone.tertiary' }
                  ssSphere={ 2 }
                  onClick={ async () => {
                  } }
                  onMouseOver={ event => {
                    Tips.open( event.currentTarget,'現在地を取得' )
                  } }
                  onMouseLeave={ () => { Tips.abort() } }
                >
                  <FAI.Location />
                </Button.Sub.S>
              </Input.RightIcon> }
            />
            <Box
              id="postalResult"
              padding={ 1 }
              textAlign='left'
            />
          </Box>
          <Input.TextField.Password
            label='Input.TextField.Password'
            name='textfield.password'
            value={ 'onigiriUmai123' }
          />
          <Input.TextField
            label='Input.TextField (multiline)'
            name='textfield.multiline'
            multiline
            autoHeight={ false }
            value={ `text1
text2
text3
text4
text5`}
            minRows={ 5 }
          />
          <Input.TextField
            label='Input.TextField'
            name='textfield.autoHeight'
            isLabelActive
            placeholder='(autoHeight) (multiline)'
            multiline
            autoHeight
            value={ '' }
            xcss={ {
              minHeight: 12 * 6
            } }
            onUpdateValidValue={ ( args ) => {
              console.log( args )
            } }
          />

          <Input.TextField
            label='Input.LeftIndicator'
            leftIndicator={ <Input.LeftIndicator>
              Left Indicator
            </Input.LeftIndicator> }
          />
          <Input.TextField
            label='Input.LeftIcon'
            paddingLeft={ 6 }
            leftIcon={ <Input.LeftIcon ssSquare={ void 0 } xcss={ { pointerEvents: 'all' } }>
              <Button.Sub.S padding={ [ '1/3','1/2' ] }>
                Left Icon
              </Button.Sub.S>
            </Input.LeftIcon> }
          />
          <Input.TextField
            label='Input.RightIcon'
            paddingRight={ 6 }
            rightIcon={ <Input.RightIcon ssSquare={ void 0 } xcss={ { pointerEvents: 'all' } }>
              <Button.Sub.S padding={ [ '1/3','1/2' ] }>
                Right Icon
              </Button.Sub.S>
            </Input.RightIcon> }
          />
          <Input.TextField
            label='Input.RightIndicator'
            rightIndicator={ <Input.RightIndicator>
              Right Indicator
            </Input.RightIndicator> }
          />
        </Column>
      </Box>
    },
    Time: () => ( <>
      <Box ssCardBox>
        <Literal.Paragraph borderBottom padding={ 1 }>
          Time Input
        </Literal.Paragraph>
        <Box
          padding={ 1 }
        >
          <Column gap={ 1.5 }>
            <Input.Time.Year
              name='time.year'
              label='Input.Time.Year'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Input.Time.Month
              name='time.month'
              label='Input.Time.Month'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Input.Time.Week
              name='time.week'
              label='Input.Time.Week'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Input.Time.Date
              name='time.date'
              label='Input.Time.Date'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Input.Time.Locale.JP.WarekiDate
              name='time.jp.warekiDate'
              label='Input.Time.Locale.JP.WarekiDate'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Input.Time.Clock
              name='time.clock'
              label='Input.Time.Clock'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Input.Time.Periods.Month
              name='time.periods.month'
              label='Input.Time.Periods.Month'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Input.Time.Periods.Date
              name='time.periods.date'
              label='Input.Time.Periods.Date'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Input.Time.Periods.Clock
              name='time.periods.clock'
              label='Input.Time.Periods.Clock'
              onUpdateValidValue={ value => {
                console.log( '[onUpdateValidValue]',value )
              } }
            />
            <Box>
              <Input.Select<TimeTypes.Restrict>
                label='Input.TimePicker'
                id="timePicker"
                options={ [
                  { value: 'clock',label: 'clock' },
                  { value: 'date',label: 'date' },
                  { value: 'week',label: 'week' },
                  { value: 'month',label: 'month' },
                  { value: 'year',label: 'year' },
                  { value: 'period.month',label: 'period.month' },
                  { value: 'period.date',label: 'period.date' },
                  { value: 'period.clock',label: 'period.clock' },
                  { value: 'locale.jp.warekiDate',label: 'locale.jp.warekiDate' },
                ] }
                onUpdateValidValue={ value => {
                  Input.TimeSelector.picker.open( {
                    restrict: value,
                    defaultValue: '',
                    onValueUpdate: args => {
                      console.log( args )
                    }
                  } )
                } }
              />
            </Box>
          </Column>
        </Box>
      </Box>
    </> ),
    List: () => ( <>
      <Box ssCardBox>
        <Literal.Paragraph borderBottom padding={ 1 }>
          Radio & Checkbox Input
        </Literal.Paragraph>
        <Box padding={ 1 }>
          <Column>
            <Flex gap={ 2 } flexChilds='auto'>
              <Box>
                Input.Checkbox
                <Input.Checkbox
                  name='checkbox'
                  value={ [ 2,'3' ] }
                  min={ 2 }

                  options={ [
                    { value: '1',label: 'Option1' },
                    { value: '2',label: 'Option2' },
                    { value: '3',label: 'Option3' }
                  ] }
                />
              </Box>
              <Box>
                Input.Radio
                <Input.Radio
                  name='radio'
                  value={ 1 }
                  options={ [
                    { value: 1,label: 'Option1' },
                    { value: 2,label: 'Option2' },
                    { value: 3,label: 'Option3' },
                    { value: 4,label: 'Option4' },
                    { value: 5,label: 'Option5' },
                  ] }
                  onUpdateValidValue={ value => {

                  } }
                />
              </Box>
              <Box>
                CustomIcon
                <Input.Radio
                  name='radio.CustomIcon'
                  value={ [ 1 ] }
                  options={ [
                    { value: 1,label: 'Option1' },
                    { value: 2,label: 'Option2' },
                    { value: 3,label: 'Option3' },
                  ] }
                  onIconRender={ p => {
                    return <Button.Normal.S
                      ssPushable
                      color='cloud'
                      tabIndex={ -1 }
                      ssEffectsOnActive='ripple.cloud'
                      // ssSphere={ 3 }
                      isRounded
                      fontSize='3.paragraph'
                      fontColor={ p.isChecked ? 'theme' : '5.translucent' }
                      onClick={ event => {
                        event.preventDefault()
                        event.stopPropagation()
                        p.toggle()
                      } }
                    >
                      <FAI.Heart /> 3
                    </Button.Normal.S>
                  } }
                />
              </Box>
              <Box>
                <Input.Checkbox.Border
                  name='checkbox.normala'
                  value={ [ 2,'3' ] }
                  flexType='col'
                  iconPosition='right'
                  hideInput
                  options={ [
                    {
                      value: '1',label: <Row.Separate flexSizing={ 0 }>
                        Option1
                        <Box padding={ 2 }>
                          <FAI.Heart />
                        </Box>
                      </Row.Separate>
                    },{
                      value: '2',label: <Row.Separate>
                        Option2
                        <Box padding={ 2 }>
                          <FAI.Heart />
                        </Box>
                      </Row.Separate>
                    },{
                      value: '3',label: <Row.Separate>
                        Option3
                        <Box padding={ 2 }>
                          <FAI.Heart />
                        </Box>
                      </Row.Separate>
                    }
                  ] }
                />
              </Box>
            </Flex>
            <Column>
              <Literal.Paragraph>
                Tones
              </Literal.Paragraph>
              <Column>
                <Box>
                  Plain
                  <Input.Radio
                    name='radio.plain'
                    value={ [ 1 ] }
                    gap={ 1 }
                    options={ [
                      { value: 1,label: 'Option1' },
                      { value: 2,label: 'Option2' },
                      { value: 3,label: 'Option3' }
                    ] }
                  />
                </Box>
                <Box>
                  { "Plain icon={ false }" }
                  <Input.Checkbox
                    name='checkbox.plain'
                    icon={ false }
                    cellStyles={ {
                      padding: [ '1/3','2/3' ],
                      isRounded: true
                    } }
                    cellCheckedStyles={ {
                      fontColor: 'theme'
                    } }
                    value={ [ 2,'3' ] }
                    hideInput
                    options={ [
                      { value: '1',label: 'Option1' },
                      { value: '2',label: 'Option2' },
                      { value: '3',label: 'Option3' }
                    ] }
                  />
                </Box>
                <Box>
                  Simple
                  <Input.Checkbox.Simple
                    name='checkbox.simple'
                    value={ [ 2,'3' ] }
                    hideInput
                    options={ [
                      { value: '1',label: 'Option1' },
                      { value: '2',label: 'Option2' },
                      { value: '3',label: 'Option3' }
                    ] }
                  />
                </Box>
                <Box>
                  Normal
                  <Input.Checkbox.Normal
                    name='checkbox.normal'
                    value={ [ 2,'3' ] }
                    hideInput
                    options={ [
                      { value: '1',label: 'Option1' },
                      { value: '2',label: 'Option2' },
                      { value: '3',label: 'Option3' }
                    ] }
                  />
                </Box>
                <Box>
                  Vivid
                  <Input.Checkbox.Vivid
                    name='checkbox.vivid'
                    value={ [ 2,'3' ] }
                    hideInput
                    options={ [
                      { value: '1',label: 'Option1' },
                      { value: '2',label: 'Option2' },
                      { value: '3',label: 'Option3' }
                    ] }
                  />
                </Box>
                <Box>
                  Cloud
                  <Input.Checkbox.Cloud
                    name='checkbox.cloud'
                    value={ [ 1 ] }
                    options={ [
                      { value: 1,label: 'Option1' },
                      { value: 2,label: 'Option2' },
                      { value: 3,label: 'Option3' }
                    ] }
                  />
                </Box>
                <Box>
                  Border
                  <Input.Radio.Border
                    name='radio.border'
                    value={ [ 1 ] }
                    options={ [
                      { value: 1,label: 'Option1' },
                      { value: 2,label: 'Option2' },
                      { value: 3,label: 'Option3' }
                    ] }
                  />
                </Box>
              </Column>
            </Column>
          </Column>
        </Box>
      </Box>
    </> ),
    Select: () => ( <>
      <Box ssCardBox>
        <Literal.Paragraph borderBottom padding={ 1 }>
          Select,Autocomplete Input
        </Literal.Paragraph>
        <Column
          padding={ 2 }
          gap={ 1.5 }
        >
          <Input.Select
            name='select'
            label='Input.Select'
            isLabelActive
            placeholder='Select'
            required
            value={ 3 }
            options={ [
              { value: 1,label: 'option1' },
              { value: 2,label: 'option2' },
              { value: 3,label: 'option3a' },
              { value: 4,label: 'option4' }
            ] }
          />
          <Input.Search
            name='search'
            label='Input.Search'
            required
            options={ [
              { value: 1,label: '1' },
              { value: { value1: 2,value2: 3 },label: 'Object' },
              { value: 3,label: '3' },
              { value: 101,label: '101' },
              { value: 102,label: '102' }
            ] }
          />
          <Input.Autocomplete
            name='autocomplete'
            label='Input.Autocomplete'
            max={ 2 }
            value={ [
              4
            ] }
            options={ [
              { value: 1,label: 'X-men' },
              { value: 2,label: 'ショーシャンクの空' },
              { value: 3,label: 'スターウォーズ' },
              { value: 4,label: 'ゴッドファーザー: Part II' },
              { value: 5,label: 'ゴッドファーザー: Part III' },
              { value: 6,label: 'インセプション' },
            ] }
          />
          <Input.Autocomplete
            name='autocomplete.dynamic'
            label='Input.Search( Dynamic Search )'
            options={ [
              { value: 1,label: '1' },
              { value: { value1: 2,value2: 3 },label: 'Object' },
              { value: 3,label: '3' },
              { value: 101,label: '101' },
              { value: 102,label: '102' }
            ] }
            onDynamicSearchOptions={ async ( keyword ) => {
              console.log( 'keyword',keyword )
              await $$.pending( 1000 )
              let options: Input.Autocomplete.Option[] = []
              for ( let i = 0; i < 100; i++ ) {
                let index = i + 1
                options.push( {
                  value: index,
                  label: 'option-' + index,
                  searchValue: keyword
                } )
              }
              return options
            } }
          />
        </Column>
      </Box>
    </> ),
    Segmented: () => {
      return <Box ssCardBox>
        <Literal.ThirdTitle borderBottom padding={ 1 }>
          Segmented
        </Literal.ThirdTitle>
        <Column padding={ 2 } gap={ 2 }>
          <Row.Left>
            <Input.Segmented
              name='segmented'
              value={ 1 }
              options={ [
                { value: 0,label: 'Home' },
                { value: 1,label: 'Notice' },
                { value: 2,label: 'Posts' },
                { value: 3,label: 'Settings' }
              ] }
            />
          </Row.Left>
          <Row.Left>
            <Input.Segmented.Cloud
              name='segmented.cloud'
              value={ 1 }
              options={ [
                { value: 0,label: <FAI.AngleLeft /> },
                { value: 1,label: <FAI.AngleRight /> },
                { value: 2,label: <FAI.AngleUp /> },
                { value: 3,label: <FAI.AngleDown /> }
              ] }
            />
          </Row.Left>
          <Row.Left>
            <Input.Segmented.CloudTheme
              name='segmented.cloudTheme'
              value={ 1 }
              options={ [
                { value: 0,label: <FAI.AngleLeft /> },
                { value: 1,label: <FAI.AngleRight /> },
                { value: 2,label: <FAI.AngleUp /> },
                { value: 3,label: <FAI.AngleDown /> }
              ] }
            />
          </Row.Left>
          <Row.Left>
            <Input.Segmented.CloudMono
              name='segmented.cloudMono'
              value={ 1 }
              options={ [
                { value: 0,label: <FAI.AngleLeft /> },
                { value: 1,label: <FAI.AngleRight /> },
                { value: 2,label: <FAI.AngleUp /> },
                { value: 3,label: <FAI.AngleDown /> }
              ] }
            />
          </Row.Left>
          <Row.Left>
            <Input.Segmented.Border
              name='segmented.border'
              value={ 1 }
              options={ [
                { value: 0,label: 'On' },
                { value: 1,label: 'Off' }
              ] }
            />
          </Row.Left>
          <Row.Left>
            <Input.Segmented.BorderVivid
              name='segmented.borderVivid'
              value={ 1 }
              options={ [
                { value: 0,label: 'On' },
                { value: 1,label: 'Off' }
              ] }
            />
          </Row.Left>
          <Row.Left borderBottom>
            <Input.Segmented.Bottomline
              name='segmented.bottomline'
              value={ 1 }
              options={ [
                { value: 0,label: 'Takana' },
                { value: 1,label: 'Mentai' },
                { value: 2,label: 'Mayo' },
                { value: 3,label: 'Gyudon' }
              ] }
            />
          </Row.Left>
        </Column>
      </Box>
    },
    Variables: () => ( <>
      <Box ssCardBox>
        <Literal.Paragraph borderBottom padding={ 1 }>
          Variables
        </Literal.Paragraph>
        <Box padding={ 1 }>
          <Column>
            <Column gap={ 2 }>
              <Box>
                Input.File
                <Input.Filer
                  name='filer'
                  limit={ 3 }
                  onUpdateValidValue={ value => {
                    console.log( value )
                  } }
                />
              </Box>
              <Box>
                Input.Switch
                <Row.Left gap={ 2 }>
                  <Input.Switch
                    name='switch'
                  />
                  <Input.Switch
                    name='switch.applely'
                    isApply
                    color='icicles'
                    value
                  />
                  <Input.Switch
                    name='switch.warn'
                    isApply
                    icon={ <FAI.ExclamationTriangle /> }
                    color='warn'
                    value
                  />
                </Row.Left>
              </Box>
              <Row.Left>
                <Input.Color
                  name='color'
                  onUpdateValidValue={ value => {
                    console.log( value )
                  } }
                  value='#4332c3'
                />
              </Row.Left>
              <Box flexNewLine>
                Input.Slider
                <Input.Slider
                  name='slider'
                  color='battery'
                  value={ 40 }
                  step={ 10 }
                  min={ 0 }
                  max={ 100 }
                  onUpdateValidValue={ value => {
                    console.log( value )
                  } }
                />
              </Box>
            </Column>
          </Column>
        </Box>
      </Box>
    </> ),
  }

  return <>
    <Plate
      size='L'
    >
      <Grid gridCols={ 2 } gap={ 2 }>
        <InputComps.Basic />
        <InputComps.Select />
        <InputComps.Time />
        <InputComps.List />
        <InputComps.Segmented />
        <InputComps.Variables />
      </Grid>
    </Plate>
  </>
}
const Styling = () => {
  const SheetContent = ( type: Sheet.Type,index?: number,opt?: Partial<Sheet.Input> ) => {
    let sheetID = 'testModal' + index
    Sheet.open( type,{
      sheetID: sheetID,
      size: 'S',
      padding: 2,
      ...opt,
      content: <Sheet.Body padding={ 1 }>
        <Box padding={ 2 }>
          Content { index || 0 }
        </Box>

        <Button.Sub
          onClick={ () => {
            SheetContent( type,index ? index + 1 : 1 )
          } }
        >
          Open Nested
        </Button.Sub>
        <Row.Right>
          <Button
            onClick={ () => {
              Sheet.close( sheetID )
            } }
          >
            閉じる
          </Button>
        </Row.Right>
      </Sheet.Body>
    } )
  }

  return <>
    <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        CardBox
      </Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Literal.Description>
          {
            `<Box styles={{ssCardBox:true}}>
  <Box>
    Header
  </Box>
  <Box padding={ 1 }
  overflow='auto'>
    Body
  </Box>
  <Box>
    Footer
  </Box>
</Box>`
          }
        </Literal.Description>
      </Box>
      <Box padding={ 2 }>
        <Box ssCardBox>
          <Literal.SubTitle borderBottom padding={ 1 }>
            Header
          </Literal.SubTitle>
          <Box padding={ 1 } overflow={ 'auto' }>
            Body
          </Box>
          <Box padding={ 1 }>
            Footer
          </Box>
        </Box>
      </Box>
    </Box>
    <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        List
      </Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Literal.Description>
          {
            `<List
  options={ [
    {
      title?: LeftSideReactComponent,
      content: RightSideReactComponent
    }
  ] }
/>`
          }
        </Literal.Description>
      </Box>
      <Box padding={ 2 } overflow={ 'auto' }>
        <List
          ssCardBox
          padding={ 1 }
        >
          <ListItem.Left>
            <Box padding={ '1/2' } backgroundColor='cloud'>
              Left
            </Box>
            <Box padding={ '1/2' } backgroundColor='cloud' flexSizing={ 0 }>
              Right
            </Box>
          </ListItem.Left>
          <ListItem.Right>
            <Box padding={ '1/2' } backgroundColor='cloud' flexSizing={ 0 }>
              Left
            </Box>
            <Box padding={ '1/2' } backgroundColor='cloud'>
              Right
            </Box>
          </ListItem.Right>
          <ListItem.Separate>
            <Box padding={ '1/2' } backgroundColor='cloud'>
              Left
            </Box>
            <Box padding={ '1/2' } backgroundColor='cloud'>
              Right
            </Box>
          </ListItem.Separate>
          <ListItem.Center gap={ '1/4' }>
            <Box padding={ '1/2' } backgroundColor='cloud' flexGrid={ 1 }>
              1
            </Box>
            <Box padding={ '1/2' } backgroundColor='cloud' flexGrid={ 3 }>
              3
            </Box>
            <Box padding={ '1/2' } backgroundColor='cloud' flexGrid={ 2 }>
              2
            </Box>
          </ListItem.Center>
        </List>
      </Box>
    </Box>
    <Box ssCardBox>
      <Literal.SubTitle borderBottom padding={ 1 }>
        Sheet
      </Literal.SubTitle>
      <Box padding={ 1 } overflow={ 'auto' }>
        <Literal.Description>
          {
            `Sheet.open( Type,{
  sheetID: 'sheetID',
  header: ReactElement | React.FC< { modalClose } >,
  body: ReactElement | React.FC< { modalClose } >,
  footer: ReactElement | React.FC< { modalClose } >
} )`
          }
        </Literal.Description>
      </Box>
      <Column padding={ 2 }>
        <Button.Border
          onClick={ ( e ) => {
            Tooltips.open( {
              tipsID: 'testTips',
              parent: e.currentTarget,
              closeAtParentBlur: false,
              closeAtAroundClick: false,
              closeAtEscapeKeyDown: true,
              content: () => {
                return <Sheet.Body padding={ 2 }>
                  <Button
                    onClick={ () => {
                      Sheet.open( 'middleLeft',{
                        sheetID: 'testSheet',
                        closeAtAroundClick: true,
                        content: () => {
                          return <Sheet.Body padding={ 2 }>
                            END
                          </Sheet.Body>
                        }
                      } )
                    } }
                  >
                    nest
                  </Button>
                </Sheet.Body>
              }
            } )
          } }
        >
          Tooltips with nested sheet
        </Button.Border>
        <Box flexCenter>
          <Grid gridCols={ 3 } gap={ 1 }>
            <Button.Border
              onClick={ () => {
                SheetContent( 'topLeft' )
              } }
            >
              Top Left
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'topCenter' )
              } }
            >
              Top Center
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'topRight' )
              } }
            >
              Top Right
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'middleLeft' )
              } }
            >
              Middle Left
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'middleCenter' )
              } }
            >
              Middle Center
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'middleRight' )
              } }
            >
              Middle Right
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'bottomLeft' )
              } }
            >
              Bottom Left
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'bottomCenter' )
              } }
            >
              Bottom Center
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'bottomRight' )
              } }
            >
              Bottom Right
            </Button.Border>

            <Button.Border
              onClick={ () => {
                SheetContent( 'drawer.left' )
              } }
            >
              Drawer Left
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'drawer.bottom',10,{
                  size: 'R'
                } )
              } }
            >
              Drawer Bottom
            </Button.Border>
            <Button.Border
              onClick={ () => {
                SheetContent( 'drawer.right' )
              } }
            >
              Drawer Right
            </Button.Border>

            <Button.Border
              onClick={ event => {
                Tooltips.open( {
                  tipsID: 'test40',
                  parent: event.currentTarget,
                  content: <Box
                    padding={ 1 }
                    border
                    borderRadius={ 2 }
                    backgroundColor={ 'dark' }
                    fontColor={ 'white' }
                  >Content</Box>,
                } )
              } }
            >
              Open Tooltips
            </Button.Border>
          </Grid>
        </Box>
        <Row.Center>
          Image Picker
          <Img
            src={ Logo.Images.defaultIcon( 'user' ) }
            ssSphere={ 6 }
            showExpand
          />
        </Row.Center>
      </Column>
    </Box>
  </>
}
const Tables = {
  index: () => {
    return <>
      <Column gap={ 3 }>
        <Tables.Normal />
        <Tables.Data />
        <Tables.Spread />
      </Column>
    </>
  },
  Normal: () => {
    let PureData: Table.Normal.BodyRow[] = []
    for ( var i = 0; i < 10; i++ ) {
      let Row: Table.Normal.BodyRow = [
        { children: 'head_' + i },
        { children: 'data_' + i },
        { children: 'data_' + i },
      ]
      PureData.push( Row )
    }

    return <>
      <Box fontSize='5.subTitle'>
        Table.Normal
      </Box>
      <Table.Normal
        colLength={ 3 }
        head={ [
          { children: 'head1' },
          { children: 'head2' },
          {
            children: 'head3',
            // styles: {
            //   backgroundColor: 'nega'
            // },
            // xcss: {
            //   opacity: .3
            // }
          },
        ] }
        cellStylesCallback={ ( args ) => {
          let styles: StyleProps.Properties = {}

          if ( args.isHeader ) {
            styles = {
              ...styles,
              backgroundColor: 'cloud'
            }
          }
          return styles
        } }
        rows={ PureData }
        ssCardBox
        onRowClick={ ( rowID ) => {
          console.log( rowID )
        } }
      />
    </>
  },
  Data: () => {
    let [ val_keyword,set_keyword ] = useState( '' )
    let DataData: Table.Data.BodyRow[] = []
    for ( var i = 0; i < 100; i++ ) {
      let random1 = Math.round( Math.random() * 50 + 1 )
      let random2 = Math.round( Math.random() * 50 + 1 )
      let random3 = Math.round( Math.random() * 50 + 1 )

      let Data1 = 'name_' + random1
      let Data2 = 'data_' + random2
      let Data3 = 'data_' + random3
      let Row: Table.Data.BodyRow = [
        {
          type: 'th',
          children: i + ':' + Data1,
          data: Data1,
          orderIndex: i
        },{
          type: 'td',
          children: Data2,
          data: Data2
        },{
          type: 'td',
          children: Data3,
          data: Data3,
          // styles: { backgroundColor: 'greenTea' },
          // xcss: { opacity: .3 }
        }
      ]
      DataData.push( Row )
    }
    DataData[ 1 ].checked = true
    DataData[ 4 ].checked = true
    DataData[ 10 ].checked = true

    let tableID = 'testDataTable'
    return <Column>
      <Flex horizontalAlign='between'>
        <Box fontSize='5.subTitle'>
          Table.Data
        </Box>
        <Flex
          gap={ '1/2' }
          backgroundColor={ 'theme' }
          borderRadius={ '1.tone.primary' }
          overflow={ 'hidden' }
          fontColor={ 'white' }
        >
          <Button.Clear
            color='white'
          >
            SubmitButton
          </Button.Clear>
          <Box
            flexSizing={ 'none' }
            unitWidth={ '1/4' }
            backgroundColor={ 'layer.4.opa.middle' }
            isRounded
            margin={ [ '2/3',0 ] }
          />
          <Button.Clear
            padding={ [ 0,1 ] }
            color='white'
            onClick={ event => {
              Tooltips.open( {
                tipsID: UUID(),
                parent: event.target,
                gravityPoint: 24,
                closeAtAroundClick: true,
                closeAtParentBlur: false,
                content: <Column
                  gap={ 0 }
                  padding={ [ '2/3',0 ] }
                  backgroundColor={ 'layer.1' }
                  borderRadius={ 2 }
                  boxShadow={ '0.normal' }
                  overflow={ 'hidden' }
                >
                  <Button.Clear.S
                    borderRadius={ 0 }
                    borderBottom='1.thin'
                  >すべてを出力</Button.Clear.S>
                  <Button.Clear.S
                    borderRadius={ 0 }
                    borderBottom='1.thin'
                  >
                    このページのみ出力
                  </Button.Clear.S>
                  <Button.Clear.S borderRadius={ 0 }>
                    チェックした行のみ出力
                  </Button.Clear.S>
                </Column>
              } )
            } }
          >
            <FAI.EllipsisV />
          </Button.Clear>
        </Flex>
      </Flex>
      <Row.Separate verticalAlign='bottom'>
        <Row.Left verticalAlign='bottom'>
          <Table.Data.SearchInput
            tableID={ tableID }
            onChange={ ( keyword ) => {
              set_keyword( keyword )
            } }
          />
          <Table.Data.Info tableID={ tableID } />
        </Row.Left>
        <Row.Right verticalAlign='unset'>
          <Table.Data.RowLength
            tableID={ tableID }
            lengthSelect={ [ 30,50,100 ] }
          />
          <Table.Data.Paging tableID={ tableID } />
        </Row.Right>
      </Row.Separate>
      <Table.Data
        tableID={ tableID }
        colLength={ 3 }
        head={ [
          { data: 'head1' },
          { data: 'head2',children: <Box>head2</Box> },
          {
            data: 'head3',
            // styles: { backgroundColor: 'angel' },
            // xcss: { opacity: .3 }
          }
        ] }
        rows={ DataData }
        pageRowLength={ 30 }
        ssCardBox

        cellStyles={ {
          padding: '1/2'
        } }
        filter={ [ true,true ] }
        checker
      />
    </Column>
  },
  Spread: () => {
    return <>
      <Box fontSize='5.subTitle'>
        Table.Spread
      </Box>
      {/* <Table.Spread /> */ }
    </>
  }
}




const Cropping = () => {
  let [ val_ImageUrl1,set_ImageUrl1 ] = useState( '' )
  let [ val_ImageUrl2,set_ImageUrl2 ] = useState( '' )
  let [ val_ImageUrl3,set_ImageUrl3 ] = useState( '' )

  return <>
    <Box>
      <Button
        onClick={ () => {
          Cropper.openDialogNEdit( {
            // use: 'square',
            use: '3:1',
            develops: [
              { size: 'S' },
              { size: 'R' },
              { size: 'L' }
            ],
            onProcessFinished: async ( develops ) => {
              set_ImageUrl1( await ( await Filer.fromFile( develops[ 0 ] ) ).toDataURL() )
              set_ImageUrl2( await ( await Filer.fromFile( develops[ 1 ] ) ).toDataURL() )
              set_ImageUrl3( await ( await Filer.fromFile( develops[ 2 ] ) ).toDataURL() )

              // set_ImageUrl1( await develops[ 0 ].toDataUrl() )
              // set_ImageUrl2( await develops[ 1 ].toDataUrl() )
              // set_ImageUrl3( await develops[ 2 ].toDataUrl() )
            }
          } )
        } }
      >
        <FAI.Image /> イメージを選択
      </Button>

      <Row.Center>
        <Button.Prime
          onClick={ () => {
            Sheet.image( {},[
              'https://png.pngtree.com/background/20210714/original/pngtree-futuristic-shape-abstract-background-chemistry-technology-concept-for-website-picture-image_1250295.jpg',
              'https://png.pngtree.com/background/20210711/original/pngtree-set-of-instagram-stories-sale-banner-background-instagram-template-photo-can-picture-image_1167343.jpg',
              'https://png.pngtree.com/background/20210715/original/pngtree-website-banner-abstract-purple-blue-gradient-background-picture-image_1298439.jpg'
            ] )
          } }
        >
          Open Image Sheet
        </Button.Prime>
      </Row.Center>

      <Flex gap={ 1 } verticalAlign='top'>
        { val_ImageUrl1 && <Img
          isRounded
          src={ val_ImageUrl1 }
          alt=''
          showExpand
          xcss={ {
            maxWidth: 12 * 12
          } }
        /> }
        { val_ImageUrl2 && <Img
          style={ {
            maxWidth: 24 * 12
          } }
          src={ val_ImageUrl2 }
          alt=''
          showExpand
        /> }
        { val_ImageUrl3 && <Img
          style={ {
            maxWidth: 24 * 12
          } }
          src={ val_ImageUrl3 }
          alt=''
          showExpand
        /> }

        <SwipeView
          border
          borderWidth={ 3 }
          margin={ [ 3,'auto' ] }
          // padding={ [ 0,4 ] }
          // margin={ 'auto' }
          xcss={ {
            // maxWidth: 12 * 30
            width: 12 * 10
          } }
          slideIndex={ 1 }
          options={ {
            loop: true,
            onSlideCallback: ( index ) => {
            }
          } }
          slides={ [
            <Box flexCenter padding={ 3 } backgroundColor='nega'>
              test1
            </Box>,
            <Box flexCenter padding={ 3 } backgroundColor='posi'>
              test2
            </Box>,
            <Box flexCenter padding={ 3 } backgroundColor='warn'>
              test3
            </Box>,
            <Box flexCenter padding={ 3 } backgroundColor='theme'>
              test4
            </Box>,
          ] }
        />
      </Flex>
    </Box>
  </>
}

const UserConfig = () => {
  let [ val_theme,set_theme ] = useState<Themecolor>( Config.get().themeColor )
  useEffect( () => {
    $$.scope( () => {
      if ( val_theme === Config.get().themeColor ) return
      Config.update.themeColor( val_theme )
      $$.localStorage.set( 'prf.themeColor',val_theme )
    } )
  },[ val_theme ] )

  return <Row.Left
    borderBottom
    gap={ 2 }
    padding={ [ '1/2',2 ] }
    overflow={ 'auto' }
    xcss={ {
      whiteSpace: 'nowrap'
    } }
  >
    <Row.Left>
      <Literal.Paragraph>Roundness</Literal.Paragraph>
      <Input.Slider
        min={ 0 }
        max={ 5 }
        step={ 1 }
        value={ Config.get().roundness }
        onUpdateValidValue={ value => {
          let nextValue = value

          $$.interval.once( () => {
            $$.localStorage.set( 'prf.roundness',nextValue )
            Config.update.roundness( Number( nextValue ) as Roundness )
          },1000,'updateRoundness' )
        } }
      />
    </Row.Left>
    <Row.Left>
      <Literal.Paragraph>Dark</Literal.Paragraph>
      <Input.Segmented.Cloud
        cellStyles={ {
          flexCenter: true,
          padding: [ '1/4','1/2' ],
        } }
        cellCheckedStyles={ {
          boxShadow: '2.normal',
          backgroundColor: 'theme',
          fontColor: 'white'
        } }
        ssCardBox
        backgroundColor={ 'layer.1' }
        gap={ '1/6' }
        fontColor={ '4.thin' }
        options={ [
          { value: 'light',label: 'Light' },
          { value: 'dim',label: 'Dim' },
          { value: 'dark',label: 'Dark' },
          { value: 'auto',label: 'Auto' },
        ] }
        value={ Config.get().darkMode }
        onUpdateValidValue={ value => {
          let nextValue = value
          $$.localStorage.set( 'prf.darkMode',nextValue )
          Config.update.darkMode( nextValue )
        } }
      />
    </Row.Left>
    <Row.Left>
      <Literal.Paragraph>Color</Literal.Paragraph>
      <Row.Left gap={ '1/6' }>
        { Object.entries( ThemeColors ).map( ( [ key,themeColor ] ) => {
          let isSelected = key === val_theme

          return <Button.Clear
            key={ key }
            color='cloud'
            padding={ '1/2' }
            textAlign='center'
            opacity={ isSelected ? 'max' : 'low' }
            isActive={ isSelected }
            isActiveStyles={ {
              boxShadow: '2.remark',
              backgroundColor: key as Themecolor,
              fontColor: 'white'
            } }
            onClick={ () => {
              set_theme( key as Themecolor )
            } }
          >
            <Column gap={ '1/2' } textAlign='center'>
              <Box
                position={ 'relative' }
                margin={ 'auto' }
                backgroundColor={ key as Themecolor }
                ssSquare={ 2 }
                borderRadius={ '1.tone.primary' }
              >
                <Box
                  ssAbsoluteCovered
                  border
                  opacity={ isSelected ? 'max' : 'low' }
                  borderWidth={ 2 }
                  transition={ 'short' }
                  borderRadius={ '1.tone.primary' }
                  xcss={ {
                    transform: 'scale(1.25)',
                  } }
                />
              </Box>
              <Literal.Mini
                display='none'
                ssTextEllipsis
                xcss={ {
                  lineHeight: 1.25
                } }
              >
                { isSelected && <FAI.Check /> } { key.toCapital() }
              </Literal.Mini>
            </Column>
          </Button.Clear>
        } ) }
      </Row.Left>
    </Row.Left>
  </Row.Left>
}

let DesignBook = () => {
  let [ val_tabIndex,set_tabIndex ] = useState( Number( $$.url.search.get().ti ) || 0 )
  useEffect( () => {
    $$.url.search.set( { 'ti': String( val_tabIndex ) } )
  },[ val_tabIndex ] )

  // let [ val_refresh,set_refresh ] = useState( UUID() )

  // let DataData: Table.Data.BodyRow[] = []
  // for ( var i = 0; i < 100; i++ ) {
  //   let random1 = $$.randomNumber( 0,10000 )
  //   let random2 = $$.randomNumber( 0,10000 )

  //   let Data1 = 'name_' + random1
  //   let Data2 = 'data_' + random2
  //   let Row: Table.Data.BodyRow = [
  //     {
  //       type: 'th',
  //       // children: i + ':' + Data1,
  //       children: [
  //         'i=' + i,
  //         'data=' + random1.toLocaleString(),
  //       ].join( '/' ),
  //       data: Data1,
  //       // orderIndex: random1.toLocaleString()
  //       orderIndex: random1
  //     },
  //     { type: 'td',children: Data2,data: Data2 },
  //   ]
  //   DataData.push( Row )
  // }
  // DataData[ 1 ].checked = true
  // DataData[ 4 ].checked = true

  // return <Column>
  //   <Literal>Count: { DataData.length.toLocaleString() }</Literal>
  //   <Table.Data
  //     tableID={ 'aaaa' }
  //     colLength={ 2 }
  //     pageRowLength={ 100 }
  //     head={ [
  //       { data: 'head1' },
  //       { data: 'head2',children: <Box>head2</Box> },
  //     ] }
  //     rows={ DataData }
  //     ssCardBox

  //     orderPriority='DESC'
  //     cellStyles={ {
  //       padding: '1/2'
  //     } }
  //   // filter={ [ true,true ] }
  //   // checker
  //   />
  // </Column>

  return <>
    <UserConfig />
    <Column
      gap={ 0 }
      // minHeight={ 'contentHeight' }
      // backgroundColor={ 'layer.1' }
      // backgroundColor='gray'
      // position={ 'relative' }
      ssZIndex={ 1 }
    >
      <TabBar
        borderBottom
        position={ 'sticky' }
        backgroundColor={ 'layer.1' }
        boxShadow='2.normal'
        top={ 'topBase' }
        tabIndex={ val_tabIndex }
        tabs={ [
          'Basic',
          'Shadows',
          'Buttons',
          'Inputs',
          'Styling',
          'Effection',
          'Tables',
          'Croppie',
          'PlayGround',
          'Logo',
        ] }
        onTabChange={ ( index ) => {
          localStorage.setItem( 'designTabHeader',String( index ) )
          set_tabIndex( index )
        } }
        UnderBreakPointStyles={ {
          position: 'static',
          top: 0
        } }
      />
      <Box
        flexSizing={ 0 }
        ssZIndex={ 1 }
      >
        <PageViewController
          viewIndex={ val_tabIndex }
          views={ [
            <Basic.index />,
            <Shadows.index />,
            <Buttons.index />,
            <Inputs />,
            <Styling />,
            <Effections.index />,
            <Tables.index />,
            <Cropping />,
            '',
            <Logos.index />,
          ] }
          wrapper={ ( View ) => {
            return <Effect.FadeIn
              key={ val_tabIndex }
              animationTime={ 200 }
            >
              <Plate>
                <Flex
                  gap={ 2 }
                  padding={ 2 }
                  flexWrap
                  flexChilds={ 'auto' }
                >{ View }</Flex>
              </Plate>
            </Effect.FadeIn>
          } }
        />
      </Box>
    </Column>
  </>
}
export { DesignBook,DesignBook as default }