amotify 0.2.153 → 0.2.154

package/demo/esbuild/designBook.tsx

@@ -24,7 +24,7 @@ import {
   ListItem,
   Accordion,
   Row,
-  Txt,
+  Literal,
   PageViewController,
   SwipeView,
   TabBar,
@@ -60,7 +60,7 @@ const Basic = {
   Fonts: () => {
     return <Card padding={ 1 }>
       <Column>
-        <Txt.SubTitle>Fonts</Txt.SubTitle>
+        <Literal.SubTitle>Fonts</Literal.SubTitle>
         <Box overflow={ 'auto' }>
           <Column>
             <Row.Left
@@ -116,28 +116,28 @@ const Basic = {
             </Column>
             <Column ssCardBox padding={ 1.5 }>
               <Box>[size:Paragraph]</Box>
-              <Txt.Paragraph>
-                <Txt.Description>
+              <Literal.Paragraph>
+                <Literal.Description>
                   { `This article discusses performance best practices for fonts.
 There are a variety of ways in which web fonts impact performance`}
-                </Txt.Description>
-              </Txt.Paragraph>
+                </Literal.Description>
+              </Literal.Paragraph>
             </Column>
             <Column ssCardBox padding={ 1.5 }>
               <Box>[size:Normal]</Box>
-              <Txt>
+              <Literal>
                 効率的で持続可能な財政への転換を図り、この財政構造を各般の構造改革とともに推進することで、民間需要主導の持続的経済成長の実現を目指します。
                 少子・高齢化、国際化など経済社会の構造変化に対応できる21世紀のあるべき税制をきずきます。
                 財政投融資は、行財政改革の趣旨を踏まえ、民間ではできない分野・事業などに重点化を行い、真に政策的に必要な資金需要には的確に対応します。
                 金融庁と協力し、金融のセーフティネットを整備し、金融危機に素早く対応するなど、金融システムの安定の確保を目指します。
                 国際的な協力等に積極的に取り組むことにより、国際通貨システムの安定・国際貿易の秩序ある発展を目指します。
-              </Txt>
+              </Literal>
             </Column>
             <Column ssCardBox padding={ 1.5 }>
               <Box>[size:Mini]</Box>
-              <Txt.Supplement>
+              <Literal.Supplement>
                 Copyright © Ministry of Finance Japan. All Rights Reserved.
-              </Txt.Supplement>
+              </Literal.Supplement>
             </Column>
           </Column>
         </Box>
@@ -146,9 +146,9 @@ There are a variety of ways in which web fonts impact performance`}
   },
   Box: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Box
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box padding={ 1 } overflow={ 'auto' }>
         <Table.Normal
           ssCardBox={ false }
@@ -160,27 +160,27 @@ There are a variety of ways in which web fonts impact performance`}
           rows={ [
             [
               {
-                children: <Txt.Description>
+                children: <Literal.Description>
                   { `<Box>
 helloWorld!!
 </Box>`}
-                </Txt.Description>
+                </Literal.Description>
               },{
                 children: <Box> helloWorld!! </Box>
               }
             ],[
               {
-                children: <Txt.Description>
+                children: <Literal.Description>
                   { `<Box
 children={ 'helloWorld!!' }
 />`}
-                </Txt.Description>
+                </Literal.Description>
               },{
                 children: <Box children={ 'helloWorld!!' } />
               },
             ],[
               {
-                children: <Txt.Description>
+                children: <Literal.Description>
                   { `<Box
 fontColor={ '4.thin' }
 padding={ 1 }
@@ -191,7 +191,7 @@ border={ 'normal' }
 children={ 'styleBox' }
 />
 `}
-                </Txt.Description>
+                </Literal.Description>
               },{
                 children: <Box
                   fontColor={ '4.thin' }
@@ -211,9 +211,9 @@ children={ 'styleBox' }
   },
   Flex: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Flex
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box padding={ 1 } overflow={ 'auto' }>
         <Table.Normal
           ssCardBox={ false }
@@ -225,7 +225,7 @@ children={ 'styleBox' }
           rows={ [
             [
               {
-                children: <Txt.Description>
+                children: <Literal.Description>
                   {
                     `<Flex flexType='row' gap={ 1 }>
 <Box children={ 'FlexBox1' } />
@@ -234,7 +234,7 @@ children={ 'styleBox' }
 <Box flexSizing={ 'auto' } children={ 'FlexBox3' } />
 </Flex>`
                   }
-                </Txt.Description>
+                </Literal.Description>
               },{
                 children: <Flex
                   gap={ 1 }
@@ -249,7 +249,7 @@ children={ 'styleBox' }
               },
             ],[
               {
-                children: <Txt.Description textAlign='left'>
+                children: <Literal.Description textAlign='left'>
                   { `<Flex
 flexType='col'
 flexChilds={ 'auto' }
@@ -258,7 +258,7 @@ flexChilds={ 'auto' }
 <Box />
 ...
 </Flex>`}
-                </Txt.Description>
+                </Literal.Description>
               },{
                 children: <>
                   <Flex gap={ 1 } flexCenter>
@@ -282,7 +282,7 @@ flexChilds={ 'auto' }
               },
             ],[
               {
-                children: <Txt.Description>
+                children: <Literal.Description>
                   {
                     `<Flex gap={ 1 }>
 <Box flexGrid={ 2 } ... />
@@ -290,7 +290,7 @@ flexChilds={ 'auto' }
 <Box flexGrid={ 4 } ... />
 </Flex>`
                   }
-                </Txt.Description>
+                </Literal.Description>
               },{
                 children: <Flex gap={ 1 } fontColor='white'>
                   <Card.Plain flexCenter padding={ 1 } backgroundColor='posi' flexGrid={ 2 }>Box1</Card.Plain>
@@ -306,9 +306,9 @@ flexChilds={ 'auto' }
   },
   Grid: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Grid
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box style={ { padding: 1,overflow: 'auto' } }>
         <Table.Normal
           ssCardBox={ false }
@@ -321,7 +321,7 @@ flexChilds={ 'auto' }
           rows={ [
             [
               {
-                children: <Txt.Description>
+                children: <Literal.Description>
                   {
                     `<Grid gridCols={ 3 } gap={ 1 }>
 <Box children={ 'GridBox1' } />
@@ -332,7 +332,7 @@ flexChilds={ 'auto' }
 <Box children={ 'GridBox6' } />
 </Grid>`
                   }
-                </Txt.Description>
+                </Literal.Description>
               },{
                 children: <Grid gridCols={ 3 } gap={ 1 }>
                   <Card.Plain padding={ 1 } backgroundColor='layer.1'>GridBox1</Card.Plain>
@@ -351,9 +351,9 @@ flexChilds={ 'auto' }
   },
   Others: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Others
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box padding={ 1 } overflow={ 'auto' }>
         <Table.Normal
           ssCardBox={ false }
@@ -366,7 +366,7 @@ flexChilds={ 'auto' }
             [
               {
                 children: <>
-                  <Txt.Description>
+                  <Literal.Description>
                     {
                       `
 <Button.Label
@@ -384,7 +384,7 @@ children={
 }
 />`
                     }
-                  </Txt.Description>
+                  </Literal.Description>
                 </>
               },{
                 children: <Column>
@@ -404,7 +404,7 @@ children={
               }
             ],[
               {
-                children: <Txt.Description>
+                children: <Literal.Description>
                   {
                     `
 <Img
@@ -415,7 +415,7 @@ alt='noImage'
 />
                         `
                   }
-                </Txt.Description>
+                </Literal.Description>
               },{
                 children: <Row.Center>
                   <Column
@@ -434,12 +434,12 @@ alt='noImage'
                         } }
                       />
                     </Box>
-                    <Txt
+                    <Literal
                       padding={ 1 }
                       borderTop
                     >
                       Image
-                    </Txt>
+                    </Literal>
                   </Column>
                 </Row.Center>
               }
@@ -462,9 +462,9 @@ const Logos = {
   },
   Mingoo: () => {
     return <Card>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Mingoo
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box padding={ 1 } overflow={ 'auto' }>
         <Row.Center
           gap={ 2 }
@@ -482,7 +482,7 @@ const Logos = {
   },
   Google: () => {
     return <Card>
-      <Txt.SubTitle borderBottom padding={ 1 }>Google</Txt.SubTitle>
+      <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' />
@@ -496,7 +496,7 @@ const Logos = {
   },
   Facebook: () => {
     return <Card>
-      <Txt.SubTitle borderBottom padding={ 1 }>Facebook</Txt.SubTitle>
+      <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' />
@@ -510,7 +510,7 @@ const Logos = {
   },
   Line: () => {
     return <Card>
-      <Txt.SubTitle borderBottom padding={ 1 }>LINE</Txt.SubTitle>
+      <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' />
@@ -524,7 +524,7 @@ const Logos = {
   },
   Twitter: () => {
     return <Card>
-      <Txt.SubTitle borderBottom padding={ 1 }>Twitter</Txt.SubTitle>
+      <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' />
@@ -548,17 +548,17 @@ const Effections = {
   },
   Ripple: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Ripple
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Column padding={ 2 }>
-        <Txt.Description>
+        <Literal.Description>
           {
             `<Element
   ssEffectsOnActive={ 'ripple.( cloud | theme | nega | posi | warn )' }
 />`
           }
-        </Txt.Description>
+        </Literal.Description>
         <Row.Center>
           <Box
             ssCardBox
@@ -582,17 +582,17 @@ const Effections = {
   },
   Variables: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Effects
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Column padding={ 2 }>
-        <Txt.Description>
+        <Literal.Description>
           {
             `<Button
     ssEffectsOnActive={ 'shrink' }
 />`
           }
-        </Txt.Description>
+        </Literal.Description>
         <Row.Left>
           <Button
             onClick={ () => {
@@ -641,9 +641,9 @@ const Effections = {
   },
   Tooltips: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Tooltips
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Column padding={ 2 }>
         <Button
           onContextMenu={ event => {
@@ -717,9 +717,9 @@ const Effections = {
   },
   Snackbar: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Snackbars
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Row.Center padding={ 2 }>
         <Button
           onClick={ () => {
@@ -765,11 +765,11 @@ const Effections = {
                     src={ Logo.Images.defaultIcon( 'user' ) }
                     ssSphere={ 4 }
                   />
-                  <Txt.Description>
+                  <Literal.Description>
                     { `Some Text
 Some Text
 Some Text`}
-                  </Txt.Description>
+                  </Literal.Description>
                 </Row.Left>
                 <Row.Separate>
                   <Button.Sub.S
@@ -805,9 +805,9 @@ const Buttons = {
   },
   Tone: () => {
     return <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Tone
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box padding={ 1 } overflow={ 'auto' }>
         <Grid gridCols={ 2 } gap={ 2 }>
           <Box>
@@ -1017,9 +1017,9 @@ const Buttons = {
   Types: () => {
     return <Flex gap={ 2 } flexChilds='auto'>
       <Box ssCardBox>
-        <Txt.ThirdTitle borderBottom padding={ 1 }>
+        <Literal.ThirdTitle borderBottom padding={ 1 }>
           ・Button
-        </Txt.ThirdTitle>
+        </Literal.ThirdTitle>
         <Box padding={ 1 } overflow={ 'auto' }>
           <List
             items={ [
@@ -1041,9 +1041,9 @@ const Buttons = {
         </Box>
       </Box>
       <Box ssCardBox>
-        <Txt.ThirdTitle borderBottom padding={ 1 }>
+        <Literal.ThirdTitle borderBottom padding={ 1 }>
           ・Label
-        </Txt.ThirdTitle>
+        </Literal.ThirdTitle>
         <Box padding={ 1 } overflow={ 'auto' }>
           <List
             ListChildCallback={ ( { children } ) => {
@@ -1078,9 +1078,9 @@ const Buttons = {
         </Box>
       </Box>
       <Box ssCardBox>
-        <Txt.ThirdTitle borderBottom padding={ 1 }>
+        <Literal.ThirdTitle borderBottom padding={ 1 }>
           ・Anchor
-        </Txt.ThirdTitle>
+        </Literal.ThirdTitle>
         <Box padding={ 1 } overflow={ 'auto' }>
           <List
             ListChildCallback={ ( { children } ) => {
@@ -1121,9 +1121,9 @@ const Buttons = {
         </Box>
       </Box>
       <Box ssCardBox>
-        <Txt.ThirdTitle borderBottom padding={ 1 }>
+        <Literal.ThirdTitle borderBottom padding={ 1 }>
           ・Sizes
-        </Txt.ThirdTitle>
+        </Literal.ThirdTitle>
         <Column padding={ 2 } gap={ 2 }>
           <Row.Left>
             <Button.Prime.XS>size="XS"</Button.Prime.XS>
@@ -1155,9 +1155,9 @@ const Shadows = {
     }
     return <Column gap={ 4 }>
       <Column>
-        <Txt.Paragraph>
+        <Literal.Paragraph>
           Shadows
-        </Txt.Paragraph>
+        </Literal.Paragraph>
         <Grid gap={ 2 } gridCols={ 4 }>
           <Cell boxShadow='0.min'>0.min</Cell>
           <Cell boxShadow='0.normal'>0.normal</Cell>
@@ -1191,9 +1191,9 @@ const Shadows = {
         </Grid>
       </Column>
       <Column>
-        <Txt.Paragraph>
+        <Literal.Paragraph>
           Inset Shadows
-        </Txt.Paragraph>
+        </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>
@@ -1223,9 +1223,9 @@ const Inputs = () => {
   const InputComps = {
     Basic: () => {
       return <Box ssCardBox>
-        <Txt.Paragraph borderBottom padding={ 1 }>
+        <Literal.Paragraph borderBottom padding={ 1 }>
           TextInput
-        </Txt.Paragraph>
+        </Literal.Paragraph>
         <Column
           padding={ 1 }
           gap={ 2 }
@@ -1233,14 +1233,14 @@ const Inputs = () => {
           <Row.Separate
             marginBottom={ 2 }
           >
-            <Txt.Description>
+            <Literal.Description>
               {
                 `<Input.Text
     required
     value={ 'hello React!!' }
   />`
               }
-            </Txt.Description>
+            </Literal.Description>
             <Input.TextField
               tone='cloud'
               name='textfield'
@@ -1392,9 +1392,9 @@ text5`}
     },
     Time: () => ( <>
       <Box ssCardBox>
-        <Txt.Paragraph borderBottom padding={ 1 }>
+        <Literal.Paragraph borderBottom padding={ 1 }>
           Time Input
-        </Txt.Paragraph>
+        </Literal.Paragraph>
         <Box
           padding={ 1 }
         >
@@ -1463,9 +1463,9 @@ text5`}
     </> ),
     List: () => ( <>
       <Box ssCardBox>
-        <Txt.Paragraph borderBottom padding={ 1 }>
+        <Literal.Paragraph borderBottom padding={ 1 }>
           Radio & Checkbox Input
-        </Txt.Paragraph>
+        </Literal.Paragraph>
         <Box padding={ 1 }>
           <Column>
             <Flex gap={ 2 } flexChilds='auto'>
@@ -1566,9 +1566,9 @@ text5`}
               </Box>
             </Flex>
             <Column>
-              <Txt.Paragraph>
+              <Literal.Paragraph>
                 Tones
-              </Txt.Paragraph>
+              </Literal.Paragraph>
               <Column>
                 <Box>
                   Plain
@@ -1675,9 +1675,9 @@ text5`}
     </> ),
     Select: () => ( <>
       <Box ssCardBox>
-        <Txt.Paragraph borderBottom padding={ 1 }>
+        <Literal.Paragraph borderBottom padding={ 1 }>
           Select,Autocomplete Input
-        </Txt.Paragraph>
+        </Literal.Paragraph>
         <Column
           padding={ 2 }
           gap={ 1.5 }
@@ -1754,9 +1754,9 @@ text5`}
     </> ),
     Segmented: () => {
       return <Box ssCardBox>
-        <Txt.ThirdTitle borderBottom padding={ 1 }>
+        <Literal.ThirdTitle borderBottom padding={ 1 }>
           Segmented
-        </Txt.ThirdTitle>
+        </Literal.ThirdTitle>
         <Column padding={ 2 } gap={ 2 }>
           <Row.Left>
             <Input.Segmented
@@ -1843,9 +1843,9 @@ text5`}
     },
     Variables: () => ( <>
       <Box ssCardBox>
-        <Txt.Paragraph borderBottom padding={ 1 }>
+        <Literal.Paragraph borderBottom padding={ 1 }>
           Variables
-        </Txt.Paragraph>
+        </Literal.Paragraph>
         <Box padding={ 1 }>
           <Column>
             <Column gap={ 2 }>
@@ -1961,11 +1961,11 @@ const Styling = () => {
 
   return <>
     <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         CardBox
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box padding={ 1 } overflow={ 'auto' }>
-        <Txt.Description>
+        <Literal.Description>
           {
             `<Box styles={{ssCardBox:true}}>
   <Box>
@@ -1980,13 +1980,13 @@ const Styling = () => {
   </Box>
 </Box>`
           }
-        </Txt.Description>
+        </Literal.Description>
       </Box>
       <Box padding={ 2 }>
         <Box ssCardBox>
-          <Txt.SubTitle borderBottom padding={ 1 }>
+          <Literal.SubTitle borderBottom padding={ 1 }>
             Header
-          </Txt.SubTitle>
+          </Literal.SubTitle>
           <Box padding={ 1 } overflow={ 'auto' }>
             Body
           </Box>
@@ -1997,11 +1997,11 @@ const Styling = () => {
       </Box>
     </Box>
     <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         List
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box padding={ 1 } overflow={ 'auto' }>
-        <Txt.Description>
+        <Literal.Description>
           {
             `<List
   options={ [
@@ -2012,7 +2012,7 @@ const Styling = () => {
   ] }
 />`
           }
-        </Txt.Description>
+        </Literal.Description>
       </Box>
       <Box padding={ 2 } overflow={ 'auto' }>
         <List
@@ -2058,11 +2058,11 @@ const Styling = () => {
       </Box>
     </Box>
     <Box ssCardBox>
-      <Txt.SubTitle borderBottom padding={ 1 }>
+      <Literal.SubTitle borderBottom padding={ 1 }>
         Sheet
-      </Txt.SubTitle>
+      </Literal.SubTitle>
       <Box padding={ 1 } overflow={ 'auto' }>
-        <Txt.Description>
+        <Literal.Description>
           {
             `Sheet.open( {
   sheetID: 'sheetID',
@@ -2071,7 +2071,7 @@ const Styling = () => {
   footer: ReactElement | React.FC< { modalClose } >
 } )`
           }
-        </Txt.Description>
+        </Literal.Description>
       </Box>
       <Column padding={ 2 }>
         <Button.Border
@@ -2625,7 +2625,7 @@ const UserConfig = () => {
     } }
   >
     <Row.Left>
-      <Txt.Paragraph>Roundness</Txt.Paragraph>
+      <Literal.Paragraph>Roundness</Literal.Paragraph>
       <Input.Slider
         min={ 0 }
         max={ 5 }
@@ -2642,7 +2642,7 @@ const UserConfig = () => {
       />
     </Row.Left>
     <Row.Left>
-      <Txt.Paragraph>Dark</Txt.Paragraph>
+      <Literal.Paragraph>Dark</Literal.Paragraph>
       <Input.Segmented.Cloud
         cellStyles={ {
           flexCenter: true,
@@ -2672,7 +2672,7 @@ const UserConfig = () => {
       />
     </Row.Left>
     <Row.Left>
-      <Txt.Paragraph>Color</Txt.Paragraph>
+      <Literal.Paragraph>Color</Literal.Paragraph>
       <Row.Left gap={ '1/6' }>
         { Object.entries( ThemeColors ).map( ( [ key,themeColor ] ) => {
           let isSelected = key === val_theme
@@ -2713,7 +2713,7 @@ const UserConfig = () => {
                   } }
                 />
               </Box>
-              <Txt.Supplement
+              <Literal.Supplement
                 display='none'
                 ssTextEllipsis
                 freeCSS={ {
@@ -2721,7 +2721,7 @@ const UserConfig = () => {
                 } }
               >
                 { isSelected && <FAI.Check /> } { key.toCapital() }
-              </Txt.Supplement>
+              </Literal.Supplement>
             </Column>
           </Button.Clear>
         } ) }