amotify 0.2.233 → 0.2.235

package/demo/next/src/app/(router)/designbook/page.tsx

@@ -1,2891 +0,0 @@
-"use client"
-
-// import {
-//   useEffect,
-//   useState
-// } from 'react'
-
-// import $$ from 'jmini'
-// import '../../../../../../dist/index'
-// import {
-//   Column,
-//   Literal,
-//   Button,
-//   Box,
-//   Input,
-//   RootViewController
-// } from '../../../../../../dist/index'
-
-export { }
-import $$,{ UUID,Filer } from 'jmini'
-import React,{
-  useState,
-  useEffect
-} from 'react'
-
-import {
-  DarkMode,
-  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,
-  StyleTags,
-  Roundness,
-  Card
-} from '../../../../../../dist/index'
-
-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.Supplement>
-                Copyright © Ministry of Finance Japan. All Rights Reserved.
-              </Literal.Supplement>
-            </Column>
-            <Column ssCardBox padding={ 1.5 }>
-              <Box>[size:Micro]</Box>
-              <Literal.Supplement fontSize='0.xs'>
-                Copyright © Ministry of Finance Japan. All Rights Reserved.
-              </Literal.Supplement>
-            </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'
-                        freeCSS={ {
-                          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,
-              freeCSS: {
-                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 freeCSS={ { 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={ '' }
-            freeCSS={ {
-              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 } freeCSS={ { pointerEvents: 'all' } }>
-              <Button.Sub.S padding={ [ '1/3','1/2' ] }>
-                LeftTitle
-              </Button.Sub.S>
-            </Input.LeftIcon> }
-          />
-          <Input.TextField
-            label='Input.RightIcon'
-            paddingRight={ 6 }
-            rightIcon={ <Input.RightIcon ssSquare={ void 0 } freeCSS={ { pointerEvents: 'all' } }>
-              <Button.Sub.S padding={ [ '1/3','1/2' ] }>
-                RightTitle
-              </Button.Sub.S>
-            </Input.RightIcon> }
-          />
-          <Input.TextField
-            label='Input.LeftIndicator'
-            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.Clock
-              label='Input.Time.Clock'
-              name='time.clock'
-            />
-            <Input.Time.Date
-              label='Input.Time.Date'
-              name='time.date'
-            />
-            <Input.Time.Week
-              label='Input.Time.Week'
-              name='time.week'
-            />
-            <Input.Time.Month
-              label='Input.Time.Month'
-              name='time.month'
-            />
-            <Input.Time.Year
-              label='Input.Time.Year'
-              name='time.year'
-            />
-            <Input.Time.Periods.Date
-              label='Input.Time.Periods.Date'
-              name='time.periods.date'
-            />
-            <Input.Time.Periods.Month
-              label='Input.Time.Periods.Month'
-              name='time.periods.month'
-            />
-            <Input.Time.DateWareki
-              label='Input.Time.DateWareki'
-              name='time.dateWareki'
-            />
-            <Box>
-              <Input.Select
-                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: 'dates',label: 'dates' },
-                  { value: 'months',label: 'months' },
-                  { value: 'dateWareki',label: 'dateWareki' },
-                ] }
-                onUpdateValidValue={ value => {
-                  Input.Time.fn.picker.launch( {
-                    parent: '#timePicker',
-                    restrict: value as any,
-                    defaultValue: '',
-                    onValueUpdate: ( value ) => {
-                      console.log( value )
-                    }
-                  } )
-                } }
-              />
-            </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' },
-                  ] }
-                  CustomIcon={ 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' }
-            ] }
-            DynamicOptionsOnSearch={ 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'
-    >
-      <Column>
-        <InputComps.Basic />
-        <InputComps.Select />
-        <InputComps.Time />
-        <InputComps.List />
-        <InputComps.Segmented />
-        <InputComps.Variables />
-      </Column>
-    </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.Drag />
-        <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'
-            // },
-            // freeCSS: {
-            //   opacity: .3
-            // }
-          },
-        ] }
-        cellStylesCallback={ ( args ) => {
-          let styles: StyleTags.Properties = {}
-
-          if ( args.isHeader ) {
-            styles = {
-              ...styles,
-              backgroundColor: 'cloud'
-            }
-          }
-          return styles
-        } }
-        rows={ PureData }
-        ssCardBox
-        onRowClick={ ( rowID ) => {
-          console.log( rowID )
-        } }
-      />
-    </>
-  },
-  Drag: () => {
-    let DragData: Table.Drag.BodyRow[] = []
-    for ( var i = 0; i < 4; i++ ) {
-      let Row: Table.Drag.BodyRow = [
-        { children: 'head_' + i },
-        { children: 'data_' + i },
-        {
-          children: 'data_' + i,
-          // styles: { backgroundColor: 'nega' },
-          // freeCSS: { opacity: .3 }
-        },
-      ]
-      Row.rowID = 'rowID-' + i
-      DragData.push( Row )
-    }
-
-    return <>
-      <Box fontSize='5.subTitle'>
-        Table.Drag
-      </Box>
-      <Table.Drag
-        colLength={ 3 }
-        head={ [
-          { children: 'head1' },
-          { children: 'head2' },
-          {
-            children: 'head3',
-            // styles: { backgroundColor: 'nega' },
-            // freeCSS: { opacity: .3 }
-          },
-        ] }
-
-        cellStyles={ {
-          // backgroundColor: 'posi',
-          // freeCSS: { opacity: .3 }
-        } }
-        cellStylesCallback={ () => {
-          return {
-            // backgroundColor: 'warn',
-            // freeCSS: { opacity: .3 }
-          }
-        } }
-
-        rows={ DragData }
-        ssCardBox
-        onOrderChanged={ ( args ) => {
-          console.log( args )
-        } }
-      />
-    </>
-  },
-  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' },
-          // freeCSS: { 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' },
-            // freeCSS: { 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
-          freeCSS={ {
-            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' }
-          freeCSS={ {
-            // 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' }
-    freeCSS={ {
-      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' }
-                  freeCSS={ {
-                    transform: 'scale(1.25)',
-                  } }
-                />
-              </Box>
-              <Literal.Supplement
-                display='none'
-                ssTextEllipsis
-                freeCSS={ {
-                  lineHeight: 1.25
-                } }
-              >
-                { isSelected && <FAI.Check /> } { key.toCapital() }
-              </Literal.Supplement>
-            </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' }
-      freeCSS={ {
-        zIndex: 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 }
-        position={ 'relative' }
-        freeCSS={ {
-          zIndex: 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>
-  </>
-}
-
-import dynamic from 'next/dynamic'
-export default dynamic( () => Promise.resolve( DesignBook ),{ ssr: false } )